Personnaliser les thèmes WordPress avec CSS

Les thèmes sont l'un des principaux arguments de vente de WordPress. Le bon thème peut faire en sorte que votre site Web se démarque vraiment. Cependant, vous souhaiterez généralement apporter au moins quelques modifications personnalisées au thème que vous utilisez, afin que tout soit parfait.

Dans la plupart des cas, vous devrez utiliser des feuilles de style en cascade (CSS) pour personnaliser le style de votre thème. Avec WordPress, vous pouvez le faire de plusieurs manières. Même si vous n'avez aucune expérience en matière de code, vous pouvez facilement ajouter vos propres modifications CSS au thème WordPress.

Dans ce guide, nous examinerons trois méthodes que vous pouvez utiliser pour ajouter et modifier du CSS personnalisé dans WordPress. Nous vous guiderons tout au long du processus et vous expliquerons quand il est judicieux d'utiliser chaque technique. Commençons!

Ajouter un CSS personnalisé avec le personnalisateur de thème

Niveau d'expérience : Débutant

Le personnalisateur WordPress vous permet d'apporter des modifications à la conception de votre site Web et de les prévisualiser en temps réel. Pour y accéder, connectez-vous à votre tableau de bord WordPress et accédez à l'onglet Apparence > Personnaliser :

Il y a beaucoup de paramètres avec lesquels vous pouvez jouer ici. Cependant, recherchez maintenant l'onglet CSS supplémentaire . Une fois que vous aurez cliqué dessus, une nouvelle section s'ouvrira, avec un champ où vous pourrez ajouter du CSS personnalisé :

Si vous débutez avec CSS, vous pouvez en savoir plus sur son utilisation avec WordPress dans le Codex officiel. Il existe également de nombreuses autres excellentes ressources sur les bases du CSS, et nous vous recommandons d'en consulter quelques-unes.

CSS peut devenir un peu complexe, mais vous pouvez accomplir beaucoup de choses simplement en connaissant les bases. L'avantage d'utiliser WordPress Customizer est qu'il vous permet de prévisualiser instantanément toutes les modifications que vous apportez à l'aide de CSS. Cela signifie que cette approche est parfaite pour apprendre comment fonctionne CSS.

Remarque : Les modifications que vous apportez à l'aide de l'outil de personnalisation ne seront pas conservées si vous changez de thème. De plus, la mise à jour de votre thème actuel peut effacer votre CSS personnalisé. Nous ne recommandons donc pas cette approche si vous avez l'intention d'apporter de nombreuses modifications ou des options de thème intermédiaires.

Ajouter un CSS personnalisé avec un plugin

Niveau d'expérience : débutant à intermédiaire

La méthode ci-dessus fonctionne bien, mais vous pouvez étendre vos options en utilisant des plugins. Dans les sections suivantes, nous allons explorer trois plugins qui vous permettent de personnaliser votre thème WordPress.

Remarque : Le niveau d'expérience pour l'édition de CSS WordPress à l'aide de plugins dépendra de l'outil que vous utilisez. Nous vous recommandons de les tester tous et de voir lequel se sent le plus à l'aise.

Éditeur CSS avancé

Si vous aimez utiliser WordPress Customizer, mais que vous souhaitez qu'il offre plus d'options, ce plugin vaut le détour. Avec Advanced CSS Editor, vous pourrez ajouter du CSS personnalisé pour les ordinateurs de bureau, les téléphones et les tablettes. De cette façon, vous pouvez affiner l'apparence de votre site Web sur chaque type d'appareil.

Après avoir installé le plugin WordPress, accédez à l'onglet Apparence > Personnalisateur dans votre tableau de bord. Vous devriez voir une nouvelle option Advanced CSS Editor , vous permettant d'accéder à plusieurs éditeurs pour chaque type d'appareil :

Tout ce que vous avez à faire est d'ajouter le CSS personnalisé que vous souhaitez, de tester pour vous assurer qu'il fonctionne correctement et d'enregistrer les modifications apportées à votre thème.

Avantages:

• Vous obtenez un contrôle total sur l'apparence de votre site Web sur tous les appareils.
• Vous pouvez toujours modifier votre thème via le Customizer.

Les inconvénients:

• L'ajout de CSS personnalisé pour plusieurs types d'appareils peut représenter beaucoup de travail.

Note moyenne : 4,5/5

Remarque : Ce plugin inclut également une option pour réduire votre CSS, ce qui peut aider à réduire les temps de chargement de votre site.

CSS personnalisé modulaire

Le CSS personnalisé modulaire vous permet d'ajouter du CSS à votre thème via WordPress Customizer. Cependant, il ajoute également quelques fonctionnalités très bienvenues à l'éditeur CSS par défaut. Pour être plus précis, ce plugin vous permet de créer des CSS personnalisés pour des thèmes individuels et d'apporter des modifications globales qui persistent sur n'importe quel thème que vous configurez :

Pour accéder à ces champs, vous devez retourner dans la section Apparence > Personnalisateur > CSS supplémentaire . Une fois que vous y êtes, vous pouvez commencer à apporter des modifications.

Avantages:

• Vous pouvez ajouter du CSS personnalisé pour des thèmes spécifiques uniquement et apporter des modifications qui persisteront même si vous changez de thème.

Les inconvénients:

• Le CSS « global » peut ne pas fonctionner correctement avec tous les thèmes, vous devez donc être prudent lorsque vous passez à un nouveau.

Note moyenne : 5/5

CSS d'origine du site

