Diseño de componentes personalizados en el editor de componentes de WordPress

Con la aparición del editor avanzado de WordPress (Gutenberg) dentro de WordPress, se ha vuelto fácil para los usuarios de WordPress agregar muchos componentes y elementos que no estaban disponibles en versiones anteriores, lo que facilita a los usuarios diseñar sitios web avanzados y profesionales sin casi ninguna experiencia de programación. Aunque los componentes

Editor Gutenberg

son numerosos y variados, y se pueden obtener más componentes adicionales mediante la instalación de complementos específicos para esto, notarás que hay muchos complementos de WordPress que, simplemente instalándolos y activándolos en el sitio, crean componentes propios dentro del editor Gutenberg. En este artículo te llevaremos en un recorrido especial y lleno de información que mejore la forma en que utilizas el editor de WordPress Gutenberg y controles ampliamente los componentes disponibles dentro de él. Recomendamos consultar el artículo sobre explicación de lenguajes HTML y CSS

porque utilizaremos algunos códigos de esos lenguajes durante la fase de diseño y creación de nuevos componentes dentro del editor Gutenberg. Los componentes predeterminados dentro del editor de componentes de WordPress cuando abrimos el editor de componentes Gutenberg en WordPress, notamos que contiene un gran número de componentes predeterminados que pueden aumentarse con la instalación de más complementos en el sitio.

Ten en cuenta que todos los componentes dentro del editor Gutenberg se dividen en dos partes principales: 1- La primera parte (1) es el nombre de la categoría, donde los componentes del editor Gutenberg se dividen en varias categorías principales como la categoría (Texto), la categoría (Multimedia) y la categoría (Widgets).

2- La segunda parte (2) contiene todos los componentes disponibles dentro de esta categoría, que son componentes que se proporcionan de forma predeterminada con el editor Gutenberg o se agregan a través de algunos complementos que instalamos en el sitio.

También hay una pestaña (Reutilizable)

que es una pestaña que contiene todos los componentes que has agregado previamente a la lista de componentes reutilizables: para agregar un componente a la lista de componentes reutilizables de nuevo, puedes hacer clic en el botón de opciones ubicado junto a cualquier componente dentro de la página o artículo que estés editando, luego haz clic en la opción de agregar el componente a los componentes reutilizables: después de haber aprendido sobre los componentes predeterminados dentro del editor Gutenberg de WordPress y cómo agregar un componente a la lista de componentes reutilizables, pasamos en los párrafos siguientes a explicar cómo diseñar componentes completamente personalizados dentro del editor Gutenberg. Diseño de componentes personalizados dentro del editor Gutenberg el diseño de componentes Gutenberg se realiza básicamente mediante la inserción de múltiples códigos de programación dentro de archivos de código en la plantilla de WordPress que usas, pero proporcionamos mucho tiempo en

escritura de códigos para crear componentes adicionales, ya que instalaremos uno de los complementos que nos ayuda a ahorrar mucho tiempo. Instala el complemento

Custom blocks

que proporciona opciones muy útiles para crear y diseñar componentes personalizados en el editor Gutenberg. Al buscar el nombre del complemento en la pestaña de instalación de complementos en WordPress, notarás

la aparición de dos complementos similares: Instala y activa el complemento

señalado por la flecha, porque el otro complemento agrega y proporciona al editor de componentes predeterminado docenas de componentes adicionales listos para usar, pero queremos crear componentes personalizados desde cero, por lo que instalaremos el otro complemento especializado en crear y diseñar componentes. Después de instalar y activar el complemento en tu sitio correctamente, dirígete al panel de control de WordPress para encontrar la pestaña del complemento Custom blocks, y al pasar el mouse sobre él, puedes entrar en la pestaña para agregar un nuevo componente Add new se abrirá ante ti una página que contiene opciones para crear y diseñar nuevos componentes, y en esta página lo primero que debes hacer es escribir un nombre o título para el nuevo componente que deseas crear y agregar al editor de componentes Gutenberg.

Por ejemplo, nombramos el componente que deseamos diseñar como (Nuevo componente): en el lado izquierdo de la página actual notarás la presencia de un cuadro que contiene opciones para controlar el nuevo componente que estás creando: encontrarás cuatro opciones básicas que debes especificar y completar para crear el nuevo componente, y son las siguientes: (Icon) donde haces clic en el icono que aparece ante ti para abrirte una lista grande que contiene muchos iconos, puedes elegir el icono que deseas que aparezca junto al nombre del nuevo componente dentro de los componentes Gutenberg. (Category) donde eliges la categoría actual en la que deseas agregar el nuevo componente, o puedes hacer clic en el botón Add new Category debajo de la pestaña directamente para crear una nueva categoría para el componente que estás diseñando. (Keywords) donde escribes algunas palabras clave que deseas vincular a este componente para que cuando busques en el cuadro de búsqueda de componentes del editor Gutenberg, el componente aparezca ante ti para agregarlo fácilmente, ya sea que estés dentro de un artículo o una página del sitio.

