WordPress Campos Personalizados 101: Consejos, Trucos y Hacks

¿Quieres sacar el máximo partido a los campos personalizados de tu sitio web en WordPress?

Los campos personalizados son una característica muy útil de WordPress que te permite añadir datos e información extra a tus entradas y páginas de WordPress. Muchos plugins y temas populares de WordPress utilizan campos personalizados para almacenar datos importantes.

En este artículo, le mostraremos cómo utilizar los campos personalizados de WordPress con algunos consejos, trucos y hacks.

Como se trata de un artículo largo, hemos añadido un índice para facilitar la navegación. Utilice los enlaces rápidos para ir a la sección que desee leer:

¿Qué son los campos personalizados de WordPress?

Los campos personalizados de WordPress son metadatos que se utilizan para añadir información adicional a la entrada o página que está editando.

Por defecto, cuando escribe una nueva entrada, página o cualquier otro tipo de contenido, WordPress guarda ese contenido en dos partes diferentes.

La primera parte es el cuerpo de tu contenido que añades usando el editor de contenido de WordPress.

La segunda parte es la información acerca de ese contenido. Por ejemplo, el título, el autor, la fecha, la hora, etc. Esta información se denomina metadatos.

Un sitio web WordPress añade automáticamente todos los metadatos obligatorios / requeridos / necesarios a cada entrada o página que cree. También puede crear y almacenar sus propios metadatos utilizando campos personalizados.

Por defecto, la opción de campos personalizados está oculta en la pantalla de edición de entradas. Para verla, debe hacer clic en el menú de tres puntos situado en la esquina superior derecha de la pantalla y seleccionar “Preferencias” en el menú.

Se abrirá una ventana emergente en la que deberá cambiar a la pestaña “Paneles” y, a continuación, activar la opción “Campos personalizados”.

Después, basta con hacer clic en el botón “Activar y recargar” para recargar el editor de entradas.

El editor de entradas se recargará y podrá ver el panel Campos personalizados debajo del editor de contenido.

Los campos personalizados se pueden utilizar para añadir cualquier información relacionada con la entrada, página u otro tipo de contenido. Esta meta información puede mostrarse en tu tema.

Sin embargo, para ello, tendrá que editar los archivos de su tema de WordPress.

Dicho esto, veamos cómo añadir y utilizar campos personalizados en WordPress.

Añadir campos personalizados en WordPress

En primer lugar, debe abrir una entrada o página en el editor de bloques para poder añadir campos personalizados. A continuación, debe ir a la caja meta Campos personalizados.

A continuación, debe proporcionar un Nombre para su campo personalizado y luego introducir su Valor. Haga clic en el botón “Añadir campo personalizado” para guardarlo.

El campo se almacenará y se mostrará en la caja meta Campos personalizados de la siguiente manera:

Puede editar este campo personalizado siempre que lo desee y, a continuación, sólo tiene que hacer clic en el botón “Actualizar” para guardar los cambios. También puedes borrarlo si ya no quieres utilizarlo.

Ahora, debe guardar su entrada para almacenar los ajustes de sus campos personalizados.

Mostrar campos personalizados en temas de WordPress

Para mostrar su campo personalizado en su sitio web, tendrá que editar los archivos de su tema de WordPress y fragmentos de código.

No recomendamos editar directamente los archivos del tema porque el más mínimo error puede romper tu sitio web. Una forma más fácil de hacerlo es utilizando WPCode.

Es el mejor plugin de fragmentos de código para WordPress que te permite añadir código personalizado y gestionar fragmentos desde tu escritorio de WordPress.

Si no lo ha hecho antes, le recomendamos que lea nuestra guía sobre cómo copiar y pegar código en WordPress.

En primer lugar, tendrás que instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía para principiantes sobre cómo instalar un plugin de WordPress.

Una vez activado, deberá ir a Fragmentos de código ” + Añadir fragmento desde el escritorio de WordPress y seleccionar la opción “Añadir su código personalizado (nuevo fragmento)”.

Ahora tienes que copiar este código para añadirlo a los archivos de tu tema:

<?php echo get_post_meta($post->ID, 'key', true); ?>

No olvide sustituir la clave por el nombre de su campo personalizado.

A continuación, debe introducir el código en el área ‘Vista previa del código’ y cambiar el Tipo de código a ‘Fragmento de PHP’.

Por ejemplo, hemos utilizado este código en nuestro tema de demostración:

<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>

Desde aquí, puede desplazarse hasta la sección Inserción.

Aquí, puedes seleccionar dónde se ejecutará el código. Por defecto, WPCode Auto Insertará el código y lo ejecutará en cualquier parte de tu sitio web.

