Primeros pasos con los campos personalizados de WordPress

Los campos personalizados de WordPress son una característica realmente excelente que a menudo se descuida. Le permiten agregar 'metadatos' a un área de su página o publicación que se repite en todas las páginas o publicaciones. Esto puede ahorrarle mucho tiempo si tiene un sitio web en el que desea publicar el mismo tipo de información en varias páginas.

Por ejemplo, eche un vistazo a una publicación de blog regular en su sitio web de WordPress. Lo más probable es que, en algún lugar de la página, vea el nombre del autor y una fecha que muestra cuándo se publicó el artículo. Estos son metadatos y aparecerán en cada publicación de su sitio web.

Entonces, ¿cómo puedes agregar tus propios metadatos a tus publicaciones o páginas? Fácil… ¡usando un campo personalizado de WordPress!

Por supuesto, puede agregar esta información en cada publicación manualmente a través de la página/editor de publicaciones, pero esto requiere mucho tiempo y, por lo general, requiere un formato cuidadoso si quiere asegurarse de que todas las publicaciones tengan el mismo aspecto. Si está publicando una gran cantidad de contenido, puede ser tedioso tener que hacerlo cada vez.

Los editores de páginas y publicaciones de WordPress ofrecen una gran cantidad de funciones y flexibilidad desde el primer momento cuando se trata del contenido principal que aparece en una página o publicación. Pero, ¿sabía que WordPress también brinda a los usuarios una forma de agregar contenido que se encuentra 'fuera' de la publicación principal o el contenido de la página? En este artículo, vamos a acelerar el uso de los campos personalizados de WordPress que lo ayudarán a organizar mejor sus publicaciones y también a agregar información útil para sus lectores en un formato atractivo.

¡Empecemos!

¿Qué son los campos personalizados y los metadatos?

El contenido como publicaciones, páginas, usuarios, comentarios y tipos de publicaciones personalizadas incluyen metadatos que se almacenan en su base de datos en la tabla postmeta en un par clave/valor.

La información que normalmente ve debajo del título de una publicación o página, como el nombre del administrador, la fecha o el contador de comentarios, se incluye en los metadatos de la publicación.

El campo personalizado es un campo adicional donde puede agregar información adicional para su publicación y también forma parte de los metadatos de la publicación.

Los campos personalizados se aplican a páginas, publicaciones o tipos de publicaciones personalizadas y también constan de pares clave/valor. La clave es el 'nombre' del elemento de metadatos y el valor son los datos que se asocian con la clave y pueden diferir para cada publicación.

En WordPress, puede agregar campos personalizados utilizando la función de campo personalizado incorporada o puede ir un paso más allá y utilizar un complemento de campo personalizado que mejorará aún más el control disponible sobre un campo personalizado. Veremos ambas opciones en este artículo.

Agregue campos personalizados usando los campos personalizados de WordPress

La configuración integrada de los campos personalizados de WordPress está oculta de forma predeterminada, lo que explica por qué es posible que no supiera que existía esta función. Para usarlo, primero necesitaremos habilitarlo.

Si está utilizando el editor clásico de WordPress (es decir, no Gutenberg), abra una nueva publicación y diríjase a la parte superior de esta publicación. Verá un cuadro en el lado derecho que dice "Opciones de pantalla". Haga clic aquí y aparecerá un menú desplegable con casillas de verificación. En este debería ver uno que dice 'Campos personalizados'. Marque esto para habilitarlos.

Si está utilizando Gutenberg, haga clic en el ícono de los 'tres puntos' que aparece en la parte superior derecha de una publicación. Aparecerá un menú y en la parte inferior de este menú debería decir 'Opciones'. Haga clic aquí y aparecerá un nuevo menú emergente con casillas de verificación. En esta lista, debería ver uno que dice 'Campos personalizados'. Marque esta casilla y luego cierre el menú emergente.

Próximos pasos: agregar sus campos personalizados

Agregar sus campos personalizados es bastante fácil. Después de habilitarlos como se describe anteriormente, diríjase al final de su publicación y debería ver una nueva sección llamada (lo adivinó) 'Campos personalizados'.

