homefinance blog
¿No nos gusta WordPress? La plataforma ha disfrutado de un éxito masivo desde su establecimiento, desarrollando nuevas funciones constantemente. Una de las características más notables de la última vez es el editor de WordPress Block, con el nombre de código Gutenberg. Gutenberg ofrece a los usuarios de WordPress una nueva forma interesante de publicar contenido y personalizar su sitio. Es increíblemente fácil de usar, lo cual es una excelente noticia tanto para principiantes como para desarrolladores. Si usa la última versión de WordPress, ya es una familia con el editor de bloques y el concepto de bloques.
Por defecto, el editor de WordPress Block viene con algunos bloques que le permiten incluir texto, imágenes, citas, audio, videos, incorporación, etc. Además, hay muchos suplementos de Gutenberg que le permiten expandir el editor sin sudar. Sin embargo, es posible que tenga una necesidad específica que requiera que cree sus propios bloques personalizados. Aquí viene la publicación de hoy. En algunos párrafos, aprenderá exactamente cómo crear bloques de Gutenberg personalizados para satisfacer sus necesidades específicas. Sin más extensiones, comencemos, porque hay mucho que aprender.
¿Cuáles son los bloques de todos modos?
Si eres el principiante perfecto, probablemente te preguntes cuál es este negocio sobre Gutenberg. Lo sé, estaba bastante confundido cuando se presentó Gutenberg. Pero nadie tiene la culpa, todos estábamos acostumbrados al editor clásico de que hacer el cambio era incómodo al principio. Sin embargo, el editor de bloques de WordPress está aquí para quedarse independientemente de si nos gusta o no. Es por eso que debes aprender tanto sobre Gutenberg (y todo lo que viene con él) para aprovecharlo al máximo. Los bloques tratan párrafos, títulos, medios e incorporación, todos como componentes que, cuando se almacenan juntos, constituyen el contenido almacenado en la base de datos de WordPress, reemplazando el concepto tradicional de texto libre con los medios construidos y los códigos cortos. – Manual del editor de bloques En el pasado, los usuarios de WordPress se basaron en texto y código corto gratuito para agregar contenido. Gutenberg usa bloques. El nuevo editor le permite usar unidades de bloque para crear modelos ricos y flexibles, que son fáciles de administrar. Actualmente, puede usar el editor editor para publicaciones y páginas, pero hay planes activos para admitir la edición de todo el sitio en el futuro.
Editor de Gutenberg que muestra algunos bloques
Trabajar con bloques hace que la creación de contenido en WordPress bastante vigorizante. Además, muchos complementos existentes aceptan el nuevo editor y vienen con bloques listos para usar, lo que hace que el contenido de los complementos mencionados sea una luz. El editor le permite deslizar y colocar bloques en una página para que pueda presionar el botón de publicación más rápido.
Como un generador de página integrado directamente en WordPress. Si está familiarizado con las páginas visuales, como Elementary, probablemente esté familiarizado con el concepto de construcción de páginas mediante deslizamiento y colocación. Gutenberg es un intento de incorporar completamente la construcción del sitio de arrastrar y soltar en el núcleo de WordPress. No dude en consultar nuestra guía de paso por paso para Gutenberg Builder para WordPress para obtener más información. Con esto en el camino, vamos a la mejor parte de la publicación de hoy. Aprendamos a crear un bloque simple. Puede hacer esto manualmente o usar complementos como Genesis Custom Blocks (anteriormente Blocklab), Blocks Lazy o ACF. Crear bloques personalizados es un poco técnico, por lo que para la publicación de hoy, utilizaremos un complemento. A medida que se crea un bloque personalizado (utilizando bloques de génesis personalizados), es más fácil viajar por la ruta del complemento, porque la creación de bloques personalizados de Gutenberg requiere una buena comprensión de HTML, CSS, PHP y, lo que es más importante, JavaScript. También necesitará comprender React, lo que arroja a los principiantes una bola de curva. Para la siguiente sección, utilizaremos Genesis Custom Blocks, que ofrece StudioPress y Wpengine, entre otros desarrolladores. La versión gratuita de Genesis Custom Blocks está disponible en el almacén oficial de WordPress, lo que significa que podemos instalarla en el tablero de administración de WordPress.
Instale los bloques personalizados de Genesis Iniciar sesión en el tablero de WordPress y explorar complementos> Agregar nuevo, como se muestra a continuación.
Luego, ingrese “bloques de génesis personalizados” en el cuadro de búsqueda de palabras clave y presione el botón Instalar ahora: después, active el complemento para iniciar la fiesta.
Le está yendo bien y luego déjanos crear un nuevo bloque personalizado. Para fines ilustrativos, permítanos crear un impulso personalizado (CTA) que agregaremos al final de cada publicación que publicamos. La mejor parte es que puede reutilizar los bloques para aliviar los problemas de crear los mismos bloques una y otra vez.
Desde su menú de administración de WordPress, navegue en bloques personalizados> Agregar nuevo como resaltamos a continuación.
Al hacerlo, llegará a la página siguiente donde encontrará todas las opciones para crear nuestro bloque personalizado (en nuestro caso, un CTA):
Aquí hay algunas palabras para explicar lo que ves en la captura de pantalla anterior. Comenzando desde arriba, lo tienes. El área de edición principal:
Constructor: probablemente pasará mucho tiempo aquí proyectando el bloque personalizado. El generador le permite agregar un título, campos, babosas, palabras clave, categoría y vista previa del bloque personalizado. Aprenderá a agregar campos.
Editor de plantillas: después de diseñar el bloque personalizado (es decir, agregar diferentes campos), deberá crear una plantilla de bloque (leer, agregar un pequeño código) al editor de plantillas. Descubriremos más cuando diseñemos CTA.
Vista previa del editor: esto le permite obtener una vista previa del bloque personalizado en el editor de bloques de WordPress.
Vista previa de front-end-
Editor Fields – Mostrará los campos en el área de edición principal de una publicación o página (ya sabes, como ve tus publicaciones ordinarias en el editor de WordPress) los campos del inspector – Mostrarán el campo en la barra lateral derecha debajo del inspector de bloques .
Opciones de la barra lateral
Slug-La Slug se completa automáticamente en función del título que le da a su bloque personalizado. Es importante al crear la plantilla de bloque.
Icono: esta opción le permite agregar un icono al bloque personalizado.
Categoría: esto le permite asignar una categoría a su bloque personalizado. Puede clasificar el bloque personalizado utilizando una de las categorías construidas o crear una nueva categoría.
Palabras clave-ADD hasta tres palabras clave relacionadas con el bloque personalizado, para que las personas puedan encontrarlo fácilmente en el selector de bloques.
Abra los campos de bloques en un modal en lugar de reproducción en el lugar-activado si desea abrir campos en un modal. Es útil si tiene un bloque personalizado con muchos campos.
Tipos de publicación: marque las casillas para permitir que se muestre el bloque personalizado en cada tipo de publicación. Por ejemplo, si desmarca publicaciones, el bloqueo no aparecerá en ninguna publicación.
Creando un bloque personalizado ahora que comprende mejor la interfaz con el usuario y lo que hace cada parte, para volar nuestras mangas y ponerte a trabajar.
En Builder, dé a su bloque personalizado un título adecuado. Voy con CTA para ello, como se muestra a continuación.
Antes de agregar nuevos campos, agregemos un icono, palabras clave y elija una categoría para el bloque personalizado, como se muestra a continuación.
Este conjunto, agregemos algunos campos a nuestro bloque personalizado. Para nuestro ejemplo de bloque CTA, agregaremos solo tres campos en el siguiente orden: una imagen, un texto y un campo de archivo que permite a las personas descargar un libro electrónico imaginario para agregar los campos bloqueados al campo del editor, haga clic en el icono más +) Para agregar el primer campo, como se muestra a continuación. Luego agregue un campo de imagen. Desde la barra lateral, configure el tipo de campo en la imagen y defina las otras opciones. Además, tome una nota de slog (configuré la mía en el campo de imágenes) porque la usaremos al crear la plantilla de bloque. Vea la imagen a continuación.
Después de eso, agregue los campos de texto y archivo de manera similar.
No celebre todavía, hay otro paso que dar. Cambie al editor de plantillas> Marcado:
El mío ya tiene algún código, pero el tuyo estará en blanco
Aquí, diseñaremos cómo se ve su bloque personalizado en su sitio. Si necesita usar PHP, puede crear la plantilla utilizando el método de plantilla PHP.
No te preocupes, es fácil. Dentro del editor de plantillas, debajo de la pestaña de marcado (vea la imagen de arriba), agregue la siguiente pieza de marcado html (bod):
{{Text-Field}}
<a href = "{File-Field Assavadue
descargar
Mientras escribe la marca HTML, notará que el editor de plantillas completa automáticamente las babosas de campo (por ejemplo, {{campo de imagen}}) para usted luego, acceda a la sección CSS para agregar algunos estilos simples. Agregue los estilos simples. Agregue el Estilos deseados, pero con eso trabajo: .Cta-Block {
Text-Align: Center;
Color de fondo: naranja;
Ancho: 100%;
Altura: coche;
Chenar: 2px de naranja sólida;
}
.dwnld {
Color de fondo: negro;
Chenar: 2px negro sólido;
color verde;
Llenado: 5px 10px;
Text-Align: Center;
Pantalla: bloque en línea;
Tamaño de fuente: 20px;
margen: 10px 30px;
Cursor: puntero;
Chenar-Raza: 2px;
} Y estás listo! Haga clic en Publicar:
Para ver el nuevo bloque personalizado en acción, regrese al tablero de WordPress y explore publicaciones> Agregar nuevo (Trabajar con páginas):
Cree una publicación como suele hacer, haga clic en Plus (+) para agregar un nuevo bloque y elija el nuevo bloque brillantemente personalizado, como destacamos a continuación.
Luego complete el bloque personalizado como desee y publique la publicación:
Ahora, si reviso mi nuevo bloque personalizado en el front-end, veo eso:
¡CTA Personalized está justo ahí! No se moleste con mis capacidades de diseño de curso, en un escenario de la vida real, querrá pasar un tiempo extra para organizar su bloque. Pero espero que hayas aprendido algo aquí hoy.
