Si navegamos por Directorio de temas de WordPress, la mayoría de los temas muestran imágenes de portada. Es una función de demanda popular. La tendencia de la portada es cierta incluso en el directorio de tema de bloque capturas de pantalla también.
Consideremos el siguiente ejemplo de Veinte veinte (un tema clásico) que incluye un plantilla de portada que se puede usar para mostrar tanto en una sola publicación como en una página, donde la imagen destacada de la publicación se muestra en la parte superior que se extiende a lo largo de la pantalla del navegador, con el título de la publicación y otros metadatos deseados debajo. Las plantillas de portada permiten crear contenido que se destaca de las limitaciones tradicionales de visualización de contenido.
La creación de plantillas de portada actualmente requiere escribir código PHP como se captura aquí en el Plantilla de portada del tema predeterminado de Twenty Twenty. Si nos fijamos en el template-parts/content-cover.php archivo, contiene el código para mostrar contenido cuando el cover-template se utiliza.
Por lo tanto, no es posible crear una portada personalizada si no posee un conocimiento profundo de PHP. Para muchos usuarios comunes de WordPress, la única opción es usar un complemento como Custom Post Type UI como se describe en este breve video.
Cubrir secciones en temas de bloque
Como WordPress 5.8, los autores de temas podrían crear plantillas personalizadas (como publicación única, autor, categoría y otras) con una sección de héroe superior usando editor de bloques bloque de portada y agrupados en sus temas con un código mínimo o sin código.
Antes de profundizar en cómo se crean las secciones de portada más grandes en las plantillas de temas de bloque, veamos brevemente los dos temas de bloque Veintidós y Wabi por Rich Tabor (revisión completa esta página).
Detrás de escena, Twenty Twenty-Two implementa un encabezado grande al agregar una imagen oculta almacenada como un patrón existentes header-dark-large partes. Mientras que, en el tema de Wabi, el color de fondo del encabezado grande en una sola publicación se implementa con acentuar los colores de fondo y un bloque espaciador de 50 px de altura (líneas: 5-9). Los colores de acento son administrados por el assets/js/accent-colors.js archivo.
Muchos otros eligieron crear una sección de portada superior usando bloque de cubierta, que permitía a los usuarios cambiar el color de fondo y agregar una imagen estática desde la biblioteca multimedia o cargarla desde dispositivos multimedia, sin escribir ningún código. Con este enfoque, las imágenes de la publicar bloque de imagen destacada tenía que agregarse manualmente a cada publicación individual si deseaba tener la imagen destacada de la publicación como imagen de fondo en publicaciones individuales.
Bloques de portada con imagen destacada de publicación dinámica
WordPress 6.0 puso a disposición otra genial bloques de portada de imagen destacada característica, que permite el uso de la imagen destacada de cualquier publicación o página como imagen de fondo en el bloque de portada.
En la siguiente video breve, Los ingenieros de Automattic analizan cómo agregar imágenes destacadas para cubrir bloques con un ejemplo de Archaeo tema:
El bloque de imagen, incluido el bloque de imagen destacado de la publicación, se puede personalizar aún más usando duotone colorear en theme.json como se discutió en este breve Conectando los puntos Video de YouTube (Anne McCarthy de Automattic).
Ejemplos de casos de uso (Wei, Modo claro)
Si navegamos por las imágenes en miniatura en el directorio de tema de bloque, vemos que la mayoría de ellos incluyen grandes secciones de encabezado de portada. Si profundizamos en sus archivos de plantilla, hacen uso de bloques de portada con fondo de imagen estática.
Algunos temas desarrollados recientemente utilizan bloques de portada con el fondo de imagen destacado de la publicación dinámica (por ejemplo, Archeo, Wei, Frost, Bright Mode, etc.). Una breve descripción de la nueva característica está disponible en este breve video de GitHub.
Combinando características de colores de acento dinámicos de Wabi tema con bloques de imágenes destacadas de portada y publicación, Rich Tabor expande aún más su creatividad en su nuevo Wei tema (revisión completa disponible esta página) para mostrar imágenes de portada dinámicas de una sola publicación.
En su publicación de anuncio de Wei, Rich Tabor escribe: “Detrás de escena, el single.html la plantilla utiliza un bloque de portada que aprovecha la imagen destacada de la publicación. Luego se aplica el duotono mediante el esquema de color asignado al puesto. De esta manera, casi cualquier imagen se verá bien”.
Si desea profundizar en el bloque de portada del encabezado del tema Wei y aprender a crear el suyo propio, aquí hay un video breve en frank klein (WP Development Courses) quien explica paso a paso cómo se creó.
Similar al tema Wei, Brian Gardner también hace uso del bloque de portada con el bloque de imagen destacada de la publicación en su reciente Modo brillante tema para mostrar contenidos destacados con colores vibrantes.
Brian le dijo a WPTavern: “lo que más le gusta del tema es la forma en que se usa el Cover Block en páginas individuales. Coloca la imagen destacada en el bloque de portada y también ofrece estilos de bloque personalizados para sombras y opciones de altura completa. […] Siento que esto realmente presenta lo que es posible con WordPress moderno”.
Para más detalle, aquí está su Sitio de demostración y revisión completa del tema Bright Mode de Brian.
Diseñar diseños complejos con el editor de bloques
Recientemente, WordPress lanzó un nuevo editor de bloques diseñado página de inicio de aterrizaje y Página de descarga. El anuncio atrajo reacciones mixtas de sus lectores, incluso de Matt Mullenweg (Automattic) quien comentó sobre los 33 días necesarios para diseñar y lanzar una "página tan simple". Puedes encontrar discusiones adicionales detrás de escena aquí.
En respuesta, Jamie Marsland de Pootlepress creó este video de YouTube donde reproduce una página de inicio casi idéntica en casi 20 minutos.
Comentando el video de Marsland, Sarah Gooding de WP Travern escribe: “Él es lo que uno podría describir como un usuario avanzado con el editor de bloques. Puede barajar rápidamente filas, columnas y grupos, ajustar el relleno y los márgenes según sea necesario, y asignar a cada sección el color correspondiente para el diseño. En este punto, esto no es algo que la mayoría de los usuarios promedio de WordPress puedan hacer”.
Aunque el editor de bloques ha recorrido un largo camino, todavía existen puntos débiles para la mayoría de los desarrolladores de temas y usuarios comunes para crear y diseñar diseños complejos con él.
Agregando mejoras a los bloques TT2 Gopher
En esta sección, lo guiaré a través de cómo agregué mejoras al Tema de bloques TT2 Gopher que mencioné en mi artículo anterior. Inspirándome en los bloques de portada de los temas que describí anteriormente, quería agregar tres plantillas de portada (autor, categoría y portada única) al tema.
Mientras navegamos por sitios web, notamos dos tipos de encabezados de portada. El encabezado más observado es la sección de portada combinada con el encabezado del sitio (título del sitio y navegación superior) en el bloque de portada (por ejemplo, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). También encontramos una sección de portada de encabezado que no está mezclada con el encabezado del sitio y se coloca justo debajo, como esta BBC Future sitio web. Para el tema de bloques TT2 Gopher, opté por este último.
Creación de patrones de encabezado de portada
Primero, vamos a crear patrones de encabezado de portada para plantillas de autor, individual y otras (categorías, etiquetas) utilizando bloques de portada. Luego los convertiremos en patrones (como se describe aquí anteriormente) y llame a los patrones de portada de encabezado respectivos en las plantillas.
Si está familiarizado con el trabajo con el editor de bloques, diseñe su sección de encabezado utilizando bloques de portada en el editor del sitio y luego convierta el código del encabezado de portada en patrones. Sin embargo, si no está familiarizado con el editor FSE, la forma más fácil es copiar patrones desde el directorio de patrones en una publicación, haga la modificación necesaria y conviértala en un patrón.
En mi artículo anterior de Trucos CSS, discutí en detalle sobre la creación y el uso de patrones de bloques. Aquí hay una breve descripción general del flujo de trabajo que estoy usando para crear el patrón de encabezado de portada de publicación única:
Patrón de encabezado de portada de publicación única
Paso 1: Usando la interfaz FSE, creemos un nuevo archivo en blanco y comencemos a construir la estructura de bloques como se muestra en el panel izquierdo.
Alternativamente, esto podría hacerse primero en una publicación o página, y luego copiar y pegar el marcado en un archivo de patrón, más adelante.
Paso 2: A continuación, para convertir el marcado anterior en un patrón, primero debemos copiar su marcado de código y pegarlo en un nuevo /patterns/header-single-cover.php en nuestro editor de código. También debemos agregar el marcado de encabezado de archivo de patrón requerido (por ejemplo, título, slug, categorías, insertador, etc.).
Aquí está el código completo de la /patterns/header-single-cover.php archivo:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Paso 3: Para esta demostración, he usado esta imagen del directorio de fotos como una imagen de fondo de relleno, y aplicó el Mística color duotono. Para usar la imagen destacada de la publicación de forma dinámica, debemos agregar "useFeaturedImage":true en el bloque de portada reemplazando el enlace de la imagen de relleno anterior justo antes del "dimRatio":50 tal que la línea 10 debería verse así:
Alternativamente, la imagen de relleno también se puede cambiar haciendo clic en Reemplaza y seleccionando Usar imagen destacada opción:
Ahora, los patrones de la portada del encabezado deberían estar visibles en el panel de inserción de patrones para usar en cualquier lugar de las plantillas, publicaciones y páginas.
Encabezados de portada de archivo
Inspirado por thesuburbansoapbox.com esta publicación de WP Tavern y un tutorial paso a paso para crear un encabezado de plantilla de autor, quería crear un encabezado de portada similar y agregarlo también al tema TT2 Gopher.
Primero, vamos a crear el patrón de encabezado de portada de archivo para author.html la plantilla también, siguiendo el flujo de trabajo anterior. En este caso, estoy creando esto en una nueva página en blanco, agregando bloques (como se muestra a continuación en la vista de lista):
En el fondo de la portada, utilicé la misma imagen que se usó en la portada del encabezado de una sola publicación.
Debido a que nos gustaría mostrar una breve biografía del autor en el bloque del autor, también se debe agregar una declaración biográfica a la página de perfil del usuario o, de lo contrario, se mostrará un espacio en blanco en el front-end.
El siguiente es el código de marcado del header-author-cover, que usaremos patrón, en el siguiente paso:
Published by:
Para convertir el marcado en un header-author-cover patrón, debemos agregar el marcado de encabezado de archivo de patrón requerido como se describió anteriormente. Al editar el header-author-cover.php patrón, podemos crear portadas de encabezado similares para etiquetas, taxonomía y otras plantillas personalizadas.
La header-category-cover.php patrón para mi category.html la plantilla está disponible en GitHub.
Creación de plantillas con bloques de portada de encabezado
WordPress 6.0 y la reciente Gutenberg 13.7 funciones de creación de plantillas extendidas en el editor de bloques, lo que hace posible que muchos usuarios de WordPress, sin un conocimiento profundo de la codificación, creen sus plantillas personalizadas.
Para obtener información más detallada y casos de uso, aquí hay un nota detallada de personalización de Justin Tadlock.
Editor de bloques permite crear varios tipos de plantillas, incluidas las plantillas de portada. Repasemos brevemente cómo combinar bloque de cubierta y publicar bloque de imagen destacada con la nueva interfaz de usuario de plantilla, facilita la creación de varios tipos de plantillas personalizadas de portada, incluso sin habilidades de codificación o con pocas habilidades.
La creación de plantillas se ha hecho mucho más fácil con Gutenberg 13.7. Cómo crear plantillas de bloques con códigos y en el editor del sitio se describe en el Manual temático y en mi artículo anterior.
Plantilla de autor con bloque de portada
Marca superior (sección de encabezado) del author.html la plantilla se muestra a continuación (línea 6):
...
...
...
... Aquí hay capturas de pantalla de encabezados de portada para el author.html y category.html plantillas:
La totalidad el código para ambas plantillas está disponible en GitHub.
Columna simple con bloque de cubierta
Para mostrar el bloque de portada en nuestra publicación única, tenemos que llamar al header-cover-single pattern debajo de la sección del encabezado (línea 3):
....
....
....Aquí hay una captura de pantalla que muestra la vista frontal de la publicación única con la sección de portada del encabezado:
La totalidad single-cover.html la plantilla está disponible en GitHub.
Puede encontrar tutoriales paso a paso adicionales sobre cómo crear un sección de publicación de encabezado de héroe y usando bloques de portada de fondo de imagen destacada de publicación on WP Tavern y Edición del sitio completo sitio web.
¡Ahi tienes!
Recursos Útiles
Bloque de portada de imagen destacada
Posts del Blog
Aunque los temas de los bloques, en general, son recibiendo mucho rechazo de los miembros de la comunidad de WordPress, en mi opinión, son el futuro de WordPress, también. Con los temas de bloque, los autores de temas aficionados, sin las habilidades profundas de codificación y el dominio de los lenguajes PHP y JavaScript, ahora pueden crear temas con diseños complejos con una sección de portada de héroe como se describe en este artículo combinado con . y variaciones de estilo.
Como uno de los primeros usuarios de Gutenberg, no podría estar más entusiasmado con las nuevas herramientas de temas como crear tema de bloque complemento y otros que permiten a los autores de temas lograr lo siguiente directamente desde la interfaz de usuario del editor de bloques sin escribir ningún código:
- (I) Para crear
- (ii) sobrescribir archivos de temas y exportar
- (iii) generar un espacio en blanco o un tema secundario, y
- (iv) modificar y guardar la variación de estilo del tema actual
Además, las iteraciones recientes del complemento de Gutenberg permiten habilitar tipografía fluida y alineaciones de diseño y otros controles estilísticos utilizando sólo theme.json archivo sin JavaScript y una línea de reglas CSS.
¡Gracias por leer y compartir sus comentarios y pensamientos a continuación!