Verá dos cuadros en la sección Campos personalizados, 'Nombre' y 'Valor'. El campo Nombre tiene algunos valores predeterminados que se relacionan con los campos existentes que se agregaron a su sitio web de WordPress. En nuestro caso, queremos agregar nuestro propio campo nuevo. Para hacer esto, haga clic en el texto 'Ingresar nuevo' que se encuentra debajo del campo Nombre.

Aloje su sitio web con Pressidium

GARANTÍA DE DEVOLUCIÓN DE DINERO DE 60 DÍAS

VER NUESTROS PLANES

En este ejemplo, queremos crear un enlace a un sitio web externo que se utilizó como fuente para un artículo que escribimos. Llamaremos a este campo 'Fuente'. Haga clic en el texto 'Ingresar nuevo' y luego escriba 'Fuente' seguido de una URL a un sitio web de su elección en la sección Valor. Esto se verá así:

La próxima vez no necesitará hacer clic en el texto 'Ingresar nuevo' y escribir manualmente 'Fuente. Ahora aparecerá en la lista desplegable de valores.

Si tiene acceso a su base de datos (por ejemplo, a través de phpMyAdmin), puede abrir la tabla postmeta, filtrar la tabla por la identificación de la publicación que editó y debería ver el nuevo campo personalizado con su valor.

Ahora que hemos confirmado que el campo personalizado está correctamente almacenado para la publicación, veamos cómo podemos mostrarlo en la parte frontal de nuestra publicación, donde los visitantes de nuestro sitio web podrán verlo.

Visualización de los valores de los campos personalizados

Para mostrar nuestro nuevo valor de campo personalizado en nuestra publicación, debemos agregar un código a nuestro archivo de plantilla de publicaciones individuales. Por lo general, esto se puede encontrar en el archivo singular.php que se encuentra en la carpeta principal del tema. En nuestro caso (tema Twenty Twenty) se encuentra en el archivo /wp-content/themes/twentytwenty/template-parts/content.php .

Utilizaremos la función principal get_post_meta que proporciona WordPress para recuperar el metacampo de una publicación de la base de datos. La estructura de la función es la siguiente:

 get_post_meta( $post_id, $key, $single )

El único argumento requerido es $post_id . El argumento $key es la clave meta a recuperar y el argumento $single define si se devuelve un único valor y es inútil si la $key no está definida en absoluto.

Si solo se declara $post_id , el resultado será una matriz con todas las claves relacionadas con la publicación en particular. Entonces, si simplemente inserta get_post_meta( $post_id ) obtendrá algo como esto:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Si usa get_post_meta( $post_id, 'filed1_key' ) obtendrá algo como Array ( [0] => value1 ) y si usa get_post_meta( $post_id, 'filed1_key', true ) como lo hicimos antes, solo obtendrá value1 .

Además, en algunas publicaciones es posible que no desee definir el campo fuente, por lo que debemos incluir en el código una verificación para ver si existe el campo para la publicación.

Entonces, con todo esto en mente, el código que debemos usar sería el siguiente:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Insertaremos el código justo después del contenido de la publicación para que dentro del div HTML con la clase "contenido de entrada", el código se vea así:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Ahora veamos lo que hemos logrado abriendo una nueva publicación y observando cómo aparecería este contenido en la interfaz.

Le recordamos que si tiene dificultades para localizar el archivo de plantilla correspondiente a su vista de publicación única, puede consultar el diagrama de jerarquía de plantillas de WordPress.

Claramente habrá algo de trabajo por hacer para diseñar esta salida. Esto está más allá del alcance de este artículo, pero es algo que cubriremos en una publicación futura.

Agregar campos personalizados usando un complemento

El complemento Advanced Custom Fields es uno de los mejores complementos disponibles que le permite agregar rápidamente campos personalizados a su sitio web de WordPress y proporciona un mayor control de los datos de sus campos personalizados. Con su generador, puede crear fácilmente campos personalizados que luego se pueden agregar a sus publicaciones, usuarios, taxonomías, medios, comentarios e incluso páginas de opciones personalizadas.

Cree sus campos personalizados usando ACF

Después de instalar y activar el complemento ACF, vaya a 'Campos personalizados> Grupos de campos' donde se muestran los campos registrados.

Presione el botón 'Agregar nuevo' para comenzar a crear sus campos. Estos también se pueden agregar en grupos.

