Les thèmes

1. Éviter les anciens thèmes

Les thèmes plus anciens, mais qui existent encore, sont des thèmes qui ne sont pas optimisés pour l’éditeur Gutenberg. Ces thèmes utilisent une interface qui leur est propre et proposent plus ou moins de réglages, selon le bon vouloir du designer.

Voici un exemple d’une interface de personnalisation d’un thème d’ancienne génération :

2. Exploiter les thèmes optimisés pour Gutenberg

Les thèmes actuels et futurs sont optimisés pour les blocs Gutenberg. Toute la personnalisation se fait à l’aide de blocs Gutenberg utilisant les dernières techniques de mise en forme et de mise en page.

1. Rechercher des thèmes

Pour recherche des thèmes, vous pouvez le faire directement depuis l’interface d’administration de votre site WordPress, passer par le site officiel des thèmes WordPress, https://wordpress.org/themes/, ou bien depuis la version française, https://fr.wordpress.org/themes/.

WordPress affiche une barre pour rechercher un thème.

1. Appréhender les principes généraux

Nous allons maintenant aborder la notion de structure des thèmes optimisés pour l’éditeur Gutenberg. Cela veut donc dire que nous n’allons pas aborder les thèmes de l’ancienne génération, ceux qui n’utilisent pas l’éditeur Gutenberg.

La deuxième notion importante à connaître est que les designers disposent d’une grande liberté pour développer le design de leur thème. À partir de la structure minimale des thèmes WordPress, ils peuvent créer autant de modèles de page qu’ils veulent, avec autant de variantes qu’ils le souhaitent. Cela veut dire qu’il n’y a pas de structure figée et identique pour tous les thèmes. Chaque thème à partir de la structure commune indispensable aura sa propre structure personnelle.

Dans ce chapitre, nous allons exploiter le dernier thème par défaut de WordPress, le thème Twenty Twenty-Five.

2. Connaître l’utilisation des modèles de page

Les premiers constituants des thèmes sont les Modèles. Les modèles permettent de mettre en page et de mettre en forme tous les éléments communs à un type de page spécifique. Par exemple, vous aurez un modèle de page pour la page d’accueil, un modèle de page pour les articles, un modèle de page pour les pages, un modèle...

1. Accéder aux styles du thème

Nous l’avons vu, les styles sont des variations stylistiques s’appliquant sur les jeux de couleurs, la typographie, etc. Il est parfaitement possible de modifier les styles existants afin de les adapter au mieux à chaque projet de création d’un site web.

Pour modifier un style :

Cela permet d’afficher des pages d’exemples, avec un très grand nombre de blocs affichés.

2. Modifier la typographie

La première modification disponible est la typographie.

Plusieurs JEUX DE POLICE de caractères sont disponibles.

Voici un exemple, avec l’onglet Texte sélectionné pour les exemples de blocs :

En fonction du jeu de police choisi, WordPress affiche le nom des polices utilisées dans la section POLICES. Avec l’exemple précédent, ce sont les polices Platypi et Ysabeau Office qui sont utilisées :

Selon les polices utilisées, vous pouvez avoir une ou plusieurs variantes. Dans cet exemple, la police Platypi dispose de deux variantes, comme la police Ysabeau Office.

Ensuite, il est possible de personnaliser les éléments de typographie pour différents...

1. Utiliser les blocs de mise en page

Pour concevoir les modèles des pages, il faut utiliser des blocs spécifiques qui permettent de créer des structures avec des conteneurs. Ces blocs conteneurs sont principalement les blocs nommés Groupe, Rangée, Empilement, Grille et Colonnes. Ces blocs servent à contenir d’autres blocs pour créer une structure de mise en page complexe.

Donc, avant la personnalisation des modèles, il convient de faire un tour d’horizon de ces blocs de mise en page.

Ces blocs sont classés dans la catégorie Design :

2. Utiliser le bloc Groupe

Le bloc Groupe permet de regrouper d’autres blocs dans un conteneur qui pourra être mis en forme.

Voici le bloc inséré en groupe seul :

Dans le volet des réglages, les paramètres de mise en forme concernent les blocs qui seront imbriqués dans le bloc Groupe.

Voici deux exemples d’utilisation avec cette structure : un bloc Groupe avec un bloc Grille imbriqué dont chaque « cellule » de la grille contient un bloc Paragraphe avec un texte simple.

