{"id":233773,"date":"2023-02-22T19:44:00","date_gmt":"2023-02-22T16:44:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233773"},"modified":"2022-11-11T12:19:08","modified_gmt":"2022-11-11T09:19:08","slug":"guia-para-desarrolladores-uso-de-wordpress-gutenberg-para-portada-y-paginas-de-destino","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/es\/guia-para-desarrolladores-uso-de-wordpress-gutenberg-para-portada-y-paginas-de-destino\/","title":{"rendered":"Gu\u00eda para desarrolladores: uso de WordPress Gutenberg para portada y p\u00e1ginas de destino"},"content":{"rendered":"\n

En esta publicaci\u00f3n, veremos c\u00f3mo utilizar el editor de Gutenberg para crear portadas o p\u00e1ginas de destino modernas y atractivas. Veremos especialmente c\u00f3mo usted, como desarrollador, puede ajustar el c\u00f3digo de su tema para admitir esto. Esta gu\u00eda es perfecta para aquellos que desean ajustar un tema antiguo para que sea compatible con Gutenberg o para aprender a desarrollar nuevos temas optimizados para Gutenberg.<\/p>\n

Cuando WordPress present\u00f3 el nuevo editor Gutenberg<\/a> en WordPress 5.0 (lanzado alrededor de diciembre de 2018), en su mayor\u00eda hizo innecesario el uso de un complemento de creaci\u00f3n de p\u00e1ginas por separado. El editor de Gutenberg le brinda al autor de WordPress mucha flexibilidad y la posibilidad de crear contenido y dise\u00f1os enriquecidos que antes no era f\u00e1cil, a menos que el tema o un complemento les proporcionara la funcionalidad usando, por ejemplo, c\u00f3digos cortos.<\/p>\n

Obtiene mucho estilo para los bloques de Gutenberg listos para usar en WordPress, pero con un poco de trabajo en su tema y conocimiento sobre los bloques, puede agregar mucho m\u00e1s a la experiencia de Gutenberg. \u00a1Veamos c\u00f3mo!<\/p>\n

Habilitaci\u00f3n de bloques anchos y de ancho completo<\/h2>\n

\"Gu\u00eda<\/a><\/p>\n

La mayor\u00eda de los bloques le permiten elegir alineaciones de bloques. Cuando est\u00e1 trabajando en Gutenberg en un tema no desarrollado para Gutenberg, puede elegir entre "Alinear a la izquierda", "Alinear al centro" y "Alinear a la derecha".<\/p>\n

\u00bfPero sab\u00edas que en realidad hay dos m\u00e1s? Los otros dos, "Ancho ancho" y "Ancho completo" son perfectos para hacer una p\u00e1gina de inicio o una p\u00e1gina de destino. Veremos m\u00e1s de cerca c\u00f3mo optimizar el dise\u00f1o y el dise\u00f1o de su tema para admitir bloques anchos y de ancho completo m\u00e1s adelante. Primero debe decirle a WordPress que agregue soporte para estas dos alineaciones de bloques en su tema.<\/p>\n

En una funci\u00f3n enganchada a after_setup_theme<\/code>usted, simplemente llame a add_theme_support('align-wide')<\/code>. Probablemente ya tenga una funci\u00f3n de "configuraci\u00f3n" en su tema, o si no, agregue esto en su tema functions.php<\/code>:<\/p>\n

add_action('after_setup_theme', function() {\n    add_theme_support('align-wide');\n});<\/code><\/pre>\n
Con este c\u00f3digo activo en su tema, ahora deber\u00eda obtener un total de cinco opciones para las alineaciones de bloques. Para algunos bloques, por ejemplo Columnas, obtienes solo los dos nuevos.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Hay ciertos tipos de bloques en los que puede establecer alineaciones de bloques; en su mayor\u00eda, son del tipo que admiten bloques anidados, es decir. un bloque que le permite agregar bloques dentro. Tales bloques populares son Portada, Columnas, Imagen, bloques incrustados, etc. El bloque Portada es un gran bloque para crear portadas o p\u00e1ginas de destino, como veremos a lo largo de esta publicaci\u00f3n.<\/p>\n
Usando el bloque de portada<\/h2>\n
El bloque Portada es definitivamente el mejor bloque cuando quieres construir una p\u00e1gina de inicio o una p\u00e1gina de destino dividida en secciones. Puede agregar cualquier tipo de bloque y tantos bloques como desee dentro de un bloque de portada. Con un bloque de portada, puede establecer un color de fondo, una imagen de fondo o una imagen de fondo con una superposici\u00f3n de color.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Combinado con la opci\u00f3n de establecer el ajuste del bloque en ancho o ancho completo (como hicimos anteriormente), el bloque de cubierta es una herramienta poderosa. Puede crear una p\u00e1gina en la que todo el contenido resida dentro de secciones de bloques de portada de ancho completo con su propio color de fondo o imagen de fondo. Con el estilo y el dise\u00f1o correctos en su tema, tiene un generador de portada moderno y completo.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
En WordPress 5.3 se produjo una mejora importante para el bloque de portada: un contenedor HTML interno. Esto significa que el bloque Portada tiene un elemento HTML para la secci\u00f3n en s\u00ed, con su color de fondo o imagen de fondo, y luego otro elemento HTML donde reside todo el contenido. Combine esto con una alineaci\u00f3n de bloque de ancho completo: dise\u00f1e el elemento externo (con el color o la imagen de fondo) para que ocupe completamente el ancho y luego dise\u00f1e el elemento HTML interno con el contenido para que quepa en el contenedor de su tema.<\/p>\n
Por ejemplo, suponga que su tema tiene un contenedor de ancho m\u00e1ximo de 1200 px. Probablemente ya tenga una clase HTML espec\u00edfica que tenga un estilo de ancho m\u00e1ximo, lo que garantiza que su contenido no se extienda por completo sin importar el tama\u00f1o de la pantalla. Agregue su estilo de ancho m\u00e1ximo al HTML interno de la portada; wp-block-cover__inner-container<\/code>nombre de la clase Como ejemplo:<\/p>\n
.wp-block-cover-image.alignfull .wp-block-cover__inner-container, \n.wp-block-cover.alignfull .wp-block-cover__inner-container {\n    position: relative;\n    width: 100%;\n    max-width: 1200px;\n    padding: 0 20px;\n}<\/code><\/pre>\n
En el c\u00f3digo CSS anterior me dirijo a dos clases principales de Cover. La clase de bloque de portada principal cambia dependiendo de si elige o no una imagen de fondo. Cubrir bloques con una imagen de fondo obtiene la clase " wp-block-cover-image<\/code>" y Cubrir bloques con un color de fondo obtiene la clase " wp-block-cover<\/code>". Adem\u00e1s, tambi\u00e9n apunto la alineaci\u00f3n de bloque "Ancho completo" con la clase " alignfull<\/code>". La alineaci\u00f3n de bloque "Ancho ancho" obtiene la clase " alignwide<\/code>". Agregue CSS para apuntar tambi\u00e9n a esta alineaci\u00f3n de bloques, seg\u00fan lo que desee hacer.<\/p>\n
Si ha comenzado a jugar con esto, es posible que haya encontrado problemas con el dise\u00f1o general del tema. Es probable que su tema obligue a sus bloques de portada de ancho completo a no ocupar el ancho completo en absoluto. Veamos esto a continuaci\u00f3n.<\/p>\n
Dise\u00f1o de tema y estilo de ancho completo<\/h2>\n
Hasta ahora, hemos agregado soporte para bloques anchos y de ancho completo y hemos aprendido a usar y optimizar el bloque Portada para que act\u00fae como secciones de portada o p\u00e1gina de destino. Pero en la mayor\u00eda de los temas, su HTML y dise\u00f1o pueden evitar que el contenido de su publicaci\u00f3n ocupe el ancho completo.<\/p>\n
Su tema probablemente tenga una barra lateral derecha en una sola publicaci\u00f3n o vista de p\u00e1gina. Probablemente haya envoltorios HTML adicionales, incluido un elemento contenedor de ancho m\u00e1ximo, que evita que los bloques de ancho completo realmente tengan el ancho completo. Es probable que sus envoltorios tambi\u00e9n tengan un poco de m\u00e1rgenes o relleno, lo que nuevamente evita que los bloques de ancho completo toquen completamente los bordes de la pantalla. Pero debe hacer que una sola publicaci\u00f3n o p\u00e1gina se vea bien para las publicaciones en las que el usuario no usa bloques de portada tambi\u00e9n. Debe tener en cuenta sus contenedores al desarrollar para Gutenberg con soporte para bloques anchos y de ancho completo. Todo depende del dise\u00f1o, HTML y estilo de su tema, pero veamos algunas ideas para resolver esto.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Una buena soluci\u00f3n ser\u00eda agregar opciones de publicaci\u00f3n; metaconfiguraciones personalizadas para publicaciones y p\u00e1ginas que afectan el dise\u00f1o de esa p\u00e1gina. Puede hacer una configuraci\u00f3n para ocultar la barra lateral o forzar el contenido de su publicaci\u00f3n para que ocupe todo el ancho. Cree configuraciones de publicaci\u00f3n manualmente agregando metaboxes, o use Campos personalizados avanzados<\/a> para facilitar este proceso. Y luego, en su tema, obtiene la configuraci\u00f3n de la publicaci\u00f3n y maneja la salida HTML correspondiente.<\/p>\n
Otras buenas opciones de publicaci\u00f3n son ocultar el t\u00edtulo de la p\u00e1gina y\/o ocultar la imagen destacada. Esto le permite crear contenido normalmente, pero para p\u00e1ginas espec\u00edficas puede configurar f\u00e1cilmente una p\u00e1gina de destino completamente con bloques de portada de ancho completo. Al ocultar el t\u00edtulo de la p\u00e1gina est\u00e1ndar, puede crear un encabezado o una secci\u00f3n de llamada a la acci\u00f3n que se vea mejor para que act\u00fae como el t\u00edtulo de la p\u00e1gina.<\/p>\n
Crear estilos de bloque<\/h2>\n
Hay una caracter\u00edstica poco conocida en WordPress Gutenberg; Los bloques pueden tener diferentes estilos. Puede ver los estilos de bloque en acci\u00f3n con el bloque Cita. Agregue el bloque en su editor y eche un vistazo al Inspector (barra lateral derecha). Encontrar\u00e1s el tema \u00abEstilos" y dos opciones entre diferentes estilos.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Cree estilos personalizados que faciliten la creaci\u00f3n de portadas y p\u00e1ginas de destino. Sugiero al menos agregar estilos de bloque personalizados al bloque de encabezado, para que pueda crear estilos personalizados sin interrumpir los encabezados de las publicaciones normales. Cree un estilo de bloque para los t\u00edtulos de las secciones con fuente extra grande y relleno adicional.<\/p>\n
Mientras intenta crear portadas, tome nota de lo que tiene que personalizar repetidamente; esto podr\u00eda ser una buena opci\u00f3n para un estilo de bloque.<\/p>\n
Agregar estilos de bloque personalizados es realmente muy f\u00e1cil y no requiere conocimientos de Javascript. Tengo un tutorial separado sobre c\u00f3mo hacer esto si quieres aprender m\u00e1s sobre esto.<\/p>\n
PD: si no ve estilos de bloque, es posible que su tema carezca de soporte para esto. El proceso es el mismo que hicimos para las alineaciones de bloques de ancho y de ancho completo; en el gancho after_setup_theme<\/code>, agregas add_theme_support('wp-block-styles')<\/code>:<\/p>\n
add_action('after_setup_theme', function() {\n    add_theme_support('wp-block-styles');\n});<\/code><\/pre>\n
Uso de los colores del tema como paleta de colores<\/h2>\n
Si ha jugado con Gutenberg, probablemente haya notado que Gutenberg le ofrece un determinado conjunto de colores para el texto o el color de fondo. Por ejemplo, agregar un bloque de portada le pedir\u00e1 que elija un color de una paleta de colores.<\/p>\n
Tiene la opci\u00f3n de usar un selector de color para elegir o ingresar el color hexadecimal en el color exacto que desea. Puede acceder a esto haciendo clic en el enlace "Color personalizado". Pero si est\u00e1 utilizando el mismo conjunto de colores en su tema y quiere mantenerlo consistente, puede ser engorroso recordar e ingresar constantemente los mismos c\u00f3digos de color hexadecimales cada vez.<\/p>\n
\u00a1Afortunadamente, WordPress Gutenberg te permite definir la paleta de colores! Este es otro add_theme_support()<\/code>en el que proporciona una variedad de colores que desea en la paleta. En una funci\u00f3n enlazada a after_setup_theme<\/code>, haz esto:<\/p>\n
add_theme_support('editor-color-palette', [\n    [\n        'name' => __('Main blue profile color', 'txtdomain'),\n        'slug' => 'blue-profile',\n        'color' => '#59BACC'\n    ],\n    [\n        'name' => __('Secondary green profile color', 'txtdomain'),\n        'slug' => 'secondary-profile',\n        'color' => '#58AD69'\n    ],\n]);<\/code><\/pre>\n
En el c\u00f3digo anterior, agregamos soporte de tema para ‘ editor-color-palette<\/code>‘ y, como segundo par\u00e1metro de la funci\u00f3n, definimos una matriz de todos los colores que queremos. Cada color requiere los atributos name<\/code>, slug<\/code>y color<\/code>. name<\/code>es lo que aparece cuando pasas el mouse sobre el color en la paleta. slug<\/code>es el nombre de clase que se agregar\u00e1 al elemento de bloque. Y color<\/code>define el c\u00f3digo hexadecimal para su color.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Tenga en cuenta que debe agregar estilos en su CSS para cada una de estas clases (definidas por slug<\/code>). WordPress no aplica autom\u00e1ticamente el color hexadecimal en sus bloques aunque le digamos a WordPress cu\u00e1l es el c\u00f3digo de color.<\/p>\n
Como ejemplo, la imagen de la derecha es mi paleta de colores que he definido para el tema de este sitio, para A White Pixel:<\/p>\n
Estos son los colores de mi tema y en el 95% de los casos usar\u00e9 uno de estos colores, ya sea como fondo o como color de texto. En casos raros, puedo sacar el selector de color, pero tener los sospechosos habituales ya definidos en la paleta de colores hace que la vida sea mucho m\u00e1s f\u00e1cil.<\/p>\n
Un consejo es asegurarse siempre de agregar negro puro (#000000<\/code>) y blanco puro (#FFFFFF<\/code>) en su paleta de colores. Probablemente tambi\u00e9n sea una buena idea tener uno o dos colores grises claros.<\/p>\n
Usar una portada est\u00e1tica y optimizar la plantilla de la portada<\/h2>\n
Probablemente ya sepas sobre esto, pero lo mencionar\u00e9 de todos modos. En WordPress, puede configurar una p\u00e1gina est\u00e1tica como p\u00e1gina principal yendo a Configuraci\u00f3n> Lectura.<\/p>\n
\"Gu\u00eda<\/a><\/p>\n
Por defecto, la p\u00e1gina principal de WordPress muestra una lista de las publicaciones m\u00e1s recientes. Pero si selecciona "Una p\u00e1gina est\u00e1tica" y elige una p\u00e1gina del men\u00fa desplegable, WordPress mostrar\u00e1 esta p\u00e1gina como la p\u00e1gina principal de su sitio.<\/p>\n
Esta es una obviedad al configurar una p\u00e1gina principal para su sitio de WordPress. En la p\u00e1gina seleccionada, puede crear la p\u00e1gina principal utilizando todos los trucos mencionados anteriormente. Por ejemplo, es posible que tenga opciones de publicaci\u00f3n sin marcar para mostrar el t\u00edtulo de la p\u00e1gina, la barra lateral y la imagen destacada. Y la p\u00e1gina est\u00e1 totalmente construida con contenido y bloques de portada de ancho completo. Sin embargo, puede optar por no ir a la ruta de opciones de publicaci\u00f3n (ocultar barra lateral, etc.) y simplemente hacer una plantilla de p\u00e1gina principal para reemplazar o aplicar estas.<\/p>\n
Cuando su WordPress est\u00e1 configurado como una p\u00e1gina est\u00e1tica como p\u00e1gina principal, WordPress buscar\u00e1 la plantilla front-page.php<\/code>en su tema. Esto se usar\u00e1 en lugar de page.php<\/code>. Esto le permite crear y ajustar una plantilla separada que se usa solo para su portada.<\/p>\n
En esa front-page.php<\/code>plantilla, ya puede definir HTML para asegurarse de que los bloques ocupen todo el ancho, no tengan barra lateral, t\u00edtulo de p\u00e1gina ni imagen destacada. Es posible que desee simplemente hacer solo the_content()<\/code>para mostrar el contenido de la p\u00e1gina en su totalidad.<\/p>\n
Por ejemplo, esto es lo que tengo en el tema de este sitio front-page.php<\/code>. Mientras que en todas las dem\u00e1s plantillas, como page.php<\/code>, tengo muchas salidas para la barra lateral, el t\u00edtulo de la publicaci\u00f3n, etc., esta es la extensi\u00f3n total de mi bucle en front-page.php<\/code>:<\/p>\n
while (have_posts()): the_post();\n    the_content('');\nendwhile;<\/code><\/pre>\n
Eso es todo. Mis clases y HTML envolventes aseguran que el contenido de la publicaci\u00f3n sea completamente de ancho completo.<\/p>\n
Recuerde que esta es una buena soluci\u00f3n si usted, como usuario del tema, comprende c\u00f3mo funcionan sus plantillas. S\u00e9 que todo el contenido de mi p\u00e1gina principal debe estar completamente envuelto dentro de los bloques de portada. Conf\u00edo en el HTML del contenedor interno del bloque Cover para garantizar que mi contenido se vea bien y caiga en un contenedor de ancho m\u00e1ximo. Si tuviera que agregar un bloque de P\u00e1rrafo simple sin un bloque de Cubierta envolvente, no se ver\u00eda bien porque le faltar\u00eda relleno a los lados.<\/p>\n
Hacer que el encabezado de su sitio sea transparente en el primer bloque de portada<\/h2>\n
Una caracter\u00edstica muy com\u00fan en los sitios web modernos es hacer que el encabezado sea transparente en la p\u00e1gina principal. A medida que el usuario comienza a desplazarse hacia abajo en la p\u00e1gina, el encabezado cambia a un estilo fijo y obtiene un fondo. Pero mantener un encabezado transparente puede verse muy bien cuando podemos ver los colores o la imagen detr\u00e1s de la primera secci\u00f3n.<\/p>\n
Hago esto en la p\u00e1gina principal<\/a> de este sitio. \u00a1Echar un vistazo! En la parte superior de la p\u00e1gina, mi encabezado no tiene fondo y muestra el fondo de la secci\u00f3n de degradado p\u00farpura (un bloque de portada) detr\u00e1s. Una vez que comienza a desplazarse, obtiene un fondo s\u00f3lido fijo.<\/p>\n
Tenga en cuenta que debe tener en cuenta los colores de su encabezado y el fondo de la primera portada. Si su encabezado consta de un logotipo blanco y elementos de men\u00fa blancos (como el m\u00edo), no puede usar este truco con un bloque de portada que tiene un fondo claro. \u00a1Eso har\u00eda que su encabezado fuera ilegible!<\/p>\n
Si desea hacer esto, tenga en cuenta que requiere un poco de conocimiento de Javascript. Pero en realidad es muy simple. Voy a repasar los conceptos b\u00e1sicos para usted:<\/p>\n
Todo mi elemento de encabezado siempre es position: fixed<\/code>. Debido a que normalmente no quiero que mi contenido desaparezca detr\u00e1s del encabezado, agregu\u00e9 una parte superior de relleno en el elemento del cuerpo, empujando el contenido hacia abajo debajo del encabezado. Sin embargo, agregu\u00e9 una regla de que si estamos en la plantilla de la p\u00e1gina principal, este relleno no se agregar\u00e1. Eso asegura que solo en la portada, la parte del cuerpo aparecer\u00e1 detr\u00e1s del encabezado. Luego apunto el primer bloque de portada en la p\u00e1gina principal y agrego un relleno superior adicional, para garantizar que el contenido de este primer bloque no se superponga detr\u00e1s del encabezado, lo que le da un buen relleno despu\u00e9s del encabezado.<\/p>\n
Y luego agregu\u00e9 un c\u00f3digo Javascript muy simple usando jQuery:<\/p>\n
$(window).scroll(function() {\n    if ($(window).scrollTop() >= 60) {\n        $('#header').addClass('navbar-fixed')\n    } else {\n        $('#header').removeClass('navbar-fixed');\n    }\n});<\/code><\/pre>\n
Lo que hace este c\u00f3digo es agregar una clase ‘ navbar-fixed<\/code>‘ cuando la p\u00e1gina se desplaza m\u00e1s de 60 px hacia abajo. Y en mi CSS simplemente me dirijo a esta clase y agrego un color de fondo fijo. Sin esta clase, el fondo del encabezado es transparente en la p\u00e1gina principal.<\/p>\n
Eso es lo b\u00e1sico. Juega con el CSS: ajusta el "punto de punta" de Javascript y usa, por ejemplo transition<\/code>, la propiedad para hacer una transici\u00f3n m\u00e1s suave cuando se aplica el color de fondo.<\/p>\n
Grandes bloques para portadas y p\u00e1ginas de aterrizaje<\/h2>\n
WordPress ofrece una gama completa de bloques listos para usar. Algunos de ellos son especialmente \u00fatiles cuando se construye una p\u00e1gina principal o una p\u00e1gina de destino. Si ya est\u00e1 familiarizado con todos los bloques disponibles, probablemente ya los conozca.<\/p>\n