SiteOrigin CSS est un départ des plugins dont nous avons parlé jusqu'à présent. Au lieu d'ajouter de nouvelles fonctionnalités au Customizer, il propose un éditeur CSS WordPress autonome. Vous pouvez accéder à ce nouvel éditeur en accédant à l'onglet Apparence > CSS personnalisé après avoir installé le plugin :

À première vue, cet éditeur CSS ne ressemble pas à grand-chose. Cependant, si vous cliquez sur l'icône en forme d'œil, vous lancerez un éditeur visuel. Ici, vous pouvez cliquer sur n'importe quel élément de votre thème et le modifier facilement à l'aide de CSS :

Le plugin CSS SiteOrigin peut être un peu écrasant au début. Cependant, cela peut également vous faire gagner beaucoup de temps, car vous n'aurez pas à chercher les bons sélecteurs. Tout ce que vous avez à faire est de cliquer sur l'élément que vous souhaitez modifier, puis d'ajouter le code CSS de votre choix.

Avantages:

• Vous pouvez modifier n'importe quel élément de votre site Web en cliquant dessus.
• Ce plugin vous permet de modifier certains aspects simples de votre thème sans avoir à utiliser CSS, comme ses polices.

Les inconvénients:

• Il peut être difficile de garder une trace de tous les CSS personnalisés que vous ajoutez à votre thème si vous modifiez plusieurs éléments.

Note moyenne : 4,9/5

Modifier le CSS avec la feuille de style du thème enfant

Niveau d'expérience : Avancé

Un thème enfant est une copie d'un thème existant (appelé « parent »). Les thèmes enfants vous permettent d'apporter des modifications à votre site Web WordPress en toute sécurité. En effet, vous pouvez toujours mettre à jour le thème parent, sans perdre aucun de vos ajustements CSS personnalisés. De plus, si vous ajoutez un CSS qui a un impact négatif sur votre site, vous pouvez simplement désactiver le thème enfant.

Tout CSS personnalisé que vous ajoutez à un thème enfant remplacera les styles de son parent. Cependant, pour que cela fonctionne, vous devez d'abord savoir comment créer un thème enfant. Une fois que votre "enfant" est prêt, vous pouvez accéder à ses fichiers à l'aide d'un client FTP tel que FileZilla.

Après vous être connecté à votre site Web via FTP, vous souhaiterez localiser votre dossier racine, qui est souvent appelé public_html ou www , ou porte le nom de votre site Web :

Ensuite, accédez au répertoire wp-content/themes . Vous y trouverez des dossiers individuels pour tous vos thèmes, y compris l'enfant que vous avez configuré. Ouvrez le dossier du thème enfant et recherchez le fichier style.css dans :

Cliquez avec le bouton droit sur le fichier de thème et sélectionnez l'option Afficher/Modifier . Cela ouvrira le fichier à l'aide de votre éditeur de texte par défaut, vous permettant d'y apporter des modifications. Cela signifie que vous pouvez ajouter du CSS personnalisé à votre thème, seulement maintenant vous utilisez un éditeur de texte intégral au lieu de WordPress Customizer.

Lorsque vous avez terminé, enregistrez les modifications apportées au fichier et fermez l'éditeur. Ensuite, vous pouvez visiter votre site Web pour voir si les modifications que vous avez apportées ont fonctionné comme prévu. S'ils ne l'ont pas fait, vous pouvez revenir à votre fichier style.css et continuer à peaufiner son CSS.

Remarque : il s'agit d'un aperçu de haut niveau, et il y a beaucoup plus à configurer et à utiliser un thème enfant. Nous vous suggérons de procéder avec prudence si vous êtes nouveau dans ce processus.

CSS personnalisé avec personnalisateur de thème vs plugins CSS vs feuille de style de thème enfant

Comme vous pouvez le constater, vous disposez de nombreuses options pour ajouter du CSS personnalisé à WordPress. Cependant, choisir la bonne approche peut être un défi. Décomposons les choix, selon votre niveau d'expérience avec la plateforme et avec CSS en général :

• Vous êtes nouveau sur WordPress et vous n'êtes pas habitué à utiliser CSS. Dans ce scénario, votre meilleur pari est de vous en tenir au personnalisateur WordPress. Avec lui, vous pourrez prévisualiser les modifications instantanément et vous habituer à utiliser CSS.
• Vous avez une certaine expérience avec WordPress et CSS. À ce stade, vous aurez besoin de plus d'options que celles fournies par le Customizer par défaut. Par conséquent, nous vous recommandons d'utiliser des plugins qui améliorent sa fonctionnalité pour modifier le CSS personnalisé dans WordPress.
• Vous êtes un vétéran de WordPress qui est à l'aise avec CSS. Si vous n'êtes pas intimidé par les CSS et les extraits de code, vous souhaiterez probablement configurer un thème enfant et modifier sa feuille de style manuellement.

Gardez à l'esprit qu'il ne s'agit que de lignes directrices et que vous devriez vous sentir libre d'utiliser l'approche qui vous convient le mieux.

Améliorez l'expérience numérique avec un excellent design et un hébergement de premier ordre

La conception de votre site Web joue un rôle important dans ce que les visiteurs en pensent. Avec WordPress, vous avez accès à des milliers de thèmes et vous pouvez modifier n'importe lequel d'entre eux à l'aide de CSS personnalisés.

Cependant, la gestion d'un site Web réussi n'est pas seulement une question d'apparence. Vous aurez également besoin d'un hébergement Web WordPress qui offre d'excellentes performances, une sécurité et une assistance. Avec WP Engine, vous aurez accès à toutes ces fonctionnalités avec chacun de nos forfaits !