Dans la barre des outils du bloc Groupe sélectionné, dans Alignement, c’est l’option Aucun qui est sélectionnée dans cet exemple.

Dans ce cas, le bloc Grille imbriqué utilise pour...

1. Comprendre l’utilisation des compositions

Les compositions sont des assemblages de blocs prêts à l’emploi. Usuellement, un bloc de structure, comme le bloc Groupe, contient d’autres blocs de structure afin de créer une mise en page élaborée. Ensuite, des blocs permettent d’afficher du contenu, comme des titres, des paragraphes, des images, etc.

Il existe deux types principaux de composition : les compositions qui sont faites pour être insérées dans des articles ou dans des pages et les compositions qui sont utilisées dans des modèles de pages. C’est ce dernier type que nous allons aborder, avec les en-têtes et les pieds de page.

2. Exploiter des en-têtes

Chaque thème propose un ou plusieurs en-têtes prêts à l’emploi. Le thème Twenty Twenty-Five propose trois en-têtes.

WordPress affiche les en-têtes :

Trois compositions d’en-tête nommées En-tête, Entête vertical et Entête avec grand titre sont disponibles.

Dans cet exemple, c’est En-tête qui est affiché et sa structure est déployée dans le volet Vue d’ensemble du document :

Dans les blocs de structure se trouvent deux blocs d’affichage : Titre du site et Navigation.

Le bloc Titre du site permet d’afficher le titre du site tel qu’il est renseigné dans les réglages généraux du site.

Le bloc Navigation permet d’insérer un menu de navigation dans l’en-tête.

Vous avez la possibilité de créer plusieurs menus de navigation.

Dans cet exemple, c’est le menu nommé Navigation qui est utilisé :

3. Personnaliser le menu de navigation

Il est bien sûr possible d’ajouter de nouveaux liens dans le menu de navigation.

1. Connaître l’utilisation du bloc de requête

Pour afficher la page d’accueil en blog, les archives filtrées par auteur, par date, par catégorie…, ou les résultats d’une recherche, WordPress doit afficher une liste d’articles ou de pages répondant à la requête demandée. Cette requête est principalement constituée de code qui n’est pas accessible dans l’interface d’administration de WordPress. C’est affaire de spécialistes, de développeurs WordPress. Pour insérer ces listes de contenus, c’est le bloc Boucle de requête qui le permet. Ce bloc est utilisé dans des modèles de pages du thème.

Avec le thème Twenty Twenty-Five, voici les modèles de page qui utilisent ce bloc Boucle de requête :

1. Utiliser le modèle page d’accueil du blog

Le modèle page d’accueil du blog permet d’afficher la liste des derniers articles publiés sur le site, de manière chronologique avec le dernier publié en haut de la liste. C’est l’affichage « historique » de WordPress. C’est cet affichage qui est utilisé par défaut si vous ne faites aucune modification dans les réglages généraux de lecture.

2. Afficher la structure générale du modèle

Voyons maintenant la structure générale de ce modèle de page.

Dans la vue d’ensemble des blocs, les trois grandes parties de ce modèle sont :

1. Utiliser les publications en page seule

Le modèle Publications seules du thème Twenty Twenty-Five gère l’affichage des articles cliqués par les visiteurs et qui s’affichent dans une page seule du navigateur.

2. Afficher la structure générale du modèle

Voyons maintenant la structure générale de ce modèle de page.

3. Découvrir les compositions

Dans ce modèle, nous retrouvons les deux compositions En-tête et Pied de page qui sont identiques à celles de la page d’accueil du blog. Nous n’y revenons pas.

4. Découvrir le groupe central

Le groupe central, nommé Groupe, contient deux autres blocs de type Groupe.

Le premier Groupe contient de nombreux blocs :

1. Ajouter un nouveau modèle

Pour des contenus spécifiques qui doivent répondre à des critères de design, de mise en forme et de mise en page particuliers, les modèles de page d’un thème peuvent ne pas être adaptés à vos besoins. C’est pour cela qu’il est possible de créer vos propres modèles de page.

2. Créer un modèle pour un seul article

Le choix du type de modèle va déterminer l’utilité du nouveau modèle. Dans cet exemple, nous allons créer un modèle de page pour un article unique et sélectionné.