Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir cajas meta personalizadas en entradas y tipos de entradas de WordPress

Nota editorial: Ganamos una comisión de los enlaces de socios en WPBeginner. Las comisiones no afectan a las opiniones o evaluaciones de nuestros editores. Más información sobre Proceso editorial.

¿Desea crear cajas meta personalizadas para sus entradas, páginas y tipos de contenido personalizados en WordPress?

WordPress añade metadatos a su contenido automáticamente, como la fecha de publicación, las categorías y las etiquetas. Sin embargo, también puede añadir sus propios metadatos personalizados.

En este artículo, le mostraremos cómo añadir fácilmente información única a su contenido, creando una caja meta de datos personalizada en WordPress.

How to add custom meta boxes in WordPress posts and post types

¿Qué es una caja meta personalizada en WordPress?

Cuando creas entradas y páginas, o tipos de contenido personalizados en WordPress, ese contenido suele tener sus propios metadatos. Estos metadatos son información relacionada con el contenido, como la fecha y la hora, el nombre del autor, el título, etc.

También puede añadir sus propios metadatos utilizando el cuadro de campos personalizados por defecto.

Adding custom meta boxes in WordPress posts

Consejo profesional: ¿No ves el cuadro de campos personalizados en el editor de entradas? Entonces consulte nuestra guía sobre cómo corregir los campos personalizados que no se muestran en WordPress.

El cuadro Campos personalizados es una buena solución si sólo desea añadir metadatos personalizados a unas pocas entradas. Sin embargo, si planea añadir mucha información única a su contenido, entonces tiene sentido crear un cuadro de metadatos personalizados.

De hecho, muchos de los plugins más populares de WordPress añaden cajas meta personalizadas a la pantalla de edición de entradas y páginas. En la siguiente imagen, puedes ver lo fácil que es añadir información SEO a tus entradas, utilizando una caja meta personalizada proporcionada por AIOSEO.

The All in One SEO (AIOSEO) WordPress plugin

Dicho esto, veamos cómo puede añadir fácilmente cajas meta personalizadas en entradas y tipos de entradas de WordPress.

Cómo añadir cajas meta personalizadas en entradas y tipos de entradas de WordPress

La forma más sencilla de añadir cajas meta personalizadas a WordPress es utilizando Advanced Custom Fields. Este plugin le permite adjuntar todo tipo de información adicional a sus entradas y páginas, y luego mostrar esos datos a los visitantes mediante un shortcode.

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.

Crear una caja meta personalizada

Una vez activado, visite la página ACF ” Grupos de campos desde la barra lateral del administrador de WordPress.

Aquí, haga clic en el botón “Añadir nuevo”.

Adding a custom field to your WordPress website

Ahora puede crear los campos personalizados que aparecerán en el cuadro de metadatos.

Para empezar, tendrás que escribir un título en el campo que muestra por defecto ‘Título del grupo de campos’. Esto aparecerá en el editor de contenido de WordPress, y se utilizará como el título de su caja meta.

Dicho esto, deberías usar algo descriptivo, especialmente si gestionas un blog de WordPress con varios autores o compartes el escritorio con otras personas.

How to easily add custom meta data to your website or blog

Una vez hecho esto, está listo para añadir el primer campo a su caja meta.

Añadir campos personalizados a la caja meta de WordPress

Para empezar, abra el menú desplegable “Tipo de campo” y elija el tipo de campo que desea añadir, como el selector de fecha, la casilla de verificación o el campo de texto.

Adding custom fields to the WordPress content editor

A continuación, escriba una etiqueta para el campo.

Los campos personalizados avanzados mostrarán esta etiqueta antes del campo, para ayudar a los usuarios a comprender qué información deben introducir.

The Advanced Custom Fields WordPress plugin

Advanced Custom Fields generará el ‘Nombre del campo’ automáticamente, por lo que puede dejar este campo vacío.

Una vez hecho esto, es posible que desee escribir un ‘Valor por defecto’. Esto se añadirá a la página, entrada o tipo de contenido personalizado automáticamente si el usuario no añade su propia información.

Adding default values to custom WordPress fields

Es posible que vea más opciones dependiendo del tipo de campo que esté creando. Por ejemplo, si ha seleccionado “Imagen” en el menú desplegable “Tipo de archivo”, podrá elegir el formato de la imagen.

La mayoría de estas opciones se explican por sí mismas, por lo que puede seguir las instrucciones que aparecen en pantalla para configurar el campo personalizado.

