Ce livre s'adresse à toute personne connaissant déjà WordPress et souhaitant débuter dans la création de nouveaux thèmes ou la personnalisation de thèmes existants. Il a été rédigé à l'aide de la version 5.3 de WordPress.

Dans un premier temps, vous apprendrez à gérer les thèmes pour votre site WordPress : rechercher un thème, installer et activer un thème.

Puis, nous aborderons les bases du langage PHP, prérequis nécessaire puisque les thèmes sont créés avec les trois langages « fondamentaux » du Web : HTML, CSS et PHP. La connaissance de l'HTML et des CSS est donc recommandée.

Nous verrons ensuite comment sont structurés les thèmes WordPress et quels sont les fichiers qui les composent. Nous apprendrons à utiliser la hiérarchie des templates (les modèles de page) pour connaître les fichiers qui sont utilisés pour tous les types d'affichage : la page d'accueil, les articles, les pages, les archives...

Un chapitre est entièrement consacré à l'étude des principaux marqueurs de modèles (template tags) qui vont chercher les informations, les données et les contenus pour permettre leur affichage dans les templates.

Puis nous analyserons dans le détail le thème proposé par défaut dans WordPress 5.3, Twenty Twenty, afin de bien comprendre son fonctionnement, sa structure et son architecture. Vous pourrez ainsi l'utiliser comme thème parent pour créer des thèmes enfants.

Actuellement la conception de thème WordPress passe principalement par l'utilisation de thème de démarrage (starter theme). Ces thèmes de démarrage vous proposent une architecture et une structure de fichiers de base ; à l'aide de la hiérarchie des fichiers et des marqueurs de modèles, vous pourrez ainsi concevoir vos propres thèmes rapidement. Nous étudierons les thèmes de démarrage Underscores et JointsWP à partir duquel nous concevrons un thème personnalisé.

Nous terminerons par la personnalisation des thèmes avec l'interface standard de WordPress, l'API Customizer. Ainsi, les utilisateurs seront à même de pouvoir modifier eux-mêmes certaines options du thème que vous proposerez ; le dernier chapitre est consacré à la conception des thèmes enfants.

Téléchargements

• Des fichiers complémentaires (906 Ko)

Avant-propos

1. Introduction

Gérer les thèmes

1. Les objectifs
2. Utiliser les thèmes
3. Choisir un thème depuis le site officiel
   1. 1. Rechercher un thème
   2. 2. Choisir un thème
   3. 3. Télécharger un thème
   4. 4. Installer un thème
   5. 5. Activer un thème
   6. 6. Gérer les thèmes
4. Choisir un thème depuis l’administration
   1. 1. Rechercher un thème
5. Le thème Twenty Twenty
   1. 1. Le thème par défaut
   2. 2. Personnalisation du titre et du slogan
   3. 3. Personnalisation des couleurs
   4. 4. Personnalisation des options du thème
   5. 5. Personnaliser le modèle de page avec bannière
   6. 6. Personnaliser l’arrière-plan
   7. 7. Personnaliser les menus, les widgets et la page d’accueil

Des notions sur PHP

1. L’objectif
2. HTML et XHTML
3. Les extensions des fichiers dynamiques
4. Insérer du code PHP
   1. 1. Les balises d’insertion
   2. 2. L’insertion dans l’HTML
5. Afficher du contenu
   1. 1. Afficher du texte
   2. 2. Insérer de l’HTML
6. Le code généré
   1. 1. Les pages dynamiques
   2. 2. Ajouter les éléments HTML de structure
7. Les commentaires
   1. 1. Utiliser les commentaires
   2. 2. Les commentaires sur une seule ligne
   3. 3. Les commentaires sur plusieurs lignes
   4. 4. Les commentaires HTML
8. Les variables
   1. 1. Utiliser les variables
   2. 2. Les différents types de variable
   3. 3. Définir une variable de texte
   4. 4. Définir une variable numérique
   5. 5. Définir une variable booléenne
   6. 6. Afficher une variable
   7. 7. La concaténation
   8. 8. Les calculs arithmétiques
9. Les tableaux
   1. 1. Utiliser les tableaux
   2. 2. Les tableaux numérotés
   3. 3. Afficher une valeur d’un tableau numéroté
   4. 4. Les tableaux associatifs
   5. 5. Afficher une valeur d’un tableau associatif
10. Les constantes
    1. 1. Utiliser les constantes
    2. 2. Définir une constante
    3. 3. Afficher une constante
    4. 4. Utiliser une constante
11. Les conditions
    1. 1. Utiliser les conditions
    2. 2. Définir un test sur une condition
    3. 3. Les opérateurs dans les conditions
    4. 4. Les tests multiples
    5. 5. Le test sur les booléens
    6. 6. Les conditions avec incorporation de HTML
    7. 7. Les conditions multiples
    8. 8. Les nombreuses conditions
12. La boucle Tant que
    1. 1. Utiliser la boucle Tant que
    2. 2. Créer une boucle
    3. 3. L’exécution de la boucle
13. La boucle Pour
    1. 1. Utiliser la boucle Pour
    2. 2. Créer une boucle
    3. 3. L’exécution de la boucle
14. Le choix d’une boucle
15. Les fonctions
    1. 1. Utiliser les fonctions
    2. 2. Des fonctions existantes
    3. 3. Créer une fonction
    4. 4. La portée des variables dans les fonctions
    5. 5. Les variables globales
16. Des fonctions utiles sur les variables
    1. 1. Tester si une variable est définie
    2. 2. Tester si une variable est vide
17. Insertion de fichiers
    1. 1. Objectif
    2. 2. Les différentes parties d’une page
    3. 3. Le fichier d’en-tête
    4. 4. Le fichier de la zone centrale
    5. 5. Le fichier du pied de page
    6. 6. Le fichier maître
    7. 7. Simplifier la structure

La structure des thèmes

1. L’objectif
2. Les fichiers des thèmes
   1. 1. Les fichiers obligatoires
   2. 2. Le fichier de personnalisation
   3. 3. Les fichiers de structure
   4. 4. La structure du thème TwentyTwenty
   5. 5. L’appel des fichiers et des fonctions
   6. 6. Le code et l’affichage généré
   7. 7. La place des éléments HTML
   8. 8. L’appel aux templates
   9. 9. L’appel aux formats d’article

La hiérarchie des templates

1. L'objectif
2. La hiérarchie des templates
3. Les templates
   1. 1. Les templates de variable
   2. 2. Les templates secondaires
   3. 3. Les templates primaires
   4. 4. Le template obligatoire
4. Les pages d'accueil
   1. 1. La page d’accueil de type blog
   2. 2. La page d’accueil de type site classique
5. Les templates des articles
   1. 1. Les types d’affichage
   2. 2. Les templates des fichiers joints
   3. 3. Les templates des contenus personnalisés
   4. 4. Les templates des articles
6. Les templates des pages
   1. 1. Les types de page
   2. 2. Les modèles de page
   3. 3. Les templates spécifiques
   4. 4. Les templates standards
7. Les templates des archives
   1. 1. Les types de page
   2. 2. Les templates des archives des auteurs
   3. 3. Les templates des archives des catégories
   4. 4. Les templates des archives des types de contenu personnalisé
   5. 5. Les templates de la taxinomie des types de contenupersonnalisé
   6. 6. Les templates des archives calendaires
   7. 7. Les templates des mots-clés
8. Les autres templates

Les principaux marqueurs et fonctions WordPress

1. Les marqueurs et les fonctions
2. La boucle WordPress
3. Créer de nouvelles boucles
   1. 1. Les objectifs
   2. 2. Créer une boucle sur une catégorie
   3. 3. Créer une boucle sur un mois
   4. 4. Créer une boucle sur un auteur
   5. 5. Créer une boucle multicritère
   6. 6. Créer une boucle sur un type de contenu
4. Les inclusions des fichiers et des templates
   1. 1. Insérer les fichiers de structure
   2. 2. Insérer les templates
   3. 3. L’appel aux formats d’article
5. Les marqueurs de site
6. Les injections de code
7. Les fonctions pour les liens
   1. 1. Les liens dans WordPress
   2. 2. Le lien vers la page d’accueil
   3. 3. Les URL du site
   4. 4. Le lien vers un contenu
   5. 5. L’URL d’un contenu
   6. 6. Le lien d’édition
   7. 7. Le lien vers l’administration
8. Les marqueurs des contenus
   1. 1. Afficher le titre
   2. 2. Afficher le contenu
   3. 3. Afficher l’extrait
9. Les marqueurs de date et d'heure de rédaction
   1. 1. Afficher la date de création
   2. 2. Les paramètres d’affichage de la date
   3. 3. Afficher la date de modification
   4. 4. Afficher l’heure de création
   5. 5. Afficher l’heure de modification
10. Les marqueurs des auteurs
    1. 1. Afficher le nom de l’auteur
    2. 2. Afficher le site de l’auteur
    3. 3. Afficher les renseignements biographiques de l’auteur
    4. 4. Afficher les métadonnées de l’auteur
    5. 5. Afficher le nombre d’articles de l’auteur
    6. 6. Afficher la liste des articles de l’auteur
    7. 7. Afficher la liste des auteurs
11. Les marqueurs des images mises en avant
    1. 1. Utiliser les images mises en avant
    2. 2. Afficher les images mises en avant
    3. 3. Les paramètres d’affichage des images misesen avant
    4. 4. Ajouter un lien sur l’image mise en avant
