Dominar el editor Gutenberg: consejos prácticos y funciones avanzadas (03)

En este post, vamos a continuar nuestro análisis en profundidad del editor Gutenberg de WordPress, destacando algunas funciones avanzadas y consejos útiles para ayudarte a mejorar aún más tu creación de contenidos. Desde la adición de anclajes y estilos personalizados a Bloques, hasta el uso de diferentes tipos de Bloques importantes, desglosaremos paso a paso cómo estas características pueden ayudarte a lograr un diseño de página más flexible y profesional. Tanto si quieres crear entradas de blog más atractivas como optimizar tu página para UX y SEO, esta guía te proporcionará una referencia inestimable.

 10, añadir anclajes al bloque

¿Qué es un punto de anclaje? Los puntos de anclaje son un tipo de hipervínculo, como en una determinada entrada del blogLa estrella francesa Risacher se convierte en la primera elección de primera ronda de los HawksEste título subtítulo, añadió 2QKI3OHK ancla, por supuesto, el nombre del ancla, instalar su propia costumbre de, no tiene que ser el mismo que yo, a continuación, abra el https://xxx.com/博客主标题/#2QKI3OHK, no el contenido del artículo del subtítulo, pero el título principal del artículo ¡Oh!

Paso: Seleccione el bloque al que desea añadir un punto de anclaje en la ventana de diálogo block>Configuración avanzada>Anclajes HTML Introduzca el nombre del ancla y guárdelo. (como se muestra a continuación)

11, Estilos CSS de bloque personalizados

Dado que los estilos preestablecidos en Block pueden no satisfacer completamente nuestras necesidades, los usuarios a los que les guste el bricolaje pueden necesitar personalizar los estilos mediante código CSS. Sólo tienes que añadir un nombre de variable CSS en "Bloque > Configuración avanzada > Clases CSS adicionales" para personalizar el estilo. (como se muestra a continuación)

12, algunos Bloque importante (algunos tipos diferentes) este es el foco, recuerde distinguir entre el

Columnas

Las casillas de una columna suelen denominarse "columnas" y puede añadir otros Bloques a estas columnas para añadir variedad al diseño. Los bloques de columna ofrecen varias opciones de diseño por defecto para el número de columnas y el ancho de columna. Por ejemplo, el área de contenido de la siguiente figura consta de dos columnas, cada una con un ancho de 50%, y una combinación de Bloque de Imagen, Bloque de Texto y Bloque de Botón para lograr un diseño de página flexible. (Figura siguiente)

Por supuesto, después de seleccionar el número de columnas, también podemos añadir manualmente nuevas columnas. Basta con mover el ratón entre dos columnas y hacer clic en el signo "+" negro que aparece para añadir una nueva columna. Se recomienda seleccionar la columna correspondiente en la lista de estructuras de la izquierda, para que sea más fácil localizar y editar el Bloque de destino. A continuación, en el campo de ajustes de la derecha, puede ajustar libremente la anchura de la columna. Se recomienda ajustar la unidad en forma de porcentaje (%), por ejemplo, si introduce 30, significa que la anchura de la columna es 30% de la anchura de la ventana del navegador, por lo que el ajuste será más intuitivo.

Después sólo tienes que añadir el Bloque que quieras a la columna. Es muy intuitivo.

Fila

Después de insertar una Fila, el nuevo Bloque se agrupará en esa Fila por defecto. Los Bloques de Fila ajustan automáticamente su diseño en función de su contenido, como alinear automáticamente las alturas de texto de los distintos párrafos.

Si selecciona Bloque de filas, también puede cambiar la orientación a vertical en el panel derecho, lo que devolverá al diseño una disposición apilada como la predeterminada. (como se muestra a continuación)

Código corto

Puede que algunos plugins no sean compatibles con el Bloque Gutenberg, pero proporcionan shortcodes. Puedes pegar el shortcode (en el formato: [XXXX]) en el editor para que el estilo de contenido del plugin se muestre en el front-end, aunque no puedas ver el efecto directamente en la página de edición. Pero después de guardarlo, vuelve al front-end o reabre la nueva página para verlo, ¡podrás ver si el efecto es el que necesitas o no!

¡Compruebe la página en la que necesita el plugin para el shortcode específico, o la documentación del plugin se proporciona!

Índice

La tabla de contenidos es un elemento importante para los posts más largos, ayudando a mejorar la experiencia del usuario así como el SEO, sin embargo, WordPress no tiene un Bloque de Tabla de Contenidos incorporado, pero es posible encontrar el plugin recomendado en el panel de Bloques buscando por "tabla de contenidos". En el panel de Bloques, sin embargo, puedes buscar por "tabla de contenido" para encontrar plugins recomendados, lo cual es una característica muy conveniente. Estos plugins son totalmente compatibles con el Bloque Gutenberg, por lo que puedes elegir el plugin de tabla de contenido que más te guste y arrastrar la tabla de contenido al lugar apropiado de la página como lo harías con cualquier otro Bloque.

Ajustes del artículo

Esta sección se encuentra en la pestaña Artículos, a la derecha.

Ajustes de visibilidad y tiempo de publicación
Los artículos pueden ser públicos, privados o protegidos por contraseña.

Cuando el artículo se ha actualizado, también debemos cambiar la hora de publicación en favor del SEO.

Establecer la url(Enlace al artículo actual)

Después de guardar o publicar una entrada/página, aparecerá un campo "URL Alias" en la columna "Enlaces fijos". Puede introducir la URL que desea mostrar en este campo y, a continuación, volver a guardar o publicar.

Tenga en cuenta que sólo puede personalizar la URL después de que la entrada/página haya sido guardada o publicada. Las entradas/páginas recién creadas no pueden tener una URL personalizada antes de ser guardadas o publicadas.

Tales como la imagen de arriba elegí el id del artículo es también el nombre del artículo, por lo que el enlace (url) es fijo, si desea modificar la primera vez para mantener antes, modificar el id del artículo (título)

Clasificación y etiquetado

De acuerdo a su necesidad real de establecer una buena clasificación del artículo y el etiquetado, con el fin de filtrar, sino también mejor para SEO, de la siguiente manera, de acuerdo con el artículo a

Imagen destacada

¡Elija el tamaño, la imagen clara y adecuada imagen, para cumplir con el tema del artículo, resaltar las características, porque esto se muestra en la página principal de la primera impresión!

resúmenes

El resumen del contenido de la entrada que se muestra en la página de listado del blog es lo más conciso y atractivo posible. Como se muestra en la imagen anterior.

resúmenes

Con este tutorial en profundidad sobre Gutenberg, seguro que ya dominas estas funciones avanzadas y consejos útiles, y ahora podrás editar y optimizar tus páginas y entradas de blog con mayor flexibilidad.El poder del editor Gutenberg reside en su flexibilidad y extensibilidad, que pueden ayudarte a conseguir fácilmente diversas necesidades de maquetación y diseño. Al ser la herramienta de escritura y diseño más utilizada en WordPress, dominar estas habilidades mejorará enormemente tu eficiencia en la creación de contenidos. A continuación, veremos cómo combinar el tema predeterminado con Gutenberg para lograr un diseño de página aún mejor, ¡así que permanece atento!