Mostrar Custom Fields (ACF) en el Header de GeneratePress

Mostrar los Custom Fields (ACF) en la cabecera (Header) de GeneratePress

En este video-tutorial os cuento cómo incorporar los custom fields a las plantillas de los Headers del módulo Elements de GeneratePress. Esto lo podremos hacer muy fácilmente incorporando un pequeño trozo de código y utilizándolo mediante un shorcode. Después sólo tendremos que escribir qué custom fields queremos mostrar.

Los custom fields a GeneratePress

Si desea conocer cómo mostrar varias etiquetas a las plantillas del Header puede visitar la documentación del theme. Fácilmente se pueden mostrar las siguientes «etiquetas»:

  • Título de la entrada: {{post_title}}
  • Fecha de la entrada: {{post_date}}
  • Autor de la entrada: {{post_author}}
  • Nombre de la categoría: {{post_terms.taxonomy}}

Y también se pueden mostrar los custom fields que incorpora de serie WordPress. En este caso el código sería {{custom_field.name}}. Aquí sólo tendremos que sustituir el name por el término que hemos creado a partir de los custom fields de WordPress.

Pero el problema se produce cuando queremos incorporar los términos creados con el plugin Advanced Custom Fields. Porque en este caso los códigos anteriores no funcionan. Si queremos mostrar los mismos tendremos que seguir los siguientes pasos:

Primero. Creamos un shorcode para mostrar los custom fields

Incorporaremos un trozo de código. Este lo podemos insertar en nuestro plugin personal o utilizando el plugin Code Snippets.

add_shortcode( 'your_shortcode_tag','GB_acf_shortcode' );
function GB_acf_shortcode() {
    ob_start();
    ?> 
    <?php the_field('nombre custom fields'); ?>
    <?php
    return ob_get_clean();
}

Este trozo de código crea un shorcode (en este caso llamado ‘your_shortcode_tag’) que mostrará el custom fields que has creado con el plugin ACF y que quieres mostrar.

En este trozo de código tendremos que sustituir el término ‘número custom fields’ por el que hayas creado tú.

Segundo. Copia y pega el shorcode al header de GeneratePress

En este caso, y siguiendo el ejemplo anterior, utilizaremos el shorcode creado [your_shortcode_tag] para colocarlo en el Header de GeneratePress. De esta forma ya podemos mostrar, por ejemplo, el título de la entrada y debajo el custom fields que deseamos.

Video-tutorial de cómo mostrar un Custom Fields (ACF) en el Header de GeneratePress

Y así de sencillo. A partir de aquí podemos jugar con el CSS y modificar visualmente el Custom Field mostrado. Cambiando colores, tamaños, peso…

2 comentarios en «Mostrar los Custom Fields (ACF) en la cabecera (Header) de GeneratePress»

  1. Hola, gracias por el tutorial, es justo lo que busco, pero ese código hace que la web pete y tire error crítico. ¿Alguna idea de porqué?

    Responder
    • Ostra Juan,

      Pues no sé. He vuelto a probar todo el proceso y a mi me funciona. Si me das más pistas quizá te pueda ayudar un poco más.

      Un saludo!

      Responder

Deja un comentario

Identifícate