Cuando esté satisfecho con cómo se ha establecido el campo, haga clic en el botón “Cerrar campo” para cerrar la sección.

Adding custom data to a website or blog

Ahora puede añadir más campos a la caja meta personalizada al hacer clic en el botón “Añadir campo”.

A continuación, sólo tiene que configurar el campo siguiendo el mismo proceso descrito anteriormente.

Saving a custom field group

Añadir una caja meta personalizada al editor de contenido de WordPress

Cuando esté satisfecho con cómo se ha establecido la caja meta personalizada, tendrá que definir dónde y cuándo aparecerá la caja meta.

Para ello, desplácese hasta la sección “Ajustes” y haga clic en la pestaña “Reglas de ubicación”.

Controlling where custom content appears in the WordPress content editor

Advanced Custom Fields puede añadir la caja a todo tipo de contenido. Por ejemplo, puede mostrar la caja meta en determinados tipos de entradas, categorías, taxonomías, menús de navegación, etc.

Simplemente utilice los menús desplegables para elegir dónde aparecerá la caja meta en su escritorio de WordPress. Por ejemplo, si aceptas entradas de invitados, puedes añadir el cuadro a todas las entradas de la categoría “Entradas de invitados”.

Creating content rules using a WordPress plugin

A continuación, haga clic en la pestaña “Presentación”.

Aquí puede elegir el estilo de la caja meta, dónde aparecerá en su blog de WordPress y dónde aparecerán la etiqueta y las instrucciones.

ACF's presentation settings in the WordPress dashboard

Si tiene previsto añadir varias casillas en el mismo lugar, puede cambiar el orden en que aparecen escribiendo en el campo “Número de pedido”.

Por ejemplo, mostrar las cajas meta más importantes en la parte superior de la pantalla puede mejorar el flujo de trabajo editorial.

Si no está seguro, puede dejar este campo establecido en 0.

Reorganizing fields in the WordPress content editor

En esta pantalla, también verá un catálogo de todos los campos que WordPress suele mostrar en la pantalla de edición de entradas.

Si desea ocultar un campo, simplemente marque / compruebe su casilla. Por ejemplo, si utiliza campos personalizados para crear un cuadro de información sobre el autor, puede ocultar el campo “Autor” por defecto.

Hiding fields in the WordPress post editor

Cuando esté satisfecho con los cambios realizados, haga clic en “Guardar cambios” para activar el grupo de campos.

Ha creado correctamente una caja meta personalizada para su entrada, página o tipo de contenido personalizado en WordPress. Dependiendo de sus ajustes, ahora puede visitar el editor de entradas para ver la caja meta personalizada en acción.

An example of a custom meta data box, created using a free WordPress plugin

Visualización de los datos de su caja meta personalizada en el tema de WordPress

Ha añadido correctamente una caja meta personalizada al escritorio de WordPress. Cualquier información que los usuarios escriban en la caja meta será guardada en la base de datos de WordPress cuando guarden o publiquen la entrada. Sin embargo, esta información no aparecerá en su sitio web por defecto.

Con esto en mente, asegurémonos de que los metadatos personalizados aparecen en su tema de WordPress, para que los visitantes puedan verlos.

Puede hacerlo mediante shortcode o editando los archivos de su tema de WordPress.

Cómo mostrar metadatos personalizados mediante shortcode

Añadir un shortcode en WordPress es el método más sencillo, y le permite controlar exactamente dónde aparece la información en su sitio web.

Por ejemplo, si ha creado un campo “Valoración / puntuación de estrellas”, puede mostrar esta información después del título de la entrada, dentro del contenido, en el pie de página o en cualquier otro lugar simplemente añadiendo un shortcode.

Sin embargo, tendrá que añadir manualmente un shortcode a cada página, entrada o tipo de contenido personalizado. Esto puede llevar mucho tiempo y esfuerzo, especialmente si tienes mucho contenido.

Para obtener el shortcode de un campo, vaya a ACF ” Grupos de campos. A continuación, pase el cursor sobre el grupo de campos que desee mostrar y haga clic en el enlace “Editar” cuando aparezca.

Editing a meta data field group

Ahora verá todos los campos que componen este grupo.

Para cada campo que desee visualizar, anote el valor en el campo “Nombre”.

How to show custom data in your WordPress theme using shortcode

Una vez hecho esto, vaya a la página, entrada o tipo de contenido personalizado en el que desea mostrar los metadatos personalizados.

Ahora puede hacer clic en el icono “+” y escribir “Shortcode”.

