Modifier l’apparence de son site WordPress : la bonne méthode selon le cas

Vous avez un site Word­Press en ligne, et un détail vous chif­fonne : une cou­leur qui ne va pas, une marge trop ser­rée ou un élé­ment que vous pré­fé­re­riez mas­quer. La plu­part de ces retouches sont plus simples qu’il n’y paraît, à condi­tion de savoir où chercher.

Modi­fier l’ap­pa­rence de son site Word­Press passe par plu­sieurs che­mins. Selon ce que vous vou­lez chan­ger et l’am­pleur de la modi­fi­ca­tion, l’ap­proche n’est pas la même. Dans cet article, nous pas­sons en revue plu­sieurs cas de figure et la méthode adap­tée à chacun.

Commencer par le plus simple : modifier l’apparence sans code

Avant d’é­crire la moindre ligne de CSS, posez-vous une ques­tion : votre thème ne pro­pose-t-il pas déjà le réglage qui vous manque ?

De nom­breuses modi­fi­ca­tions, comme chan­ger une cou­leur, une police ou l’as­pect d’un bou­ton, se font aujourd’­hui depuis l’in­ter­face, sans code. C’est géné­ra­le­ment la méthode la mieux inté­grée, la plus simple et la plus rapide, à la por­tée de tout le monde.

Identifier le type de thème utilisé sur votre site

Com­men­cez par iden­ti­fier le type de thème uti­li­sé, car deux grandes familles coexistent et les réglages ne se trouvent pas au même endroit. Pour cela, ouvrez le menu Appa­rence et regar­dez ce qu’il contient.

Sur une ins­tal­la­tion stan­dard uti­li­sant un thème par blocs, conçu pour l’é­di­tion com­plète du site (FSE), ce menu est géné­ra­le­ment très court : Thèmes, Édi­teur et Polices.

Sur un thème clas­sique, il contient géné­ra­le­ment davan­tage d’en­trées : Thèmes, Per­son­na­li­ser, Wid­gets, Menus, Polices et Édi­teur de fichiers des thèmes. Cer­tains thèmes y ajoutent leur propre entrée, comme Astra qui affiche un menu Desi­gn ouvrant son pan­neau de réglages.

Le repère le plus fiable reste donc la pré­sence de Per­son­na­li­ser, signe d’un thème clas­sique, ou celle d’É­di­teur, signe d’un thème par blocs. Atten­tion à ne pas confondre Édi­teur avec Édi­teur de fichiers des thèmes : ce der­nier ouvre les fichiers du thème dans une simple zone de texte et n’a rien à voir avec l’é­di­teur de site.

Ces repères ne sont tou­te­fois pas infaillibles : cer­tains thèmes ou cer­taines exten­sions peuvent modi­fier les menus dis­po­nibles dans l’ad­mi­nis­tra­tion. Si vous sou­hai­tez reve­nir en amont sur le fonc­tion­ne­ment des thèmes, leur choix et leur ins­tal­la­tion, consul­tez notre article dédié aux thèmes dans Word­Press.

Modifier l’apparence dans un thème par blocs : les styles globaux de l’éditeur de site

Sur un thème par blocs, ouvrez Appa­rence puis Édi­teur, et cli­quez sur Styles. Vous pou­vez y régler les cou­leurs, la typo­gra­phie et les espa­ce­ments de l’en­semble du site, ou d’un type de bloc pré­cis. Tout se fait visuel­le­ment, sans tou­cher au code.

Modifier l’apparence dans un thème classique : les réglages de l’outil de personnalisation

Sur un thème clas­sique, allez dans Appa­rence puis Per­son­na­li­ser. Selon le thème, vous y trou­vez des sec­tions Cou­leurs, Typo­gra­phie, par­fois Bou­tons ou En-tête.

La richesse de ces réglages dépend entiè­re­ment du thème : cer­tains en offrent beau­coup, d’autres presque aucun. Faites d’a­bord le tour de ce qui est pro­po­sé avant de conclure qu’il vous faut du CSS.

Les polices : un menu commun aux deux familles de thème

Le cas des polices mérite d’être trai­té à part, car il a chan­gé récem­ment. La biblio­thèque de polices, appa­rue avec Word­Press 6.5 et réser­vée alors aux thèmes par blocs, est deve­nue acces­sible à tous les thèmes avec Word­Press 7.0. Elle se trouve dans Appa­rence puis Polices, quelle que soit la famille de votre thème.

Vous y télé­ver­sez vos propres fichiers de police et gérez celles déjà ins­tal­lées, sans pas­ser par une extension.

