[Nouveau] Les sauvegardes dans le Cloud deviennent plus simples - Duplicator Cloud élimine le stockage par des tiers
Joella Dunn
Joella Dunn
John Turner
John Turner
Avez-vous déjà regardé votre site WordPress en vous disant : "Il est presque parfait, mais ce bouton n'est pas de la bonne nuance de bleu" ou "J'aimerais que ce texte soit un peu plus grand" ?
Les thèmes WordPress sont assortis d'options de personnalisation, mais il arrive qu'elles ne couvrent pas tout ce que vous souhaitez modifier.
C'est là que le CSS entre en jeu - c'est comme une baguette magique qui vous permet de modifier l'apparence de votre site exactement comme vous le souhaitez.
Dans ce guide, je vous montrerai ce qu'est le CSS, comment ajouter vos propres styles personnalisés et quelques exemples pratiques pour vous aider à démarrer.
À la fin, vous vous sentirez plus à l'aise pour effectuer les ajustements visuels qui feront passer votre site de "presque là" à "exactement là".
Considérez votre site web WordPress comme une maison. Le code HTML forme la structure - les murs, les pièces et les fondations. Les feuilles de style en cascade (CSS) représentent tous les éléments de la décoration intérieure : les couleurs de peinture, la disposition des meubles, l'éclairage et les touches décoratives.
Le CSS indique à votre navigateur comment afficher le contenu de votre page. Vous voulez que tous vos paragraphes soient bleus ? Les feuilles de style CSS s'en chargent.
Vous avez besoin de plus d'espace entre votre titre et le paragraphe qui le suit ? Les feuilles de style CSS s'en chargent également.
La structure de base de CSS suit ce modèle :
selector { property: value; }
Le sélecteur cible des éléments spécifiques de votre page et les paires propriété-valeur définissent l'aspect de ces éléments.
Par exemple :
p { color: blue; }
Cette simple ligne indique au navigateur d'afficher tous les paragraphes en bleu. C'est tout ce qu'il y a à faire !
Bien que simple dans son concept, le CSS devient puissant lorsque vous commencez à combiner différents sélecteurs et propriétés pour créer des règles de style précises pour votre site.
Les feuilles de style CSS de WordPress ne se trouvent pas à un seul endroit : elles sont disposées en couches sur l'ensemble de votre site, ce qui explique pourquoi on les appelle "en cascade". Comprendre cette hiérarchie vous permet de savoir où apporter des modifications.
Le fichier style.css de votre thème en est la base. Il contient toutes les règles de style de base qui confèrent à votre thème son aspect caractéristique. Il s'agit en quelque sorte de l'ensemble de la décoration d'intérieur par défaut.
Le Customizer de WordPress offre une section dédiée "Additional CSS" où vous pouvez ajouter vos propres styles en toute sécurité. Ceux-ci remplacent les valeurs par défaut du thème et survivent aux mises à jour du thème.
Si vous apportez des modifications importantes, un thème enfant est la meilleure solution. Son fichier style.css hérite de tout ce qui se trouve dans le thème parent, mais les styles que vous ajoutez sont prioritaires.
Certains plugins apportent leur propre CSS pour styliser leurs fonctionnalités spécifiques. Ils se chargent généralement après les styles du thème.
L'éditeur de blocs (Gutenberg) et l'éditeur de site complet introduisent de nouvelles façons d'ajouter du CSS, vous permettant de styliser des blocs ou des sections spécifiques sans affecter l'ensemble du site.
Vous verrez parfois des feuilles de style CSS en ligne, c'est-à-dire des styles appliqués directement aux éléments HTML à l'aide de l'attribut style. Cette approche est généralement déconseillée pour le style d'un site entier, car elle est plus difficile à maintenir.
Il est important de comprendre cette cascade, car en cas de conflit de styles, c'est le CSS le plus spécifique ou celui qui se charge le plus tard qui l'emporte. C'est pourquoi vous pouvez remplacer le style de votre thème par des feuilles de style CSS personnalisées.
L'apprentissage des CSS vous donne un contrôle que les options du thème ne peuvent à elles seules vous offrir.
De nombreux utilisateurs de WordPress se heurtent à un mur de frustration lorsqu'ils ne parviennent pas à modifier l'apparence de leur site. Le sélecteur de couleurs n'a pas la bonne teinte. L'espacement entre les éléments ne semble pas correct. La taille de la police doit être un peu plus grande.
Avec des connaissances de base en matière de CSS, vous pouvez procéder vous-même à ces ajustements précis.
Les feuilles de style CSS vous permettent de rendre votre site vraiment unique. Sans lui, vous êtes limité aux options de personnalisation que le développeur de votre thème a pensé à inclure. Avec CSS, vous pouvez vous libérer de ces contraintes.
Lorsque des problèmes visuels apparaissent (et il y en aura), la compréhension du langage CSS vous permet de les résoudre rapidement. Il se peut qu'une mise à jour du plugin ait provoqué le chevauchement de certains textes, ou qu'une mise à jour du thème ait modifié le style de vos boutons. Quelques lignes de CSS peuvent souvent résoudre ces problèmes immédiatement.
Plus important encore, l'apprentissage des CSS constitue une base pour comprendre le fonctionnement des thèmes WordPress. Une fois que vous aurez compris comment les CSS contrôlent l'apparence, vous comprendrez mieux pourquoi les choses ont l'air telles qu'elles sont, ce qui rendra le dépannage beaucoup plus rapide.
Il existe de nombreuses ressources accessibles pour apprendre le langage CSS, dont beaucoup sont gratuites.
Mozilla Developer Network (MDN) Web Docs est une excellente ressource pour les technologies web, y compris CSS. Leurs tutoriels décomposent les concepts en éléments digestes accompagnés d'exemples pratiques.
W3Schools propose des leçons CSS pour débutants avec des exemples interactifs où vous pouvez tester le code directement dans votre navigateur. Cette approche pratique rend l'apprentissage moins abstrait.
YouTube est rempli de tutoriels spécifiques pour WordPress CSS. Voir quelqu'un procéder à des modifications en temps réel peut aider à comprendre les concepts lorsque les explications textuelles ne suffisent pas.
De nombreuses plateformes de cours comme Coursera et Udemy proposent des cours CSS gratuits (ou très abordables). Certains se concentrent spécifiquement sur WordPress, vous montrant exactement comment cibler les éléments du thème.
C'est en pratiquant que l'on apprend le mieux. Mettez en place un site de test (n'expérimentez pas sur votre site réel !) et essayez d'apporter de petites modifications. Voyez ce qui se passe lorsque vous ajustez des propriétés telles que les couleurs, les marges ou la taille des polices.
N'oubliez pas qu'il n'est pas nécessaire de mémoriser toutes les propriétés CSS. Même les développeurs professionnels consultent régulièrement des informations. Ce qui compte, c'est de comprendre les concepts de base.
WordPress offre plusieurs façons d'ajouter des feuilles de style CSS personnalisées. Chacune a ses avantages en fonction de vos besoins et de votre niveau de confort.
Le Customizer de WordPress est l'endroit le plus sûr pour ajouter facilement des CSS à WordPress.
Naviguez vers Apparence " Personnaliser " CSS supplémentaires dans votre tableau de bord WordPress.
Vous verrez un éditeur de code où vous pourrez taper ou coller votre CSS.
Vous pouvez prévisualiser vos modifications en temps réel avant de les publier. Si quelque chose ne vous semble pas correct, ajustez votre code et voyez immédiatement les résultats.
Le Customizer est parfait pour les petites et moyennes quantités de CSS. Si vous vous retrouvez à ajouter des centaines de lignes de code, vous devriez peut-être envisager l'une des autres méthodes.
WPCode (anciennement Insert Headers and Footers) est un plugin populaire d'extraits de code. Il offre une manière plus organisée de gérer vos feuilles de style CSS personnalisées.
Après avoir installé le plugin, naviguez vers Code Snippets " Add Snippet. Survolez Add Your Custom Code et cliquez sur Add Custom Snippet.
Choisissez l'extrait CSS comme type de code, donnez-lui un nom descriptif et ajoutez votre code CSS.
WPCode offre plusieurs avantages par rapport au Customizer. Vous pouvez créer plusieurs extraits CSS, ce qui les rend plus faciles à gérer qu'un seul gros bloc de code.
Vous pouvez également contrôler précisément où et quand les snippets sont exécutés. Vous avez besoin d'un CSS qui ne s'applique qu'à vos articles de blog ? WPCode peut gérer ce chargement conditionnel.
Le plugin comprend des fonctions de prévention des erreurs qui permettent de détecter les erreurs de syntaxe avant qu'elles n'affectent votre site, ce qui constitue un filet de sécurité utile lorsque vous êtes en phase d'apprentissage.
Si vous utilisez un thème en bloc, vous avez accès à l'éditeur de site complet au lieu du Customizer. Cependant, vous pouvez toujours ajouter des feuilles de style CSS personnalisées à votre site.
Naviguez jusqu'à cette URL, en l'adaptant au domaine de votre site : https://example.com/wp-admin/customize.php
Cela ouvrira une version limitée de FSE. Vous verrez qu'il y a une section Additional CSS, tout comme dans le Customizer.
Pour les personnalisations importantes, vous devrez peut-être modifier directement les feuilles de style CSS dans les fichiers du thème WordPress.
Dans votre tableau de bord, vous pouvez aller dans Apparence " Editeur de fichier de thèmeet modifier le fichier style.css.
Cependant, cela s'accompagne d'un avertissement important : Je ne recommande pas de modifier directement les fichiers d'un thème parent.
Créez plutôt un thème enfant. Un thème enfant hérite de toutes les fonctionnalités et du style du thème parent, tout en vous permettant d'apporter en toute sécurité des modifications qui ne seront pas écrasées lors des mises à jour.
Une fois le thème enfant activé, vous pouvez modifier les fichiers CSS dans l'éditeur de fichiers de votre thème WordPress. Vous pouvez également accéder aux fichiers de votre thème en utilisant le FTP ou le gestionnaire de fichiers de votre hébergeur.
Voyons quelques exemples pratiques de CSS personnalisés simples qui répondent à des besoins courants de personnalisation de WordPress.
Vous souhaitez faire ressortir davantage vos blocs de citation ? Vous pouvez les cibler à l'aide de CSS :
.wp-block-quote {
background-color: #f9f9f9;
border-left: 4px solid #0073aa;
padding: 20px;
}Les blocs de citation sont ainsi dotés d'un arrière-plan gris clair, d'une bordure bleue à gauche et d'un peu d'espace pour respirer.
Les widgets de votre barre latérale ont peut-être besoin d'être séparés visuellement. Vous pouvez ajouter de l'espace et des bordures entre eux :
.widget {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #eaeaea;
}Chaque widget aura désormais plus d'espace sous lui et une ligne de séparation subtile.
Les menus de navigation doivent souvent être adaptés à la conception de votre site :
.main-navigation li a {
color: #333333;
font-weight: 500;
text-transform: uppercase;
}
.main-navigation li a:hover {
color: #0073aa;
}Les liens du menu sont gris foncé, légèrement gras, en majuscules et bleus lorsqu'ils sont survolés.
La typographie a un impact considérable sur la personnalité de votre site. Voici un exemple de personnalisation des polices de caractères à l'aide de CSS :
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.6;
}
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}N'oubliez pas que si vous utilisez des polices non standard, vous devez d'abord les importer à l'aide de @font-face ou d'un lien vers Google Fonts.
La modification des couleurs est l'une des tâches CSS les plus courantes. Ces quelques lignes changent l'arrière-plan de votre site en gris clair et rendent les liens roses avec une teinte plus foncée lorsqu'ils sont survolés :
body {
background-color: #f5f5f5;
}
a {
color: #e94c89;
}
a:hover {
color: #c13872;
}L'espace autour et à l'intérieur des éléments (marge et remplissage) influe considérablement sur la lisibilité. Ce document ajoute de l'espace sous les paragraphes et crée un espace autour de la zone de contenu principale :
.entry-content p {
margin-bottom: 20px;
}
.site-content {
padding: 40px 20px;
}Les formulaires ont souvent besoin d'une aide stylistique pour s'adapter à la conception de votre site. Ces styles permettent de créer des champs de formulaire épurés avec un bouton d'envoi bien visible :
input[type="text"],
input[type="email"],
textarea {
border: 1px solid #ddd;
padding: 10px;
border-radius: 4px;
}
input[type="submit"] {
background-color: #0073aa;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
}Même les développeurs expérimentés rencontrent des problèmes de CSS. Voici quelques problèmes courants et comment les résoudre.
Vous avez ajouté de nouvelles feuilles de style CSS, mais votre site semble exactement le même. Avant de paniquer, sachez qu'il s'agit souvent d'une simple mise en cache du navigateur.
Les navigateurs enregistrent les fichiers CSS (cache) afin de charger les sites plus rapidement. Il se peut donc qu'ils affichent d'anciennes feuilles de style CSS au lieu de vos nouvelles modifications.
Essayez d'actualiser votre site en appuyant sur Ctrl+F5 (Windows) ou Cmd+Shift+R (Mac). Cela oblige votre navigateur à obtenir de nouvelles copies de tous les fichiers au lieu d'utiliser les versions mises en cache.
Si vous utilisez un plugin de mise en cache comme WP Super Cache ou W3 Total Cache, vous devrez également vider ce cache lorsque vous effectuerez des modifications CSS.
Recherchez un bouton " Clear Cache" dans les paramètres de votre plugin de mise en cache.
Tant que vous n'aurez pas effacé ce cache, vos modifications ne seront peut-être visibles que pour vous (lorsque vous êtes connecté), mais pas pour les visiteurs réguliers.
Lorsque votre CSS ne fonctionne pas, le problème se situe souvent au niveau du sélecteur - vous ciblez le mauvais élément.
CSS suit une hiérarchie de spécificité. Les sélecteurs plus spécifiques l'emportent sur les sélecteurs généraux. Par exemple, #sidebar p (un identifiant et un élément) remplacera les styles définis uniquement pour les p (un élément).
Les fautes d'orthographe sont faciles à manquer. Était-ce .sidebar ou .side-bar? Un trait d'union fait toute la différence.
Les outils de développement de votre navigateur sont d'une aide précieuse pour le dépannage. Cliquez avec le bouton droit de la souris sur l'élément que vous essayez de styliser et sélectionnez Inspecter. Vous verrez tous les styles actuellement appliqués et ceux qui sont remplacés.
Le !important force l'application d'un style, quelle que soit sa spécificité :
p { color: blue !important; }
Bien que tentant lorsque vous êtes frustré, !important crée des maux de tête à long terme. Il rompt la cascade naturelle de CSS et conduit à des "guerres de spécificité" où l'on finit par avoir besoin de plusieurs déclarations !important.
Au lieu de cela, rendez vos sélecteurs plus spécifiques. Si vous .content p ne fonctionne pas, essayez .content .entry-content p pour être plus précis.
Votre site doit être agréable à regarder partout. Ce qui fonctionne sur votre ordinateur portable peut ne pas fonctionner sur les écrans mobiles.
Utilisez les outils de développement de votre navigateur pour simuler différentes tailles d'écran. Dans Chrome, cliquez avec le bouton droit de la souris, sélectionnez Inspecter et recherchez l'icône de basculement de l'appareil.
Avant de vous lancer dans des modifications CSS, surtout si elles sont importantes, sauvegardez votre site. Il ne s'agit pas seulement d'un bon conseil, mais d'une protection essentielle.
Des outils comme Duplicator facilitent les sauvegardes. Il suffit de créer une nouvelle sauvegarde et de choisir le préréglage Site complet.
Pour une protection supplémentaire contre les erreurs propres au site, j'envoie toujours les sauvegardes dans le nuage. Lors de la création de la sauvegarde, choisissez l'une des nombreuses intégrations de stockage dans le nuage.
Ce filet de sécurité vous permet d'expérimenter plus librement, sachant que vous pouvez tout restaurer en cas de problème.
Une sauvegarde de cinq minutes peut vous épargner des heures de dépannage. Si vous remarquez une erreur de CSS, accédez à cette sauvegarde et cliquez sur Restaurer.
Même si votre sauvegarde est dans le cloud, Duplicator la téléchargera et la restaurera. C'est comme si l'erreur n'avait jamais eu lieu !
Le CSS est intégré à votre thème WordPress. Vous pouvez ajouter votre propre CSS personnalisé via le Customizer(Appearance " Customize " Additional CSS), avec un plugin de code WordPress comme WPCode, ou en créant un thème enfant et en éditant son fichier style.css.
WordPress utilise les deux. Le HTML crée la structure de vos pages et de vos articles, tandis que le CSS contrôle l'apparence de cette structure. WordPress génère automatiquement le HTML en fonction de votre contenu, et votre thème fournit le CSS qui le stylise.
Voici quelques exemples simples de CSS personnalisés pour WordPress :
p { font-size: 18px; }.button { background-color: #ff6b6b; }.wp-block-image { margin-bottom: 30px; }.element-to-hide { display: none; }.special-text { font-weight: 700; }Vous n'avez pas besoin d'apprendre le langage CSS si vous êtes satisfait des options intégrées à votre thème. Cependant, l'apprentissage des CSS les plus élémentaires vous permet de mieux contrôler l'apparence de votre site et de corriger les problèmes visuels sans avoir à attendre les mises à jour du thème ou à payer un développeur.
Oui, CSS est l'une des technologies de base utilisées par tous les développeurs web frontaux, avec HTML et JavaScript. Il s'agit d'une compétence essentielle pour tous ceux qui construisent des sites web de manière professionnelle.
Le CSS n'est pas un code mystérieux que seuls les développeurs professionnels peuvent comprendre. C'est un outil pratique qui vous permet de contrôler précisément l'apparence de votre site WordPress.
La clé est de commencer modestement - changer une couleur ici, ajuster un espacement là. Au fur et à mesure que vous vous sentirez plus à l'aise, vous serez capable de faire des ajustements plus complexes.
Rappelez-vous que tous les développeurs WordPress professionnels ont commencé exactement là où vous en êtes aujourd'hui. Ils ont appris en expérimentant, en faisant des erreurs et en développant progressivement leurs compétences.
Lorsque vous commencez, gardez une sauvegarde à portée de main avec Duplicator. Il rétablit les erreurs en un seul clic, de sorte que si quelque chose ne fonctionne pas, vous pouvez toujours revenir sur vos modifications et réessayer.
Pendant que vous êtes ici, je pense que vous aimerez ces autres guides WordPress :
Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, il se peut que nous recevions une commission. Nous ne recommandons que des produits dont nous pensons qu'ils apporteront une valeur ajoutée à nos lecteurs.