12. Les marqueurs des catégories
    1. 1. Afficher le nom des catégories
    2. 2. Les paramètres d’affichage
    3. 3. Afficher le nom de la catégorie en archive
    4. 4. Afficher la description de la catégorie
13. Les marqueurs des étiquettes
    1. 1. Afficher les étiquettes
    2. 2. Afficher le nom de l’étiquette en archive
    3. 3. Afficher la description de l’étiquette
14. Les marqueurs conditionnels
    1. 1. Les objectifs
    2. 2. Les articles épinglés
    3. 3. Les archives des auteurs
    4. 4. Afficher un widget sur la page d’accueil
15. Créer un emplacement pour des widgets
    1. 1. Utiliser les widgets
    2. 2. Déclarer les emplacements
    3. 3. L’affichage dans l’administration
    4. 4. Afficher l’emplacement dans le thème
16. Créer un emplacement pour un menu
    1. 1. Utiliser les menus
    2. 2. Déclarer les emplacements
    3. 3. L’affichage dans l’administration
    4. 4. Afficher l’emplacement dans le thème

Le thème Twenty Twenty

1. Les objectifs
2. Les fichiers du thème
3. La structure du thème
   1. 1. Les fichiers de structure
   2. 2. Les emplacements et l’affichage des menus
   3. 3. Les emplacements et l’affichage des widgets
4. Le fichier maître index.php
   1. 1. La structure générale
   2. 2. La partie centrale des pages
   3. 3. Utiliser la boucle WordPress
   4. 4. Afficher la pagination
5. L'affichage de l'en-tête avec header.php
   1. 1. L’en-tête HTML des pages
   2. 2. Le corps HTML des pages
   3. 3. L’affichage de l’en-tête des pages
   4. 4. Les affichages sur smartphone du titre et du slogan
   5. 5. La barre de navigation et la recherche
6. Afficher le pied de page avec footer.php
7. L'affichage des contenus avec singular.php
8. Les contenus réactionnels avec content.php
   1. 1. La structure générale
   2. 2. L’élément <article></article>
   3. 3. L’affichage du contenu rédactionnel
   4. 4. Les informations de contenu
9. Le modèle de page avec bannière
   1. 1. Utiliser le modèle avec bannière
   2. 2. Le template template-cover.php
   3. 3. Le template secondaire content-cover.php
10. Les templates secondaires
    1. 1. L’inclusion des templates
    2. 2. La biographique des auteurs
    3. 3. L’en-tête des articles
    4. 4. L’image mise en avant
    5. 5. L’affichage des widgets et des menus de pied de page
    6. 6. La fenêtre modale des menus
    7. 7. La fenêtre modale de recherche
    8. 8. La navigation entre les articles
    9. 9. La pagination dans les contenus
11. Le template de l'erreur 404
12. Le template des commentaires
13. Les fonctions d'affichage du thème

Le thème de démarrage Underscores

1. L'objectif
2. L'installation d’Underscores standard
   1. 1. Télécharger le Starter Theme
   2. 2. Installer votre thème
3. L'installation d’Underscores avec les options
   1. 1. Télécharger le Starter Theme
   2. 2. Installer votre thème
4. Les fichiers du thème
5. La feuille de styles CSS
6. Les fonctions personnalisées du thème
7. La traduction du thème
8. La structure du thème
9. Le fichier header.php
   1. 1. L’en-tête HTML
   2. 2. L’affichage du titre et du slogan
   3. 3. La barre de navigation
   4. 4. L’ouverture du contenu
10. Le fichier sidebar.php
11. Le fichier footer.php
    1. 1. La structure du pied de page
    2. 2. La fermeture du contenu principal
    3. 3. Le pied de page
    4. 4. La fermeture des éléments de structure
12. La page d'accueil
    1. 1. La structure de la page d’accueil
    2. 2. Les deux types de pages d’accueil
    3. 3. La page d’accueil en blog
    4. 4. La page d’accueil statique
    5. 5. L’affichage du blog avec une page d’accueil statique
13. Le fichier single.php
14. Le fichier page.php
15. Le fichier archive.php
16. Le fichier search.php
17. Les template-parts
    1. 1. L’utilisation des template-parts
    2. 2. Le fichier content.php
    3. 3. Le fichier content-page.php
    4. 4. Le fichier content-search.php
    5. 5. Le fichier content-none.php
18. Le fichier 404.php

Créer un thème avec Underscores

1. Les objectifs
2. L'installation d’Underscores
3. Concevoir une grille de mise en page
   1. 1. Le module CSS 3 Grid Layout
   2. 2. La structure du thème
   3. 3. Définir la grille
   4. 4. Des styles CSS pour la grille
   5. 5. Affiner les affichages