Une dis­tinc­tion reste impor­tante : ins­tal­ler une police ne suf­fit pas à l’ap­pli­quer. Sur un thème par blocs, vous choi­sis­sez ensuite la police dans les réglages de typo­gra­phie du pan­neau Styles. Sur un thème clas­sique, la police peut être sélec­tion­née dans les réglages typo­gra­phiques des blocs qui pro­posent ce contrôle. Son appli­ca­tion glo­bale à l’en­semble du site dépend en revanche des options offertes par le thème, notam­ment dans l’ou­til de per­son­na­li­sa­tion. Si vous sou­hai­tez appro­fon­dir le sujet, nous lui avons consa­cré un article com­plet sur la typo­gra­phie sur le Web.

Un der­nier cas relève des réglages natifs plu­tôt que du code : mas­quer un bloc. Nous le trai­tons plus loin, avec la ques­tion de l’af­fi­chage mobile, car les deux sujets sont liés.

Quand il faut du CSS : où l’écrire selon votre besoin

Il reste des cas où aucun réglage ne fait ce que vous vou­lez : déca­ler un élé­ment de quelques pixels, modi­fier pré­ci­sé­ment l’ap­pa­rence d’un bloc ou ajus­ter un détail que les réglages du thème ne per­mettent pas de tou­cher. Là, le CSS est le bon outil.

Reste à savoir où l’é­crire. Deux solu­tions cou­rantes s’offrent à vous, selon l’am­pleur de ce que vous ajou­tez : quelques lignes pour une retouche iso­lée, ou un ensemble plus long que vous sou­hai­tez orga­ni­ser et faire évoluer.

Pour une retouche rapide et isolée : le champ CSS intégré

Word­Press pro­pose un champ dédié, sans aucune exten­sion à installer.

• ➔ Sur un thème clas­sique : Appa­rence, Per­son­na­li­ser, sec­tion CSS additionnel.
• ➔ Sur un thème par blocs : Appa­rence, Édi­teur, Styles, menu à trois points du pan­neau Styles, puis CSS additionnel.

Dans les deux cas, un aper­çu vous per­met de véri­fier le résul­tat avant publi­ca­tion. C’est une solu­tion par­fai­te­ment adap­tée à une retouche rapide et isolée.

Deux limites méritent d’être connues. D’a­bord, ce CSS est asso­cié au thème que vous uti­li­sez : si vous chan­gez de thème, les règles res­tent enre­gis­trées, mais elles ne s’ap­pliquent plus auto­ma­ti­que­ment au nou­vel habillage. Il faut alors les véri­fier et, le plus sou­vent, les adap­ter. Bonne nou­velle en revanche si vous faites machine arrière : en reve­nant au thème pré­cé­dent, vous retrou­vez son CSS intact.

Ensuite, ce champ reste une petite zone de sai­sie : com­mode pour quelques lignes, il devient vite incon­for­table dès que le CSS s’al­longe, loin du confort d’un véri­table édi­teur de code.

Un autre champ CSS, au niveau du bloc

• ➔ Depuis Word­Press 7.0, la sec­tion Avan­cé de la plu­part des blocs contient elle aus­si un champ CSS addi­tion­nel, juste sous Classe(s) CSS additionnelle(s). Vous n’y écri­vez que des décla­ra­tions, et le sym­bole & est indis­pen­sable dès que vous ciblez un élé­ment situé à l’in­té­rieur du bloc, par exemple & a { color: red; }.
• ➔ Réser­vez ce champ à une modi­fi­ca­tion vrai­ment ponc­tuelle, propre à un seul bloc. Pour des règles réuti­li­sées, plus longues ou appli­quées sur plu­sieurs pages, pré­fé­rez le champ CSS du thème ou une exten­sion dédiée. Ce CSS est enre­gis­tré dans le conte­nu de la page, bloc par bloc : si vous le mul­ti­pliez, vous per­dez rapi­de­ment la vue d’en­semble de vos règles. Les règles condi­tion­nelles de type media que­ry n’y sont par ailleurs pas prises en compte.
• ➔ Ce champ n’ap­pa­raît que pour les comptes auto­ri­sés à modi­fier le CSS, en pra­tique les admi­nis­tra­teurs, et seule­ment sur les blocs qui le prennent en charge. Si vous ne le voyez pas, votre rôle uti­li­sa­teur ou le bloc sélec­tion­né peut en être la raison.

Pour un CSS plus long ou mieux organisé : une extension dédiée

