Creación de un bloque de WordPress personalizado (manera fácil)
¿Quiere crear un coalición de Gutenberg personalizado para su sitio web de WordPress?
Si admisiblemente WordPress viene con muchos bloques básicos de creación de contenido, es posible que necesite poco más personalizado para su sitio web.
En este artículo, le mostraremos una guisa acomodaticio de crear bloques de Gutenberg personalizados para su sitio de WordPress.
¿Por qué crear un coalición de WordPress personalizado?
WordPress viene con un editor de bloques intuitivo que facilita la creación de sus publicaciones y páginas agregando contenido y fundamentos de diseño como bloques.
WordPress viene con varios bloques de uso global por defecto. Los complementos de WordPress asimismo pueden anexar sus propios bloques para que los use.
Sin secuestro, a veces desea crear su propio coalición personalizado para hacer poco específico y no puede encontrar un complemento de coalición que funcione para usted.
En este tutorial, le mostraremos cómo crear un coalición completamente personalizado.
Observación: Este artículo está destinado a usuarios intermedios. Debe estar familiarizado con HTML y CSS para crear bloques de Gutenberg personalizados.
Paso 1: Comience con su primer coalición personalizado
Primero necesitas el . instalar y activar Bloques personalizados Génesis embragar. Para obtener más información, consulte nuestra preceptor paso a paso para instalar un complemento de WordPress.
Creado por las personas detrás del popular Genesis Theme Framework y StudioPress, este complemento proporciona a los desarrolladores herramientas sencillas para crear rápidamente bloques personalizados para sus proyectos.
Por el admisiblemente de este tutorial, construiremos un coalición de ‘testimonios’.
Primero ve a Bloques personalizados » Ampliar nuevo página en la mostrador colateral izquierda de su panel de oficina.
Esto lo llevará a la página del Editor de bloques.
Desde aquí necesitas darle un nombre a tu coalición.
En el flanco derecho de la página encontrará las propiedades del coalición.
Aquí puede nominar un icono para su coalición, anexar una categoría y anexar palabras esencia.
El slug se llena automáticamente según el nombre de su coalición, por lo que no necesita cambiarlo. Sin secuestro, puede escribir hasta 3 palabras esencia en el cuadro de texto Palabras esencia para que su coalición se pueda encontrar fácilmente.
Ahora agreguemos algunos campos a nuestro coalición.
Puede anexar diferentes tipos de campos, como texto, números, dirección de correo electrónico, URL, color, imagen, casilla de demostración, chico de opción y muchos más.
Estamos agregando 3 campos a nuestro coalición personalizado de testimonios: un campo de imagen para la imagen del revisor, un cuadro de texto para el nombre del revisor y un campo de texto para el texto del declaración.
Clickea en el [+] Agregue campo para insertar el primer campo.
Esto abre algunas opciones para el campo. Echemos un vistazo a cada uno de ellos.
- Fórmula de campo: Puede utilizar cualquier nombre de su sufragio para la ritual del campo. Llamemos a nuestro primer campo ‘Imagen del revisor’.
- Nombre del campo: El nombre del campo se genera automáticamente en función de la ritual del campo. Usaremos este nombre de campo en el próximo paso, así que asegúrese de que sea único para cada campo.
- Tipo de campo: Aquí puede escoger el tipo de campo. Queremos que nuestro primer campo sea una imagen, así que seleccionamos Imagen del menú desplegable.
- Ubicación del campo: Puede arriesgarse si desea anexar el campo al editor o al inspector.
- texto de ayuda: Puede anexar texto para describir el campo. Esto no es necesario si está creando este coalición para uso personal, pero puede ser útil para blogs de varios autores.
Además puede obtener algunas opciones adicionales según el tipo de campo que elija. Por ejemplo, escoger un campo de texto le brinda opciones adicionales, como texto de señalador de posición y periferia de caracteres.
Luego del proceso preparatorio, agreguemos 2 campos más para nuestro coalición de testimonios presionando el llamador . hacer click [+] Agregue campo mando.
Si desea reordenar los campos, puede hacerlo arrastrándolos usando el compensador a la izquierda de cada ritual de campo.
Para editar o eliminar un campo en particular, debe hacer clic en la ritual del campo y editar las opciones en la columna de la derecha.
Cuando haya terminado, haga clic en el Divulgar llamador, presente en el flanco derecho de la página, para economizar su coalición de Gutenberg personalizado.
Paso 2: crea una plantilla de coalición personalizada
Aunque creó el coalición de WordPress personalizado en el posterior paso, no funcionará hasta que cree una plantilla de coalición.
La plantilla de coalición determina exactamente cómo se muestra en su sitio web la información ingresada en el coalición. Puede arriesgarse cómo se ve usando HTML y CSS, o incluso código PHP si necesita realizar funciones o hacer otras cosas avanzadas con los datos.
Hay dos formas de crear una plantilla de coalición. Si la salida de su coalición está en HTML/CSS, puede usar el editor de plantillas incorporado.
Por otro flanco, si la salida de su coalición requiere poco de PHP para ejecutarse en segundo plano, deberá crear manualmente un archivo de plantilla de coalición y cargarlo en su carpeta de temas.
Método 1. Uso del Editor de plantillas incorporado
En la pantalla de publicación de bloques personalizados, simplemente cambie a la pestaña Editor de plantillas e ingrese su HTML en la pestaña Formato.
Puede escribir su HTML y usar llaves dobles para insertar títulos de campo de coalición.
Por ejemplo, usamos el futuro código HTML para el coalición de ejemplo que creamos anteriormente.
<div class="testimonial-item">
<img src="{{reviewer-image}}" class="reviewer-image">
<h4 class="reviewer-name">{{reviewer-name}}</h4>
<div class="testimonial-text">{{testimonial-text}}</div>
</div>
Luego de eso, cambie a la pestaña CSS para diseñar el formato de la salida de su coalición.
Aquí está el ejemplo de CSS que usamos para nuestro coalición personalizado.
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
Método 2. Cargue manualmente plantillas de bloques personalizados
Se recomienda este método si necesita usar PHP para interactuar con sus campos de coalición personalizados.
Básicamente, debe cargar la plantilla del editor directamente en su tema.
Primero, debe crear una carpeta en su computadora que la nombrará con su slug de nombre de coalición personalizado. Por ejemplo, nuestro coalición de demostración se pira Testimonios, por lo que crearemos una carpeta de testimonios.
A continuación, debe crear un archivo llamado block.php utilizando un editor de texto plano. Aquí es donde coloca la parte HTML/PHP de su plantilla de coalición.
Aquí está la plantilla de muestra que usamos para nuestro ejemplo.
<div class="testimonial-item <?php block_field('className'); ?>">
<img class="reviewer-image" src="<?php block_field( 'reviewer-image' ); ?>" alt="<?php block_field( 'reviewer-name' ); ?>" />
<h4 class="reviewer-name"><?php block_field( 'reviewer-name' ); ?></h4>
<div class="testimonial-text"><?php block_field( 'testimonial-text' ); ?></div>
</div>
Tenga en cuenta cómo usamos el . utilizado block_field() función para recuperar datos de un campo de coalición.
Envolvimos nuestros campos de coalición en el HTML que queremos usar para mostrar el coalición. Además hemos asociado clases de CSS para que podamos diseñar el coalición correctamente.
No olvide economizar el archivo en la carpeta que creó anteriormente.
Luego necesita crear otro archivo usando el procesador de textos en su computadora y guardarlo como block.css en la carpeta que creaste.
Usaremos este archivo para anexar CSS necesario para diseñar nuestra sagacidad de coalición. Aquí está el ejemplo de CSS que usamos para este ejemplo.
.reviewer-name {
font-size:14px;
font-weight:bold;
text-transform:uppercase;
}
.reviewer-image {
float: left;
padding: 0px;
border: 5px solid #eee;
max-width: 100px;
max-height: 100px;
border-radius: 50%;
margin: 10px;
}
.testimonial-text {
font-size:14px;
}
.testimonial-item {
margin:10px;
border-bottom:1px solid #eee;
padding:10px;
}
No olvides economizar tus cambios.
Su carpeta de plantillas de coalición ahora contiene dos archivos de plantilla.
Luego de eso, debe cargar su carpeta de bloques en su sitio web utilizando un cliente FTP o la aplicación Administrador de archivos en el panel de control de su cuenta de alojamiento de WordPress.
Una vez conectado, navegue hasta el /wp-content/themes/your-current-theme/ carpeta.
Si su carpeta de temas no tiene bloques de nombre de carpeta, continúe y cree una nueva carpeta y asígnele un nombre blocks†
Ahora ve a la carpeta de bloques y sube la carpeta que creaste en tu computadora a la carpeta de bloques.
¡Eso es todo! Ha creado con éxito archivos de plantilla manual para su coalición personalizado.
Paso 3. Obtenga una sagacidad previa de su coalición personalizado
Antiguamente de que pueda obtener una sagacidad previa de su HTML/CSS, debe proporcionar algunos datos de prueba que se pueden usar para obtener una sagacidad previa de la salida.
Edite su coalición en el dominio de oficina de WordPress y cambie a la pestaña Clarividencia previa del editor. Aquí debe ingresar algunos datos ficticios.
No olvide hacer clic en el llamador Desempolvar para economizar los cambios antaño de poder obtener una sagacidad previa.
Ahora puede cambiar a la pestaña Clarividencia previa del front-end para ver cómo se verá su coalición en el front-end (dominio pública de su sitio web de WordPress).
Si todo se ve admisiblemente, puede refrescar su coalición para economizar los cambios no guardados.
Paso 4. Usar su coalición personalizado en WordPress
Ahora puede usar su coalición personalizado en WordPress como lo haría con cualquier otro coalición.
Edite fácilmente cualquier publicación o página en la que desee utilizar este coalición.
Haga clic en el llamador Ampliar nuevo coalición y busque su coalición escribiendo su nombre o palabras esencia.
Luego de insertar el coalición en el dominio de contenido, verá los campos de coalición que ha creado para este coalición personalizado.
Puede completar los campos de coalición según sea necesario.
A medida que pasa de un coalición a otro coalición, el editor mostrará automáticamente una sagacidad previa en vivo de su coalición.
Ahora puede economizar y obtener una sagacidad previa de su publicación y página para ver su coalición personalizado en energía en su sitio web.
Así es como se ve el coalición de testimonios en nuestro sitio de prueba.
Esperamos que este artículo le haya ayudado a educarse cómo crear fácilmente bloques de Gutenberg personalizados para su sitio web de WordPress.
Además puede consultar nuestra preceptor sobre cómo crear un tema de WordPress desde cero, o consultar nuestra selección experta de complementos de WordPress imprescindibles para su sitio web.
Si te ha gustado este artículo, suscríbete a nuestro Canal de Youtube para tutoriales en vídeo de WordPress. Además puedes encontrarnos en Gorjeo y Facebook†