Hay un montón de opciones proporcionadas para usted que mejorarán el comportamiento de sus campos personalizados. Además de la configuración básica que incluye la etiqueta y el nombre del campo, también puede definir el tipo de campo, definir si el campo es obligatorio, cambiar el valor predeterminado, el texto del marcador de posición y, por supuesto, elegir los tipos de publicación donde se incluirá. utilizando un argumento lógico.

Además, hay algunas configuraciones más disponibles que le permiten cambiar la apariencia del campo (muy útil) y una lista de casillas de verificación para que defina lo que debe ocultarse en las pantallas de edición correspondientes.

Impresionante, ¿verdad?

Además, en el menú Herramientas de ACF puede exportar o importar grupos de campos en formato JSON para acelerar las cosas si ya se han creado en otro lugar.

Un ejemplo resuelto usando campos personalizados avanzados

Digamos que hemos creado un tipo de publicación personalizada llamado 'Libros' y nos gustaría agregar algunos campos personalizados en cada publicación de libro, como género, autor del libro y año de publicación. Lo primero que debemos hacer es crear el grupo de campos y los campos que lo contienen así:

Como puede ver, no todos los campos usan el mismo tipo.

• El campo Autor es un campo de texto simple donde completaremos el nombre completo del autor.
• El campo Género es un campo de selección y tiene que aceptar múltiples valores. Un libro puede estar relacionado con más de un género.
• Las opciones predefinidas para el género deben insertarse en el cuadro Opciones, cada una en su propia línea.

El campo de portada debe ser un campo de selección de valor único con las opciones predefinidas también.

Ahora vamos a editar una publicación de libro. Los campos aparecerán bien agrupados en la barra lateral.

Si desea cambiar la posición del grupo de campos, vaya a la configuración correspondiente:

Complete los campos, así como algunos contenidos de prueba para el artículo y actualice la publicación. En este punto, si visita la vista frontal de Book Post, notará que todavía no se muestra nada con respecto a nuestros campos personalizados.

Muestre sus campos personalizados de ACF

Puede mostrar fácilmente los campos personalizados en la plantilla de su tema utilizando las funciones amigables que proporciona el complemento ACF. Dos de estos son:

• get_field() : devuelve el valor de un campo específico.
• the_field() : muestra el valor de un campo específico.

Estas son las funciones más utilizadas con el complemento ACF. Si desea ver la lista completa de las funciones del complemento, puede visitar la documentación oficial para obtener más información.

Por lo tanto, para generar su campo personalizado en la plantilla de vista de publicación, deberá agregar un código similar al que hicimos cuando usamos los campos personalizados predeterminados de WordPress. Sin embargo, esta vez usaremos las funciones del complemento ACF. Como estamos usando el tema Twenty Twenty, tenemos que editar el archivo content.php en la twentytwenty/template-parts/ . Inmediatamente después del cierre de la sección interna, agregamos las siguientes líneas:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

En la vista frontal ahora podemos ver los campos personalizados.

Sin embargo, el campo de género no se muestra correctamente. Esto se debe a que contiene varios valores, por lo que la función get_field devuelve una matriz. Para arreglar esto tendremos que convertir la matriz a una serie de sus valores. Esto es fácil en PHP usando la función implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Si desea mostrar selectivamente algunos campos pero no todos en ciertas publicaciones, puede hacerlo usando algunos códigos abreviados de ACF. Para hacer esto, abra su publicación y luego agregue un bloque Gutenberg de código abreviado para cada campo e ingrese un código abreviado como este:

 [acf field="MY_CUSTOM_FIELD"/]

Reemplace MY_CUSTOM_FIELD con el nombre del campo y eso debería funcionar perfectamente.

Como podemos ver, el uso del complemento Advanced Custom Fields nos brinda una flexibilidad fantástica para crear campos personalizados y mostrarlos donde queramos.

Conclusión

Los desarrolladores de toda la industria confían en la función Campos personalizados en WordPress para ofrecer una mejor estructura y legibilidad a sus sitios web. Es otra función destacada de WordPress que una vez más ayuda a explicar por qué WordPress es tan popular. Esperamos que este artículo le haya brindado la información que necesita para agregar sus propios campos personalizados a su sitio web. ¡Feliz desarrollo!

Ver también

Tablas de la lista de administradores de WordPress: agregar filtros personalizados
Agregar campos personalizados a los elementos del menú de WordPress