En este nuevo tutorial realizaremos una explicación y casos de uso de los custom fields (campos personalizados) del gestor de contenidos Wordpress. Está destinado a aquellas personas que todavía no están familiarizadas con ello o simplemente se inician en el desarrollo para Wordpress.

Autor:

David Costales es un diseñador al que le gusta la creatividad, WordPress, y las nuevas tendencias en lo referente a diseño gráfico. Puedes seguir sus updates en Twitter.

¿Qué son los custom fields de WordPress?

Los custom fields son campos personalizados que nos permiten añadir información extra en nuestros artículos y páginas de WordPress. A través de un nombre y un valor podemos mostrar cualquier cosa que deseemos, imágenes, texto, código… ofreciendonos un mundo de infinitas posibilidades.

Cómo definir un custom field

Lo primero que debemos hacer es identificarnos en nuestro panel de administración y crear una nueva entrada -o página-. Veremos una caja llamada “Campos personalizados” (Custom fields si nuestro WordPress está en inglés) en la parte inferior de nuestra pantalla. Rápidamente podemos diferenciar dos campos esenciales, que deberemos rellenar debidamente, Nombre y Valor:

Custom Fields WordPress

A través de estos dos únicos campos podremos mostrar información o compararla con otra existente. Como ya os hemos comentado, las posibilidades que nos ofrece esta funcionalidad son casi infinitas. Vamos a ver un par de ejemplos para comprender rápidamente el funcionamiento de este tipo de campos.

Mostrando imágenes en nuestros artículos

Antes de que WordPress incluyera la posibilidad de añadir thumbnails a las entradas los custom fields eran casi la única forma de mostrar miniaturas que encabezasen las entradas, sin recurrir a plugins. Ahora os explicaré cómo.

Para este primer ejemplo necesitaremos una imagen de 200x200px, que previamente habremos subido a nuestro servidor, y modificar el archivo index.php para añadir la funcionalidad deseada. Para ello definiremos la etiqueta Nombre como “thumb” y la de Valor con la URL de nuestra imagen.

Custom Fields WordPress

Le damos a “Añadir un campo personalizado”, el formulario se enviará y nos automáticamente creara nuestro primer custom field. Ahora le toca el turno a nuestro index.php, en el que tendremos que añadir un par de líneas de código PHP para que cargue la imagen que hemos guardado previamente.

Una vez que hayamos creado nuestro primer custom field quedará almacenado y podremos acceder a el a través de un nuevo menú desplegable que aparecerá en la caja de “Campos personalizados”.

Custom Fields WordPress

Tendremos que identificar el comienzo del loop de WordPress ya que inmediatamente después tendremos que pegar el código que os muestro a continuación. Para aquellos que no lo sepan, el loop comienza justo después del primer condicional while.

<?php
while (have_posts()) : the_post();
$thumb = get_post_meta($post->ID, "thumb", $single = true);
?>

Lo primero que hemos hecho es asignarle el valor del custom field “thumb” a la variable que lleva el mismo nombre, $thumb, para después poder interactuar con ella. En el siguiente paso comprobaremos que esta variable no está vacía con el fin de mostrar la imagen deseada, en caso contrario mostraremos una imagen por defecto.

<?php if($thumb !== '') { ?>
    <img class="left" src="" width="200" height="200" alt="" />
<?php } else { ?>
    <img class="left" src="/images/default_thumb" width="200" height="200" alt="" />
<?php } ?>

Podéis comprobar que le hemos asignado la clase “left” a nuestra imagen, con el único propósito de que le haga un float: left; y se muestre inscrustada a la izquierda del contenido de nuestro artículo. El código CSS sería algo así:

.left {
    float: left;
}

Mostrando la música que estamos escuchando

Ahora vamos a crear un custom field que nos permita mostrar la canción que estamos escuchando mientras escribíamos el artículo. Este pequeño campo podremos utilizarlo tanto en el index.php como en el single.php, a gusto del consumidor.

Primero localizaremos el formulario de “Campos personalizados” en la opción de “Editar entrada” dentro de nuestro panel de Administración. Definiremos el campo Nombre como “song” y el Valor con el nombre de la canción. Enviamos los datos a través del botón de “Añadir un campo personalizado” y guardamos la entrada.

Custom Fields WordPress

Ahora que nuestro nuevo custom field está creado es hora de mostrarlo en nuestra plantilla. Para ello tendremos que editar nuestro single.php y colocar el siguiente código donde deseemos mostrar la información.

$customField = get_post_custom_values("song");
if (isset($customField[0])) {
echo "Escuchaba: ".$customField[0];

Este mismo procedimiento podéis utilizarlo, por ejemplo, para mostrar publicidad de AdSense. Tan solo tendréis que definir los valores del campo personalizado atendiendo al código que nos otorga Google para mostrar su publicidad.

Conclusión

Hemos visto cómo gracias a los custom fields podemos vitaminar nuestras plantillas con el fin de mostrar otro tipo de contenido. Queda en la imaginación de cada uno el buscar otras formas de sacarle provecho a esta funcionalidad, ya que la capacidad de la misma es enorme.

¡Nos vemos en el próximo tutorial WordPress!

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (6 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Siempre han sido una forma sencilla de crear “tipos de publicaciones” de manera sencilla, quizás un poco justos si se quieren cosas más grandes.

Genial! me sirvió de mucho :) Pero tengo una pregunta… Es posible ocultar el campo personalizado thumb ($thumb) pero que la imagen se siga viendo? Por que a mi me sale la imagen donde le indico, pero también me sale el campo personalizado con la url de la imagen… y queda antiestético…

Se puede ocultar pero que se siga viendo la imagen?

Muchas gracias por el tutorial, está genial :)

Hola buenas…

Tengo un problema y es que en mi theme de wordpress, cuando voy a editar una entrada no me aparece el cuadro de campos personalizados!
Alguien sabe como incorporarlo?

Necessito ayuda!

Deca Durabolin

Mensaje muy informativo. Gracias web.ontuts.com por tomarse el tiempo para compartir su opinión con nosotros.

Deca Durabolin

Acabo de libro marcó su blog web.ontuts.com en Digg y Technorati. Me gusta leer tus comentarios.

Hola, muy bien articulo, bien explicado, yo estoy haciendo algo similar en mi blog, quisiera saber como hago para publicar la Ulrl de un sitio en un custom field, que se deberia ver la url del sitio en el post, no se si me explico bien.

gracias,