¿Te gustaría crear un Plugin de WordPress simple bloque de Gutenberg?
¿No todos amamos WordPress? La plataforma ha tenido un éxito masivo desde su inicio, con desarrolladores que agregan constantemente nuevas características. Una de las características más destacadas de los últimos tiempos es el Editor de bloques de WordPress, nombre en clave Gutenberg.
Gutenberg ofrece a los usuarios de WordPress una nueva y emocionante forma de publicar contenido y personalizar su sitio web. Es increíblemente fácil de usar, lo cual es una gran noticia tanto para principiantes como para desarrolladores. Si está utilizando la última versión de WordPress, ya está familiarizado con el editor de bloques y el concepto de bloques.
De forma predeterminada, el editor de bloques de WordPress viene con algunos bloques que le permiten incluir texto, imágenes, citas, audio, video, incrustaciones, etc. Además, hay un montón de complementos de Gutenberg que le permiten ampliar el editor sin romper un sudor.
Sin embargo, es posible que tenga una necesidad específica que le solicite crear sus propios bloques personalizados. En este artículo, le mostraremos en unos pocos párrafos cómo crear bloques de Gutenberg personalizados para satisfacer sus necesidades específicas.
Sin más preámbulos, comencemos porque hay mucho que aprender.
Pero antes, si nunca has instalado WordPress, descubre ¿Cómo instalar un blog de WordPress pasos 7 et ¿Cómo encontrar, instalar y activar un tema de WordPress en tu blog
Luego de vuelta a por qué estamos aquí.
¿Qué son los bloques, de todos modos?
Los bloques tratan los párrafos, encabezados, medios e incrustaciones como componentes que, cuando se unen, forman el contenido almacenado en la base de datos de WordPress, reemplazando el concepto tradicional de texto con medios e incrustaciones de códigos abreviados incorporados.
En el pasado, los usuarios de WordPress confiaban en texto y códigos cortos para agregar contenido. usos de Gutenberg blogs. El nuevo editor le permite usar unidades de bloque para crear diseños ricos y flexibles que son fáciles de administrar. Actualmente, puede usar el editor de bloques para publicaciones y páginas, pero hay planes activos para tomar admitir la edición completa del sitio en el futuro.
Trabajar con bloques hace que la creación de contenido en WordPress sea bastante refrescante. Además, muchos complementos existentes son compatibles con el nuevo editor y vienen con bloques listos para usar que facilitan la adición de contenido de dichos complementos. El editor le permite arrastrar y soltar bloques en una página para que pueda presionar el botón de publicación más rápido.
Al igual que un creador de páginas integrado directamente en WordPress.
Si está familiarizado con el creadores de páginas como Elementor, probablemente esté familiarizado con el concepto de creación de páginas de arrastrar y soltar. Gutenberg es un intento de integrar completamente la creación de sitios web de arrastrar y soltar en el núcleo de WordPress.
Así que vayamos a la mejor parte del artículo de hoy. Aprendamos cómo crear un bloque simple. Puede hacerlo manualmente o usando complementos como Bloques personalizados Genesis (anteriormente BlockLab), Bloques perezosos ou ACF. La creación de bloques personalizados es un poco técnica, por lo que para los propósitos del artículo de hoy, usaremos un complemento.
Cómo crear un bloque personalizado (usando bloques personalizados de génesis)
Es más fácil seguir la ruta de los complementos porque crear bloques personalizados de Gutenberg desde cero requiere una buena comprensión de HTML, CSS, PHP y, lo que es más importante, javaScript. También deberá comprender React.
Para la siguiente sección, usaremos Genesis Custom Blocks. Su versión gratuita está disponible en el repositorio oficial de WordPress, lo que significa que podemos instalarla en el panel de administración de WordPress.
Instalar bloques personalizados de Génesis
Inicie sesión en su panel de administración de WordPress y navegue hasta Extensiones> Agregar, Como se muestra abajo.
Luego ingrese " Bloques personalizados Genesis en el cuadro de búsqueda de palabras clave y clic en el botón Instalar ahora
Después de eso, activar el plugin para empezar
A continuación, creemos un nuevo bloque personalizado. Con fines ilustrativos, creemos una llamada a la acción (CTA) personalizada que agregaremos al final de cada artículo que publiquemos. La mejor parte es que puede reutilizar los bloques para evitar crear los mismos bloques una y otra vez.
En el menú de administración de WordPress, navegue hasta Bloques personalizados > Agregar nuevo, como destacamos a continuación.
Esto te llevará a la siguiente página donde encontrarás todas las opciones para crear un bloque personalizado (en nuestro caso, un CTA):
Aquí hay algunas palabras para explicar lo que ve en la captura de pantalla anterior. Comenzando desde arriba, lo tienes.
Área de edición principal:
- Astillero – Probablemente pasará mucho tiempo aquí diseñando su bloque personalizado. la Constructeur le permite agregar título, campos, slug, palabras clave, categoría y obtener una vista previa de su bloque personalizado. Aprenderá a agregar campos.
- Editor de plantillas – Después de diseñar su bloque personalizado (es decir, agregar varios campos), deberá crear una plantilla de bloque (leer, agregar algún código) en editor de modelos. Aprenderemos más cuando diseñemos el CTA.
- Vista previa del editor – Le permite obtener una vista previa del bloque personalizado en el editor de bloques de WordPress.
- Vista previa de la parte delantera – Aquí puede obtener una vista previa de cómo se verá el bloque personalizado en su sitio web.
- EditorCampo – Mostrará campos en el área de edición principal de una publicación o página (ya sabe, al igual que ve sus publicaciones habituales en el editor de WordPress)
- Inspector de campo – Muestra el campo en la barra lateral derecha debajo del Inspector de bloques.
Opciones de la barra lateral
- Lingote – Se llena automáticamente según el título que le dé a su bloque personalizado. Esto es importante al crear el modelo de bloques.
- Ícono – Esta opción le permite agregar un icono a su bloque personalizado.
- Categoría – Te permite asignar una categoría a tu bloque personalizado. Puede categorizar su bloque personalizado usando una de las categorías integradas, o puede crear una categoría completamente nueva.
- Palabras clave – Agregue un máximo de tres palabras clave relacionadas a su bloque personalizado para que las personas puedan encontrarlo fácilmente en el selector de bloques.
- Abrir campos de bloque en un modal en lugar de renderizar en su lugar – Habilite si desea abrir campos en un modal. Esto es útil si tiene un bloque personalizado con muchos campos.
- Pon Tipos – Marque la(s) casilla(s) para permitir que su bloque personalizado se muestre en cada tipo de publicación. Por ejemplo, si desmarca Publicaciones, el bloque no aparecerá en ninguna publicación.
Crear un bloque personalizado
Ahora que tiene una mejor comprensión de la interfaz de usuario y lo que hace cada parte, pongámonos a trabajar.
En el Constructor - Constructor -, asigne a su bloque personalizado un título apropiado. Vamos a elegir CTA para este como se muestra a continuación.
Antes de agregar nuevos campos, agreguemos un ícono, palabras clave y elijamos una categoría para el bloque personalizado como se muestra a continuación.
Para eso, agreguemos algunos campos a nuestro bloque personalizado. Para nuestro bloque de CTA de ejemplo, agregaremos solo tres campos en el siguiente orden: una imagen, algo de texto y un campo de archivo que permite a las personas descargar un libro electrónico.
Lea también: 5 WooCommerce plugins para editar sus productos de forma masiva
Adición de campos de bloque
En la sección Campos del editorhacer clic en el ícono más (+) para agregar el primer campo como se muestra a continuación.
A continuación, agreguemos un campo de imagen. En la barra lateral, establezca el Tipo de campo en Imagen y configure las otras opciones. Además, considere el slug, ya que lo usaremos al crear el modelo de bloques.
Después de eso, agregue los campos de texto y archivo de la misma manera.
Cambiar a Editor de plantillas > Marcado.
Aquí diseñaremos cómo se verá nuestro bloque personalizado en su sitio web. El editor de modelos acepta HTML, CSS y slugs de campo (que debe colocar entre 2 corchetes). Si necesita usar el lenguaje PHP, puede crear la plantilla usando Método de modelado PHP
No te preocupes, es fácil.
Dans editor de modelosbajo pestaña de marcado, agregue el siguiente código:
<div class="cta-block">
<div class="cta-image">
<img src ="{{image-field}}">
</div>
<div class="text-upload">
<h2>{{text-field}}</h2>
<a href="{{file-field}}">
<button type="button" class="dwnld">Telecharger</button></a>
</div>
</div>Mientras escribe su código, notará que editor de modelos Autocompletar slugs de campo (por ejemplo, {{image-field}} ) por usted.
Luego ve a la sección CO para agregar estilos simples con el siguiente código:
.cta-block {
text-align:center;
background-color:orange;
width:100%;
height:auto;
border: 2px solid orange;
}
.dwnld {
background-color: black;
border: 2px solid black;
color: green;
padding: 5px 10px;
text-align: center;
display: inline-block;
font-size: 20px;
margin: 10px 30px;
cursor: pointer;
border-radius:2px;
}
Puedes personalizar estos estilos como quieras,
Cliquez sur Cuestión :
Para ver su nuevo bloque personalizado en acción, regrese a su panel de administración de WordPress y cree una publicación como lo hace normalmente, haga clic en el botón Más (+) para agregar un nuevo bloque y elegir su nuevo bloque personalizado, como destacamos a continuación.
A continuación, complete su bloque personalizado como desee y publique su mensaje:
Ahora, si revisamos nuestro nuevo bloque de CTA personalizado en el front-end, esto es lo que vemos.
¡Nuestro CTA personalizado está justo ahí! No se preocupe por nuestras capacidades de diseño; por supuesto, en un escenario de la vida real, dedicará un poco más de tiempo a personalizar su bloque. Pero esperamos que hayas aprendido algo aquí.
Otros recursos recomendados
También le invitamos a consultar la Recursos a continuación para tomar más propiedad y control de su sitio web y blog.
- 10 complementos de afiliados de WordPress para crear un programa
- Cómo agregar múltiples columnas en WordPress
- Cómo agregar múltiples columnas en WordPress
- El uso de diferentes orígenes WordPress
- Elementor: cómo crear una animación al pasar el mouse
Conclusión
Construir bloques personalizados no es una tarea fácil. Pero con plugins de WordPress como Genesis Custom Blocks y Lazy Blocks, entre otros, tanto si eres principiante como si no, lograrás crearlos. Desde lo más básico hasta lo más complejo en función de tus necesidades.
Eso es todo por este artículo que le muestra cómo agregar fuentes personalizadas a un sitio web de WordPress. Te invitamos a probar. Si tiene alguna inquietud o sugerencia, háganoslo saber dentro de comentarios.
Sin embargo, también podrá consultar nuestra Recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
