El editor de bloques Gutenberg, el editor de contenido de WordPress, tiene más de 81 millones de instalaciones activas. Debido a la naturaleza dominante del mercado de WordPress y la naturaleza intuitiva del diseño de este editor, no es de extrañar que este sistema sea tan popular.
Gutenberg es un creador de páginas y editor de contenido accesible de arrastrar y soltar. Ofrece muchas funcionalidades, junto con diversos enfoques que puedes utilizar para crear el sitio web de tus sueños.
Este editor se basa en bloques de Gutenberg, diversas unidades de contenido que componen las páginas y el diseño de un sitio web.
Puedes obtener estos bloques de la biblioteca de bloques de WordPress. Esta biblioteca es extensa, pero no siempre tiene el bloque exacto que necesitas para tu sitio web.
Por lo tanto, si eres un emprendedor que desea una funcionalidad avanzada del sitio web o elementos especializados que aún no ofrece Gutenberg, es posible que te interese utilizar bloques personalizados de Gutenberg en tu sitio web de WordPress.
Gutenberg: el editor de contenido principal de WordPress
El editor Gutenberg es el núcleo del marco de edición de contenido de WordPress. Su estructura basada en bloques facilita la creación de un sitio web de WordPress y todas sus páginas, incluso para los principiantes.
Con este editor, puedes crear contenido rico en medios en WordPress eligiendo los nuevos bloques que necesitas. A continuación, puedes dimensionarlos como desees y añadir los elementos específicos que quieras que aparezcan en cada página.
¿Qué son los bloques de Gutenberg?
En Gutenberg, cada página o entrada se compone de una colección de elementos autónomos.
Utilizas estos elementos, o bloques, para construir páginas, entradas y todo lo demás en tu sitio web de WordPress.
El bloque más popular es el bloque de párrafo, seguido de los bloques de imagen y encabezado. Otros ejemplos de tipos de bloques son los títulos, el texto, los divisores, los widgets y los vídeos.
Como mencionamos anteriormente, puede acceder a los bloques de WP a través de la Biblioteca de bloques. Puedes encontrarlo haciendo clic en el + en la parte superior izquierda de la barra de herramientas de WordPress mientras editas una página o publicación.
Pero, ¿qué pasa si la biblioteca de WordPress no ofrece el tipo de bloque que estás buscando? ¿O algún marcador de posición que pueda actualizar para adaptarlo a sus necesidades?
Ahí es donde entran en juego los bloques personalizados.
¿Qué son los bloques personalizados de Gutenberg?
Gutenberg permite a cualquiera crear activos gratuitos. Entonces, si tiene experiencia en codificación y desarrollo web, puede crear bloques personalizados mientras crea su sitio web.
Los bloques personalizados ofrecen aún más flexibilidad y funcionalidad específica de nicho que los bloques predeterminados.
Los usuarios crean bloques personalizados para crear elementos de página únicos.
Los bloques personalizados de Gutenberg ofrecen muchas ventajas, entre ellas:
- Puedes diseñar elementos de WordPress visualmente atractivos y ricos en medios seleccionados para las necesidades de tu negocio.
- Añaden funcionalidades únicas y avanzadas a tu sitio web.
- Mejoran el aspecto estético de sus páginas y ayudan a que su negocio se destaque entre la multitud.
- Solo necesita codificar bloques una vez. Después de eso, puede usarlos en todos sus sitios web y páginas.
Sin embargo, los bloques personalizados vienen con algunos desafíos. Por un lado, fabricarlos requiere un conocimiento técnico profundo. Además, necesitarás algunos conocimientos específicos de codificación y herramientas de desarrollo.
Cómo conseguir bloques personalizados de Gutenberg para WordPress
Para conseguir bloques personalizados de Gutenberg, tienes que construirlos tú mismo o comprarlos.
La creación de bloques personalizados no está en el conjunto de habilidades de todos, pero eso no es un problema. Puedes comprar bloques personalizados de Gutenberg en lugar de construirlos tú mismo. Para ello, busca un desarrollador de primera categoría en el que confíes y luego trabaja con él para crear tus bloques ideales.
Si planeas crear estos bloques tú mismo, hay algunas cosas que debes considerar antes de comenzar.
Qué hay que tener en cuenta antes de crear bloques personalizados
Crear un bloque personalizado de Gutenberg requiere tiempo y energía. Antes de comenzar el proceso, debe asegurarse de haber agotado todas sus otras opciones.
Puede verificar que no hay otros enfoques adecuados mirando cuidadosamente a través de la biblioteca de bloques predeterminados de Gutenberg. Asegúrate de que no haya ningún bloque existente que proporcione las funciones básicas o las especificaciones de estilo que necesitas.
Y si has determinado que necesitas un bloque personalizado, describe las especificaciones vitales de tu bloque antes de empezar a construirlo. Piensa en los elementos estéticos, la configuración predeterminada y las características principales. Además, tenga en cuenta las especificaciones de la barra de herramientas y otras características estilísticas y funcionales clave.
Lo que necesitas para construir bloques personalizados de Gutenberg
Una vez que determine los aspectos más esenciales de su bloque, hay algunos requisitos clave más que deberá cumplir antes de comenzar el proceso.
Un sitio web activo de WordPress es esencial. Y necesitará al menos algo de experiencia con JavaScript y herramientas de compilación de JavaScript, como Node.js.
También necesitarás conocimientos intermedios de HTML, CSS y PHP para crear tus propios bloques personalizados.
Si no estás muy versado en esta área, no te preocupes. Puedes ahorrar tiempo y estrés contratando a expertos en diseño web para que te ayuden a construir bloques.
Cómo crear bloques personalizados de Gutenberg en WordPress
Hay dos enfoques accesibles para construir bloques personalizados de Gutenberg. Puedes instalar un plugin fácil de usar que simplifique el proceso o construirlos desde cero utilizando código HTML/CSS o PHP.
Creación de bloques personalizados con un plugin
Hay una serie de plugins de WordPress para la creación de bloques disponibles que agilizan el proceso de creación de bloques personalizados de Gutenberg para tu sitio de WordPress. Recomendamos usar Genesis Custom Blocks.
Para crear tu primer bloque con este plugin:
1. Instalar bloques personalizados de Genesis
Primero, navega a Plugins > Add New en la barra lateral izquierda de tu panel de administración y busca Genesis en el Directorio de Plugins de WordPress. Instálalo y haz clic en el botón Activar .
2. Crea un nuevo bloque
A continuación, vaya a Bloques > personalizados Agregar nuevo para crear un bloque.
3. Configurar las especificaciones del bloque
Ahora, puede seleccionar un nombre de bloque y, a continuación, configurar y personalizar sus propiedades. Para ayudar con la optimización de motores de búsqueda (SEO), agregue palabras clave relevantes.
A continuación, añade campos, como números, imágenes y casillas de verificación, pulsando el botón + . Deberá ingresar más especificaciones, como Etiqueta de campo, Ubicación del campo y Texto de ayuda. También puede reordenar, editar y eliminar campos.
4. Construye tu plantilla.
A continuación, puedes crear tu plantilla con HTML y CSS o PHP, dependiendo de la salida de tu bloque.
Si tu bloque está configurado para HTML y CSS, puedes usar el Editor de plantillas del plugin, que se encuentra en la barra superior. Allí, puedes personalizar tu bloque a través de las pestañas Marcado (HTML) y CSS.
Y si quieres añadir PHP, tendrás que utilizar un editor de texto plano para crear archivos de bloques.php y block.css manualmente.
5. Guarda y confirma tu bloqueo
Asegúrate de guardar tu bloque haciendo clic en Publicar en la parte superior derecha.
6. Añade tu bloque a tu sitio web
Finalmente, puede agregar el bloque a su sitio web. Abre o crea una publicación o página, luego presiona el + en la barra lateral izquierda de tu panel para encontrar e insertar tu bloque.
Luego, personaliza el contenido de la página a tu gusto con otros bloques, códigos cortos útiles de WordPress y otros enfoques accesibles que optimizan la experiencia del usuario (UX) y el rendimiento del sitio web.
Creación manual de bloques personalizados
Alternativamente, puedes codificar bloques personalizados de Gutenberg desde cero siguiendo este proceso paso a paso:
1. Configura tu entorno de desarrollador de WordPress
En primer lugar, instale Node.js y el administrador de paquetes de nodo (npm). Estas son herramientas de compilación de JavaScript que le permiten definir funciones básicas de bloque. Puede descargar Node.js a través del instalador en línea y luego asegurarse de que el npm esté activado ingresando el comando npm-v en su editor de código.
A continuación, tendrás que instalar Docker, un requisito para utilizar la herramienta de desarrollo de WordPress. El sitio web de Docker ofrece una instalación sencilla con un solo clic.
Después de eso, configurará su entorno de desarrollador y activará su sitio de prueba. Puedes configurar el entorno de desarrollo a través de la herramienta predeterminada de WordPress. Instálelo globalmente ingresando el comando npm -g install @wordpress/env.
2. Configura tu archivo de plugin base (de inicio)
Antes de que puedas crear tu bloque personalizado de Gutenberg, tienes que crear un plugin de bloque base como referencia. Afortunadamente, hay algunos enfoques que te ayudan a evitar completar manualmente este paso.
Ejecuta el comando /wp-content/plugins/ para navegar a tu directorio de plugins.
Luego, una opción es ejecutar el comando npx @wordpress/create-block. Esto le brinda un fácil acceso y capacidades de edición para sus archivos PHP y archivos JS.
Asegúrese de agregar el nombre que desea usar para su bloque de inicio al comando. Puedes usar algo simple, como mi-nuevo-bloque, o ser creativo.
La otra opción es instalar la herramienta create-guten-block y ejecutar el comando npx create-guten-block con el nombre del bloque de inicio.
Estos procesos crearán un punto de partida.
3. Configurar block.json
Debe agregar un archivo block.json al nuevo directorio y, a continuación, configurarlo introduciendo metadatos y selecciones para varias configuraciones. Algunos ejemplos de configuración son los atributos de bloque y otras especificaciones ajustables, como la versión, el título y la categoría de la interfaz de planificación de aplicaciones (API).
A continuación, se muestra un ejemplo de cómo podría verse parte del código block.json:
El archivo block.json permite que tu plugin de bloque básico aparezca en el directorio de plugins, facilita el registro de tu bloque más adelante y ayuda con el rendimiento de tu sitio web.
4. Configurar más especificaciones
A continuación, determinará y pondrá en cola los detalles relacionados con:
- Estilos.
- Dependencias y archivos de activos.
- Atributos.
- Scripts.
- Etiquetas y palabras clave.
Puede navegar hasta el archivo package.json para configurar las propiedades, los estilos y los scripts de JavaScript. A través de block.json, puede definir atributos con la función setAttributes. También puede modificar la configuración de bloques con etiquetas y palabras clave.
Puede agregar otras especificaciones de frontend y backend y editar varias funciones. Por ejemplo, debe crear un archivo de activos para agregar dependencias. Para ello, introduzca el comando npm run build para el archivo XML de JavaScript (JSX) o el siguiente código PHP:
5. Registra tu bloque
Una vez que hayas creado tu plugin de bloques, utiliza la función register_block_type. Esta técnica de registro de bloques extrae automáticamente los metadatos previamente determinados del archivo block.json .
6. Guarde y confirme que su bloque funciona
El paso final es guardar todos los archivos y probar su nuevo bloque.
Puedes confirmar su funcionalidad añadiendo tu nuevo bloque personalizado de Gutenberg a tu sitio web. Si lo insertas y muestra el mensaje «Hola Mundo», es una señal de que completaste el proceso correctamente.
Si desea usar el mismo bloque en varios diseños o sitios web en el futuro, intente usarlo en un patrón de bloques de Gutenberg.
Navega por la página «Aprender» de WordPress para obtener más detalles y tutoriales sobre cómo configurar tu sitio web.
Reflexiones finales: Cómo crear bloques personalizados de Gutenberg — una guía de Bluehost
Hacer bloques personalizados de Gutenberg para WordPress es una solución útil si necesita elementos del sitio web que no ofrecen los bloques predeterminados.
Creas tus propios bloques de Gutenberg con un plugin o mediante codificación manual. Sin embargo, cualquiera de los dos procesos requiere cierta experiencia técnica.
Si no desea hacer bloques personalizados usted mismo, pruebe los servicios de diseño de sitios web de Bluehost. Nuestro equipo de expertos comprometidos está aquí para ayudarte a personalizar y cultivar el sitio web perfecto.
Si desea diseñar su sitio web usted mismo, pero desea recibir orientación experta en edición de sitios en el camino, también ofrecemos Pro Design con soporte en vivo. Nuestros expertos pueden ayudarte a elegir y personalizar los temas y plugins perfectos y optimizar tu sitio web.
Luego, una vez que su sitio web esté listo para ponerse en marcha, contáctenos en Bluehost para obtener servicios de alojamiento de WordPress de alta velocidad, alta calidad y alto rendimiento.
Escriba un comentario