Comment personnaliser les modèles de couverture de thème de bloc WordPress avec des images de fonctions de message dynamique-tutoriel CSS-php.cn

Modèle de couverture dynamique dans WordPress Thème: Utilisez des blocs d'image en vedette pour améliorer l'expérience utilisateur

How To Customize WordPress Block Theme Cover Templates with Dynamic Post Feature Images

De nombreux thèmes WordPress présentent des images de couverture, qui est une fonctionnalité populaire. Cette tendance est également évidente dans les captures d'écran du catalogue de thème de bloc.

En prenant le thème des vingt vingt à titre d'exemple, il contient un modèle de couverture qui peut être utilisé dans des articles et des pages uniques. Les images en vedette de l'article seront affichées en haut, couvrant l'ensemble de l'écran du navigateur, avec le titre de l'article et d'autres métadonnées ci-dessous. Les modèles de couverture permettent la création d'un contenu différent de la façon traditionnelle d'afficher du contenu.

Actuellement, la création d'un modèle de couverture nécessite l'écriture de code PHP, comme le modèle de couverture pour le thème de vingt vingt-vingt-vingt. Dans le fichier template-parts/content-cover.php, il contient du code pour afficher le contenu lors de l'utilisation du modèle de couverture.

Pour les utilisateurs de WordPress ordinaires qui ne sont pas compétents en PHP, la seule option est d'utiliser des plugins comme l'interface utilisateur de type post personnalisé, comme indiqué dans la vidéo.

Bloc de couverture dans le thème du bloc

En commençant par WordPress 5.8, les auteurs de sujets peuvent utiliser le bloc de couverture de l'éditeur de blocs pour créer un modèle personnalisé (tels que des publications uniques, des auteurs, des catégories, etc.) et l'inclure dans le sujet sans écrire ou simplement une petite quantité de code.

Avant de plonger dans la façon de créer de grands blocs de couverture dans les modèles de thème de bloc, jetons brièvement un œil aux deux thèmes de bloc vingt-deux ans et Wabi par Rich Tabor.

vingt-deux implémentent les grands titres en ajoutant une image cachée comme stockage de schéma dans la section header-dark-large. Dans le thème WABI, la couleur d'arrière-plan de grand titre d'un seul article est obtenue en mettant l'accent sur la couleur d'arrière-plan et un bloc d'intervalle de hauteur de 50px. Les couleurs mettant l'accent sont gérées par les fichiers assets/js/accent-colors.js.

De nombreux autres thèmes choisissent d'utiliser des blocs de couverture pour créer des blocs de couverture supérieurs, ce qui permet à l'utilisateur de modifier la couleur d'arrière-plan et d'ajouter des images statiques sans écrire de code. De cette façon, si vous souhaitez utiliser l'image en vedette de l'article comme image d'arrière-plan d'un seul article, vous devez ajouter manuellement l'image à chaque article.

Bloc de couverture avec des images en vedette dynamique

WordPress 6.0 fournit une fonction de bloc de couverture d'image en vedette qui permet d'utiliser des images en vedette de n'importe quel article ou page comme image d'arrière-plan du bloc de couverture.

Dans la courte vidéo ci-dessous, Automattic Engineers a discuté de la façon d'ajouter des images en vedette au bloc de couverture et les a démontrées avec le thème Archeo comme exemple:

Les blocs d'images contenant les images spéciaux de l'article peuvent être plus personnalisés en utilisant les couleurs bicolores dans theme.json.

case utilisateur (wei, mode lumineux)

Lors de la navigation sur les images miniatures dans le répertoire de thème de bloc, nous voyons que la plupart des images contiennent de grands blocs de titre de couverture. Si vous approfondissez leurs fichiers de modèle, vous verrez qu'ils utilisent des blocs de couverture avec des arrière-plans d'image statiques.

Certains sujets récemment développés utilisent des blocs de couverture avec des arrière-plans d'images en vedette de l'article dynamique (par exemple, Archeo, Wei, Frost, Mode Bright, etc.). Un bref aperçu de cette nouvelle fonctionnalité peut être trouvé dans la vidéo GitHub.

