Cómo crear bloques CTA personalizados de Gutenberg en WordPress utilizando campos personalizados avanzados (ACF)

utilice Campos personalizados avanzados(ACF) puede crear fácilmente bloques personalizados para Gutenberg sin tener que dominar a fondo el JavaScript y otras técnicas avanzadas. En este artículo se detalla cómo crear un ACF a través de Personalizar la llamada a la acción(CTA) bloque, añada elementos a su sitio web que atraigan a los usuarios a hacer clic.

Por qué Gutenberg y Creación del ACF¿Bloques a medida?

El editor Gutenberg está disponible a través de "bloques", haciendo que la gestión de contenidos y la maquetación sean más fáciles y modulares. Al utilizar el ACF Un plugin que le permite crear bloques personalizados en el editor Gutenberg que se ajustan exactamente a sus necesidades, sin tener que escribir código JavaScript complejo. ACF proporciona una forma limpia para que los desarrolladores y diseñadores personalicen fácilmente los campos a través del backend de WordPress para crear bloques potentes y de aspecto único.

mover

1. Registre bloques personalizados: En la sección funciones.php para registrar bloques personalizados.
2. Cree un grupo de campos ACF: Cree campos personalizados que contengan títulos, descripciones, botones, etc.
3. Cree una plantilla de bloque: Escriba un archivo de plantilla utilizando PHP para definir la presentación frontal del bloque.
4. Añada estilos personalizados: Estilice los bloques con archivos CSS para adaptarlos al estilo de diseño de su sitio web.
5. Uso de bloques en Gutenberg: Inserte el bloque CTA creado en una página o post para empezar.

Paso 1: En el funciones.php Registro de bloques personalizados en el archivo

En primer lugar, debe añadir el funciones.php Registrar bloques personalizados en el fichero (fondo). Los bloques personalizados se registran en el fichero (inferior) proporcionado por el ACF a través de la función acf_register_block_type() puede ser muy fácil registrar un nuevo bloque.

function register_custom_cta_block() {
    if (function_exists('acf_register_block_type')) {
        acf_register_block_type(array(
            'name' => 'custom_cta',
            'title' => __('Bloque CTA personalizado'),
            'description' => __('Un bloque personalizado de llamada a la acción con una imagen, un título, una descripción y un botón.'),
            'render_template' => 'template-parts/blocks/custom-cta.php',
            'categoría' => 'común',
            'icono' => 'megáfono',
            'keywords' => array('cta', 'llamada a la acción', 'botón'),
            'enqueue_style' => get_template_directory_uri() . '/template-parts/blocks/custom-cta.css',
        ));
    }
}
add_action('acf/init', 'register_custom_cta_block');

En este código, se realiza la siguiente configuración:

• nombre: Establece el identificador único del bloque personalizado.
• título: El nombre para mostrar del bloque en el editor Gutenberg.
• descripción: Breve descripción de la función del bloque.
• render_template: Especifica la ruta al archivo de plantilla PHP que renderiza el contenido del bloque en el frontend.
• categoría: Especifica la clasificación del bloque, determinando dónde aparecerá en el editor Gutenberg.
• icono: Configure los iconos de bloque para identificarlos fácilmente en Gutenberg.
• palabras clave: Establezca palabras clave para facilitar a los usuarios la búsqueda del bloque.
• enqueue_style: Especifica la ruta a la hoja de estilos del bloque para cargar estilos.

Paso 2: Crear grupos de campos ACF para bloques

A continuación, deberá crear los grupos de campos ACF instalando primero el plugin ACF. Esto le permitirá rellenar la información necesaria en el editor de Gutenberg, como por ejemploleyendaydescripcionesyTexto del botónyfotografíaetc.

1. Inicie sesión en el backend de WordPress y vaya a ACF > Grupos de campos.

2. golpe (en el teclado) Añadir nuevo grupo de campos, cree un archivo llamado "Campos personalizados del bloque CTA" para el grupo de campo.

3. Añada los siguientes campos a este grupo de campos:
   • Título (Texto): Añada un campo para el título del bloque CTA.
   • Descripción (Área de texto): Añade un campo de área de texto al bloque CTA para la descripción.
   • Imagen: Añade un campo de imagen al bloque CTA.
   • Texto del botón (Texto): Añade un campo de texto de botón al bloque CTA.
   • URL del botón (URL): Añada un campo de enlace de botón al bloque CTA.
   • Color de fondo (Selector de color): Añade un campo selector de color al bloque CTA para establecer el color de fondo.

4. existe Normas de posicionamiento Establezca la condición en la regla como "Bloque igual a bloque CTA personalizado".Si utiliza un bloque personalizado, deberá utilizar aquí la versión ACF Pro. De esta forma, los campos ACF sólo aparecerán si se utiliza este bloque personalizado.

Paso 3: Crear una plantilla de bloques

Ahora que se ha registrado el bloque personalizado y se han creado los campos apropiados, lo siguiente que tenemos que hacer es crear un archivo de plantilla para representar el contenido del bloque.

1. En su directorio de temas, navegue hasta template-parts/blocks/ Carpeta. Si la carpeta no existe, deberá crearla.
2. Cree un nuevo archivo en esta carpeta llamado custom-cta.php.
3. existe custom-cta.php utilice el siguiente código para mostrar el contenido de los campos:

<?php
$ítulo = get_campo('título');
$description = get_field('descripción');
$image = get_field('imagen');
$button_text = get_field('button_text');
$button_url = get_field('button_url');
$background_color = get_field('background_color');
?>

<div class="custom-cta-block" style="color-de-fondo: ">
    <?php if ($image): ?>
        <img src="" alt="" class="cta-image" />
    <?php endif; ?>

    

        <?php if ($title): ?>
            

        <?php endif; ?>

        <?php if ($description): ?>
            
</p
        <?php endif; ?>

        <?php if ($button_text && $button_url): ?>
            <a href="" class="cta-button">
                <?php echo esc_html($button_text); ?>
            
        <?php endif; ?>