Post Top Ad

Your Ad Spot

sábado, 25 de julio de 2020

Campos personalizados de WordPress 101: consejos, trucos y hacks

Los campos personalizados son una práctica función de WordPress que le permite agregar varios datos / información adicionales a sus publicaciones y páginas de WordPress.
Muchos complementos y temas populares de WordPress utilizan campos personalizados para almacenar datos importantes. También puede usar campos personalizados para almacenar sus propios datos y luego usarlos en su sitio web.
En este artículo, le mostraremos cómo usar los campos personalizados de WordPress con algunos consejos, trucos y hacks.
Usando campos personalizados en WordPress con ejemplos prácticos
Como se trata de un artículo extenso, hemos agregado una tabla de contenido para facilitar la navegación.
  • ¿Qué son los campos personalizados de WordPress?
  • Agregar campos personalizados en WordPress
  • Mostrar campos personalizados en temas de WordPress
  • No se puede encontrar el campo personalizado en el menú desplegable en la pantalla de edición posterior
  • Crear interfaz de usuario para campos personalizados
  • Agregar campos personalizados usando campos personalizados avanzados
  • Ocultar campos personalizados vacíos con sentencia condicional
  • Agregar múltiples valores a un campo personalizado
  • Mostrar publicaciones con una clave personalizada específica
  • Agregue el nombre del autor invitado utilizando un campo personalizado
  • Mostrar contribuyentes a un artículo utilizando campos personalizados
  • Mostrar campos personalizados fuera del bucle en WordPress
  • Mostrar encabezado personalizado, pie de página, barra lateral utilizando campos personalizados
  • Manipular contenido de fuentes RSS con campos personalizados
  • Manipule el título de la fuente RSS con campos personalizados
  • Establecer la fecha de vencimiento de las publicaciones que utilizan campos personalizados

¿Qué son los campos personalizados de WordPress?

Los campos personalizados de WordPress son metadatos que se utilizan para agregar información adicional relacionada con la publicación o página que está editando.
Por defecto, cuando escribe una nueva publicación, página o cualquier tipo de contenido, WordPress lo guarda en dos áreas diferentes.
La primera parte es el cuerpo de su contenido que agrega utilizando el editor de publicaciones.
La segunda parte es la información sobre ese contenido en particular. Por ejemplo, título, autor, fecha, hora y más. Este bit de información de la publicación se llama metadatos.
WordPress agrega automáticamente todos los metadatos requeridos a cada publicación o página que cree.
También puede crear y almacenar sus propios metadatos utilizando los campos personalizados.
De forma predeterminada, la opción de campos personalizados está oculta en la pantalla de edición posterior. Para verlo, debe hacer clic en el menú de tres puntos en la esquina superior derecha de la pantalla y seleccionar 'Opciones' en el menú.
Opciones de editor de publicaciones
Aparecerá una ventana emergente donde deberá marcar la opción 'Campos personalizados' en los paneles avanzados. Después de eso, haga clic en el botón 'Activar y volver a cargar' para volver a cargar el editor de publicaciones.
Habilitar y mostrar el panel de campos personalizados
El editor de publicaciones se volverá a cargar y podrá ver el panel de campos personalizados debajo del editor de contenido.
Metabox de campos personalizados debajo del editor de publicaciones
Los campos personalizados se pueden usar para agregar cualquier información relacionada con la publicación, la página o cualquier tipo de contenido. Esta metainformación se puede mostrar en su tema.
Sin embargo, para hacerlo necesitarás editar tus archivos de tema de WordPress.
Es por eso que este tutorial se recomienda para usuarios familiarizados con la edición de archivos de temas. También es útil para los aspirantes a desarrolladores de WordPress que desean aprender a usar correctamente los campos personalizados en sus propios temas o complementos.
Dicho esto, echemos un vistazo a cómo agregar y usar campos personalizados en WordPress.

Agregar campos personalizados en WordPress

Primero, necesita editar la publicación o página donde desea agregar el campo personalizado e ir al cuadro meta de campos personalizados.
Agregar nombre de campo personalizado y valor
A continuación, debe proporcionar un nombre para su campo personalizado y luego ingresar su valor. Haga clic en el botón Agregar campo personalizado para guardarlo.
El campo se almacenará y se mostrará en el cuadro meta de campos personalizados como este:
Campo personalizado guardado
Puede editar este campo personalizado en cualquier momento que desee y luego hacer clic en el botón Actualizar para guardar sus cambios. También puede eliminarlo según sea necesario.
Ahora puede guardar su publicación para almacenar su configuración de campo personalizada.

Mostrar campos personalizados en temas de WordPress

Para mostrar su campo personalizado en su sitio web, deberá editar sus archivos de tema de WordPress. Si no ha hecho esto antes, eche un vistazo a nuestra guía sobre cómo copiar y pegar código en WordPress .
Primero, necesitará encontrar el archivo de tema que necesita editar para mostrar su campo personalizado. Lo ideal sería que lo mostraras en una sola página de publicación. Deberá editar el archivo single.php o content-single.php.
Deberá ingresar su código de campo personalizado dentro del bucle de WordPress . Busque la línea que se ve así:
1
<?php while ( have_posts() ) : the_post(); ?>
Desea asegurarse de agregar su código antes de la siguiente línea:
1
<?php endwhile; // end of the loop. ?>
Ahora necesita agregar este código a su archivo de tema:
1
<?php echo get_post_meta($post->ID, 'key', true); ?>
No olvide reemplazar la clave con el nombre de su campo personalizado. Por ejemplo, usamos este código en nuestro tema de demostración:
1
<p>Today's Mood: <?php echo get_post_meta($post->ID, 'Mood', true); ?></p>
Ahora puede guardar sus cambios y visitar la publicación donde agregó el campo personalizado para verlo en acción.
Datos de campo personalizados que se muestran en un tema de WordPress
Ahora puedes usar este campo personalizado en todas tus otras publicaciones de WordPress también.
Simplemente cree una nueva publicación o edite una existente. Vaya al cuadro meta de campos personalizados y seleccione su campo personalizado en el menú desplegable e ingrese su valor.
Reutilizar campo personalizado
Haga clic en el botón 'Agregar campo personalizado' para guardar sus cambios y luego publique o actualice su publicación.

No se puede encontrar el campo personalizado en el menú desplegable en la pantalla de edición de publicaciones

Por defecto, WordPress solo carga 30 campos personalizados en este formulario.
Si está utilizando temas y complementos de WordPress que ya usan campos personalizados, entonces existe la posibilidad de que aparezcan primero en el menú desplegable y no pueda ver su campo personalizado recién creado.
Para solucionar este problema, deberá agregar el siguiente código al archivo functions.php de su tema o un complemento específico del sitio .
1
2
3
4 4
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 aún no puede ver su campo personalizado, intente aumentar ese límite aún más.

Crear una interfaz de usuario para campos personalizados

Como puede ver, una vez que agregue un campo personalizado, deberá seleccionar el campo e ingresar su valor cada vez que escriba una publicación.
Si tiene muchos campos personalizados o múltiples usuarios escribiendo en su sitio web, entonces esta no es una solución ideal.
¿No sería bueno poder crear una interfaz de usuario donde los usuarios puedan completar un formulario para agregar valores a sus campos personalizados?
Esto es lo que muchos complementos populares de WordPress ya hacen. Por ejemplo, el cuadro de título y metadescripción de SEO dentro del popular plugin SEO todo en uno es un cuadro de meta personalizado:
Todo en uno SEO Pack Meta Box
La forma más fácil de hacerlo es mediante el uso del complemento Campos personalizados avanzados .

Agregar campos personalizados usando campos personalizados avanzados

Lo primero que debe hacer es instalar y activar el complemento Campos personalizados avanzados . Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress .
Tras la activación, debe visitar la página Campos personalizados »Grupos de campos y hacer clic en el botón Agregar nuevo.
Agregar nuevo grupo de campo
Un grupo de campos es como un contenedor de un conjunto de campos personalizados. Esto le permite agregar múltiples paneles de campos personalizados.
Ahora, debe proporcionar un título para su grupo de campo y luego hacer clic en el botón 'Agregar campo'.
Agregar nuevo campo
Ahora puede proporcionar un nombre para su campo personalizado y seleccionar un tipo de campo. Los campos personalizados avanzados le permiten crear todo tipo de campos, incluidos texto, carga de imágenes, número, menú desplegable, casillas de verificación y más.
Agregar un nuevo campo
Desplácese hacia abajo y verá otras opciones para ese campo en particular. Puede cambiarlos según sus propios requisitos.
Puede agregar múltiples campos a su grupo de campos si lo desea. Una vez que haya terminado, haga clic en el botón publicar para guardar sus cambios.
Ahora puede editar una publicación o crear una nueva y verá un nuevo panel para sus campos personalizados debajo del editor de contenido.
Panel de campo personalizado en la pantalla de edición posterior
Para obtener instrucciones detalladas paso a paso, consulte nuestra guía sobre cómo agregar meta cuadros personalizados en publicaciones y tipos de publicaciones de WordPress .

Ocultar campos personalizados vacíos con declaración condicional

Hasta ahora hemos cubierto cómo crear un campo personalizado y mostrarlo en su tema.
Ahora veamos cómo verificar si el campo personalizado no está vacío antes de mostrarlo. Para hacer eso, modificaremos nuestro código para verificar primero si el campo tiene datos.
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
<?php
 