Rich Tabor combine les caractéristiques de couleur d'accent dynamique du thème WABI avec des blocs d'image de couverture et de message, élargissant encore sa créativité dans son nouveau sujet pour afficher des images de couverture dynamique d'un seul post.

Dans son article de l'annonce de WEI, Rich Tabor a écrit: "Contexte Les scènes, le modèle single.html utilise un bloc de couverture qui tire parti des images en vedette de l'article. Ensuite, un deux tons est appliqué à travers le schéma de couleurs attribué à l'article. De cette façon, presque n'importe quelle image aura l'air bien."

Si vous voulez avoir un aperçu plus approfondi des blocs de couverture de titre des thèmes WEI et apprendre à créer vos propres blocs de couverture, voici une courte vidéo de Fränk Klein (cours de développement WP) qui explique son processus de création étape par étape.

Semblable au thème de WEI, Brian Gardner a également utilisé un bloc de couverture avec des blocs d'image en vedette dans son récent thème en mode lumineux pour montrer du contenu convaincant et des couleurs vives.

Brian a déclaré à Wptavern: "Son thème préféré est la façon dont les blocs de couverture sont utilisés sur une seule page. Il attire des images en vedette dans le bloc de couverture et propose des styles de bloc personnalisés pour les options d'ombre et de hauteur pleinement. ... J'ai l'impression que cela montre vraiment les possibilités de WordPress moderne."

Pour plus de détails, veuillez visiter leur site Web de démonstration et l'examen complet du thème du mode brillant de Brian.

Concevoir des dispositions complexes à l'aide de l'éditeur de blocs

Récemment, WordPress a publié un nouvel éditeur de blocs pour concevoir des pages d'accueil de connexion et des pages de téléchargement. L'annonce a déclenché diverses réactions de lecteurs, dont Matt Mullenweg d'Automatic, qui a commenté les 33 jours qu'il a fallu pour concevoir et publier une telle "page simple". Vous pouvez trouver d'autres discussions en coulisses ici.

En réponse, Jamie Marsland de Pootlepress a créé cette vidéo YouTube, et il a recréé une page d'accueil presque identique en près de 20 minutes.

Sarah Gooding de WP Travern a commenté la vidéo de Marsland "," On peut dire qu'il est un utilisateur vétéran de l'éditeur de blocs. Il peut rapidement ajuster les lignes, les colonnes et les groupes, ajuster les pads et les marges au besoin, et attribuer des couleurs de conception correspondantes à chaque bloc. Actuellement, les utilisateurs de WordPress les plus réguliers ne peuvent pas le faire. "

Bien que l'éditeur de blocs ait fait de grands progrès, il y a encore des difficultés à créer et à concevoir des dispositions complexes pour la plupart des développeurs de thèmes et des utilisateurs moyens.

Ajouter des améliorations aux blocs Gopher TT2

Dans cette section, je vous guiderai à travers comment ajouter des améliorations au thème TT2 Gopher Blocks que j'ai mentionné dans mon post précédent. Inspiré par les blocs de couverture du thème décrit précédemment, je voulais ajouter trois modèles de couverture (auteur, catégorie et couverture de page unique) au thème.

Lors de la navigation sur le site Web, nous remarquerons deux types de titres de couverture. Le titre le plus courant est que le bloc de couverture est fusionné avec le titre du site Web (titre du site et la navigation supérieure) dans le bloc de couverture (par exemple, vingt-vingt, vingt-deux ans, wei, wabi, gel, mode lumineux, etc.). Nous constatons également que le bloc de couverture du titre ne se mélange pas avec le titre du site Web, mais est situé directement en dessous, comme le site Web de la BBC Future. Pour le thème TT2 Gopher Blocks, j'ai choisi ce dernier.

Créer le mode de titre de couverture

Tout d'abord, créons un modèle de titre de couverture pour l'auteur, l'article unique et d'autres modèles (catégorie, étiquette) à l'aide du bloc de couverture. Nous les convertissons ensuite en modèles et appelons le modèle de couverture de titre correspondant dans le modèle.

Si vous connaissez l'éditeur de blocs, concevez votre bloc de titre avec des blocs de couverture dans l'éditeur du site et convertissez le code de titre de couverture en un modèle. Cependant, si vous n'êtes pas familier avec l'éditeur FSE, le moyen le plus simple est de copier le modèle du répertoire des modèles dans l'article, de faire les modifications nécessaires, puis de la convertir en modèle.

