Desbloquea el poder del editor Gutenberg de WordPress mediante el uso de bloques personalizados.
Al utilizar el complemento Advanced Custom Fields (ACF), podrás ampliar significativamente tus capacidades de personalización. En este tutorial te explicaremos el proceso de creación de un bloque personalizado de Gutenberg utilizando ACF en un sitio WordPress.
Instalación del complemento Advanced Custom Fields
Para comenzar a crear tu propio bloque de Gutenberg, necesitas el plugin Advanced Custom Fields (ACF) instalado en tu sitio de WordPress. Si aún no está configurado, puedes descargarlo y instalarlo fácilmente desde Dirección del directorio de plugins de WordPress.
Creación de tu propio bloque personalizado
A continuación, navegue hasta Campo personalizado > Agregar nuevo Desde el panel de administración de WordPress. Escriba un título único para su bloque. Posteriormente, en la sección “Localización”, ajuste las reglas para que este grupo de campos indique si el bloque corresponde al nombre del bloque.
Agregar campos a tu bloque
Este paso implica definir qué contenido contendrá el bloque. Agregar campos a tu bloque que aparecerán en el editor cuando agregues el bloque a una publicación o página. Estos podrían ser texto, imágenes u otro tipo de contenido.
Registrar su bloque
Desplácese hacia abajo para encontrar la sección “Configuración de bloqueo”. Aquí, puede configurar el nombre del bloque (el nombre utilizado en el código), el título (el nombre visible en el editor), la descripción, la categoría e el icono. Asegúrese de marcar la opción “Activo” para que el bloque sea accesible para su uso.
Creación de la plantilla de bloque
Ahora es el momento de instruir a WordPress sobre cómo mostrar tu bloque. Para ello, crea un archivo de plantilla PHP en el directorio del tema con el nombre del bloque. Si el nombre de tu bloque es “testimonial”, tu archivo debería ser “block-testimonial.php”. Este archivo debería contener PHP y HTML para mostrar el contenido de tu bloque.
<code><?php
$heading = get_field('heading');
$content = get_field('content');
?>
<div class="testimonial-block">
<h2><?php echo $heading; ?></h2>
<p><?php echo $content; ?></p>
</div>
Utilizando su bloque personalizado
¡Felicitaciones, tu bloque personalizado está listo para ser utilizado en el editor de Gutenberg! Para usarlo, simplemente crea un nuevo post o página, haz clic en el botón “+” para agregar un nuevo bloque y encontrarás tu bloque personalizado en la lista.
Recuerde que el uso de la función ACF Blocks requiere el uso de ACF Pro, y esta función solo funciona con Gutenberg, el nuevo editor de bloques de WordPress. Además, verifique que su tema soporte Gutenberg. Si tiene dudas, lo mejor es consultar con el desarrollador del tema.
Siguiendo esta guía paso a paso, podrás aprovechar el poder de los bloques personalizados para llevar tu sitio web de WordPress al siguiente nivel. Experimenta con diferentes tipos de campos y crea bloques únicos para tu sitio. ¡Diviértete!
Pasos siguientes
Si te gustó este artículo y quieres aprender cómo seguir mejorando tu bloque ACF personalizado, consulta los siguientes artículos: