¿Qué son los Custom Fields en WordPress?

Todas las páginas en WordPress tienen sus propios metadatos, los cuales incluyen información importante como el título, la descripción… Campos personalizados, también denominados Custom Fields.

El propio WordPress, utiliza campos específicos para agregar estos datos de forma automática, sin embargo, también podemos agregar nuestros propios metadatos al configurar los campos personalizados en WordPress.

Para conseguirlo, podemos hacerlo mediante un plugin o, como os venímos acostumbrando la mayoría de las veces, de forma manual añadiendo nosotros mismos el código necesario.

¿Qué son los campos personalizados de WordPress?

Comencemos hablando sobre los que son los campos personalizados para así evitar perdernos.

Un campo, es un elemento mediante el cual se puede agregar información. Estos pueden ser de diferentes tipos y formas, como por ejemplo, una lista de casillas de verificación, fechas, números, texto, range slider etc.

Sea cual sea el caso, la información que agregemos utilizando estos campos podrán tener un sin fin de propósitos, aunque, la mayoría de las veces, la información será utilizada como metadatos.

Algunos tipos de metadatos incluyen etiquetas, meta descripciones, categorías etc, aunque algo que tienen todos en común es que WordPress ya proporciona esos campos para que podamos agregar ese contenido.

Pongamos un ejemplo, e identifiquemos algunos metadatos que el propio WordPress ya incluye.

Analicemos un poco los posts de WordPress: podríamos encontrar los metadatos título, descripción, imagen destacada… Se consideran metadados porque nos permiten agregar información, no os olvideis de este punto, es muy importante.

En algunos casos, nos será necesario añadir nuevos metadatos los cuales no incluye WordPress por defecto.

Y ahí es donde entran los campos personalizados, pues nos van a permitir ingresar esa información que necesitemos para que podamos asociarla a nuestro contenido.

Por último, nos gustaría recalcar que los campos personalizados o Custom Fields y los  Custom Post Type no son lo mismo.

Los Custom Post Type, por un lado, corresponden a un tipo de contenido el cual posee un formato especial, mientras que, los Custom Fields son campos los cuales nos permitirán añadir nuevos metadatos.

Normalmente, se suelen asociar estos Custom Fields que hemos creado a los Custom Post Type, aunque también se podrán usar por separado, sin depender de ningún tipo de contenido.

Agregar Custom Fields mediante un plugin

Existen un sin fin de plugins que nos permitirán añadir campos personalizados a nuestro WordPress. Sin embargo, en esta ocasión, utilizaremos el plugin llamado Advanced Custom Fields, el cual podremos descargar gratuitamente desde el propio repositorio de WordPress.

Una vez lo tengamos descargado, instalado y activado, haremos click sobre campos personalizados, y, a continuación, añadiremos un nuevo grupo haciendo click sobre añadir nuevo.

A continuación, veremos una ventana como la siguiente:

Antes de analizar las opciones que se nos presentan, os pondremos un poco en contexto: en el artículo anterior, donde os hablábamos sobre que son los custom post type de WordPress, usábamos como ejemplo que en nuestro sitio queríamos añadir series de todo tipo pero que, no usaríamos las entradas porque nos interesa añadir información extra como el número de temporadas y la puntuación que tiene la serie en cuestión, y, debido a estas características, no podríamos considerar las series como entradas.

Por ello, decidimos crear un tipo de post personalizado, pero hasta ahora no habíamos empezado a añadir esas dos nuevas características que lo diferenciarían de las entradas, pues, como ya sabréis, necesitamos de los custom fields de WordPress para añadir esos dos metadatos.

Ahora si. Fijándonos en la imagen anterior, podremos observar que tenemos varias opciones.

Si las observamos de arriba hacia abajo, lo primero que podemos encontrar es el nombre de nuestro grupo de campos personalizados, el cual será obligatorio. Aunque en la imagen no aparezca, nosotros decidimos nombrarlo como «Series».

Lo siguiente que podemos observar son los campos personalizados que hemos añadido a ese grupo, en esta ocasión, recordad que solo necesitábamos dos campos: la puntuación y el número de temporadas, por lo que, no necesitamos añadir mas campos.

Para añadir un campo, tan solo deberéis hacer click sobre la opción de añadir campo y os saldrá una ventana similar a la siguiente:

Veamos que hace cada una de las opciones de forma un poco detallada:

• Etiqueta del campo: Es el nombre que aparecerá visualmente y que nos permitirá distinguirlo del resto de los campos personalizados.
• Nombre del campo: Debe de ser una única palabra, podéis utilizar guiones y guiones bajos. Es como el slug del campo, y lo necesitaremos a la hora de realizar una consulta, pues, nos referiremos a el mediante este nombre.
• Tipo de campo: Que tipo de información es la que contendrá este campo. Puede ser de cualquier tipo: texto, números, emails, enlaces, casillas de verificación etc.
• Instrucciones: Aparecen debajo de la etiqueta del campo y permiten dar una breve descripción a nuestro campo.
• Requerido: Indica si el campo es obligatorio o no. En caso de serlo, deberá estar marcado para poder guardar/publicar el contenido.
• Valor por defecto: Permite añadir un valor en el caso de que no se le de uno.
• Marcador de texto: Texto que aparecerá dentro del campo si no se ha introducido ninún valor (placeholder).
• Anteponer: Colocando el nombre de otro campo, aparecerá antes que el.
• Anexar: Colocando el nombre de otro campo, aparecerá después que el.
• Valor mínimo: Permite añadir un valor mínimo al campo.
• Valor máximo: Permite añadir un valor mínimo al campo.
• Lógica condicional: Permite añadir una o varias condiciones al campo.
• Atributos del contenedor: Nos permitirá añadir una clase o un identificador al contenedor, ademas de la posibilidad de darle un ancho en porcentaje.

Explicada esta parte, retomamos la anterior:

El siguiente apartado que encontramos es el de Ubicación, en el, podremos indicar donde se van a mostrar nuestros campos personalizados, para este artículo, como dijimos anteriormente, seguiremos el ejemplo de las series, por lo que, haremos que aparezcan únicamente en ese apartado.

En la última opción, la de ajustes, observamos una serie de opciones que nos pueden servir para modificar nuestro grupo, en esta ocasión, los dejaremos como están y haremos click sobre publicar para guardar nuestro grupo y campos personalizados.

Si todo ha salido bien, al acceder al apartado de Series y añadir o editar una, podremos ver lo siguiente:

Y ahí están, el grupo series con los campos personalizados anteriormente creados: temporadas y puntuación.

Muy bien, ya tenemos nuestros campos personalizados creados y funcionando, aunque solo serán visibles desde nuetro panel de administración. Si queremos que nuestros usuarios puedan ver también estos datos, deberemos de modificar el fichero de nuestro tema en el cual queremos que aparezca la información.

Para ello, utilizaremos la función «get_post_meta», la cual sigue la siguiente estructura:

get_post_meta( $post_id, $key = '', $single = false );

Veamos que hace cada uno de sus parámetros:

• $post_id: ID del post actual.
• $key: El meta key que queremos recibir. Si no se especifica uno, obtendrá todos los que hayan asociados al post que nos encontremos (según la id).
• $single: Si es true, devolverá el primer valor del meta key que especifiquemos. Si en el parámetro anterior hemos especificado uno en concreto, y no todos, el valor debe de ser true.

El código que hemos utilizado para añadir los campos es el siguiente:

# Vamos a mostrar HTML, así que recuerda cerrar la sintaxis de PHP si quieres escribir una etiqueta <p>
?>
<p>Temporadas: <?php echo get_post_meta( get_the_ID(), 'temporadas', true); ?></p>
<p>Puntuación: <?php echo get_post_meta( get_the_ID(), 'puntuacion', true); ?></p>

Dependiendo del tema que estemos utilizando, deberemos de colocar el código en una parte u otra, aunque también influirá la parte en la que queramos colocar la información recibida de nuestros campos.

Debido a que debemos de editar los ficheros de nuestro tema, recomendamos que creeis un tema hijo y editéis los ficheros de este, así, en el caso de actualizar el tema padre, los datos no se perderán.

Agregar Custom Fields manualmente

A continuación, crearemos nuestros propios custom fields sin necesidad de utilizar ningún plugin.

Para ello, modificaremos el archivo functions.php de nuestro tema activo, por lo que, es totalmente recomendable por no decir obligatorio realizar una copia de seguridad del mismo antes de comenzar a modificarlo.

Si ya tienes lista tu copia de seguridad, comencemos a crear los custom fileds.

En primer lugar, crearemos los campos personalizados que vamos a crear. Para ello haremos uso de la función «register_meta» que el propio WordPress nos ofrece y el cual sigue las siguiente estructura:

register_meta( $object_type, $meta_key,  $args, $deprecated = null )

Veamos que es cada uno de los parámetros:

• $object_type: Tipo de objeto del meta box. Por ejemplo, si queremos que los campos aparezcan en todas las entradas, podemos dejarlo como post, y si queremos un custom post, deberemos de escribir el custom post que queremos.
• $meta_key: Meta key que queremos registrar.
• $args: Datos utilizados para describir el meta key cuando se registra.

A continuación, y utilizando la función anterior, crearemos un meta dato. El código de nuestro meta dato es el siguiente:

add_action('init', 'series_register_fields');

function series_register_fields()
{
  register_meta('series', 'series_temporadas', 'sanitize_text_field');
  register_meta('series', 'series_puntuacion', 'sanitize_text_field');
}

Bien, ya tenemos nuestros campos creados, ahora es turno de crear un grupo e introducir estos metas en este grupo. Para ello, utilizaremos la función «add_meta_box» la cual sigue la siguiente estructura:

add_meta_box( $id, $title, $callback, $screen = null, $context = ‘advanced’, $priority = ‘default’,  $callback_args = null )

Veamos que hace cada uno de sus parámetros:

• $id: Permite tanto letras como números y será utilizado para identificar de formá única la sección meta box.
• $title: Permite indicar el nombre que tendrá nuestro meta box.
• $callback: Función que se ejecutará y que mostrará el código HTML que irá dentro de nuestro meta box.
• $screen: Permite indicar sobre que tipo de contenido se va a mostrar nuestro meta box. Los valores posibles son: post, page o custom-posts (el nombre del custom post).
• $context: Indica la posición en la que aparecerá nuestro meta box. Puede tomar los valores: normal o advanced, en el caso de que queramos que aparezca en la misma columna del editor o side si queremos que aparezca en el lateral.
• $priority: Sirve para indicar la altura donde aparecerá el meta box, aunque dependerá en medida de los plugins que tengamos. Su valor puede ser: core, low, high o default.
• $callback_args: Sirve para pasar parámetros los cuales serán utilizados dentro de la función que utilicemos en el parámetro callback.

El código que hemos utilizado es el siguiente:

add_action('add_meta_boxes', 'series_meta_box');

function series_meta_box()
{
  add_meta_box(
    'series-meta-box',
    __(
      'Informacion adicional - Series:',
      'series_textdomain'
    ),
    'series_meta_box_callback',
    'series',
    'normal',
    'high',
    array(
      'arg' => 'value'
    )
  );
}

function series_meta_box_callback($post)
{
  echo 'Hola mundo';
}

Si todo ha salido bien, ya tendremos nuestra caja disponible, pero, como podrás observar, carece de opciones para introducir datos y solo muestra un mensaje que dice «Hola mundo».

Para añadir los cambios y que se puedan almacenar estos cambios en la base de datos, deberemos introducir el siguiente código en la función series_meta_box_callback( $posts ):

function series_meta_box_callback($post){ ?>
  <label for="series_temporadas" class="label">Número de temporadas:</label>
  <input type="number" name="series_temporadas" id="series_temporadas">
  <label for="series_puntuacion" class="label">Puntuación:</label>
  <select name="series_puntuacion" id="series_puntuacion">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
<?php
}

Y ahora, para poder almacenar los datos, haremos uso de la función «update_post_meta()»:

update_post_meta( $post_id, $meta_key, $meta_value, $prev_value = '' )

Veamos que hace cada uno de sus parámetros:

• $post_id: La ID del post actual. Normalmente, el se almacena en la variable $post_id.
• $meta_key: Nombre del campo que suele coincidir con el nombre del campo HTML que queremos almacenar.
• $meta_value: Valor del metadata que vamos a guardar.
• $prev_value: Valor anterior a comprobar antes de actualizar.

add_action( 'save_post', 'series_update_meta' );

function series_update_meta( $post_id ) {
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
    return;
  }

  if ( get_post_type($post_id) == "series" ) {
    update_post_meta( $post_id, 'temporadas', $_POST['series_temporadas'] );
    update_post_meta( $post_id, 'puntuacion', $_POST['series_puntuacion'] );
  }
}

Con el código anterior, cada vez que guardemos nuestro post type se comprobará que efectivamente sea nuestro post type series y que no se haya guardado mediante autoguardado, si no mediante el botón. Por último, se introducirán los datos en la base de datos.

Si lo que quereis es añadir un campo personalizado en una entrada, el proceso es muchísimo más sencillo.

Para crear campos personalizados en entradas, nos dirigiremos a la sección de entradas, una vez allí, haremos click sobre opciones de pantalla y activaremos la opción de campos personalizados.

Una vez activado, nos saldrá un cuadro como el siguiente:

Para añadirlos, deberemos de hacer click en el desplegable, debajo de nombre y por último hacer click en añadir un campo personalizado.

Tened en cuenta que, el campo ya debe de existir y que con esta opción solo podremos añadirlo en las entradas.

Para recuperar los valores, lo haremos utilizando la función «get_post_meta», como hicimos en el caso de utilizar un plugin.

Los campos personalizados de WordPress permiten añadir cualquier tipo de metadato a nuestras páginas y posts, y tan solo hay muy pocas cosas que no podamos hacer con los campos personalizados.

Utilizar un plugin no es una mala opción, aunque si lo hacemos, dependeremos siempre del plugin para mantener nuestros custom posts. Añadirlos manualmente es sin duda la mejor opción, siempre y cuando se haga en un tema hijo, aunque puede ser un poco complicado.

¿Y tu?, ¿sabes algo más sobre los custom posts? Si es así, dejanoslo en los comentarios. Recordad que también podéis exponer vuestras dudas.