Si vos per­son­na­li­sa­tions com­mencent à s’ac­cu­mu­ler, une exten­sion dédiée au CSS peut offrir un espace de tra­vail plus confor­table. Elle stocke votre code indé­pen­dam­ment du thème et pro­pose sou­vent une meilleure lisi­bi­li­té : colo­ra­tion syn­taxique, orga­ni­sa­tion en plu­sieurs blocs et, selon l’ex­ten­sion choi­sie, pos­si­bi­li­té d’ac­ti­ver ou de désac­ti­ver une modi­fi­ca­tion sans la supprimer.

Atten­tion tou­te­fois : conser­ver le code ne signi­fie pas qu’il res­te­ra com­pa­tible avec un nou­veau thème. Les classes, la struc­ture HTML et les sélec­teurs peuvent chan­ger. Après un chan­ge­ment d’ha­billage, chaque règle doit donc être véri­fiée et adap­tée si nécessaire.

Avant d’ins­tal­ler une exten­sion CSS

• ➔ Véri­fiez sa date de der­nière mise à jour et la ver­sion de Word­Press jus­qu’à laquelle elle est tes­tée. Pré­fé­rez une exten­sion légère, cen­trée sur cette seule fonc­tion. Notre guide com­plet sur les exten­sions Word­Press détaille les cri­tères à exa­mi­ner avant toute installation.

Écrire un CSS propre : les réflexes qui évitent les ennuis

Où que vous sai­sis­siez votre CSS, quelques prin­cipes simples vous épar­gne­ront des heures de tâtonnement.

Trouver le bon sélecteur

Pour modi­fier un élé­ment, encore faut-il savoir com­ment le dési­gner en CSS. L’ou­til le plus acces­sible est l’ins­pec­teur inté­gré à votre navi­ga­teur : clic droit sur l’élé­ment à retou­cher, puis Ins­pec­ter.

Le navi­ga­teur affiche le code HTML cor­res­pon­dant et les règles CSS déjà appli­quées, ce qui vous aide à iden­ti­fier un sélec­teur adapté.

Lorsque vous sou­hai­tez cibler un bloc pré­cis dans l’é­di­teur Word­Press, la solu­tion la plus robuste consiste sou­vent à lui attri­buer votre propre classe dans la sec­tion Avan­cé, puis Classe(s) CSS additionnelle(s). Vous évi­tez ain­si de dépendre d’un sélec­teur long, com­plexe ou sus­cep­tible de chan­ger avec une mise à jour du thème.

Deux astuces pour viser le bon élément

• ➔ Modi­fiez une règle direc­te­ment dans l’ins­pec­teur pour voir l’ef­fet en direct : ces chan­ge­ments tem­po­raires ne touchent pas votre site réel, ils dis­pa­raissent au rechar­ge­ment de la page.
• ➔ Pour véri­fier votre sélec­teur, appli­quez-lui un repère bien visible, par exemple border: 1px solid red; ou background-color: yellow;. Si c’est le bon élé­ment qui se colore, votre sélec­teur vise juste. Et s’il est trop large, vous le voyez aus­si­tôt : bien plus d’élé­ments que pré­vu changent d’un coup.

Nous revien­drons plus en détail sur ces tech­niques dans un pro­chain article consa­cré à la cor­rec­tion du CSS.

Spécificité et !important, à manier avec parcimonie

Il arrive qu’une règle ne s’ap­plique pas parce qu’une autre, plus spé­ci­fique, l’emporte. La ten­ta­tion est alors d’a­jou­ter !important pour for­cer le passage.

Employé ponc­tuel­le­ment, cela peut dépan­ner. Employé par­tout, cela crée un site où plus rien n’est pré­vi­sible. Mieux vaut viser un sélec­teur assez pré­cis, et ne réser­ver !important qu’aux rares cas où aucune autre solu­tion rai­son­nable ne fonctionne.

Ne pas casser l’affichage mobile

Une règle qui embel­lit l’af­fi­chage sur ordi­na­teur peut défor­mer la ver­sion mobile. Après chaque modi­fi­ca­tion, véri­fiez le ren­du sur petit écran.

Avant d’é­crire une media que­ry pour mas­quer un bloc, véri­fiez si le réglage natif de Word­Press suf­fit. L’op­tion Mas­quer, appa­rue avec Word­Press 6.9 pour reti­rer un bloc du conte­nu publié, s’est enri­chie dans la ver­sion 7.0 d’un mas­quage par type d’é­cran : ordi­na­teur, tablette ou mobile. L’option est acces­sible depuis la barre d’outils du bloc ou son pan­neau de réglages. Cette pos­si­bi­li­té est pré­sen­tée plus en détail dans un cha­pitre de notre article consa­cré à la sor­tie de Word­Press 7.0.