Sin embargo, puede cambiar esto y seleccionar dónde desea que aparezca el campo personalizado.

Por ejemplo, elegiremos la pestaña “Específico de la página” y seleccionaremos la opción “Insertar antes de la entrada”. De este modo, el campo personalizado aparecerá al principio de la entrada del blog.

Ahora puede guardar los cambios y visitar la entrada donde ha añadido el campo personalizado para verlo en acción.

También puede utilizar este campo personalizado en el resto de entradas de su blog de WordPress.

También puede personalizar fácilmente el campo para diferentes entradas del blog. Basta con crear una nueva entrada o editar una ya existente.

A continuación, vaya a la caja meta Campos personalizados, seleccione su campo personalizado en el menú desplegable e introduzca su Valor.

Una vez que haya terminado, sólo tiene que hacer clic en el botón “Añadir campo personalizado” para guardar los cambios y, a continuación, publicar o actualizar sus entradas.

Diagnosticar problemas: No se puede encontrar el campo personalizado en el menú desplegable de la pantalla de edición de entradas.

Por defecto, WordPress solo carga 30 campos personalizados en el menú desplegable de la pantalla de edición de entradas.

Si utiliza temas y plugins de WordPress que ya utilizan campos personalizados, es posible que éstos aparezcan en primer lugar en el menú desplegable y no podrá ver el campo personalizado que acaba de crear.

Para corregir este problema, deberá añadir el siguiente código al archivo functions. php de su tema o utilizar WPCode (recomendado):

add_filter( 'postmeta_form_limit', 'meta_limit_increase' );
function meta_limit_increase( $limit ) {
    return 50;
}

El código anterior cambiará ese límite a 50. Si todavía no puede ver su campo personalizado, puede intentar aumentar ese límite aún más.

Creación de una interfaz de usuario para campos personalizados mediante campos personalizados avanzados

Como puede ver, una vez que añada un campo personalizado, tendrá que seleccionarlo e introducir su valor cada vez que escriba una entrada.

Si tiene muchos campos personalizados de WordPress o varios autores escribiendo en su sitio web, entonces esta no es una solución ideal.

¿No estaría bien poder crear una interfaz de usuario en la que los usuarios pudieran rellenar un formulario para añadir valores a los campos personalizados?

De hecho, esto es lo que ya hacen muchos plugins populares de WordPress.

Por ejemplo, la caja meta title y meta description del popular plugin All in One SEO es una caja meta personalizada:

La forma más sencilla de crear una interfaz de usuario para añadir campos personalizados es utilizando el plugin Advanced Custom Fields.

Lo primero que tienes que hacer es instalar y activar el plugin Advanced Custom Fields. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Para activarlo, visite la página ACF ” Grupos de campos y haga clic en el botón “Añadir nuevo”.

Un grupo de campos es como un contenedor con un conjunto de campos personalizados. Permite añadir varios paneles de campos personalizados.

Ahora, tiene que dar un título a su grupo de campos y hacer clic en el botón “+ Añadir campo” de la esquina superior derecha.

Ahora puede seleccionar un tipo de campo.

Los campos personalizados avanzados le permiten crear todo tipo de campos, como texto, subida de imágenes, números, desplegables, casillas de verificación, etc.

A continuación, puede desplazarse hacia abajo para ver otras opciones para ese campo en particular, como el nombre del campo, la etiqueta del campo y el valor por defecto. Puede cambiarlos según sus necesidades.

Si lo desea, también puede añadir varios campos a su grupo de campos. Cuando haya terminado, sólo tiene que hacer clic en el botón “Guardar cambios”.

A continuación, edite una entrada o cree una nueva, y verá un nuevo panel con sus campos personalizados de WordPress debajo del editor de contenido.

Para obtener instrucciones detalladas paso a paso, puede consultar nuestra guía sobre cómo añadir cajas meta personalizadas en entradas y tipos de entradas de WordPress.

Cómo ocultar campos personalizados vacíos con sentencias condicionales

Hasta ahora, hemos cubierto cómo crear un campo personalizado y mostrarlo en su tema.

Ahora, vamos a ver cómo comprobar que el campo personalizado no está vacío antes de mostrarlo. Para ello, modificaremos nuestro código para comprobar primero si el campo contiene datos:

<?php 

$mood = get_post_meta($post->ID, 'Mood', true);

if ($mood) { ?>

<p>Today's Mood: <? echo $mood; ?></p>

<?php 

} else {
// do nothing;
}

?>

No olvide sustituir Mood por su propio nombre de campo personalizado.

Añadir varios valores a un campo personalizado