(Post type) donde eliges los tipos de contenido en los que deseas que aparezca este nuevo componente, por ejemplo, puedes elegir que este componente aparezca solo al editar artículos, o solo páginas, o solo productos, o puedes elegir todo para que este componente aparezca al editar cualquier página dentro del sitio. Después de completar los datos anteriores como explicamos, puedes hacer clic en el botón de publicar o actualizar para crear el nuevo componente con el nombre que especificaste: en el paso anterior escribimos el nombre del componente a crear y completamos sus datos.

El siguiente paso es diseñar los campos que queremos crear

dentro de este componente. Para aclarar la idea, primero veamos uno de los componentes listos en el editor de WordPress, que es el componente (Encabezado), cuando hacemos clic en él notamos la aparición de un campo dentro de la página de edición del artículo donde se puede escribir el encabezado dentro de él: haremos lo mismo aquí, donde queremos diseñar campos para este componente para que cuando hagas clic en él desde la lista de componentes, se muestren los campos del componente. Para crear un nuevo campo para el componente, harás clic en el signo más en la página de creación del nuevo componente para que aparezca la barra del nuevo campo con el nombre (new field)

como se muestra en la imagen: en el lado izquierdo de la pantalla actual encontrarás la pestaña de opciones para el nuevo campo que agregaste: como puedes ver, la pestaña de opciones contiene algunos datos importantes que debes completar para diseñar el campo exactamente como deseas: (Field name) donde escribes un nombre o título para el campo, usaremos este nombre más tarde y debe estar en inglés y por defecto su nombre es New field. (Field type) donde especificas el tipo de datos que deseas asignar al nuevo campo, donde encontrarás muchos tipos de datos como el tipo (Text) que cuando lo selecciones, este campo se dedicará a recibir solo datos de texto, y el tipo (URL) que dedica el campo a recibir solo direcciones y enlaces web. Y así con el resto de tipos de datos que puedes elegir libremente.

En nuestro ejemplo, seleccionaremos el tipo (Text) ya que dedicaremos el campo para recibir textos dentro de él. El siguiente paso es escribir códigos de lenguaje HTML que se encarguen de mostrar el contenido del campo de la manera que queremos y especificamos con el código. Para agregar el código para mostrar el campo, puedes ir a la pestaña (Template Editor) para encontrar dentro de él la sección dedicada para agregar el código: como mencionamos al inicio del artículo, debes tener conocimiento del lenguaje HTML especializado en mostrar componentes web de una manera comprensible para el navegador, y entre los códigos presentes en este idioma está el código >h1< especializado en mostrar componentes dentro de la página con un tamaño de fuente grande que se adapta a los títulos principales.

Agregaremos el siguiente código dentro, donde escribimos el nombre del campo al que nos referimos en los párrafos anteriores, pero debe estar dentro del símbolo de llaves {{}}: {{new-field}}

El código que agregamos es una etiqueta >h1< como notaste, y dentro de ella escribimos el nombre del campo que creamos anteriormente, y de esta manera se mostrará el contenido escrito dentro del campo directamente en la pantalla. Y ahora después de agregar el código que contiene el nombre del campo, déjanos probar el nuevo componente navegando a la página de edición de cualquier artículo o página del sitio y abriendo el cuadro de componentes Gutenberg: cuando hagas clic en el nombre del nuevo componente se insertará su campo dentro de la página de edición donde puedes escribir el texto que deseas que aparezca en tu sitio usando su campo: por supuesto, el componente que diseñamos es un componente de texto simple completo, pero aún puedes crear y diseñar cualquier componente con cualquier función que desees, como componentes para insertar imágenes y enlaces, etc., y puedes crear un componente que contenga más de un campo y en cada campo especifiques el tipo de datos correspondiente, como textos e imágenes de la lista de tipos de datos que explicamos anteriormente: conclusión al final, crear componentes personalizados en el editor Gutenberg puede ayudarte a completar el trabajo en tu sitio más rápido y te ahorra mucho tiempo y esfuerzo.

Imagina que estás publicando contenido o artículos en tu sitio y repites un conjunto de textos, imágenes y enlaces en cada artículo, por ejemplo, sería difícil repetir la adición de todos esos campos cada vez, puedes crear un componente especial que contenga todos los campos que deseas mostrar, y cada vez que desees insertar los campos, solo necesitas buscar por el nombre del componente e insertarlo.