$mood = get_post_meta($post->ID, 'Mood', true);
 
if ($mood) { ?>
 
<p>Today's Mood: <? echo $mood; ?></p>
 
<?php
 
} else {
// do nothing;
}
 
?>
No olvide reemplazar Mood con su propio nombre de campo personalizado.

Agregar múltiples valores a un campo personalizado

Los campos personalizados se pueden reutilizar en la misma publicación nuevamente para agregar múltiples valores. Solo necesita seleccionarlo nuevamente y agregar otro valor.
Agregar múltiples valores a un campo personalizado
Sin embargo, el código que hemos usado en los ejemplos anteriores solo podrá mostrar un valor único.
Para mostrar todos los valores de un campo personalizado, necesitamos modificar el código y hacer que devuelva los datos en una matriz. Deberá agregar el siguiente código en su archivo de tema:
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
<?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;
}
?>
No olvide reemplazar Mood con su propio nombre de campo personalizado.
En este ejemplo, notará que hemos cambiado el último parámetro de get_post_metafunción a falso. Este parámetro define si la función debe devolver un solo valor o no. Establecerlo en falso le permite devolver los datos como una matriz, que luego mostramos en un foreachbucle.

Mostrar publicaciones con una clave personalizada específica

WordPress le permite mostrar publicaciones con claves personalizadas y sus valores. Por ejemplo, si está intentando crear una página de archivo personalizada para mostrar todas las publicaciones con claves personalizadas específicas, puede usar la clase WP_Query para consultar publicaciones que coincidan con esos campos.
Puede usar el siguiente código como punto de partida.
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
23
24
25
26
27
$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 reemplazar meta_keymeta_valueparámetros con sus propios valores.

Agregar nombre de autor invitado utilizando campos personalizados

¿Desea agregar una publicación de invitado pero no desea agregar un nuevo perfil de usuario solo para agregar una sola publicación? Una forma más fácil de hacerlo es agregar el nombre del autor invitado como un campo personalizado.
Primero, debe agregar el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio .
1
2
3
4 4
5 5
6 6
7 7
8
9
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;
}
Este código conecta una función the_authorget_the_author_display_name filtra en WordPress.
La función primero busca el nombre del autor invitado. Si existe, reemplaza el nombre del autor con el nombre del autor invitado.
Ahora deberá editar la publicación donde desea mostrar el nombre del autor invitado. Vaya al cuadro meta de campos personalizados y agregue su nombre de autor invitado.
Agregar campo personalizado de autor invitado
Para obtener más información, consulte nuestro artículo sobre cómo reescribir el nombre del autor invitado con campos personalizados en WordPress .

Mostrar contribuidores a un artículo utilizando campos personalizados

En muchos blogs y sitios de noticias populares, varios autores contribuyen a escribir un artículo. Sin embargo, WordPress solo permite asociar un solo autor a una publicación.
Una forma de resolver este problema es mediante el uso del complemento Co-Authors Plus . Para obtener más información, consulte nuestra guía sobre cómo agregar varios autores en una publicación de WordPress .
Otra forma de hacerlo es agregando contribuyentes como un campo personalizado.
Primero debe editar la publicación donde desea mostrar los coautores o colaboradores. Desplácese hacia abajo hasta el cuadro meta de campos personalizados y agregue nombres de autor como campo personalizado de coautor.
Agregar un campo personalizado de coautor
Ahora agregue este código a sus archivos de tema donde desea mostrar los coautores.
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
<?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 agregar el siguiente CSS personalizado .
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
.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í es como se veía en nuestro sitio de demostración.
Los coautores se muestran usando campos personalizados

Mostrar campos personalizados fuera del bucle en WordPress

Hasta ahora, le mostramos todos los ejemplos en los que se muestran campos personalizados dentro del bucle de WordPress. ¿Qué pasa si necesita mostrarlos fuera del circuito? Por ejemplo, en la barra lateral de una sola publicación.
Para mostrar los campos personalizados fuera del bucle de WordPress, agregue el siguiente código:
1
2
3
4 4
5 5
6 6
<?php
global $wp_query;
$postid = $wp_query->post->ID;
echo get_post_meta($postid, 'key', true);
wp_reset_query();
?>
No olvide reemplazar la clave con su nombre de campo personalizado.

Mostrar encabezado personalizado, pie de página, barra lateral utilizando campos personalizados

