Votre site WordPress fonctionne, mais il ressemble à des centaines d’autres? Le même thème standard, les mêmes polices, aucune trace d’individualité. La plateforme offre une multitude d’options de personnalisation; la question est de savoir par où commencer sans casser le site au passage.

Modifier le design d’un site WordPress ne signifie pas nécessairement tout reconstruire de zéro. Parfois, trois ou quatre ajustements ciblés suffisent pour que votre site cesse d’être générique et devienne mémorable. Voici un découpage étape par étape: de la palette de couleurs au favicon, avec des outils précis et sans code là où vous pouvez vous en passer.

💡 Aperçu rapide:

• Choisissez une palette de 3 couleurs avec Adobe Color, Coolors ou ColorHexa
• Configurez les polices via Google Fonts, Use Any Font pour des typographies personnalisées
• Modifiez le format de date et d’heure avec une seule ligne de code ou via l’outil de personnalisation

Choisir une palette de couleurs

Les couleurs font la moitié de l’impression. Un visiteur n’a pas encore lu le titre, mais il perçoit déjà si le site donne une sensation «premium» ou «bas de gamme», technique ou créatif, digne de confiance ou douteux. La palette de couleurs est l’ancrage visuel de votre marque.

L’approche optimale repose sur trois couleurs de base: une couleur principale (fond/texte), une couleur d’accentuation (boutons, liens, éléments importants) et une couleur de soutien (bordures, séparateurs, états de survol). Plus de trois, c’est risquer le bruit visuel; moins, c’est monotone. La règle principale: utilisez la couleur d’accentuation avec parcimonie, uniquement là où vous devez attirer l’attention.

Par où commencer pour la sélection des couleurs:

Adobe Color (anciennement Kuler)

Un outil d’Adobe pour créer des palettes de couleurs basées sur des règles d’harmonie: monochromatique, complémentaire, triadique, analogue. Sous le capot se trouve un cercle chromatique où vous définissez la teinte de base, et le système sélectionne automatiquement le reste. Vous pouvez extraire une palette d’une image importée, ce qui est pratique si vous avez une référence. Disponible gratuitement sur color.adobe.com.

Coolors

Un générateur de palettes conçu pour la rapidité. Appuyez sur la barre d’espace, obtenez une nouvelle combinaison de cinq couleurs. Vous pouvez verrouiller n’importe quelle couleur et faire tourner les autres. Le résultat donne des codes HEX prêts à l’emploi. Il existe une extension pour Chrome/Firefox et une application iOS. Fonctionne sur coolors.co.

ColorHexa

ColorHexa n’est pas qu’une simple pipette, c’est une encyclopédie de la couleur. Saisissez un code HEX, RVB ou un nom, et vous obtenez une page avec les nuances complémentaires, les dégradés, les triades, la composition en pourcentage et un aperçu daltonien (comment la couleur apparaît aux personnes ayant différents types de daltonisme). Mélangeur de couleurs: entrez #ff0000+#0000ff+#ff00ff, obtenez le résultat #aa00aa avec un détail complet. colorhexa.com.

Palettes HTML prêtes à l’emploi

Si vous ne souhaitez pas partir de zéro, utilisez des palettes prêtes à l’emploi. htmlcolorcodes.com propose 216 couleurs web sécurisées avec leurs codes HEX, compatibles avec CSS, Photoshop et tout logiciel graphique. Le service Paletton (anciennement Color Scheme Designer) fournit des schémas avec un aperçu sur une maquette de site.

Générateur de dégradés CSS

Les dégradés font leur retour, et il ne s’agit plus des groupes de 2012 mais de transitions subtiles sur les fonds de section et les boutons. ColorZilla Gradient Editor est un éditeur de type Photoshop: vous placez des points d’ancrage avec couleurs et transparence, déplacez le point médian et copiez le CSS finalisé. Il prend en charge les dégradés linéaires, radiaux et répétitifs. Une extension pour Chrome et Firefox intègre une pipette directement dans le navigateur.

Choisir et configurer les polices

Les couleurs attirent l’attention; le texte la retient. La police influence la lisibilité et la perception du ton: un empattement strict donne une impression de qualité éditoriale, tandis qu’une linéale sobre évoque une ambiance tech.

Le problème avec les polices web est que les visiteurs ne voient que celles installées sur leur ordinateur, sauf si vous utilisez des polices embarquées (web fonts). Pour une mise en forme personnalisée, il faut donc exclusivement des polices externes.

Règle de base: pas plus de deux polices par page. Une pour les titres (grande, distinctive), une seconde pour le corps du texte (lisibilité maximale). Une troisième uniquement si vous avez besoin d’une police à chasse fixe pour le code.

Google Fonts, la source principale

Un catalogue gratuit de plus de 1 500 familles sur fonts.google.com. L’intégration se fait en deux lignes. La méthode classique passe par le fichier header.php du thème:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Ou dans le fichier style.css:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Après l’import, la police est disponible dans n’importe quelle règle CSS:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

Nuance RGPD: les polices Google Fonts chargées directement depuis les serveurs de Google transmettent les adresses IP des visiteurs. Depuis 2022, la justice européenne considère cela comme une violation. La solution est le plugin Local Google Fonts, qui télécharge les polices sur votre serveur et les sert en local. Une alternative pour ceux qui préfèrent éviter les plugins est un article sur le chargement local des Google Fonts sur notre blog.

Polices personnalisées via un plugin

Si vous avez besoin d'une police de marque qui ne figure pas dans Google Fonts, essayez Use Any Font. Téléversez un fichier ttf, otf ou woff, et le plugin le convertit en woff2 et l'ajoute au panneau d'administration. La version gratuite permet de téléverser une police; la version Pro supprime cette limite.

Connexion manuelle via @font-face

Si vous préférez le code aux plugins, placez le fichier de police dans /wp-content/themes/your-theme/fonts/ et ajoutez ceci à style.css:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Utilisation:

1
#menu { font-family: 'Museo300', sans-serif; }

Formater la date et l'heure

Le format de date standard ne s'adapte pas toujours au design. Heureusement, WordPress vous permet de le modifier sans plugins.

Méthode 1: via le personnalisateur (sans code)

Allez dans Apparence → Personnaliser → Réglages généraux. Le format de l'heure s'y modifie également. Fonctionne avec la plupart des thèmes classiques.

Méthode 2: via single.php (contrôle précis)

Ouvrez Apparence → Éditeur de thème → single.php. Repérez la fonction the_time() ou the_date():

1
<?php the_time('F Y'); ?>

Symboles de format:

• l, nom complet du jour (L minuscule)
• F, mois en toutes lettres
• j, jour du mois en chiffres
• Y, année sur quatre chiffres
• y, année sur deux chiffres

Exemples de combinaisons:

('l, j F Y') → dimanche 14 juin 2026. ('j F, Y') → 14 juin 2026.

Ne touchez pas aux apostrophes à l'intérieur des parenthèses, modifiez uniquement les symboles entre elles. Si le thème utilise the_date() au lieu de the_time(), le format se change plus facilement: Réglages → Général → Format de date.

Utiliser les images

L'ajout d'images dans WordPress se fait via le bouton «Ajouter un média» dans l'éditeur d'article. Placez le curseur à l'endroit souhaité → Ajouter un média → sélectionnez une image de la médiathèque ou téléversez-en une nouvelle.

