Comprender las bases y el punto de partida

1

Gestión de Contenidos Avanzada en WordPress

2

Entornos de Desarrollo Personalizados con Warp y Flight Bill

3

Creación de Tienda Online en WordPress con Gutenberg

Crear Post Types y Archivos

4

Organización de Contenidos en WordPress: Taxonomías y Etiquetas

5

Creación de Archivos PHP en WordPress para Mostrar Categorías

6

Mejorando la Navegabilidad en Sitios Web con WordPress

7

Personalización de Post Types en WordPress

8

Diferenciar Interfaces de Productos y Novedades en WordPress

9

WordPress: Crear Menú de Productos Relacionados con Loop Personalizado

10

Registro de Taxonomías Personalizadas en WordPress

11

Personalización de Páginas en WordPress con Advanced Custom Fields

Utilizar AJAX

12

Configuración de Formularios y Correos en WordPress

13

Desarrollo de Funciones Ajax en WordPress con PHP y JavaScript

14

Filtro de Productos con PHP y JavaScript en WordPress

15

Filtrado Dinámico de Productos en WordPress con PHP y JavaScript

La REST-API de WordPress

16

Uso del API REST de WordPress para integración y gestión de contenido

17

Creación de Endpoints Personalizados en WordPress API

18

Integración de API de WordPress en la Página Principal

Utilizar Bloques

19

Creación y Uso de Bloques en el Editor Gutenberg de WordPress

20

Creación de Bloques Personalizados en WordPress con PHP y JavaScript

21

Creación de Bloques Editables en WordPress con React

22

Bloques Dinámicos en WordPress: Creación y Uso Avanzado

23

Uso de InspectorControls en Bloques de WordPress

24

Registro y Personalización de Bloques en WordPress con ACF

25

Creación de Bloque Nativo con Renderizado del Lado del Servidor (SSR)

Deployment

26

Migración de un Sitio WordPress de Local a Servidor Real

27

Optimización SEO e Indexación con Plugins para Sitios Web

28

Seguridad y Configuración de Wordfence en Sitios WordPress

Finalizar el Curso

29

Creación y Personalización de Sitios Web con WordPress

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Registro y Personalización de Bloques en WordPress con ACF

24/29
Recursos

¿Cómo crear bloques personalizados en Gutenberg utilizando ACF?

Cuando hablamos de desarrollo web en WordPress, la flexibilidad y personalización son fundamentales para atender las necesidades de cada proyecto. Gutenberg, el editor de bloques de WordPress, nos permite crear y diseñar páginas de manera intuitiva. Sin embargo, para los desarrolladores que buscan ir más allá de las funcionalidades nativas, Advanced Custom Fields (ACF) se presenta como una herramienta invaluable para la creación de bloques personalizados.

¿Qué es Advanced Custom Fields?

ACF es una herramienta que facilita la creación de campos personalizados en WordPress, permitiendo a los desarrolladores expandir las funcionalidades básicas del editor de bloques. Con ACF, es posible integrar campos personalizados, mejorar la administración de datos y proporcionar una experiencia más rica para los usuarios del backend. En el contexto de Gutenberg, ACF permite extender las opciones nativas de WordPress para la creación de bloques personalizados.

¿Por qué usar ACF para crear bloques?

Integrar ACF para crear bloques personalizados en Gutenberg trae múltiples beneficios:

  • Ahorro de tiempo: Herramientas como ACF simplifican el desarrollo, reduciendo el tiempo y esfuerzo necesarios para crear bloques complejos.
  • Inversión única: Adquirir la licencia de ACF es una inversión que se realiza una sola vez y provee actualizaciones contínuas.
  • Flexibilidad de diseño: Posibilita la personalización ilimitada de bloques, confinando únicamente a la creatividad del desarrollador.
  • Compatibilidad y actualizaciones: ACF se adapta constantemente a las nuevas versiones de WordPress, como fue el caso con la integración de Gutenberg.

¿Cómo registrar un bloque usando ACF?

La creación de un bloque personalizado con ACF en WordPress se divide en varios pasos esenciales. Aquí te guío en cada uno de ellos:

  1. Registro de la función en function.php: Se define la función acf_register_block sin parámetros, utilizando acf_register_block_type para recibir un array con los argumentos para el bloque.

    function acf_register_block() {
        acf_register_block_type(array(
            'name' => 'custom-block',
            'title' => __('Bloque Institucional'),
            'category' => 'formatting',
            'icon' => 'smiley',
            'render_template' => plugin_dir_path(__FILE__) . 'template/institutional.php',
            'mode' => 'preview',
        ));
    }
    add_action('acf/init', 'acf_register_block');
    
  2. Definición de los parámetros del bloque: Los parámetros incluyen el nombre, título, categoría, icono, y template para definir la ruta al archivo PHP que rendereará el bloque.

  3. Creación del archivo de renderizado: Se debe crear el archivo institutional.php dentro de la carpeta de plantillas. Este archivo deberá incluir la estructura PHP requerida para mostrar los campos personalizados definidos anteriormente.

    <?php
    if (have_rows('fields_group')) : 
        while (have_rows('fields_group')) : the_row();
            // Mostrar campos personalizados
        endwhile;
    endif;
    ?>
    