4. Les paramètres du site
5. Ajouter une Google Font
6. Personnaliser l'en-tête du site
   1. 1. La structure de l’en-tête
   2. 2. Personnaliser les couleurs de l’en-tête
   3. 3. Personnaliser l’image d’arrière-plan de l’en-tête
7. Personnaliser le menu de navigation
   1. 1. Le menu de navigation
   2. 2. Le menu responsive
8. La navigation dans la page d'accueil
9. Personnaliser les images mises en avant
   1. 1. Utiliser les images mises en avant
   2. 2. Paramétrer l’affichage des images mises enavant
   3. 3. Afficher les images mises en avant
10. Personnaliser les extraits
    1. 1. Utiliser les extraits
    2. 2. Afficher les extraits
11. Personnaliser les articles en page seule
    1. 1. Le template-part content.php
    2. 2. L’affichage du titre de l’article
    3. 3. L’affichage des métadonnées
    4. 4. L’affichage du contenu
    5. 5. L’affichage de la taxinomie
12. Personnaliser les pages statiques
13. Personnaliser les archives
    1. 1. Utiliser les archives
    2. 2. L’affichage du titre et de la description de l’archive
    3. 3. L’affichage du contenu
    4. 4. L’affichage des informations des auteurs
14. Personnaliser la sidebar
    1. 1. Utiliser l’emplacement
    2. 2. Personnaliser la mise en forme
15. Personnaliser le pied de page

Le thème de démarrage JointsWP

1. L'objectif
2. L'installation de JointsWP
3. Les fichiers du thème
4. La feuille de style CSS
5. Personnaliser l'interface
   1. 1. Personnaliser la connexion
   2. 2. Personnaliser l’administration
6. La traduction du thème
7. La structure du thème
   1. 1. La structure des fichiers
   2. 2. La structure des éléments
   3. 3. La mise en page de Foundation
8. Le fichier header.php
   1. 1. L’en-tête HTML
   2. 2. L’affichage de l’en-tête
   3. 3. L’affichage du titre du site
   4. 4. L’affichage du menu sur grand écran
   5. 5. L’affichage du menu sur petit écran
   6. 6. L’affichage du menu Off Canvas
9. Le fichier sidebar.php
10. Le fichier footer.php
    1. 1. La structure du pied de page
    2. 2. L’affichage du menu
    3. 3. L’affichage du texte
11. La page d'accueil
    1. 1. Les deux types de pages d’accueil
    2. 2. La page d’accueil en blog
    3. 3. La page d’accueil en page statique
12. Le fichier single.php
13. Le fichier page.php
14. Le fichier archive.php
15. Le fichier search.php
16. Les template-parts
    1. 1. L’utilisation des template-parts
    2. 2. Le fichier loop-archive.php
    3. 3. Le fichier loop-page.php
    4. 4. Le fichier loop-single.php
    5. 5. Le fichier content-missing.php
17. Le fichier 404.php

La personnalisation des thèmes

1. L'objectif
2. La personnalisation par défaut
3. Créer une personnalisation
4. Personnaliser une couleur
   1. 1. L’objectif
   2. 2. Créer la personnalisation
   3. 3. Ajouter une section
   4. 4. Ajouter un réglage
   5. 5. Ajouter un contrôle
   6. 6. Le code complet
   7. 7. Appliquer la personnalisation
   8. 8. L’aperçu en direct
   9. 9. Appliquer la couleur au thème
5. Personnaliser un texte
   1. 1. L’objectif
   2. 2. La section
   3. 3. Ajouter le réglage
   4. 4. Ajouter le contrôle
   5. 5. Le code pour le champ de texte
   6. 6. L’affichage dans le pied de page
   7. 7. L’affichage de la personnalisation
6. Personnaliser l'affichage du texte
   1. 1. L’objectif
   2. 2. Ajouter le réglage et le contrôle
   3. 3. L’affichage dans le pied de page
   4. 4. L’affichage de la personnalisation
7. Personnaliser l'alignement du titre du site
   1. 1. L’objectif
   2. 2. Ajouter le réglage et le contrôle
   3. 3. L’affichage dans l’en-tête
   4. 4. L’affichage de la personnalisation
8. Personnaliser l'image d'arrière-plan de l'en-tête
   1. 1. L’objectif
   2. 2. Ajouter le réglage et le contrôle
   3. 3. L’affichage en arrière-plan de l’en-tête
   4. 4. L’affichage de la personnalisation

Les thèmes enfants

1. L’objectif
2. Le dossier du thème enfant
3. La vignette du thème enfant
4. La feuille de style du thème enfant
   1. 1. Le fichier CSS
   2. 2. Importer les styles parents
   3. 3. Créer des styles enfants
5. Les autres fichiers
6. Le fichier functions.php
   1. 1. L’ouverture des fichiers
   2. 2. Ajouter une fonction
7. Installer le thème enfant