{"id":13330,"date":"2023-07-24T14:59:40","date_gmt":"2023-07-24T21:59:40","guid":{"rendered":"https:\/\/wordherd.io\/?p=13330"},"modified":"2023-07-24T14:59:40","modified_gmt":"2023-07-24T21:59:40","slug":"crear-un-bloque-de-gutenberg-personalizado-utilizando-acf","status":"publish","type":"post","link":"https:\/\/wordherd.io\/es\/blog\/creating-a-custom-gutenberg-block-using-acf\/","title":{"rendered":"Crear un bloque de Gutenberg personalizado utilizando campos personalizados avanzados (ACF) en WordPress: Parte 1"},"content":{"rendered":"

Desbloquea el poder del editor Gutenberg de WordPress mediante el uso de bloques personalizados. <\/p>\n\n\n\n

Al utilizar el complemento Advanced Custom Fields (ACF), podr\u00e1s ampliar significativamente tus capacidades de personalizaci\u00f3n. En este tutorial te explicaremos el proceso de creaci\u00f3n de un bloque personalizado de Gutenberg utilizando ACF en un sitio WordPress.<\/p>\n\n\n\n

Instalaci\u00f3n del complemento Advanced Custom Fields<\/strong><\/h2>\n\n\n\n

Para comenzar a crear tu propio bloque de Gutenberg, necesitas el plugin Advanced Custom Fields (ACF) instalado en tu sitio de WordPress. Si a\u00fan no est\u00e1 configurado, puedes descargarlo y instalarlo f\u00e1cilmente desde Direcci\u00f3n del directorio de plugins de WordPress<\/a>.<\/p>\n\n\n\n

Creaci\u00f3n de tu propio bloque personalizado<\/strong><\/h2>\n\n\n\n

A continuaci\u00f3n, navegue hasta Campo personalizado > Agregar nuevo<\/code> Desde el panel de administraci\u00f3n de WordPress. Escriba un t\u00edtulo \u00fanico para su bloque. Posteriormente, en la secci\u00f3n \u201cLocalizaci\u00f3n\u201d, ajuste las reglas para que este grupo de campos indique si el bloque corresponde al nombre del bloque.<\/p>\n\n\n\n

Agregar campos a tu bloque<\/strong><\/h2>\n\n\n\n

Este paso implica definir qu\u00e9 contenido contendr\u00e1 el bloque. Agregar campos a tu bloque que aparecer\u00e1n en el editor cuando agregues el bloque a una publicaci\u00f3n o p\u00e1gina. Estos podr\u00edan ser texto, im\u00e1genes u otro tipo de contenido.<\/p>\n\n\n\n

Registrar su bloque<\/strong><\/h2>\n\n\n\n

Despl\u00e1cese hacia abajo para encontrar la secci\u00f3n \u201cConfiguraci\u00f3n de bloqueo\u201d. Aqu\u00ed, puede configurar el nombre del bloque (el nombre utilizado en el c\u00f3digo), el t\u00edtulo (el nombre visible en el editor), la descripci\u00f3n, la categor\u00eda e el icono. Aseg\u00farese de marcar la opci\u00f3n \u201cActivo\u201d para que el bloque sea accesible para su uso.<\/p>\n\n\n\n

Creaci\u00f3n de la plantilla de bloque<\/strong><\/h2>\n\n\n\n

Ahora es el momento de instruir a WordPress sobre c\u00f3mo 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 \u201ctestimonial\u201d, tu archivo deber\u00eda ser \u201cblock-testimonial.php\u201d. Este archivo deber\u00eda contener PHP y HTML para mostrar el contenido de tu bloque.<\/p>\n\n\n\n

<code><?php \n  $heading = get_field('heading');\n  $content = get_field('content');\n?>\n<div class="testimonial-block">\n  <h2><?php echo $heading; ?><\/h2>\n  <p><?php echo $content; ?><\/p>\n<\/div>\n<\/code><\/code><\/pre>\n\n\n\n
Utilizando su bloque personalizado<\/strong><\/h2>\n\n\n\n
\u00a1Felicitaciones, tu bloque personalizado est\u00e1 listo para ser utilizado en el editor de Gutenberg! Para usarlo, simplemente crea un nuevo post o p\u00e1gina, haz clic en el bot\u00f3n \u201c+\u201d para agregar un nuevo bloque y encontrar\u00e1s tu bloque personalizado en la lista.<\/p>\n\n\n\n
Recuerde que el uso de la funci\u00f3n ACF Blocks requiere el uso de ACF Pro, y esta funci\u00f3n solo funciona con Gutenberg, el nuevo editor de bloques de WordPress. Adem\u00e1s, verifique que su tema soporte Gutenberg. Si tiene dudas, lo mejor es consultar con el desarrollador del tema.<\/p>\n\n\n\n
Siguiendo esta gu\u00eda paso a paso, podr\u00e1s 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 \u00fanicos para tu sitio. \u00a1Divi\u00e9rtete!<\/p>\n\n\n\n
Pasos siguientes<\/h2>\n\n\n\n
Si te gust\u00f3 este art\u00edculo y quieres aprender c\u00f3mo seguir mejorando tu bloque ACF personalizado, consulta los siguientes art\u00edculos:<\/p>\n\n\n\n