Los campos personalizados pueden reutilizarse en la misma entrada para añadir varios valores. Solo tienes que volver a seleccionar el campo y añadir otro valor en la casilla ‘Valor’.

Sin embargo, el código que hemos utilizado en los ejemplos anteriores solo podrá mostrar un único valor.

Para mostrar todos los valores de un campo personalizado, necesitamos modificar el código y hacer que devuelva los datos en un array. Tendrás que añadir el siguiente código al archivo de tu tema:

<?php 
$mood = get_post_meta($post->ID, 'Mood', false);
if( count( $mood ) != 0 ) { ?>
<p>Today's Mood:</p>
<ul>
<?php foreach($mood as $mood) {
            echo '<li>'.$mood.'</li>';
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

De nuevo, no olvide sustituir Mood por su propio nombre de campo personalizado.

En este ejemplo, notará que hemos cambiado el último parámetro de la función get_post_meta a false. Este parámetro define si la función debe devolver un único valor o no. Establecerlo en false le permite devolver los datos como un array, que luego mostramos en un bucle foreach.

Cómo buscar entradas por campo personalizado en WordPress

La búsqueda por defecto de WordPress no funciona con ningún campo personalizado de su sitio web. Solo utiliza el contenido para encontrar la entrada que usted o sus visitantes están buscando en su sitio.

Sin embargo, SearchWP cambia eso mejorando la búsqueda en WordPress. Es el mejor plugin de búsqueda de WordPress que va más allá de usar el contenido de la entrada e indexa todo, incluyendo campos personalizados de WordPress, documentos PDF, tablas personalizadas, texto, archivos y mucho más.

Puede ajustar el algoritmo de búsqueda sin editar el código utilizando SearchWP. Basta con instalar el plugin y luego encabezado a SearchWP ” Algoritmo de su área de administrador de WordPress.

A continuación, debe ir a la pestaña “Motores” y ajustar el carrusel / control deslizante Relevancia de atributos. Esto cambiará la importancia dada a cada atributo durante una búsqueda.

Por ejemplo, puede establecer el carrusel / control deslizante de Campos personalizados al máximo y ajustar los controles deslizantes de otros atributos en consecuencia. De esta forma, SearchWP dará preferencia a los datos de los campos personalizados cuando busque contenido en WordPress.

Otra ventaja de utilizar SearchWP es que funciona con algunos de los plugins de campos personalizados más populares, como Advanced Custom Fields (ACF), Meta Box y Pods.

Para más detalles, puede leer nuestra guía para principiantes sobre cómo mejorar la búsqueda en WordPress con SearchWP.

Mostrar entradas con una clave personalizada específica

WordPress le permite mostrar entradas con claves personalizadas y sus valores. Por ejemplo, si está intentando crear una página de archivo personalizada para mostrar todas las entradas con claves personalizadas específicas, puede utilizar la clase WP_Query para consultar entradas que coincidan con esos campos.

Puede utilizar el siguiente código como punto de partida:

$args = array(
    'meta_key'   => 'Mood',
    'meta_value' => 'Happy'
);
$the_query = new WP_Query( $args );
 
<?php 
// the query
$the_query = new WP_Query( $args ); ?>
 
<?php if ( $the_query->have_posts() ) : ?>
 
    <!-- the loop -->
    <?php while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
        <h2><?php the_title(); ?></h2>
        <?php the_content(); ?>
 
    <?php endwhile; ?>
    <!-- end of the loop -->
 
    <!-- pagination here -->
 
    <?php wp_reset_postdata(); ?>
 
<?php else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
<?php endif; ?>

No olvide sustituir los parámetros meta_key y meta_value por sus propios valores.

Cómo añadir el nombre del autor invitado utilizando campos personalizados

¿Quieres añadir una entrada de invitado pero no quieres añadir un nuevo perfil de usuario sólo para esa entrada? Un método más fácil es añadir un nombre de autor invitado como campo personalizado.

Para ello, deberá añadir el siguiente código al archivo functions.php de su tema o utilizar WPCode (recomendado):

add_filter( 'the_author', 'guest_author_name' );
add_filter( 'get_the_author_display_name', 'guest_author_name' );
function guest_author_name( $name ) {
global $post;
$author = get_post_meta( $post->ID, 'guest-author', true );
if ( $author )
$name = $author;
return $name;
}

Para más detalles, consulte nuestra guía sobre cómo pegar fragmentos de código de la web en WordPress.

Este código engancha una función a los filtros the_author y get_the_author_display_name en WordPress.

La función primero marca / comprueba el nombre del autor invitado. Si existe, sustituye el nombre del autor por el del autor invitado.

Ahora, tendrás que editar la entrada donde quieres mostrar el nombre del autor invitado. Vaya a la caja meta Campos personalizados, añada el nombre del autor invitado y, por último, haga clic en el botón “Añadir campo personalizado”.

Para más detalles, consulte nuestro artículo sobre cómo reescribir nombres de autores invitados con campos personalizados en WordPress.

Cómo mostrar los colaboradores de un artículo utilizando campos personalizados

En muchos blogs y sitios de noticias populares, muchos autores contribuyen a la redacción de un mismo artículo. Sin embargo, WordPress solo permite asociar un autor a una entrada.

Una forma de resolver este problema es utilizar el plugin Co-Authors Plus. Para obtener más información, consulte nuestra guía sobre cómo añadir varios autores a una entrada de WordPress.

Otro método consiste en añadir colaboradores como campo personalizado.

En primer lugar, debe editar la entrada en la que desea mostrar los coautores o colaboradores. A continuación, desplácese hasta la caja meta Campos personalizados y añada los nombres de los autores como campos personalizados de coautor.

Ahora, necesitas añadir este código a los archivos de tu tema donde quieras mostrar los co-autores:

<?php 
 
$coauthors = get_post_meta($post->ID, 'co-author', false);
if( count( $coauthors ) != 0 ) { ?>
<ul class="coauthors">
<li>Contributors</li>
<?php foreach($coauthors as $coauthors) { ?>
           <?php echo '<li>'.$coauthors.'</li>' ;
            }
            ?>
</ul>
<?php 
} else { 
// do nothing; 
}
?>

Para mostrar los nombres de los autores separados por comas, puede añadir el siguiente CSS personalizado:

.coauthors ul { 
display:inline;
}
.coauthors li { 
display:inline;
list-style:none;
}
.coauthors li:after { 
content:","
}
.coauthors li:last-child:after {
    content: "";
}
.coauthors li:first-child:after {
    content: ":";
}

Así se ve en nuestro sitio de demostración.

Cómo mostrar campos personalizados fuera del bucle en WordPress

¿Y si necesita mostrar campos personalizados en la barra lateral de una sola entrada?

Para mostrar los campos personalizados fuera del bucle de WordPress, puede añadir el siguiente código a los archivos de su tema:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>

No olvide sustituir la clave por el nombre de su campo personalizado.

Mostrar una cabecera, pie de página y barra lateral personalizados mediante campos personalizados

Normalmente, la mayoría de los temas de WordPress utilizan la misma cabecera, pie de página y barra lateral en todas las páginas.

También hay muchas maneras de mostrar diferentes barras laterales, cabeceras o pies de página para diferentes páginas de su sitio web. Puede consultar nuestra guía sobre cómo mostrar una barra lateral diferente para cada entrada o página de WordPress.

Una forma de hacerlo es utilizando campos personalizados. Sólo tiene que editar la entrada o página en la que desea mostrar una barra lateral diferente y, a continuación, añadir la barra lateral como un campo personalizado.

Ahora, necesitas editar el archivo de tu tema de WordPress, como single.php, donde quieres mostrar una barra lateral personalizada. Usted va a buscar el siguiente código:

<?php get_sidebar(); ?>

Sustituya esta línea por el siguiente código:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$sidebar = get_post_meta($postid, "sidebar", true);
get_sidebar($sidebar);
wp_reset_query();
?>

Este código simplemente busca el campo personalizado de la barra lateral y lo muestra en el tema. Por ejemplo, si añades página web como campo personalizado de la barra lateral, el código buscará un archivo sidebar-webpage.php para mostrarlo.

Deberá crear el archivo sidebar-webpage.php en la carpeta de su tema. Puedes copiar el código del archivo sidebar.php de tu tema como punto de partida.

Manipulación del contenido del feed RSS con campos personalizados

¿Quieres mostrar metadatos o contenidos adicionales a los usuarios de tu feed RSS? Utilizando campos personalizados, puede manipular su feed RSS de WordPress y añadir contenido personalizado en sus feeds.

En primer lugar, debe añadir el siguiente código al archivo functions.php de su tema o utilizar WPCode (recomendado):

function wpbeginner_postrss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$coolcustom = get_post_meta($postid, 'coolcustom', true);
if(is_feed()) {
if($coolcustom !== '') {
$content = $content."<br /><br /><div>".$coolcustom."</div>
";
}
else {
$content = $content;
}
}
return $content;
}
add_filter('the_excerpt_rss', 'wpbeginner_postrss');
add_filter('the_content', 'wpbeginner_postrss');

Ahora, sólo tienes que crear un campo personalizado llamado ‘coolcustom’ y añadir el valor que quieras. Puedes usarlo para mostrar anuncios, imágenes, texto o lo que quieras.

Para más detalles, consulte nuestra guía sobre cómo copiar y pegar código de la web en WordPress.

Cómo manipular el título de un feed RSS con campos personalizados

A veces, es posible que desee añadir texto adicional al título de una entrada para los usuarios de feeds RSS. Por ejemplo, puede ser útil si publica una entrada patrocinada o una entrada de invitado.

En primer lugar, debe añadir el siguiente código al archivo functions.php de su tema o utilizar WPCode para añadir el fragmento de código personalizado sin romper su sitio web:

function wpbeginner_titlerss($content) {
global $wp_query;
$postid = $wp_query->post->ID;
$gpost = get_post_meta($postid, 'guest_post', true);
$spost = get_post_meta($postid, 'sponsored_post', true);

if($gpost !== '') {
$content = 'Guest Post: '.$content;
}
elseif ($spost !== ''){
$content = 'Sponsored Post: '.$content;
}
else {
$content = $content;
}
return $content;
}
add_filter('the_title_rss', 'wpbeginner_titlerss');

A continuación, debe editar la entrada en la que desea mostrar el texto adicional en el campo del título.

A continuación, añada guest_post y sponsored_post como campos personalizados.

Si cualquiera de estos dos campos personalizados se encuentra con un valor “true”, entonces el código añadirá el texto apropiado antes del título. Esta técnica se puede utilizar de muchas maneras para adaptarse a lo que quieras.

¿Quieres aprender más trucos para feeds RSS? Consulta nuestra guía sobre cómo añadir contenido y manipular tus feeds RSS de WordPress.

Cómo Establecer la Fecha de Caducidad de las Entradas en WordPress Usando Campos Personalizados

¿Quieres establecer una fecha de caducidad para algunas entradas de tu sitio WordPress? Esto es muy útil cuando quieres publicar contenido solo durante un periodo específico, como encuestas u ofertas por tiempo limitado.

Una forma de hacerlo es quitando / eliminando manualmente el contenido de las entradas o utilizando un plugin como Post Expirator.

Otra opción es usar campos personalizados para caducar entradas automáticamente después de un tiempo específico. Usted tendrá que editar los archivos de su tema y modificar el bucle de WordPress como este:

<?php
if (have_posts()) :
while (have_posts()) : the_post();
$expirationtime = get_post_meta($post->ID, "expiration", false);
if( count( $expirationtime ) != '' ) {
if (is_array($expirationtime)) {
$expirestring = implode($expirationtime);
}

$secondsbetween = strtotime($expirestring)-time();
if ( $secondsbetween >= 0 ) {
echo 'This post will expire on ' .$expirestring.'';
the_content();
} else {
echo "Sorry this post expired!"
}
} else {
the_content();
}
endwhile;
endif;
?>

Nota: Deberá modificar este código para adaptarlo a su tema.

Después de añadir este código, puede añadir el campo personalizado de caducidad a la entrada que desea caducar. Asegúrate de añadir la hora en este formato: mm/dd/aaaa 00:00:00.

Cómo personalizar entradas individuales con campos personalizados

¿Quieres cambiar el aspecto de una entrada individual usando CSS? WordPress asigna automáticamente a cada entrada su propia clase, que puedes utilizar para añadir CSS personalizado.

Sin embargo, si utiliza campos personalizados, puede añadir sus propias clases personalizadas y utilizarlas para dar un estilo diferente a las entradas.

En primer lugar, debe editar una entrada a la que desee aplicar un estilo diferente. Vaya al cuadro Campos personalizados y añada el campo personalizado de clase de entrada.

A continuación, debe editar los archivos de su tema de WordPress y añadir este código al principio del bucle de WordPress:

<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>

Ahora, necesitas encontrar la línea con la función post_class().

Así es como se ve en nuestro tema de demostración:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

Debe cambiar esta línea para incluir el valor de su campo personalizado de la siguiente manera:

<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>

Ahora, si examina el código fuente de la entrada utilizando la herramienta Inspeccionar, verá su clase CSS personalizada añadida a la clase de la entrada.

Ahora puede utilizar esta clase CSS para añadir CSS personalizado y dar un estilo diferente a sus entradas.

Esperamos que este artículo te haya ayudado a aprender más acerca de los campos personalizados de WordPress. Puede que también quieras ver nuestra guía sobre cómo añadir meta campos personalizados a taxonomías personalizadas en WordPress y los mejores plugins creadores de páginas de WordPress que te ayudarán a diseñar tu sitio web como tú quieras.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.