Dans mon précédent article CSS-Tricks, j'ai discuté en détail de la création et de l'utilisation de modèles de blocs. Voici un aperçu du flux de travail pour créer un seul modèle de titre de couverture d'article:

Mode de titre de couverture d'article unique

Étape 1 : À l'aide de l'interface FSE, créons un nouveau fichier vide et commençons à construire la structure de bloc illustrée dans le panneau de gauche.

Alternativement, cela peut être fait d'abord dans un article ou une page, puis copier et coller le balisage dans le fichier de schéma.

Étape 2 : Ensuite, pour convertir la marque ci-dessus en mode, nous devons d'abord copier sa marque de code et le coller en un nouveau fichier dans l'éditeur de code. Nous devons également ajouter les balises de titre de fichier de schéma requises (par exemple, titre, limace, catégorie, inserter, etc.). /patterns/header-single-cover.php

Ce qui suit est le code complet du fichier

: /patterns/header-single-cover.php

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Copier après la connexion

Étape 3 : Pour cette démonstration, j'ai utilisé cette image à partir du répertoire de photos comme image d'arrière-plan de remplissage et appliqué la couleur à deux tons minuit . Pour utiliser dynamiquement l'image en vedette de l'article, nous devons ajouter avant dimRatio:50 en remplaçant le lien d'image de remplissage susmentionné afin que la ligne 10 ressemble à ceci: "useFeaturedImage":true

<code></code>

Copier après la connexion

Alternativement, vous pouvez également modifier l'image de remplissage en cliquant sur

et en sélectionnant pour utiliser l'image en vedette Option: Maintenant, le mode de couverture de titre doit être visible dans le panneau d'insertion de mode et peut être utilisé n'importe où dans les modèles, les articles et les pages.

Titre de la couverture d'archive Inspiré par cet article WP Tavern et une procédure pas à pas étape par étape de la création du titre du modèle d'auteur, je voulais créer un titre de couverture similaire et l'ajouter au sujet TT2 Gopher.

Tout d'abord, créons un modèle de titre de couverture d'archives pour le modèle author.html, en suivant le workflow ci-dessus. Dans ce cas, je le crée dans une nouvelle page vierge en ajoutant un bloc (comme indiqué dans la vue de la liste ci-dessous):

En arrière-plan de la couverture, j'ai utilisé la même image utilisée dans la couverture du titre de post unique.

Parce que nous voulons afficher un court profil d'auteur dans le bloc d'auteur, nous devons ajouter une instruction biographique à la page de profil utilisateur, sinon le frontal affichera un espace vide.

Ce qui suit est le code de balise pour header-author-cover que nous utiliserons comme modèle:

<?php /**
     * Title: Header cover single
     * Slug: tt2gopher/header-cover-single
     * Categories: tt2gopher-header
     * Block Types: core/template-part/header
     * inserter: yes
     */
?>
<div style="margin-top:0px;margin-bottom:0px;min-height:50vh">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159443067.jpg" class="lazy" alt="" data-object-fit="cover" data-object-position="40% 37%"   style="max-width:90%">
    <div>
        <div>
            <div>


                <p>|</p>


            </div>


        </div>
    </div>
</div>

Copier après la connexion

Pour convertir la balise en mode header-author-cover, nous devons ajouter la balise de titre de fichier de modèle requise comme décrit précédemment. En modifiant le mode header-author-cover.php, nous pouvons créer des titres de couverture similaires pour les étiquettes, la taxonomie et d'autres modèles personnalisés.

Le mode

header-category-cover.php est disponible sur github dans mon modèle category.html.

Créer des modèles à l'aide de blocs de couverture

WordPress 6.0 et plus récemment Gutenberg 13.7 étendez les capacités de création de modèles dans l'éditeur de blocs, de sorte que de nombreux utilisateurs de WordPress peuvent désormais créer leurs modèles personnalisés même sans connaissance de codage approfondie.

Pour plus de détails et des cas d'utilisation, consultez les instructions de personnalisation complètes de Justin Tadlock.