Por lo general, la mayoría de los temas de WordPress usan el mismo encabezado, pie de página y barra lateral en todas las páginas. Hay varias formas de mostrar diferentes barras laterales, encabezados o pies de página para diferentes páginas en su sitio web. Consulte nuestra guía sobre cómo mostrar diferentes barras laterales para cada publicación o página de WordPress .
Una forma de hacerlo es mediante el uso de campos personalizados. Edite la publicación o página donde desea mostrar una barra lateral diferente y luego agregue la barra lateral como campo personalizado.
Agregar barra lateral personalizada a una publicación usando un campo personalizado
Ahora necesita editar sus archivos de tema de WordPress como single.php donde desea mostrar la barra lateral personalizada. Buscará el siguiente código:
1
<?php get_sidebar(); ?>
Reemplace esta línea con el siguiente código:
1
2
3
4 4
5 5
6 6
7 7
<?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 luego lo muestra en su tema. Por ejemplo, si agrega wpbpage como campo personalizado de su barra lateral, entonces el código buscará el archivo sidebar-wpbpage.php para mostrar.
Deberá crear el archivo sidebar-wpbpage.php en su carpeta de temas. Puede copiar el código del archivo sidebar.php de su tema como punto de partida.

Manipulación de contenido de fuentes RSS con campos personalizados

¿Desea mostrar metadatos o contenido adicional a los usuarios de su fuente RSS? Usando campos personalizados, puede manipular su feed RSS de WordPress y agregar contenido personalizado a sus feeds.
Primero debe agregar el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio .
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
17
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 solo cree un campo personalizado llamado "coolcustom" y agregue cualquier valor que desee. Puede usarlo para mostrar anuncios, imágenes, texto o cualquier cosa que desee.

Manipule el título de la fuente RSS con campos personalizados

A veces es posible que desee agregar texto adicional al título de una publicación para usuarios de fuentes RSS. Por ejemplo, si está publicando una publicación patrocinada o una publicación invitada.
Primero agrega el siguiente código en el archivo functions.php de su tema o en un complemento específico del sitio .
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
17
18 años
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 publicación donde desea mostrar el texto adicional en el campo de título y agregar guest_post y sponsor_post en campos personalizados.
Campos personalizados de publicaciones patrocinadas e invitadas
Si alguno de estos dos campos personalizados se encuentra con un valor "verdadero", agregará el texto apropiado antes del título. Esta técnica se puede utilizar de varias maneras para adaptarse a lo que desee.
¿Quieres aprender más hacks de fuentes RSS? Consulte nuestra guía sobre cómo agregar contenido y manipular sus fuentes RSS de WordPress .

Establecer fecha de vencimiento para publicaciones en WordPress usando campos personalizados

¿Desea establecer una fecha de vencimiento para algunas publicaciones en su sitio de WordPress? Esto resulta útil en situaciones en las que desea publicar contenido solo durante un período específico, como realizar encuestas u ofertas por tiempo limitado.
Una forma de hacerlo es eliminando manualmente el contenido de la publicación o utilizando un complemento como el complemento Post Expirator .
Otra forma de hacerlo es mediante el uso de campos personalizados para expirar automáticamente las publicaciones después de un tiempo específico.
Tendrá que editar sus archivos de tema y agregar modificar el bucle de WordPress de esta manera:
1
2
3
4 4
5 5
6 6
7 7
8
9
10
11
12
13
14
15
dieciséis
17
18 años
19
20
21
22
<?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á editar este código para que coincida con su tema.
Después de agregar este código, puede agregar el campo personalizado de caducidad a la publicación que desea caducar. Asegúrese de agregar la hora en este formato mm / dd / aaaa 00:00:00 .
Agregar una fecha de vencimiento usando un campo personalizado

Diseñar publicaciones individuales utilizando campos personalizados

¿Quieres cambiar el aspecto de una publicación individual usando CSS? WordPress asigna automáticamente a cada publicación su propia clase que puede usar para agregar CSS personalizado.
Sin embargo, al usar campos personalizados puede agregar sus propias clases personalizadas y luego usarlas para diseñar las publicaciones de manera diferente.
Primero debe editar una publicación que le gustaría darle un estilo diferente. Vaya al cuadro de campos personalizados y al campo personalizado posterior a la clase.
Campo personalizado posterior a la clase
A continuación, debe editar sus archivos de tema de WordPress y agregar este código al comienzo del bucle de WordPress.
1
<?php $custom_values = get_post_meta($post->ID, 'post-class'); ?>
Ahora necesita encontrar una línea con la función post_class (). Así es como se veía en nuestro tema de demostración:
1
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
Cambie esta línea para incluir su valor de campo personalizado, así:
1
<article id="post-<?php the_ID(); ?>" <?php post_class($custom_values); ?>>
Ahora, si examina el código fuente de la publicación con la herramienta Inspeccionar , verá que su clase CSS de campo personalizado se agrega a la clase de publicación.
Clase de campo personalizada
Ahora puede usar esta clase CSS para agregar CSS personalizado y diseñar su publicación de manera diferente.
Eso es todo, esperamos que este artículo te haya ayudado a aprender más sobre los campos personalizados de WordPress. También pue