Si nous parcourons le Répertoire de thèmes WordPress, la majorité des thèmes présentent des images de couverture. C'est une fonctionnalité très demandée. La tendance de la page de couverture est vraie même dans le bloquer le répertoire du thème des captures d'écran également.
Considérons l'exemple suivant de Vingt vingt (un thème classique) qui comprend un modèle de couverture qui peut être utilisé pour afficher à la fois dans un article unique et une page, où l'image en vedette de l'article s'affiche en haut qui s'étend sur l'écran du navigateur, avec le titre de l'article et d'autres métadonnées souhaitées ci-dessous. Les modèles de couverture permettent de créer un contenu qui se démarque des contraintes traditionnelles d'affichage de contenu.
La création de modèles de couverture nécessite actuellement l'écriture de code PHP tel que capturé ici dans le Modèle de couverture du thème Twenty Twenty par défaut. Si nous regardons le template-parts/content-cover.php fichier, il contient le code pour afficher le contenu lorsque le cover-template est utilisé.
Ainsi, il n'est pas possible de créer une page de garde personnalisée si vous ne possédez pas une connaissance approfondie de PHP. Pour de nombreux utilisateurs ordinaires de WordPress, la seule option consiste à utiliser un plugin comme Custom Post Type UI comme décrit dans cette courte vidéo.
Couvrir des sections dans des thèmes de bloc
Depuis que WordPress 5.8, les auteurs de thèmes peuvent créer des modèles personnalisés (comme un article unique, un auteur, une catégorie et autres) avec une section de héros supérieure en utilisant éditeur de blocs bloc de couverture et regroupés dans leurs thèmes avec un code minimal ou nul.
Avant de plonger dans la façon dont les grandes sections de couverture supérieures sont créées dans les modèles de thèmes de bloc, examinons brièvement les deux thèmes de bloc Vingt vingt-deux ainsi que Wabi par Rich Tabor (revue complète ici).
Dans les coulisses, Twenty Twenty-Two implémente un grand en-tête en ajouter une image masquée stockée en tant que motif dans l' header-dark-large les pièces. Alors que, dans le thème Wabi, la couleur d'arrière-plan du grand en-tête dans un seul article est implémentée avec couleurs d'arrière-plan accentuées et un bloc d'espacement de hauteur 50px (lignes : 5-9). Les couleurs d'accent sont gérées par le assets/js/accent-colors.js fichier.
Beaucoup d'autres ont choisi de créer une section de couverture supérieure en utilisant bloc de couverture, qui permettait aux utilisateurs de modifier la couleur d'arrière-plan et d'ajouter une image statique à partir de la médiathèque ou de la télécharger à partir d'appareils multimédias, sans écrire de code. Avec cette approche, les images du publier un bloc d'images en vedette devait être ajouté manuellement à chaque publication si vous vouliez que l'image en vedette de la publication soit l'image d'arrière-plan dans les publications individuelles.
Blocs de couverture avec image postée dynamique
WordPress 6.0 a rendu disponible un autre cool blocs de couverture d'image en vedette fonctionnalité, qui permet d'utiliser l'image en vedette de n'importe quel article ou page comme image d'arrière-plan dans le bloc de couverture.
Dans ce qui suit courte vidéo, les ingénieurs d'Automattic discutent de l'ajout d'images en vedette pour couvrir les blocs avec un exemple de Archéo thème:
Le bloc d'image, y compris le bloc d'image post-vedette, peut être personnalisé davantage à l'aide de duotone couleur theme.json comme discuté dans ce court Joindre les points Vidéo YouTube (Anne McCarthy d'Automattic).
Utilisez des exemples de cas (Wei, mode lumineux)
Si nous parcourons les images miniatures dans le bloquer le répertoire du thème, nous voyons qu'une majorité d'entre eux incluent de grandes sections d'en-tête de couverture. Si nous creusons dans leurs fichiers de modèles, ils utilisent des blocs de couverture avec un arrière-plan d'image statique.
Certains thèmes récemment développés utilisent des blocs de couverture avec l'arrière-plan dynamique de l'image postée (par exemple, Archeo, Wei, Frost, Bright Mode, etc.). Un bref aperçu de la nouvelle fonctionnalité est disponible dans cette courte vidéo GitHub.
Combinant les caractéristiques de couleurs d'accent dynamiques de Wabi thème avec des blocs d'images de couverture et de publication, Rich Tabor élargit encore sa créativité dans son nouveau Wei thème (revue complète disponible ici) pour afficher des images de couverture dynamiques à partir d'un seul message.
Dans son message d'annonce de Wei, Rich Tabor écrit: « Dans les coulisses, le single.html Le modèle utilise un bloc de couverture qui exploite l'image en vedette de la publication. Ensuite, la bichromie est appliquée par le jeu de couleurs attribué au poste. De cette façon, à peu près n'importe quelle image aura fière allure ».
Si vous souhaitez approfondir le bloc de couverture d'en-tête du thème Wei et apprendre à créer le vôtre, voici un courte vidéo de Frank Klein (WP Development Courses) qui explique étape par étape comment il a été créé.
Semblable au thème Wei, Brian Gardner utilise également le bloc de couverture avec le bloc d'image en vedette dans son récent Mode lumineux thème pour afficher le contenu hors concours avec couleurs vives.
Brian a dit à WPTavern: "ce qu'il aime le plus dans le thème, c'est la façon dont le bloc de couverture est utilisé sur pages simples. Il extrait l'image sélectionnée dans le bloc de couverture et propose également des styles de bloc personnalisés pour les ombres et les options pleine hauteur. […] J'ai l'impression que cela présente vraiment ce qui est possible avec WordPress moderne.
Pour plus de détails, voici son site de démonstration ainsi que examen complet du thème Bright Mode de Brian.
Concevoir des mises en page complexes avec l'éditeur de blocs
Récemment, WordPress a lancé un nouvel éditeur de blocs conçu page d'accueil d'atterrissage et page de téléchargement. L'annonce suscité des réactions mitigées de ses lecteurs, y compris de Matt Mullenweg (Automattic) qui a commenté les 33 jours nécessaires pour concevoir et lancer une telle "page simple". Tu peux trouver discussions supplémentaires en coulisses ici.
En réponse, Jamie Marsland de Pootlepress a créé cette vidéo YouTube où il reproduit une page d'accueil presque identique en près de 20 minutes.
Commentant la vidéo de Marsland, Sarah Gooding de WP Travern écrit: "Il est ce que l'on pourrait décrire comme un utilisateur expérimenté avec l'éditeur de blocs. Il peut rapidement mélanger les lignes, les colonnes et les groupes, ajuster le rembourrage et les marges si nécessaire, et attribuer à chaque section la couleur correspondante pour la conception. À ce stade, ce n'est pas quelque chose que la plupart des utilisateurs moyens de WordPress pourraient faire.
Bien que l'éditeur de blocs ait parcouru un long chemin, la plupart des développeurs de thèmes et des utilisateurs ordinaires éprouvent toujours des difficultés croissantes à créer et à concevoir des mises en page complexes avec lui.
Ajout d'améliorations aux blocs TT2 Gopher
Dans cette section, je vais vous expliquer comment j'ai ajouté des améliorations au Thème TT2 Gopher Blocks que j'évoquais dans mon précédent article. Inspiré par les blocs de couverture des thèmes que j'ai décrits précédemment, je voulais ajouter trois modèles de couverture (auteur, catégorie et couverture unique) au thème.
Lors de la navigation sur les sites Web, nous remarquons deux types d'en-têtes de couverture. L'en-tête le plus observé est la section de couverture fusionnée avec l'en-tête du site (titre du site et navigation supérieure) dans le bloc de couverture (par exemple, Twenty Twenty, Twenty Twenty-Two, Wei, Wabi, Frost, Bright Mode, etc.). Nous trouvons également une section de couverture d'en-tête qui n'est pas mélangée avec l'en-tête du site et positionnée juste en dessous, comme celle-ci BBC Future site Internet. Pour le thème des blocs TT2 Gopher, j'ai opté pour ce dernier.
Création de motifs d'en-tête de couverture
Tout d'abord, créons des modèles d'en-tête de couverture pour les modèles d'auteur, uniques et autres (catégories, balises) à l'aide de blocs de couverture. Ensuite, nous les convertirons en modèles (comme décrit ici précédemment) et appelez les modèles de couverture d'en-tête respectifs dans les modèles.
Si vous avez l'habitude de travailler avec l'éditeur de blocs, concevez votre section d'en-tête à l'aide de blocs de couverture dans l'éditeur de site, puis convertissez le code d'en-tête de couverture en modèles. Cependant, si vous n'êtes pas familiarisé avec l'éditeur FSE, le moyen le plus simple consiste à copier des motifs à partir du répertoire de modèles dans un article, apportez les modifications nécessaires et convertissez-le en modèle.
Dans mon article précédent CSS-Tricks, j'ai discuté en détail de la création et de l'utilisation de modèles de blocs. Voici un bref aperçu du flux de travail que j'utilise pour créer le modèle d'en-tête de couverture de publication unique :
Modèle d'en-tête de couverture à un seul poteau
Étape 1: À l'aide de l'interface FSE, créons un nouveau fichier vierge et commençons à construire la structure du bloc comme indiqué sur le panneau de gauche.
Alternativement, cela pourrait être fait dans un article ou une page d'abord, puis copier et coller le balisage dans un fichier de modèle, plus tard.
Étape 2: Ensuite, pour convertir le balisage ci-dessus en un modèle, nous devons d'abord copier son balisage de code et le coller dans un nouveau /patterns/header-single-cover.php dans notre éditeur de code. Nous devrions également ajouter le balisage d'en-tête de fichier de modèle requis (par exemple, titre, slug, catégories, insertion, etc.).
Voici le code complet du /patterns/header-single-cover.php fichier:
|
How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images
Étape 3: Pour cette démo, j'ai utilisé cette image du répertoire photos comme image d'arrière-plan de remplissage, et appliqué le Minuit couleur bicolore. Pour utiliser dynamiquement l'image en vedette, nous devons ajouter "useFeaturedImage":true dans le bloc de couverture en remplaçant le lien d'image de remplissage ci-dessus juste avant le "dimRatio":50 de sorte que la ligne 10 devrait ressembler à ceci :
Alternativement, l'image de remplissage peut également être modifiée en cliquant sur remplacer et la sélection Utiliser l'image sélectionnée option:
Désormais, les modèles de couverture d'en-tête doivent être visibles dans le panneau d'insertion de modèles pour une utilisation n'importe où dans les modèles, les publications et les pages.
En-têtes de couverture d'archives
Inspiré par ce poste WP Tavern et une procédure pas à pas pour créer un en-tête de modèle d'auteur, je voulais créer un en-tête de couverture similaire et l'ajouter également au thème TT2 Gopher.
Commençons par créer le modèle d'en-tête de couverture d'archive pour author.html également le modèle, en suivant le workflow ci-dessus. Dans ce cas, je crée ceci dans une nouvelle page vierge, en ajoutant des blocs (comme indiqué ci-dessous dans la vue liste):
En arrière-plan pour la couverture, j'ai utilisé la même image que celle utilisée dans la couverture de l'en-tête de publication unique.
Parce que nous aimerions afficher une courte biographie de l'auteur sur le bloc auteur, une notice biographique doit également être ajoutée à la page de profil de l'utilisateur, sinon un espace vide sera affiché dans le front-end.
Voici le code de balisage du header-author-cover, que nous utiliserons pattern, à l'étape suivante :
Published by:
Pour convertir le balisage en un header-author-cover pattern, nous devons ajouter le balisage d'en-tête de fichier de modèle requis comme décrit précédemment. En éditant le header-author-cover.php modèle, nous pouvons créer des couvertures d'en-tête similaires pour les balises, la taxonomie et d'autres modèles personnalisés.
La header-category-cover.php modèle pour mon category.html le modèle est disponible sur GitHub.
Création de modèles avec des blocs de couverture d'en-tête
WordPress 6.0 et la récente Gutenberg 13.7 fonctionnalités étendues de création de modèles dans l'éditeur de blocs, permettant ainsi à de nombreux utilisateurs de WordPress, sans connaissance approfondie du codage, de créer leurs modèles personnalisés.
Pour des informations plus détaillées et des cas d'utilisation, voici un note de personnalisation approfondie par Justin Tadlock.
Éditeur de blocs permet de créer différents types de modèles, y compris des modèles de couverture. Voyons brièvement comment combiner bloc de couverture ainsi que publier un bloc d'images en vedette avec la nouvelle interface utilisateur de modèle, il est facile de créer différents types de modèles personnalisés de couverture, même avec peu ou pas de compétences en codage.
La création de modèles a été beaucoup plus facile avec Gutenberg 13.7. Comment créer des modèles de bloc avec des codes ainsi que dans l'éditeur de site est décrit dans le Manuel thématique et en mon article précédent.
Modèle d'auteur avec bloc de couverture
Balise supérieure (section d'en-tête) de la author.html modèle est illustré ci-dessous (ligne 6):
...
...
...
... Voici des captures d'écran des en-têtes de couverture pour le author.html ainsi que category.html modèles:
L'ensemble le code pour les deux modèles est disponible sur GitHub.
Poteau simple avec bloc de couverture
Pour afficher le bloc de couverture dans notre article unique, nous devons appeler le header-cover-single pattern sous la section d'en-tête (ligne 3) :
....
....
....Voici une capture d'écran montrant la vue frontale de la publication unique avec la section de couverture d'en-tête :
L'ensemble single-cover.html le modèle est disponible sur GitHub.
Vous pouvez trouver des didacticiels pas à pas supplémentaires sur la création d'un section de message d'en-tête de héros ainsi que en utilisant des blocs de couverture d'arrière-plan d'image en vedette on WP Tavern ainsi que Édition complète du site en ligne.
Voilà!
Ressources utiles
Bloc de couverture d'image en vedette
Blog
Même si les thèmes de bloc, en général, sont recevoir beaucoup de réactions de la part des membres de la communauté WordPress, à mon avis, ils sont l'avenir de WordPress, aussi. Avec les thèmes de blocs, les auteurs de thèmes amateurs, sans les compétences de codage approfondies et la maîtrise des langages PHP et JavaScript, peuvent désormais créer des thèmes avec des mises en page complexes avec une section de couverture de héros comme décrit dans cet article combiné avec motifs ainsi que variantes de style.
En tant que premier utilisateur de Gutenberg, je ne pourrais pas être plus enthousiasmé par les nouveaux outils de thème comme créer un thème de bloc plugin et d'autres qui permettent aux auteurs de thèmes d'obtenir ce qui suit directement à partir de l'interface utilisateur de l'éditeur de blocs sans écrire de code :
- (I) engendrent
- (ii) écraser les fichiers de thème et exporter
- (iii) générer un thème vierge ou enfant, et
- (iv) modifier et enregistrer la variation de style du thème actuel
De plus, les récentes itérations du plugin Gutenberg permettent d'activer typographie fluide ainsi que alignements de mise en page et d'autres contrôles stylistiques utilisant uniquement theme.json fichier sans JavaScript et une ligne de règles CSS.
Merci d'avoir lu et de partager vos commentaires et réflexions ci-dessous!
