A3iformations · Formation WordPress

Les thèmes WordPress

Comprendre ce qu’est un thème, définir sa charte graphique, choisir, installer et gérer un thème, puis personnaliser l’accueil, le pied de page et l’icône du site.

9 notionsThèmes classiques et blocsExercice par notionOrganisme Qualiopi

Généralités sur les thèmes

wp-content/themes/

Un thème est un ensemble de fichiers qui gère l’apparence du site : mise en page, couleurs, typographies, en-tête et pied de page. Il ne touche pas au contenu : changer de thème conserve vos articles, pages et médias.

Type	Caractéristiques
Thème classique	Réglé via Apparence › Personnaliser, menus et widgets (ex. Astra, Unos, GeneratePress)
Thème blocs	Tout se modifie avec des blocs dans Apparence › Éditeur : modèles, styles, en-tête, pied de page (ex. Twenty Twenty-Five)
Thème enfant	Hérite d’un thème parent et garde vos modifications lors des mises à jour
Gratuit / premium	Gratuit sur le répertoire officiel ; premium vendu par un éditeur avec support et options avancées

Fichiers clés d’un thème

style.css : en-tête d’identification (nom, auteur, version) et styles.
functions.php : fonctions et options du thème.
theme.json : couleurs, polices et espacements (thèmes blocs).
screenshot.png : vignette affichée dans Apparence › Thèmes.

Bon à savoirUn thème ne doit pas porter de fonctionnalités indispensables (formulaire, boutique) : elles disparaîtraient au changement de thème. Ce rôle revient aux extensions.

Exercice · Découverte

Dans Apparence › Thèmes, identifiez le thème actif, son type (classique ou blocs) et son numéro de version.

La charte graphique

Apparence › Éditeur › Styles · Apparence › Personnaliser

La charte graphique fixe l’identité visuelle du site. On la définit avant de choisir le thème, puis on la reporte dans ses réglages.

Élément	À définir
Couleurs	Une principale, une secondaire, des neutres (fond, texte), avec leurs codes hexadécimaux
Typographies	Deux polices maximum : une pour les titres, une pour le texte
Logo	Version horizontale pour l’en-tête et version carrée pour l’icône
Images	Style photo, format et poids cible
Ton	Manière de s’adresser au visiteur (tutoiement, vouvoiement)

Pas à pas (thème blocs)

Ouvrir Apparence › Éditeur, puis Styles.
Choisir une variation de style ou régler Couleurs et Typographie.
Enregistrer : les réglages s’appliquent à tout le site.

AttentionVérifiez le contraste texte/fond : un rapport d’au moins 4,5:1 garantit la lisibilité (norme d’accessibilité WCAG).

Exercice · Application

Rédigez la charte d’un organisme de formation fictif : 3 couleurs avec codes, 2 polices, règles d’usage du logo.

Choisir et installer un thème

Apparence › Thèmes › Ajouter un thème

Critères de choix

Mise à jour récente et compatibilité avec votre version de WordPress.
Nombre d’installations actives et notes des utilisateurs.
Affichage responsive (mobile) et rapidité de chargement.
Traduction française et documentation disponibles.

Pas à pas (répertoire officiel)

Ouvrir Apparence › Thèmes › Ajouter un thème.
Rechercher par nom ou filtrer par Filtrer par fonctionnalité (blocs, colonnes, sujet).
Cliquer sur Aperçu pour tester, puis sur Installer.

Pas à pas (thème premium en .zip)

Cliquer sur Téléverser un thème en haut de la page.
Choisir le fichier .zip fourni par l’éditeur, puis Installer maintenant.

AttentionN’installez jamais un thème premium « gratuit » trouvé sur un site non officiel : ces copies contiennent souvent du code malveillant.

Exercice · Application

Comparez trois thèmes du répertoire selon les critères ci-dessus et installez celui qui convient le mieux à votre charte.

Activer un thème

Apparence › Thèmes

Un seul thème est actif à la fois. Installer un thème ne change rien au site tant qu’il n’est pas activé.

Survoler le thème installé et cliquer sur Aperçu en direct pour voir le rendu avec vos contenus.
Cliquer sur Activer (ou Activer et publier depuis l’aperçu).
Contrôler le site public : menu, widgets, page d’accueil.

Bon à savoirAprès un changement de thème, les menus et widgets doivent souvent être réaffectés à leurs nouveaux emplacements.

Exercice · Découverte

Activez le thème installé à l’exercice précédent, puis réaffectez le menu principal dans Apparence › Menus ou dans l’éditeur.

Gérer les thèmes

