Ibon Azkoitia: ACF y el Top Banner #MaratonWP #10AniversarioAyudaWP

Aquí tienes otro gran artículo del #MaratonWP que estaremos realizando durante todo el día de hoy para celebrar el 10º aniversario de Ayuda WordPress. Sigue atento que cada hora habrá sorpresas, con regalos y más trucos WordPress, y no te pierdas el hashtag de Twitter #10AniversarioAyudaWP.

Advanced Custom Fields, ACF a partir de ahora, es uno de esos plugins que más utilizo en mis proyectos con WordPress. Con ACF podemos crear y gestionar nuestros propios campos personalizados y así poder introducir información adicional a nuestro contenido.

En este artículo os explicaré cómo podéis crear un banner en vuestra web y gestionarlo completamente desde el panel de administración de WordPress. Para ello, utilizaremos el plugin de ACF que nos facilitará la creación de la página de ajustes en el panel de administración junto con los campos personalizados que queramos utilizar.

Importante: en este ejemplo haremos uso de ACF PRO, ya que nos permite gestionar de forma sencilla la página de ajustes en nuestro panel de administración.

Paso 1 – Descarga/Compra e instalación

Lo primero que tenemos que hacer es hacernos con el plugin ACF PRO desde la página oficial. Como podéis ver, el precio es muy asequible y, además, es un único pago y no anual.

Si os dedicáis a realizar páginas web para clientes, lo ideal sería que os hicierais con la versión para desarrolladores. Esto os permitirá poder actualizar el plugin de forma sencilla en todas y cada una de las páginas web donde lo instaléis.

Una vez tenemos el plugin, lo subimos a nuestro WordPress y lo activamos.

Paso 2 – Crear los campos que vamos a necesitar gestionar

En este caso vamos a crear un banner para la parte superior de la web y, para este ejemplo, añadiremos lo siguiente a este banner:

• Un texto
• Un botón de llamada a la acción

Utilizaremos los campos de ACF para gestionar la información del texto y del botón, es por ello que necesitaremos los siguientes campos:

• Campo de Texto 1: aquí irá el texto del banner
• Campo de Texto 2: aquí irá el texto del botón (compra ahora, ver, etc.)
• Campo de URL: aquí pondremos la url a la que apunta el botón

Paso 2.1

Para crear los campos tenemos que ir a “Campos Personalizados -> Grupos de Campos -> Añadir Nuevo”

Paso 2.2

Comenzamos añadiendo el primer campo, en este caso será de tipo texto para que podamos añadir el texto del banner.

Importante: en este truco no entraremos en detalle en cada uno de los tipos de campos y opciones.

Los parámetros son los siguientes:

• Etiqueta del campo: este es el nombre que nosotros veremos en el panel de administración para saber a qué campo se refiere
• Nombre del campo: este es el nombre/id del campo en particular, es lo que usaremos para obtener la información en el Front-End. Siempre es aconsejable darles nombres “lógicos” y uniformes respecto al resto de campos.
• Tipo de campo: en este caso es de tipo texto (en otro, por ejemplo, será de tipo URL)

Paso 2.3

Creamos el resto de campos que vamos a necesitar, como puedes ver en la imagen, el “Nombre del campo” es uniforme en todos y nos ayudará a la hora de realizar la parte de programación.

Paso 3 – Crear la página de ajustes en el panel de administración

Ya tenemos los campos creados, es hora de añadirlos a una página de ajustes dentro de nuestro panel de administración del WordPress para que así podamos añadir esa información que necesitamos.

Para realizar esto, ACF nos ofrece una función que tenemos que pegar en nuestro archivo functions.php:

// Crear y añadir una página de ajustes
if ( function_exists( 'acf_add_options_page' ) ) {
    
    acf_add_options_page( array(
   	 'page_title'     => 'Ajustes del Top Banner',
   	 'menu_title'    => 'Top Banner',
   	 'menu_slug'   => 'ajustes-top-banner',
   	 'capability'      => 'edit_posts',
   	 'redirect'         => false
    ));
    
}

Y así es como quedaría:

Consejo: no tienes por qué crear una página de ajustes por cada funcionalidad que quieras añadir a tu página web. Puedes crear una página de ajustes e ir integrando ahí todas las funcionalidades utilizando Grupos y Pestañas que ACF te ofrece.

Paso 4 – Insertar los campos que hemos creado en esta página de ajustes

Nos dirigimos a nuestro “Grupo de Campos” y en “Ubicación” le asignamos nuestra página de ajustes.

Si ahora nos dirigimos a nuestra página de ajustes veremos que ya aparecen ahí nuestros campos, por lo que podemos meter nuestra información:

Paso 5 – Mostrar la información en nuestra página web

Ya tenemos los campos, la página de ajustes y nuestro contenido introducido en nuestro WordPress. Es el momento de hacer que esa información aparezca en la web.

Paso 5.1

Este es el código que vamos a utilizar en este ejemplo:

<div id="top-banner">
    <div class="site-inner">
      <p><?php echo the_field( 'top_banner_texto', 'option' ); ?> <a href="<?php echo the_field( 'top_banner_boton_enlace', 'option' ); ?>"><?php echo the_field( 'top_banner_boton_texto', 'option' ); ?></a></p>
    </div><!-- .site-inner -->
  </div><!-- #top-banner -->

Paso 5.2

En este ejemplo vamos a mostrar el banner en la parte superior de la página, es por ello que tenemos que introducir nuestro código en el header.php

Importante: siempre haced todos los cambios en un Tema Hijo y no en el tema padre directamente. Tenéis más información aquí sobre los temas hijo.

Importante: en este caso estamos utilizando el tema Twenty Sixteen. Quizás en vuestro tema las cosas se tengan que hacer de forma diferente o incluso mediante hooks (si por ejemplo usáis Genesis Framework).

Paso 5.3

Ya tenemos el contenido en la base de datos y el código para mostrarlo en el header.php. Si todo ha ido bien, deberíamos ver esto:

¡Enhorabuena! ya hemos hecho que el Top Banner funcione y aparezca donde queremos. Pero no vamos a dejarlo ahí, vamos a introducir más cosas para que sea más útil nuestro banner.

Paso 6 – Añadir “Activar / Desactivar” a nuestro banner

Es probable que no queramos tener por siempre nuestro banner ahí puesto (o quizás sí) es por ello que vamos a añadir la funcionalidad de activar/desactivar el banner.

Esto puede ser ideal para esas veces que queremos informar de algo importante a nuestros visitantes/usuarios y lo queramos hacer de forma puntual.

Paso 6.1

Nos dirigimos a nuestro Grupo de Campos “Top Banner” y añadimos un campo llamado Verdadero/Falso:

Truco 1: podemos arrastrar este campo a la parte superior por encima del resto de los campos para que sea lo primero que veamos

Truco 2: este campo tiene la opción de tener una UI mejorada, esto es, en vez de ver un “Checkbox” lo que veremos es un botón. El texto del botón se puede editar, pero como en este caso la pregunta que hacemos es “¿Activado?” las respuestas serán Sí/No

Truco 3: si decidimos que el Top Banner no esté activado… ¿Por qué deberíamos ver los campos de textos y botón? ¿No es mejor que no se vean para no confundir?

ACF nos permite añadir “Lógica Condicional” a los campos, por lo que podemos decir que los campos de Texto y URL no se muestren si el banner no está activado.

Paso 6.2

Hemos añadido la opción de activar o desactivar nuestro banner, pero ahora tenemos que añadir el código necesario para gestionar si muestra o no muestra el banner en nuestra web.

Para ello, utilizaremos el siguiente código:

<?php if ( get_field( 'top_banner_activado', 'option' ) ) { ?>
  <div id="top-banner">
    <div class="site-inner">
      <p><?php echo the_field( 'top_banner_texto', 'option' ); ?> <a href="<?php echo the_field( 'top_banner_boton_enlace', 'option' ); ?>"><?php echo the_field( 'top_banner_boton_texto', 'option' ); ?></a></p>
    </div><!-- .site-inner -->
  </div><!-- #top-banner →
<?php } ?>

Si el campo “top_banner_activado” está marcado (checkbox) o es Sí (botón), entonces, muestra el siguiente código (el código del banner).

Paso 7 – Más opciones

Hemos hecho lo más importante, añadir los campos para gestionar nuestro banner y hacer que se muestre. Pero ahora se podrían hacer más cosas, aquí tienes una lista con algunos ejemplos:

• Añadir los estilos CSS para que se vea como nosotros queremos
• Añadir más campos editables, por ejemplo alguna imágen, iconos etc.
• Añadir la opción de que el enlace se abra en una nueva pestaña con target=”_blank”, además, esta opción podemos ponerla con un checkbox.
• Añadir un title=”” al enlace y que sea editable desde el panel de administración
• Hacer que el botón se muestre antes o después del texto
• Y un sinfín de opciones gracias a los tipos de campos que nos ofrece ACF

Resumen

En este truco hemos visto lo que ACF nos puede ofrecer a la hora de añadir contenidos personalizados a nuestra página web. Os invito a instalar el plugin gratuito y a que probéis por vuestra cuenta todos los tipos de campos y opciones que tenemos.

¿Qué te ha parecido el truco? No dudes en dejar un comentario con tu opinión e ideas.

Ibon Azkoitia

Ibon Azkoitia, de Bilbao y actualmente viviendo en Madrid. Estudié y me formé para ser mecánico de competición, en circuitos de carreras concretamente, hasta que descubrí WordPress y comencé a trabajar con ello.

Comencé como Freelance bajo el nombre de Kreatidos y ahora mismo trabajo en SiteGround como Coordinador de Eventos.

Participo mucho en la Comunidad de WordPress. Me encanta todo lo relacionado con la comunidad y los eventos, es por ello que estoy involucrado en la sección de Meta, Meetups, WordCamps y como “deputy” de la Comunidad de WordPress internacional.

Comencé organizando la Comunidad de WordPress Bilbao y he organizado las dos WordCamp Bilbao, 2016 y 2017.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)