Sur la droite se trouve le panneau des paramètres de la pièce jointe: titre, texte alternatif (important pour le SEO et l'accessibilité), taille, alignement, lien. Pour la vitesse du site, téléversez des images déjà compressées (TinyPNG ou ShortPixel avant de les importer). Plus de détails dans notre guide de la médiathèque WordPress.

Ajout d’un favicon

Un favicon, c’est ce petit carré qui apparaît dans l’onglet du navigateur et dans les favoris. Un détail qui renforce la reconnaissance: quand un utilisateur a 20 onglets ouverts, le favicon est le seul élément visuel qui distingue votre site des autres.

Comment créer un favicon

Le service le plus fiable est RealFaviconGenerator. Vous y téléversez une image carrée (au moins 260×260) et vous obtenez un pack d’icônes pour toutes les plateformes: iOS, Android, vignettes Windows, onglet épinglé Safari. Avec, en plus, le code HTML prêt à insérer.

Si vous avez besoin d’un simple fichier.ico en 16×16, n’importe quel éditeur graphique capable d’exporter en.ico fera l’affaire (GIMP est gratuit). Vous pouvez aussi utiliser le service en ligne Favicon.io.

Comment l’installer dans WordPress

La méthode la plus simple est l’icône de site intégrée. Depuis WordPress 4.3, elle est disponible dans l’outil de personnalisation:

Apparence → Personnaliser → Identité du site → Icône du site. Téléversez une image carrée, et WordPress la découpera automatiquement aux dimensions nécessaires pour toutes les plateformes. Pas de plugin, pas de FTP, pas de header.php.

La méthode par plugin consiste à utiliser All In One Favicon, qui offre plus de contrôle: des icônes distinctes pour l’administration, la partie publique, et des icônes différentes selon les appareils. Mais pour 95% des sites, l’icône de site intégrée suffit amplement.

Méthode manuelle (ajout dans le header.php):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Placez le fichier favicon.ico à la racine du dossier du thème. N’oubliez pas de le dupliquer dans public_html pour que le favicon s’affiche sur yoursite.com/favicon.ico.

⁉️🤔 Foire aux questions

Puis-je changer le design du site sans perdre le contenu?

Oui, changer de thème WordPress n’affecte pas les articles, les pages ni les fichiers médias. Ils sont stockés dans la base de données, indépendamment du thème. La seule chose qui risque de «casser», c’est la mise en page et le positionnement des éléments, surtout si l’ancien thème utilisait des types de publication personnalisés ou des shortcodes. Avant de changer de thème, faites une sauvegarde complète (hébergement + base de données). Pour tester en toute sécurité, utilisez un site de staging; beaucoup d’hébergeurs (SiteGround, Kinsta, WP Engine) le proposent en un clic.

Combien de polices est-il optimal d’utiliser pour un site?

Deux: une pour les titres, une pour le corps du texte. Une troisième (à chasse fixe) pour le code, si le site en contient. Chaque police supplémentaire augmente le temps de chargement de 200 à 400 ms et crée du bruit visuel. Google Fonts vous permet de ne sélectionner que les graisses nécessaires (normal + gras = 2 fichiers au lieu de 9), et le plugin Local Google Fonts les met en cache sur votre serveur.

Est-il obligatoire de mettre les mains dans le code pour personnaliser?

Non. L’outil de personnalisation de WordPress (Apparence → Personnaliser) couvre la plupart des besoins: couleurs, polices, logo, favicon, images d’arrière-plan, CSS. Les thèmes en blocs (à partir de WP 5.9) proposent l’éditeur de site, une méthode encore plus visuelle, sans code. Le code devient nécessaire quand vous avez besoin de réglages fins: format de date dans single.php, @font-face personnalisé, CSS spécifique pour un plugin particulier.

Que faire si le site est cassé après un changement de thème?

Première chose: ne paniquez pas, votre contenu n’a pas disparu. Deuxième chose: si l’interface d’administration est accessible, revenez à l’ancien thème (Apparence → Thèmes → Activer). Si l’interface d’administration est inaccessible, connectez-vous en FTP dans /wp-content/themes/, renommez le dossier du nouveau thème (ajoutez _disabled), et WordPress basculera automatiquement sur le thème par défaut. Une fois le site rétabli, activez WP_DEBUG dans wp-config.php pour voir les erreurs.

Comment vérifier que le favicon fonctionne?

Ouvrez yoursite.com/favicon.ico; si l’icône s’affiche, le fichier est bien en place. Dans le navigateur, le favicon n’apparaît pas immédiatement: il est mis en cache de manière agressive. Pour vérifier, ouvrez le site en navigation privée ou forcez l’actualisation du cache (Ctrl+Shift+R). RealFaviconGenerator propose un outil de vérification de favicon par URL.

Refonte WordPress: par quoi commencer

L’ordre des actions pour une personnalisation à partir de zéro: palette de couleurs → polices → logo et favicon → format de date → disposition des widgets et des menus. Dans cet ordre précis: les couleurs et la typographie sont les fondations sur lesquelles tout le reste se construit.

Si le site tourne déjà et génère du trafic, ne faites pas la refonte sur le domaine de production. Copie de staging + tests → migration. Les changements perceptibles par les moteurs de recherche (modifications de la structure HTML, des titres, des URL) doivent être faits en connaissance de cause: une refonte soudaine sans redirections peut faire chuter le classement.

Pour ceux qui souhaitent approfondir le sujet: guide des polices personnalisées sur notre blog, article sur la médiathèque WordPress pour travailler avec les images, et une analyse détaillée du chargement local des Google Fonts avec un test avant/après GTmetrix.

Commencez par trois couleurs et deux polices; le reste suivra.