Apparence › Thèmes › Détails du thème

Mettre à jour : un bandeau signale les nouvelles versions ; activez au besoin les mises à jour automatiques dans les détails du thème.
Supprimer : ouvrir les détails d’un thème inactif, puis cliquer sur Supprimer en bas à droite.
Thème enfant : à créer avant toute modification du code pour la conserver lors des mises à jour.

AstuceGardez un seul thème par défaut récent (Twenty Twenty-Five) en secours, et supprimez les autres thèmes inactifs : ils restent une porte d’entrée pour les pirates même désactivés.

Exercice · Application

Faites l’inventaire des thèmes installés, mettez à jour le thème actif et supprimez les thèmes inutiles.

Personnaliser la page d’accueil

Réglages › Lecture · Apparence › Éditeur › Modèles

Pas à pas

Créer une page « Accueil » et une page « Actualités ».
Dans Réglages › Lecture, choisir Une page statique, puis sélectionner les deux pages.
Thème blocs : modifier le modèle Page d’accueil dans Apparence › Éditeur › Modèles.
Thème classique : passer par Apparence › Personnaliser et les sections proposées par le thème.

Sections conseillées

Bandeau d’accroche avec bouton d’action (« Voir nos formations »).
Services ou offres en colonnes, puis preuves (avis, certifications).
Dernières actualités et coordonnées.

AstuceLes Compositions (bouton + de l’éditeur) insèrent des sections toutes faites : bannière, colonnes, témoignages. Il suffit de remplacer textes et images.

Exercice · Maîtrise

Construisez une page d’accueil en quatre sections avec des compositions, en respectant les couleurs de votre charte.

Personnaliser le footer et le contenu de la page

Thème blocs : Apparence › Éditeur › Compositions › Pied de page · Thème classique : Apparence › Widgets

Le footer (pied de page) apparaît sur toutes les pages. On y place les coordonnées, les liens légaux et le copyright.

Contenu type d’un footer d’organisme de formation

Nom, adresse, téléphone, e-mail.
Numéro de déclaration d’activité et SIREN.
Liens : mentions légales, CGV, politique de confidentialité, accessibilité.

Pas à pas (thème blocs)

Ouvrir Apparence › Éditeur › Compositions, puis Pied de page.
Modifier les blocs (colonnes, paragraphes, navigation, icônes sociales).
Cliquer sur Enregistrer : le pied de page change sur tout le site.

Mise en page du contenu

Dans l’éditeur d’une page, le panneau Modèle permet de choisir une mise en page : pleine largeur, sans titre, avec barre latérale, selon le thème.

AttentionLes mentions légales sont obligatoires pour un site professionnel : éditeur, hébergeur, directeur de la publication.

Exercice · Application

Créez un pied de page en trois colonnes : coordonnées, liens légaux, logos de certification.

La favicon

Réglages › Général › Icône du site · Apparence › Personnaliser › Identité du site

La favicon (icône du site) s’affiche dans l’onglet du navigateur, les favoris et sur l’écran d’accueil d’un smartphone.

Préparer une image carrée d’au moins 512 × 512 px (PNG), lisible en très petit.
Ouvrir Réglages › Général, rubrique Icône du site (ou Personnaliser › Identité du site).
Choisir l’image, recadrer si besoin, puis enregistrer.

AstuceUtilisez le symbole ou l’initiale du logo plutôt que le logo complet : à 16 px de large, le texte devient illisible.

Exercice · Découverte

Créez une favicon de 512 × 512 px à partir de votre logo et installez-la. Vérifiez son affichage dans l’onglet.

Proposer un thème au répertoire WordPress

wordpress.org/themes/upload

Tout développeur peut soumettre un thème gratuit au répertoire officiel. Il est vérifié par l’équipe de relecture des thèmes avant publication.

Exigences principales

Licence GPL (compatible) pour le code, les images et les polices.
Fichiers readme.txt et screenshot.png (1200 × 900 px) présents.
Code sécurisé, sans erreur ni avertissement (à tester avec l’extension Theme Check).
Pas de fonctionnalités réservées aux extensions, pas de liens publicitaires abusifs.

Pas à pas

Créer un compte sur wordpress.org.
Tester le thème avec Theme Check et les données de test officielles.
Compresser le dossier du thème en .zip et l’envoyer sur la page de soumission.
Suivre la relecture et corriger les remarques jusqu’à l’approbation.

Bon à savoirLa file de relecture peut prendre plusieurs semaines. Consultez le manuel du répertoire des thèmes sur wordpress.org pour les règles à jour.