Si le réglage natif ne répond pas à votre besoin, ou si vous sou­hai­tez modi­fier l’ap­pa­rence plu­tôt que sim­ple­ment mas­quer un bloc, enca­drez votre CSS dans une media que­ry, une règle condi­tion­nelle qui applique des styles selon les carac­té­ris­tiques de l’af­fi­chage. Par exemple, pour réduire la taille d’un titre uni­que­ment sur les petits écrans :

@media (max-width: 600px) {
    .mon-titre {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .mon-titre {
        font-size: 24px;
    }
}

Ces règles condi­tion­nelles doivent être écrites dans le champ CSS du thème ou dans votre exten­sion dédiée. Le champ CSS d’un bloc ne les prend pas en charge.

Com­men­tez vos règles

• ➔ Un court texte entre /* et */ vous rap­pel­le­ra, dans six mois, à quoi sert chaque bloc.

/* Bouton principal : fond bleu et coins arrondis */
.mon-bouton {
    background-color: #1C3350;
    border-radius: 6px;
}

/* Bouton principal : fond bleu et coins arrondis */
.mon-bouton {
    background-color: #1C3350;
    border-radius: 6px;
}

Après la modification, pensez au cache

Vous avez publié votre chan­ge­ment mais rien ne bouge à l’é­cran ? Le cache est sou­vent en cause.

Entre votre site et votre écran peuvent s’empiler plu­sieurs mémoires : le cache du navi­ga­teur, celui d’une éven­tuelle exten­sion de cache, par­fois celui du ser­veur. Tant qu’ils servent l’an­cienne ver­sion, votre modi­fi­ca­tion peut res­ter invisible.

Videz ces caches, puis rechar­gez la page, au besoin avec un rechar­ge­ment for­cé, sou­vent Ctrl + F5 sous Win­dows ou Cmd + Maj + R sur Mac.

Si le chan­ge­ment n’ap­pa­raît tou­jours pas, véri­fiez ensuite votre sélec­teur, la syn­taxe de la règle et sa spé­ci­fi­ci­té. Le détail des dif­fé­rents niveaux est pré­sen­té dans notre guide pour vider le cache de votre site Word­Press.

Quand la retouche devient un vrai projet

Lorsque les ajus­te­ments deviennent plus impor­tants, la bonne méthode dépend encore du type de thème utilisé.

Avec un thème par blocs, vous pou­vez modi­fier la struc­ture des modèles depuis Appa­rence puis Édi­teur, sans créer immé­dia­te­ment un thème enfant. Vous pou­vez ain­si réor­ga­ni­ser un en-tête, un pied de page ou la mise en page des articles direc­te­ment dans l’interface.

Le thème enfant devient per­ti­nent lorsque vous devez modi­fier ou ajou­ter des fichiers au thème, ou orga­ni­ser dura­ble­ment un ensemble de per­son­na­li­sa­tions étroi­te­ment liées à celui-ci. Avec un thème clas­sique, il reste notam­ment la méthode habi­tuelle pour adap­ter les fichiers de modèle sans tou­cher au thème parent.

Si votre modi­fi­ca­tion ajoute une fonc­tion­na­li­té plu­tôt qu’un simple chan­ge­ment d’ap­pa­rence, mieux vaut en revanche pas­ser par une exten­sion. Le code fonc­tion­nel en PHP ou JavaS­cript suit en effet d’autres règles que le CSS.

En résumé : quelle méthode pour quel besoin

À retenir

• Pour une simple retouche, com­men­cez tou­jours par le réglage le plus simple avant de pen­ser au code : les réglages natifs du thème, les styles glo­baux et, pour les polices, le menu Appa­rence puis Polices suf­fisent souvent.
• Si le CSS est néces­saire, choi­sis­sez l’en­droit selon l’am­pleur du besoin : le champ inté­gré pour une retouche iso­lée, une exten­sion dédiée pour un ensemble plus long ou mieux organisé.
• Les bons réflexes : trou­ver le bon sélec­teur avec l’ins­pec­teur, attri­buer si pos­sible une classe per­son­na­li­sée au bloc, uti­li­ser le réglage natif de mas­quage lors­qu’il suf­fit, évi­ter le !important sys­té­ma­tique, véri­fier le mobile et vider le cache après la modification.
• Dès que la modi­fi­ca­tion dépasse l’ap­pa­rence, iden­ti­fiez d’a­bord sa nature : l’é­di­teur de site pour les modèles d’un thème par blocs, un thème enfant pour modi­fier les fichiers du thème, et une exten­sion pour ajou­ter une fonctionnalité.

Image mis en avant : Pho­to de Ferenc Alma­si