Adding shortcode to a WordPress page or post

Cuando aparezca el bloque adecuado, haga clic para añadirlo a su estructura / disposición / diseño / plantilla.

Ahora puede añadir el siguiente shortcode al bloque, asegurándose de sustituir "article_byline" por el nombre del campo que desea mostrar.

Adding custom meta data to a WordPress theme

Ahora puede repetir estos pasos para añadir varios campos personalizados a la entrada.

Cuando esté satisfecho con los cambios realizados, haga clic en el botón “Publicar” o “Actualizar”. Ahora, simplemente visita tu sitio web WordPress para ver los metadatos personalizados en acción.

An example of custom meta data, displayed using a shortcode

Cómo mostrar metadatos personalizados editando su tema de WordPress

Si desea mostrar metadatos personalizados en la misma ubicación en cada página, entrada o tipo de contenido personalizado, puede añadir código a los archivos de su tema de WordPress.

Esto puede ahorrarte tiempo a largo plazo, pero no es el método más adecuado para principiantes. También perderás todo el código personalizado la siguiente vez que actualices tu tema de WordPress, por lo que te recomendamos crear un tema hijo. Entonces podrás añadir tu código personalizado al tema hijo.

Si no ha editado antes los archivos de su tema, eche un vistazo a nuestra guía para principiantes sobre cómo copiar y pegar código en WordPress.

Tendrás que editar el archivo donde quieres mostrar los metadatos personalizados. Esto variará en función de tu tema, pero normalmente tendrás que editar el archivo single.php, content.php o page.php de tu sitio.

Una vez que tenga el archivo correcto, tendrá que añadir el código dentro del bucle de WordPress. Para encontrar este bucle, simplemente busque el siguiente código que se parece a esto:

	<?php while ( have_posts() ) : the_post(); ?>

A continuación, puede pegar su código después de esta línea y antes de la línea que finaliza el bucle:

	<?php endwhile; // end of the loop. ?>

A modo de ejemplo, el código de su campo personalizado debería tener este aspecto:

	<h2 class="article-byline"><?php the_field('article_byline'); ?></h2>

Fíjate en cómo hemos envuelto el código en un encabezado h2 con una clase CSS. Esto nos permite dar formato y estilo al campo personalizado más tarde añadiendo CSS personalizado a nuestro tema.

He aquí otro ejemplo:

<blockquote class="article-pullquote">
 
<?php the_field('article_pullquote'); ?>
 
</blockquote> 

Cuando añadas código a tu tema, no olvides sustituir los nombres de los campos.

Una vez hecho esto, puede visitar cualquier entrada en la que ya haya introducido datos en los campos personalizados. Ahora verás tus metadatos únicos en acción.

How to add custom fields to a WordPress theme

Esperamos que este artículo te haya ayudado a aprender cómo añadir cajas meta personalizadas en entradas y tipos de entradas de WordPress. Puede que también quieras ver nuestra guía sobre cómo crear flujos de trabajo automatizados en tu sitio WordPress o ver nuestra selección experta de los mejores plugins y herramientas SEO que deberías usar.

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

16 comentariosDeja una respuesta

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Michele says

    Hi, does your plug in also sets the position for the existing metas in WP, such as date or author?
    I need to visualize the data before the title and can’t find a way.
    Thank you, bye!

  3. amazigh says

    hi thanks very much for your very useful plugin.
    just i would like to know if there are any way to add calendar Field as meta-box

  4. Cristina says

    I just want to say that I **love** your blog.
    It covers everything and anything from basic to expert level and always offers alternatives and/or links to dig into in case one needs more advanced instructions.
    I have been working with WordPress on a daily basis for a few years now, but I still look forward to your newsletters and always check in to see if there’s anything there for me, even only inspiration for new stuff to learn and implement on my websites!
    So, from the bottom of my heart, thank you!
    :-)

  5. Marijn says

    Hi, thanks for this explanation!
    I created a custom checkout field (2nd email adress) for WooCommerce without the use of Advanced Custom Field plugin.
    How can I create a meta box with this plugin for this custom checkout field? The location settings (which edit screens will use these advanced custom fields) doesn’t have the option for checkout pages?
    Thanks in advance!

  6. eze says

    wp beginner please u guys didn’t add what was needed on how to start a blog.. like adding a portfolio, adding an e-book for sale and other similar things like this

  7. Alan says

    I want to add a custom field for a custom taxonomy and then have that output on every post with that particular taxonomy. Does anyone know if this is possible?

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.