Dans cet article, nous verrons comment utiliser l’éditeur Gutenberg pour créer des pages d’accueil ou des pages de destination attrayantes et modernes. Nous examinerons en particulier comment vous, en tant que développeur, pouvez ajuster votre code de thème pour prendre en charge cela. Ce guide est parfait pour vous qui souhaitez ajuster un ancien thème pour prendre en charge Gutenberg, ou souhaitez apprendre à développer de nouveaux thèmes optimisés pour Gutenberg.
Lorsque WordPress a introduit le nouvel éditeur Gutenberg dans WordPress 5.0 (sorti vers décembre 2018), il a principalement rendu inutile l’utilisation d’un plugin de création de page séparé. L’éditeur Gutenberg donne à l’auteur WordPress beaucoup de flexibilité et la possibilité de créer un contenu riche et des conceptions qui n’étaient pas faciles auparavant – à moins que le thème ou un plugin ne fournisse la fonctionnalité pour eux en utilisant par exemple des shortcodes.
Vous obtenez beaucoup de style pour les blocs Gutenberg prêts à l’emploi dans WordPress, mais avec un peu de travail dans votre thème et des connaissances sur les blocs, vous pouvez ajouter beaucoup plus à l’expérience Gutenberg. Voyons comment !
Activation des blocs larges et pleine largeur
La plupart des blocs vous permettent de choisir des alignements de blocs. Lorsque vous travaillez dans Gutenberg sur un thème non développé pour Gutenberg, vous avez le choix entre "Aligner à gauche, "Aligner au centre" et "Aligner à droite".
Mais saviez-vous qu’il y en a en fait deux autres? Les deux autres, "large largeur" et "pleine largeur" sont parfaites pour créer une page d’accueil ou une page de destination. Nous examinerons de plus près comment optimiser la mise en page et la conception de votre thème pour prendre pleinement en charge les blocs larges et pleine largeur ultérieurement. Vous devez d’abord dire à WordPress d’ajouter la prise en charge de ces deux alignements de blocs dans votre thème.
Dans une fonction qui vous est accrochée after_setup_theme, appelez simplement add_theme_support('align-wide'). Vous avez probablement déjà une fonction « configuration » dans votre thème, ou si ce n’est pas le cas, ajoutez-la dans votre thèmefunctions.php :
add_action('after_setup_theme', function() {
add_theme_support('align-wide');
});Avec ce code actif dans votre thème, vous devriez maintenant obtenir un total de cinq options pour les alignements de blocs. Pour certains blocs, par exemple Colonnes, vous n’obtenez que les deux nouveaux.
Il existe certains types de blocs où vous pouvez définir des alignements de blocs – la plupart du temps, c’est le type qui prend en charge les blocs imbriqués, c’est-à-dire. un bloc qui vous permet d’ajouter des blocs à l’intérieur. Ces blocs populaires sont la couverture, les colonnes, l’image, les blocs d’intégration, etc. Le bloc Couverture est un excellent bloc pour créer des pages d’accueil ou des pages de destination, comme nous le verrons tout au long de cet article.
Utilisation du bloc Couverture
Le bloc Couverture est certainement le meilleur bloc lorsque vous souhaitez créer une page d’accueil ou une page de destination divisée en sections. Vous pouvez ajouter n’importe quel type de bloc et autant de blocs que vous le souhaitez à l’intérieur d’un bloc de couverture. Avec un bloc Couverture, vous pouvez définir une couleur d’arrière-plan, une image d’arrière-plan ou une image d’arrière-plan avec une superposition de couleur.
Combiné avec la possibilité de régler le réglage du bloc sur large ou pleine largeur (comme nous l’avons fait ci-dessus), le bloc Cover est un outil puissant. Vous pouvez créer une page où tout le contenu réside dans des sections de blocs de couverture pleine largeur avec chacune sa propre couleur d’arrière-plan ou image d’arrière-plan. Avec le style et la mise en page corrects dans votre thème, vous disposez d’un constructeur de page d’accueil moderne à part entière.
Dans WordPress 5.3, une amélioration importante est venue pour le bloc Cover: un wrapper HTML interne. Cela signifie que le bloc Cover a un élément HTML pour la section elle-même – avec sa couleur d’arrière-plan ou son image d’arrière-plan, puis un autre élément HTML où réside tout le contenu. Combinez cela avec un alignement de bloc pleine largeur : stylisez l’élément externe (avec la couleur ou l’image d’arrière-plan) pour qu’il aille complètement en pleine largeur, puis stylisez l’élément HTML interne avec le contenu pour qu’il tienne dans le conteneur de votre thème.
Par exemple, supposons que votre thème ait un conteneur de largeur maximale de 1200 pixels. Vous avez probablement déjà une classe HTML spécifique qui est stylisée avec max-width, garantissant que votre contenu ne se contente pas de s’afficher sur toute la largeur, quelle que soit la taille de l’écran. Ajoutez votre style de largeur maximale au code HTML interne de la couverture ; nom de classe wp-block-cover__inner-container. Par exemple:
.wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.wp-block-cover.alignfull .wp-block-cover__inner-container {
position: relative;
width: 100%;
max-width: 1200px;
padding: 0 20px;
}Dans le code CSS ci-dessus, je cible deux classes parent Cover. La classe de bloc de couverture parent change selon que vous choisissez ou non une image d’arrière-plan. Les blocs de couverture avec une image d’arrière-plan obtiennent la classe " wp-block-cover-image" et les blocs de couverture avec une couleur d’arrière-plan obtiennent la classe " wp-block-cover". De plus je cible également l’alignement du bloc "Full Width" avec la classe " alignfull". L’alignement de bloc "Wide Width" obtient la classe " alignwide". Ajoutez CSS pour cibler également cet alignement de bloc – en fonction de ce que vous voulez faire.
Si vous avez commencé à jouer avec cela, vous avez peut-être rencontré des problèmes avec la disposition générale du thème. Votre thème oblige probablement vos blocs de couverture pleine largeur à ne pas aller du tout en pleine largeur. Regardons cela ensuite.
Disposition du thème et style pleine largeur
Jusqu’à présent, nous avons ajouté la prise en charge des blocs larges et pleine largeur et appris à utiliser et à optimiser le bloc Couverture pour agir comme des sections de page d’accueil ou de page de destination. Mais dans la plupart des thèmes, votre code HTML et votre mise en page peuvent empêcher le contenu de votre publication d’aller en pleine largeur.
Votre thème a probablement une barre latérale droite en vue de publication unique ou de page. Il existe probablement des wrappers HTML supplémentaires, y compris un élément de conteneur de largeur maximale, qui empêche vos blocs pleine largeur d’aller réellement en pleine largeur. Vos emballages ont probablement aussi un peu de marges ou de rembourrage, ce qui empêche à nouveau les blocs pleine largeur de toucher complètement les bords de l’écran. Mais vous devez faire en sorte que la publication ou la page unique ait l’air bien pour les publications où l’utilisateur n’utilise pas non plus les blocs de couverture. Vous devez tenir compte de vos wrappers lors du développement pour Gutenberg avec prise en charge des blocs larges et pleine largeur. Tout dépend de la conception, du code HTML et du style de votre thème, mais examinons quelques idées pour résoudre ce problème.
Une bonne solution serait d’ajouter des options de publication ; paramètres méta personnalisés pour les publications et les pages qui affectent la mise en page de cette page. Vous pouvez définir un paramètre pour masquer la barre latérale ou pour forcer le contenu de votre publication à s’afficher sur toute la largeur. Créez vous-même les paramètres de publication manuellement en ajoutant des métaboxes ou utilisez des champs personnalisés avancés pour faciliter ce processus. Et puis, dans votre thème, vous récupérez les paramètres de publication et gérez la sortie HTML en conséquence.
D’autres bonnes options de publication consistent à masquer le titre de la page et/ou à masquer l’image en vedette. Cela vous permet de créer du contenu normalement, mais pour des pages spécifiques, vous pouvez facilement configurer une page de destination entièrement avec des blocs de couverture pleine largeur. En masquant le titre de la page standard, vous pouvez créer un en-tête ou une section d’appel à l’action plus attrayants pour servir de titre de page à la place.
Créer des styles de bloc
Il existe une fonctionnalité peu connue dans WordPress Gutenberg ; les blocs peuvent avoir différents styles. Vous pouvez voir les styles de bloc en action avec le bloc Citation. Ajoutez le bloc dans votre éditeur et jetez un œil à l’inspecteur (barre latérale droite). Vous trouverez la rubrique "Styles" et deux options entre différents styles.
Créez des styles personnalisés qui facilitent la création de pages d’accueil et de pages de destination. Je suggère au moins d’ajouter des styles de bloc personnalisés au bloc Titre, afin que vous puissiez créer des styles personnalisés sans interrompre les titres pour les publications normales. Créez un style de bloc pour les titres de section avec une police extra large et un rembourrage supplémentaire.
Lorsque vous essayez de créer des pages d’accueil, notez ce que vous devez personnaliser à plusieurs reprises – cela pourrait convenir à un style de bloc.
L’ajout de styles de blocs personnalisés est en fait très simple et ne nécessite aucune connaissance de Javascript. J’ai un tutoriel séparé sur la façon de procéder si vous voulez en savoir plus à ce sujet.
PS: Si vous ne voyez pas les styles de bloc, votre thème pourrait ne pas prendre en charge cela. Le processus est le même que pour les alignements de blocs larges et pleine largeur ; dans le crochet after_setup_theme, vous ajoutez add_theme_support('wp-block-styles'):
add_action('after_setup_theme', function() {
add_theme_support('wp-block-styles');
});Utiliser les couleurs du thème comme palette de couleurs
Si vous avez joué avec Gutenberg, vous avez probablement remarqué que Gutenberg vous propose un certain ensemble de couleurs pour le texte ou la couleur d’arrière-plan. Par exemple, l’ajout d’un bloc de couverture vous invitera à choisir une couleur dans une palette de couleurs.
Vous avez la possibilité d’utiliser un sélecteur de couleurs pour choisir ou entrer la couleur hexadécimale à la couleur précise que vous voulez. Vous pouvez y accéder en cliquant sur le lien "Couleur personnalisée". Mais si vous utilisez le même ensemble de couleurs dans votre thème et que vous voulez le garder cohérent, il peut être fastidieux de se souvenir constamment et d’entrer les mêmes codes de couleur hexadécimaux à chaque fois.
Heureusement WordPress Gutenberg vous permet de définir la palette de couleurs! C’est encore un autre add_theme_support()où vous fournissez un tableau des couleurs que vous voulez dans la palette. Dans une fonction accrochée à after_setup_theme, faites ceci :
Dans le code ci-dessus, nous ajoutons la prise en charge du thème pour ‘ editor-color-palette‘, et comme deuxième paramètre de la fonction, nous définissons un tableau de toutes les couleurs que nous voulons. Chaque couleur requiert les attributs name, sluget color. nameest ce qui apparaît lorsque vous passez la souris sur la couleur dans la palette. slugest le nom de classe qui sera ajouté à l’élément de bloc. Et colordéfinit le code hexadécimal de votre couleur.
Gardez à l’esprit que vous devez ajouter des styles dans votre CSS ciblant chacune de ces classes (définies par slug). WordPress n’applique pas automatiquement la couleur hexadécimale sur vos blocs même si nous indiquons à WordPress quel est le code de couleur.
A titre d’exemple, l’image à droite est ma palette de couleurs que j’ai définie pour le thème de ce site – pour A White Pixel :
Ce sont mes couleurs de thème et dans 95% des cas, j’utiliserai l’une de ces couleurs – soit comme arrière-plan, soit comme couleur de texte. Dans de rares cas, je peux retirer le sélecteur de couleurs, mais le fait d’avoir les suspects habituels déjà définis dans la palette de couleurs rend la vie beaucoup plus facile.
Une astuce consiste à toujours s’assurer d’ajouter du noir pur (#000000) et du blanc pur (#FFFFFF) dans votre palette de couleurs. C’est probablement aussi une bonne idée d’avoir une ou deux couleurs gris clair.
Utilisation d’une page d’accueil statique et optimisation du modèle de page d’accueil
Vous le savez probablement déjà, mais je le mentionnerai tout de même. Dans WordPress, vous pouvez définir une page statique comme page d’accueil en allant dans Paramètres > Lecture.
Par défaut, la page d’accueil de WordPress affiche une liste des articles les plus récents. Mais si vous sélectionnez "Une page statique" et choisissez une page dans la liste déroulante, WordPress affichera cette page comme page d’accueil de votre site.
Il s’agit d’une évidence dans la mise en place d’une page d’accueil pour votre site WordPress. Dans la page sélectionnée, vous pouvez créer la page d’accueil en utilisant toutes les astuces mentionnées ci-dessus. Par exemple, vous pouvez avoir des options de publication non cochées pour afficher le titre de la page, la barre latérale et l’image en vedette. Et la page est entièrement construite avec des blocs de couverture et du contenu pleine largeur. Cependant, vous pouvez choisir de ne pas utiliser les options de publication (masquer la barre latérale, etc.) et de créer simplement un modèle de page d’accueil pour les remplacer ou les appliquer.
Lorsque votre WordPress est défini comme une page statique en tant que page d’accueil, WordPress recherchera le modèle front-page.phpdans votre thème. Ceci sera utilisé à la place de page.php. Cela vous permet de créer et d’ajuster un modèle distinct qui est utilisé uniquement pour votre page d’accueil.
Dans ce front-page.phpmodèle, vous pouvez déjà définir du code HTML pour vous assurer que tous les blocs occupent toute la largeur, n’ont pas de barre latérale, pas de titre de page ou d’image en vedette. Vous voudrez peut-être simplement ne faire que the_content()sortir le contenu de la page dans son intégralité.
Par exemple, c’est ce que j’ai dans le thème de ce site front-page.php. Alors que dans tous les autres modèles, tels que page.php, j’ai plein de sorties pour la barre latérale, le titre du message, etc., c’est toute l’étendue de ma boucle dans front-page.php:
while (have_posts()): the_post();
the_content('');
endwhile;C’est ça. Mon code HTML et mes classes d’emballage garantissent que le contenu de la publication est entièrement en pleine largeur.
N’oubliez pas qu’il s’agit d’une bonne solution si vous, en tant qu’utilisateur du thème, comprenez le fonctionnement de vos modèles. Je sais que tout le contenu de ma page d’accueil doit être entièrement enveloppé dans des blocs de couverture. Je m’appuie sur le conteneur HTML interne du bloc Cover pour m’assurer que mon contenu est beau et tombe dans un conteneur de largeur maximale. Si je devais ajouter un simple bloc de paragraphe sans bloc de couverture d’emballage, cela n’aurait pas l’air bien car il manquerait de rembourrage sur les côtés.
Rendre l’en-tête de votre site transparent au premier bloc de couverture
Une caractéristique très courante dans les sites Web modernes est de rendre l’en-tête transparent sur la page d’accueil. Lorsque l’utilisateur commence à faire défiler la page, l’en-tête se transforme en un style fixe et obtient un arrière-plan. Mais garder un en-tête transparent peut être très agréable lorsque nous pouvons voir les couleurs ou l’image derrière la première section.
Je le fais sur la page d’accueil de ce site. Regarde! Tout en haut de la page, mon en-tête n’a pas d’arrière-plan et affiche l’arrière-plan de la section dégradé violet (un bloc de couverture) derrière. Une fois que vous commencez à faire défiler, il obtient un arrière-plan solide fixe.
Gardez à l’esprit que vous devez être conscient des couleurs de votre en-tête et de l’arrière-plan de la première couverture. Si votre en-tête se compose d’un logo blanc et d’éléments de menu blancs (comme le mien), vous ne pouvez pas utiliser cette astuce avec un bloc Cover qui a un fond clair. Cela rendrait votre en-tête illisible !
Si vous voulez faire cela, gardez à l’esprit que cela nécessite un peu de connaissances en Javascript. Mais c’est en fait très simple. Je vais passer par les bases pour vous:
Mon élément d’en-tête entier est toujours position: fixed. Parce que je ne veux normalement pas que mon contenu disparaisse derrière l’en-tête, j’ai ajouté un padding-top sur l’élément body, poussant le contenu sous l’en-tête. Cependant, j’ai ajouté une règle selon laquelle si nous sommes au modèle de première page, ce rembourrage ne sera pas ajouté. Cela garantit que uniquement sur la page d’accueil, la partie du corps apparaîtra derrière l’en-tête. Je cible ensuite le premier bloc de couverture sur la page d’accueil et j’ajoute un rembourrage supplémentaire pour m’assurer que le contenu de ce premier bloc ne bute pas derrière l’en-tête, ce qui lui donne un bon rembourrage après l’en-tête.
Et puis j’ai ajouté un code Javascript très simple en utilisant jQuery :
Ce que fait ce code, c’est ajouter une classe ‘ navbar-fixed‘ lorsque la page défile plus loin que 60 pixels vers le bas de la page. Et dans mon CSS, je cible simplement cette classe et ajoute une couleur de fond fixe. Sans cette classe, l’arrière-plan de l’en-tête est transparent sur la page d’accueil.
C’est la base. Jouez avec le CSS – ajustez le "point de basculement" Javascript et utilisez par exemple transitionla propriété pour effectuer une transition plus fluide lorsque la couleur d’arrière-plan est appliquée.
Grands blocs pour les pages d’accueil et les pages de destination
WordPress propose une gamme complète de blocs prêts à être utilisés. Certains d’entre eux sont particulièrement utiles lors de la création d’une page d’accueil ou d’une page de destination. Si vous connaissez déjà tous les blocs disponibles, vous les connaissez probablement déjà.
- Colonnes. Un bloc qui autorise les blocs imbriqués, ce qui signifie que vous pouvez ajouter n’importe quel bloc à l’intérieur de chaque colonne. Vous pouvez également ajouter des colonnes à l’intérieur d’un bloc de couverture. Parfait pour structurer le contenu en colonnes. Vous pouvez décider du nombre de colonnes et pour chaque colonne, vous pouvez décider de leur largeur. Ils peuvent tous être de largeurs égales ou de largeurs personnalisées.
- Groupe. Un autre bloc qui autorise les blocs imbriqués. Idéal pour définir un arrière-plan coloré autour d’un tas d’autres blocs (comme un titre et quelques paragraphes).
- Bouton. Il n’y a pas de page d’accueil sans boutons. Les boutons sont parfaits comme appel à l’action et pour diriger vos visiteurs là où vous voulez qu’ils aillent. Vous pouvez personnaliser l’apparence et la conception du bouton. Combinez cela avec des styles de blocs personnalisés pour les boutons !
- Entretoise. Si vous sentez que vous manquez d’espace dans vos sections, ajoutez un bloc Spacer – qui est simplement de l’espace sans aucun contenu. Vous pouvez définir la hauteur de l’entretoise.
- Séparateur. Semblable au bloc Spacer, mais ajoute une belle ligne. Une autre option pour séparer clairement le contenu. Personnalisez le design de la ligne dans le CSS de votre thème ou ajoutez des styles de blocs personnalisés.
- Galerie. Excellent pour mettre en valeur des images. Prend en charge l’alignement des blocs pleine largeur, ce qui vous permet de créer une galerie d’images pleine largeur sur votre page d’accueil.
- Médias et texte. Un moyen simple et agréable d’aligner une image ou un média à côté du texte. Peut être une meilleure option que les colonnes dans certains cas.
- Intègre: Youtube ++. WordPress propose un tas d’intégrations pour les médias. Vous pouvez par exemple avoir une vidéo Youtube pleine largeur sur votre page d’accueil.
- Widgets : Champ de recherche, derniers articles, calendrier++. WordPress propose de jolis éléments de contenu par défaut. Si vous vouliez afficher une liste de publications récentes ou une barre de recherche sur votre landing page, allez-y.
Si toutefois vous sentez qu’il vous manque des blocs pour faire ce que vous voulez, la solution est de créer vos propres blocs personnalisés.
Création de blocs personnalisés
Une caractéristique très courante dans une page d’accueil ou une page de destination est un élément de « raccourci » ; où vous choisissez un article ou une page, et il génère un bloc lié à l’article, contenant l’image en vedette, le titre de l’article, éventuellement l’extrait. Au moment d’écrire ces lignes, il n’y a pas une telle option dans WordPress standard. Vous devrez créer manuellement ce raccourci vous-même, en insérant manuellement la même image en vedette que le message, en tapant manuellement le titre et l’extrait du message, et enveloppant le tout dans un lien.
D’autres exemples de blocs très utiles pour la création de pages d’accueil et de pages de destination sont les curseurs / carrousels, les tableaux de comparaison de prix et les témoignages.
Pour optimiser ce type de blocs, vous devez soit trouver un plugin qui vous donne cela (je n’ai pas exploré cette option), soit les créer vous-même. Créer vos propres blocs personnalisés nécessite une connaissance approfondie de Javascript et de React et une bonne dose de codage. Je recommande d’emprunter cette voie si vous êtes sérieux au sujet d’être un développeur WordPress.
Si vous souhaitez apprendre à créer des blocs personnalisés pour Gutenberg, j’ai une série de tutoriels qui détaille cela.
Vous pouvez également opter pour un itinéraire plus simple et acheter Advanced Custom Fields Pro (ACF). Avec ce plugin, vous pouvez créer des blocs Gutenberg personnalisés sans aucune connaissance Javascript. Vous contrôlez simplement la sortie PHP des blocs et laissez ACF gérer la partie Javascript. Mais gardez à l’esprit que cela crée une dépendance de votre thème à un plugin sous licence.
Conclusion
J’espère que cet article vous a aidé à développer davantage vos compétences et vos connaissances avec WordPress Gutenberg! Au moment d’écrire ces lignes, il y a vraiment un manque d’informations et d’expérience sur la façon d’optimiser votre thème pour Gutenberg. J’ai eu surtout du mal à trouver quelque chose sur la façon de bien construire une page d’accueil. C’est donc ce que j’ai appris en expérimentant et en jouant.