¿Cómo se personaliza la vista de administración?

Una de las grandes ventajas al usar ACF para crear bloques es la capacidad de modificar la manera en que los bloques se muestran y se editan dentro del editor de WordPress. Con el modo 'mode' => 'preview', los desarrolladores pueden habilitar una vista previa, lo cual permite que tanto administradores como editores visualicen el diseño final antes de publicar.

Conclusión: Un reto para poner en práctica lo aprendido

Ahora que conoces el proceso para crear bloques personalizados con ACF, te invito a crear una página de contacto usando los conocimientos adquiridos. Desarrolla un formulario con campos personalizados integrando los hooks correspondientes para mejorar tu sitio web. Comparte tus resultados o pregunta tus dudas en la zona de comentarios. ¡Sigue aprendiendo y potenciado tu desarrollo con WordPress!

Aportes 11

Preguntas 0

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

ACF es super útil, y puedes crear los campos desde el admin con más facilidad. Este plugin junto con los Custom post type te permiten hacer cosas muy divertidas en Wordpress

Con ACF Pro vienen tipos de campo muy interesantes, aparte de ACF Block tiene a su disposición estos campos:

ACF Repeater Fields: este nos permite crear un campo que sea repetitivo, a este campo agregamos los sub field que queremos que tenga, por ejemplo si quieres una lista de libros, puedes poner un repartidor que se llame libros y los subfields que sean el título de tipo texto y el cover que sea tipo imagen, así podrás visualmente agregar los libros que quieras.

The Flexible Content Field: esta es una función muy interesante donde puedes generar una plantilla por módulos donde puedes editar visualmente las diferentes secciones de tu página. https://www.advancedcustomfields.com/resources/flexible-content/

Options Pages: puedes generar la página de opciones para tu tema donde podrás poner las opciones para información general de la página(Logos , horarios, dirección, etc), también la opción de configuración de colores básicos del sitio web y todo lo que consideremos como configuración general.

The Gallery Field: Nos permite agregar un nuevo campo de galería que como su nombre es claro es para poder crear más amigablemente un campo de galería.

The Clone field: este es muy interesante cuando hay campos que generalmente se repiten en tus ACF, por ejemplo tienes varios campos que se repiten en tus módulos de flexible content, todos los módulos tienen campo llamado headings(incluye titulo, sub heading caption, etc) entonces crear un field goup llamado heading option y luego en cada módulo donde quieras agregar estas opciones agregas un clone que clone los campos del grupo que creamos.https://www.advancedcustomfields.com/resources/clone/

Lastima que cambiaron los precios para ACF pro, ahora solo tienen planes anuales 😕

que bueno , pero solo fue imaginarlo pq no tengo licencia de acf

no creo que los estudiantes paguen 49 dolares solo por un plugin …

No pude probar lo de los bloques por la licencia anual!!! Qué lastima que cambiaron el plan de pago por su versión anual =(

He utilizado ACF, aunque no tan a fondo como se muestra acá, pero si he utilizado POD’s. Hoy uso JetEngine.
Estas herramientas amplian exponencialmente las capacidades con el manejo de los custom post type, custom fields, custom content type, que creo muy recomendable revisarlas, sobre todo la última.

Me encanta el curso, no se usar react por ahora casi pero al ver estas clases, me motiva a aprender a usarlo

Perfectamente claro. Gracias

En ACF PRO se incluye un potente marco basado en PHP para desarrollar tipos de bloques personalizados.

Los bloques ACF son altamente personalizables y poderosamente dinámicos. Se integran profundamente con campos personalizados que permiten a los desarrolladores de PHP crear soluciones a medida en línea con el desarrollo de temas de WordPress.

Block Lab es un plugin gratuito que nos permite crear bloques personalizados de una forma realmente fácil.

De momento el único inconveniente es que tiene pocos tipos de campo disponibles, pero están desarrollando muchos más.

Una vez instalado el plugin tendremos la opción de crear un nuevo bloque escogiendo el tipo de bloque, el icono para identificarlo, palabras clave para clasificarlo, así como los campos y el tipo de cada uno que formarán el bloque en sí. (Si has utilizado ACF para crear campos personalizados, la interfaz te será conocida porque es muy similar)