L'éditeur de bloc permet la création de différents types de modèles, y compris les modèles de couverture. Décrivons brièvement comment combiner des blocs de couverture et publier des blocs d'image en vedette avec le nouveau modèle d'interface utilisateur pour créer facilement différents types de modèles personnalisés de couverture sans ou avec une petite quantité de compétences de codage.

La création de modèles est beaucoup plus facile avec Gutenberg 13.7. Comment créer des modèles de blocs dans le code et dans l'éditeur de site est décrit dans le manuel de la rubrique et dans mon article précédent.

Modèle d'auteur avec bloc de couverture

La marque supérieure (bloc de titre) du modèle est la suivante (ligne 6): author.html

<code></code>

Copier après la connexion

Ce qui suit est une capture d'écran du titre de couverture des modèles

et author.html: category.html

Le code complet de ces deux modèles peut être trouvé sur GitHub.

Article unique avec bloc de couverture Pour afficher le bloc de couverture dans un seul article, nous devons appeler le mode

(ligne 3):

header-cover-single

Il s'agit d'une capture d'écran montrant la vue frontale d'un seul post avec un bloc de couverture de titre:

<code><div style="min-height:200px">
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174157159750414.jpeg" class="lazy" alt="" data-object-fit="cover" data-object-position="50% 75%"   style="max-width:90%">
    <div>
        <div>
            <div style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">


                <div>
                    <div>
                        <p>Published by:</p>


                    </div>



                    <hr>
                </div>
            </div>
        </div>
    </div>
</div>
</code>

Copier après la connexion

Le code complet du modèle

est disponible sur GitHub.

single-cover.html Vous pouvez trouver plus de tutoriels pas à pas de procédure pas à pas sur la création de blocs de post-titre de héros et l'utilisation de blocs de couverture d'arrière-plan d'image en vedette sur les sites Web de montage complexe de la Tavern WP

et du site complet.

c'est tout!

Ressources utiles

Bloc de couverture photo en vedette

Article en vedette Bloc d'image (support WordPress)
Utilisez l'article en vedette des images avec un bloc de couverture YouTube (Dave sur WP)
Tutoriel étape par étape sur les blocs de couverture (support WordPress)
Blocs de couverture en vedette et l'avenir des données de liaison aux blocs Universal WordPress (WP Tavern)
Personnaliser la disposition d'un seul article avec WordPress Gutenberg (Pootlepress)
Dynamisez le bloc de couverture et ajoutez des liaisons d'image en vedette # 39658 (github)

Articles de blog

Les blocs de couverture en vedette et l'avenir de la liaison des données aux blocs WordPress universels (WPTAVERN)
Laissez une impression: comment utiliser les blocs pour construire un titre de héros de l'article (WPTAVERN)
Amélioration de l'éditeur de base: utilisez plus d'options de modèle pour une personnalisation plus profonde (faire WordPress Core)

Bien que les thèmes des blocs aient été fortement boycottés par les membres de la communauté WordPress en général, je pense qu'ils sont aussi l'avenir de WordPress. En utilisant des thèmes de bloc, même sans compétences en codage approfondie et maîtrise des langages PHP et JavaScript, les auteurs de thème amateurs peuvent désormais utiliser les blocs de couverture héros combinés avec des variantes de motif et de style décrites dans cet article pour créer des thèmes avec des dispositions complexes.

En tant qu'utilisateur précoce de Gutenberg, j'étais très enthousiasmé par les nouveaux outils de thème (comme create block theme Plugins, etc.) qui permettent aux auteurs de thème d'implémenter les fonctions suivantes directement à partir de l'interface utilisateur de l'éditeur de bloc sans écrire de code:

(i) Créer
(ii) Écraser le fichier de thème et l'exportation
(iii) Générer un thème vierge ou un sous-thème, et
(iv) Modifier et enregistrer la variation de style du thème actuel

En outre, les versions récentes du plugin Gutenberg permettent l'activation de la typographie et de l'alignement de mise en page et d'autres commandes de style à l'aide de fichiers theme.json (pas de règles CSS JavaScript et une ligne requises).

Merci d'avoir lu, veuillez partager vos commentaires et réflexions ci-dessous!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!