Como añadir campos personalizados en WordPress

En WordPress podemos crear fácilmente plantillas para nuestro tema, tal y como vimos en nuestra serie de artículos sobre como crear un tema de WordPress desde cero sin saber PHP. Sin embargo, a veces puede resultar útil añadir elementos HTML ajenos al contenido principal de la página pero que, sin embargo, también van a tener contenido adicional que queremos que cualquier usuario pueda modificar. En pocas palabras, hoy vamos a ver como añadir campos personalizados en WordPress.

Crear una nueva plantilla

Lo primero que vamos a hacer es crear una nueva plantilla para nuestro tema. En mi caso voy a usar el último tema oficial de WordPress (versión 4.8), que se llama Twenty Seventeen.

Los archivos del tema están en la ruta wp-content/themes/twentyseventeen de nuestra instalación de WordPress.

Este tema tiene una única plantilla para las páginas, es el archivo page.php. Para crear nuestra nueva plantilla haremos una copia de dicho archivo y la modificaremos. A la copia del archivo le pondremos de nombre, por ejemplo, page-front.php. Y después abriremos este archivo con nuestro editor HTML favorito.

Al inicio del archivo tenemos un comentario de PHP como el siguiente;

/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site may use a
 * different template.
 *
 * @link https://codex.wordpress.org/Template_Hierarchy
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

Deberemos de reemplazar ese comentario por el siguiente:

/* Template Name: Página de inicio */

Podemos cambiar «Página de inicio» por otro texto, es simplemente el nombre de nuestra nueva plantilla.

En el caso de un tema diferente el procedimiento es básicamente el mismo.

Y finalmente, voy a añadir una lista de elementos, como la siguiente, justo antes de que se cierre el elemento </main>.

 <h2>Servicios</h2>
 <ul id="services">
   <li>
     <h3>Lorem ipsum</h3>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
   </li>
   <li>
     <h3>Voluptatum, ab</h3>
     <p>Nam aliquam dolore atque quis laborum, dolor, architecto...</p>
   </li>
   <li>
     <h3>Soluta, recusandae</h3>
     <p>Facilis ab autem eos ullam commodi vitae fuga esse cupiditate...</p>
   </li>
   <li>
   <h3>At, minus?</h3>
     <p>Vitae obcaecati, aut velit, quae, veritatis pariatur vel vero...</p>
   </li>
 </ul>

Ahora podemos crear una nueva página, y en la sección «Atributos de página» que aparece en el panel derecho, en plantilla elegiremos nuestra nueva plantilla.

Para que la lista de servicios que hemos añadido a nuestra plantilla se muestre correctamente, deberemos de añadir algo de código CSS. Esto lo podemos hacer de varias formas, como por ejemplo, usando el plugin Custom CSS Pro.

#services {
 list-style: none;
 overflow: auto;
}

#services li {
 width: 25%;
 float: left;
 padding: 0 10px;
}

El resultado de nuestra nueva página con nuestra nueva plantilla debería de ser algo similar a lo siguiente:

Cualquier usuario de nuestro WordPress con los permisos adecuados puede cambiar el texto principal de esta página, pero la nueva sección de «Servicios» que hemos añadido no es fácilmente modificable. Solo alguien capaz de modificar la plantilla podría modificar dichos textos.

Para solucionar este problema podemos crear campos personalizados en WordPress.

Campos personalizados en WordPress con Advanced Custom Fields

Advanced Custom Fields es un famoso plugin para WordPress que nos va a permitir hacer este trabajo.

Una vez instalado, vamos a crear un nuevo conjunto de campos personalizados.

Al nuevo grupo le podemos dar de nombre «servicios». Y después en dicho grupo vamos a crear 8 campos personalizados. Cuatro campos serán para los títulos (h3), y los otros cuatro para los párrafos (p). Para cada campo nuevo, podemos indicar varias opciones. La más importante es el nombre del campo. Para los títulos voy a usar service1name, service2name, service3name y service4name, para los párrafos usaré service1desc, service2desc, service3desc y service4desc. Esos serán los nombres «internos» de estos nuevos campos. Para que los usuarios entiendan que es cada campo, deberemos de indicar también una label del campo (si, label del campo; parece que en la versión que estoy usando del plugin la traducción al español no es muy buena). Además, también voy a indicar que los campos son obligatorios. Así me aseguro de que no están vacíos.

El trabajo de crear los 8 campos puede resultar un poco tedioso, pero luego nuestros usuarios lo agradecerán.

El plugin también nos permite indicar donde queremos mostrar este grupo de campos personalizados;

Así que le indicamos que queremos mostrar estos campos solo para post type de tipo page, pulsamos el botón «and» y en page template seleccionamos la plantilla que hemos creado. De esta forma los nuevos campos solo estarán disponibles en las páginas que usen nuestra nueva plantilla.

Una vez lo tengáis todo, no os olvidéis de pulsar el botón «Publicar» que hay arriba del todo.

Modificar la nueva plantilla

Si ahora editamos la página que hemos creado, veremos que aparecen los nuevos campos personalizados.

Pero aunque indiquemos estos textos, nuestra plantilla aún no está preparada para mostrar dichos valores. Para ello deberemos de volver a abrir el archivo page-front.php en nuestro editor HTML favorito, y cambiar la sección que habíamos añadido para que sea tal que así:

 <h2>Servicios</h2>
 <ul id="services">
   <li>
     <h3><?php the_field( 'service1name' ); ?></h3>
     <p><?php the_field( 'service1desc' ); ?></p>
   </li>
   <li>
     <h3><?php the_field( 'service2name' ); ?></h3>
     <p><?php the_field( 'service2desc' ); ?></p>
   </li>
   <li>
    <h3><?php the_field( 'service3name' ); ?></h3>
     <p><?php the_field( 'service3desc' ); ?></p>
   </li>
   <li>
     <h3><?php the_field( 'service4name' ); ?></h3>
     <p><?php the_field( 'service4desc' ); ?></p>
   </li>
 </ul>

De esta forma, con el método the_field, es como vinculamos nuestra plantilla y los campos personalizados en WordPress.

Y con esto, ya hemos terminado. El resultado es el siguiente:

Con la ventaja que esta vez un usuario normal si puede modificar desde el editor de WordPress los textos que hemos añadido, sin riesgo a que rompa nada.

En este ejemplo hemos añadido simplemente una serie de campos a lo que podría ser nuestra página de inicio. Pero esta técnica es especialmente útil cuando tenemos varias páginas con una serie de datos en común a modo de «fichas»; como por ejemplo, si queremos tener una ficha por cada persona de nuestra organización con su información bien organizada y estructurada, o bien si queremos tener una serie de fichas de productos con sus características bien organizadas, etc.

Y bueno, nada más, espero que todo esto de los campos personalizados en WordPress os haya resultado de interés. Si así ha sido, podéis echarle un vistazo a todos los artículos que hemos hecho sobre WordPress y tal vez encontréis algún otro artículo que os resulte interesante.