WordPress CSS: Guide de base pour les débutants

WordPress est le système de gestion de contenu (CMS), qui gère plus de 35% des sites Web les plus visités au monde. Son immense base d'utilisateurs génère une quantité énorme de questions sur son utilisation, ses fonctionnalités, les plugins qu'il supporte et bien sûr – les visuels.

Avec autant d’utilisation, les utilisateurs soulèvent le plus souvent certaines questions:

• Comment modifier les styles de thème pour répondre à mes besoins?
• Quel est le meilleur plugin pour les fonctionnalités dont j'ai besoin?

Nous présenterons certaines des principales manières dont les utilisateurs peuvent résoudre leurs problèmes liés à l’apparence de leur site.

Thèmes WordPress

Un thème WordPress est un ensemble de codes définissant les règles de structure et de style de votre site Web. Son objectif principal est de déterminer les composants visuels du site et d’ajouter ou non des fonctionnalités personnalisées.

Nous n'entrerons pas dans les bases de la recherche et de la définition d'un thème. Nous allons plutôt nous concentrer sur la façon de modifier certains aspects pour mieux répondre à vos besoins.

Les thèmes ont généralement les caractéristiques suivantes:

• Options du thème – Si vous achetez un thème chez un fournisseur, il est fort probable qu’il s’accompagne d’un panneau d’options. Avant de modifier quoi que ce soit dans le code, vérifiez s’il existe déjà une option pour ce que vous essayez d’ajuster.
• Éditeur de thème – Ceci est une fonctionnalité par défaut de WordPress qui vous permet de modifier les fichiers de code du thème. Il est fortement suggéré de NE PAS fais ça. (Nous aborderons les raisons plus tard.)
• Thème enfant – Si vous travaillez avec un thème enfant (il peut faire partie du thème principal ou en développer un par vous-même), apportez des modifications personnalisées à cet endroit.
• Personnaliseur – Le personnalisateur WordPress est un endroit où vous pouvez apporter des modifications visuelles à votre thème. Certains personnaliseurs ont des paramètres personnalisés, d'autres non, mais tous ont l'option «CSS personnalisé» pour entrer le code de style.

Plugins WordPress

Tous les composants de votre site ne proviennent pas du thème que vous avez installé. Il est très probable que certains d’entre eux sont générés par un plugin. Des exemples de tels plugins sont le formulaire de contact 7, Jetpack, BBPress, Yoast SEO et autres.

La plupart des thèmes et des plugins sont développés par des fournisseurs externes. Ils sont testés pour les différentes versions de base de WordPress, mais il n’est pas possible de tester la compatibilité entre des milliers de thèmes et de plugins sur le marché.

Ce qui est important ici, c’est que tous les thèmes ne comportent pas de styles prenant en charge la sortie du code des plugins. L'une des raisons les plus courantes d'appliquer des styles personnalisés à votre thème est de prendre en charge ces plug-ins tiers.

Il est important de noter que les changements de style doivent avoir lieu dans le thème, pas dans les plugins..

Appliquer les modifications CSS à votre site

Maintenant que ces connaissances générales sont définies, nous pouvons voir comment et où appliquer les modifications de style à votre site Web.

Si vous ne connaissez rien à CSS, vous en trouverez un aperçu dans la section ci-dessous.

CSS est le langage qui définit l'apparence d'une page HTML. Il définit des règles telles que la taille de la police, la couleur, les images d'arrière-plan, les espaces et la position des éléments. C’est l’outil le plus souvent utilisé pour définir une page visuellement.

Lorsque vous installez un thème WordPress, vous utilisez le tableau de bord WordPress pour rechercher un thème dans le référentiel open source wordpress.org ou vous pouvez télécharger un thème Premium acheté auprès d'un fournisseur. Il y a de petites différences entre les deux options.

Lorsque vous achetez un thème, il est courant de recevoir l’aide des concepteurs de thèmes. Nous vous recommandons vivement de vérifier à l’avance le type de support offert lors de l’utilisation du thème.

modifications. Si votre option d'achat n'inclut pas l'aide au développement, continuez à lire! Les personnes de soutien du créateur de thèmes sont le meilleur point de contact pour tout changement de CSS.

Les deux approches les plus courantes pour appliquer des modifications de style à un site Web WordPress sont les suivantes:

• Ajouter un CSS personnalisé au personnalisateur WordPress
• Modifier les styles dans un thème enfant

Examinons les deux options:

WordPress Customizer

Le personnalisateur WordPress a été introduit il y a quelques années pour fournir un moyen convivial de modifier visuellement un thème. Chaque développeur de thème dispose des outils nécessaires pour ajouter plus d'options au personnaliseur, mais tous les développeurs ne le font pas.

Vous pouvez trouver le Customizer sous le WordPress Dashboard -> Apparence -> Personnalisateur m e n u. Il montrera votre site Web ainsi qu'un panneau à gauche avec divers paramètres.

Dans ce panneau de gauche, vous trouverez tout ce dont vous avez besoin pour peaufiner votre site. Dans le dernier onglet «CSS supplémentaire», vous obtenez un éditeur de code de base pour écrire du CSS pur. Dans la description ci-dessus de l'éditeur, il y a un lien pratique, qui en explique plus sur CSS. Nous vous suggérons de le lire au cas où vous auriez des doutes.

Lorsque vous ajoutez du code CSS à l'éditeur, il met à jour l'aperçu du site à droite en temps réel, ce qui est un excellent moyen de déboguer et d'ajuster votre code. Les modifications ne seront visibles pour vos visiteurs qu'après la mise à jour à l'aide du bouton bleu en haut à gauche marqué «Publier».

Thèmes WordPress pour enfants

L’approche du thème enfant nécessite plus de développement et de connaissances, mais c’est le meilleur choix à long terme et offre beaucoup plus d’options lors de la modification de la conception de votre site Web. C’est également l’approche commune adoptée par les pigistes et les agences de développement lors de la modification d’un site Web dont le thème est préinstallé.

Un thème enfant est une extension du thème principal. Le but est de récupérer tout ce qui existe dans le thème principal et d’écraser ce qui est différent. Par exemple, si vous avez un fichier PHP dans votre thème principal, qui sort votre en-tête, vous pouvez dupliquer ce fichier PHP dans le thème enfant et le modifier. En conséquence, une fois que vous avez activé le thème enfant, vous verrez le fichier d’en-tête modifié sans rien casser dans le site / thème.

Même chose avec le style: au lieu de tout écraser, vous ajoutez simplement un fichier externe avec vos styles personnalisés. Il fonctionne de la même manière que le personnalisateur, mais au lieu d’injecter du code CSS dans la page Web finale, il charge le fichier que vous avez créé et modifié via le thème enfant. Vous pouvez en savoir plus sur les thèmes enfants et sur la création de tels thèmes dans le codex WordPress.

En outre, il est important de noter que l’approche du thème enfant nécessite davantage de connaissances sur la configuration de votre serveur. Vous devrez télécharger les fichiers de thème enfant que vous avez modifiés sur votre hébergement afin de voir les modifications appliquées sur le site Web. C'est la raison pour laquelle les gens préfèrent l'approche de personnalisation. Il est facile de voir, cependant, l'approche de personnalisation est inférieure en termes de la liberté d'un thème enfant fournit.

Mais pourquoi un thème enfant en premier lieu? Pourquoi ne pas appliquer les modifications directement au thème que vous avez installé? Pour une raison très simple – mises à jour de thème. Dès que vous mettez à jour votre thème, tous les changements que vous y avez apportés seront effacés. Les thèmes et les plugins WordPress sont régulièrement mis à jour pour diverses raisons, notamment des vulnérabilités de sécurité. C'est la seule raison pour laquelle un thème enfant existe.

Comment écrire des styles personnalisés

Nous avons expliqué comment modifier CSS, mais que faut-il écrire exactement? Savez-vous quels styles personnalisés vous voulez? – Les modifications de conception ne sont pas une tâche simple. C’est la raison pour laquelle les agences WordPress professionnelles comme Auteur existent. Voyons quelques-uns des styles les plus courants que les gens doivent appliquer à leurs sites Web.

CSS est un langage simple à comprendre mais aussi complexe à maîtriser. La partie suivante est destinée à ceux d’entre vous qui ont de l’expérience et des connaissances en CSS. Afin de garder les choses simples, nous ne couvrirons que ces trois concepts CSS principaux: les sélecteurs, les propriétés de base et les requêtes de média.

Sélecteurs sont le moyen de choisir un élément HTML spécifique et de lui appliquer des styles. Les sélecteurs par eux-mêmes ne font absolument rien. Ils n’étiquettent que les choses, c’est tout. Voici un exemple de sélecteur:

.selector-name {}

Le point au début marque une «classe». Un hashtag (#) est utilisé pour les identifiants. Ça a l'air génial, mais… Comment savez-vous de quelle classe vous avez besoin pour cibler un élément? Le moyen le plus simple consiste à utiliser les outils de développement de votre navigateur. Faites un clic droit sur l’élément que vous souhaitez cibler et sélectionnez «inspecter l’élément». Cela fonctionne certainement sur Chrome et est similaire dans d'autres navigateurs.

Ceci fait, vous verrez les outils de développement et mettra en évidence l’élément sur lequel vous avez cliqué. Sur celui-ci, vous verrez la classe ou l'ID. Astuce Pro – utilisez uniquement des classes.

Dans l'exemple ci-dessus, le div (div est un élément HTML) a une classe de "thème". Donc, pour styler tous ces éléments, il vous suffit d'écrire le sélecteur suivant:

.theme {}

Les crochets {} sont les endroits où nous écrivons les propriétés. C’est un peu plus complexe lors de la sélection d’un élément HTML spécifique avec des données dynamiques, nous allons donc ignorer cette partie.

Cependant, vous devrez parfois être un peu plus précis, car il est probable que le même .thème la classe est utilisée ailleurs. Pour ce faire, il est préférable de cibler également une classe parent. Dans notre cas (non visible dans la capture d'écran ci-dessus), ce serait .themes. Nous allons nous retrouver avec le sélecteur suivant:

.themes .theme {}

Plus il y a de sélecteurs, plus il est précis et plus il a la priorité sur les autres styles. Vous pouvez en savoir plus sur les sélecteurs ou consulter ce court aide-mémoire.

Maintenant, nous écrivons entre accolades {} les styles actuels. Nous avons ciblé l’élément et il est temps de changer son apparence. La syntaxe de base des propriétés CSS est la suivante: :.

Voici un exemple de propriétés couramment utilisées:

• Famille de polices – définir la police pour le texte à l'intérieur de l'élément HTML
• Taille de police – facile à deviner – change la taille en pixels (ou autres valeurs)
• Afficher – le plus souvent, vous pouvez utiliser "none" pour faire disparaître un élément
• Texte-aligner – aligner le texte à gauche, à droite ou au centre
• Couleur – changer la couleur du texte
• Contexte – changer le fond du texte.
• Marge – espacement autour d'une boîte
• Rembourrage – espacement à l'intérieur d'une boîte
• Frontière – ligne autour de la boîte

Bien sûr, il y en a beaucoup d'autres. Si vous souhaitez masquer un élément, il vous suffit de trouver le sélecteur correspondant et de l'appliquer. affichage: aucun. Voici à quoi cela devrait ressembler:

.element-to-hide {
display: none;
}

Vous pouvez bien sûr ajouter plusieurs sélecteurs, l'un après l'autre, assurez-vous simplement d'ajouter un point-virgule «:» à la fin de chaque ligne. Beaucoup de gens se contentent de copier-coller. Dans ce cas, il vous suffit de saisir le bon sélecteur.

CSS est énorme et nous ne pouvons pas couvrir tous les styles ici. Les développeurs front-end expérimentés le font à temps plein depuis des années. Pour commencer, vous pouvez consulter des didacticiels d’introduction pouvant vous aider ou sous-traiter votre projet à des professionnels.

Ce que nous avons examiné jusqu’à présent s’applique à toutes les pages Web de tous les appareils. Mais dans certains cas, cela n'est pas souhaité. Dans certains cas, vous souhaitez styler votre site Web pour mobile, tablette ou ordinateur de bureau. Ou peut-être un mélange entre eux. Comment C'est facile! Les requêtes des médias viennent à la rescousse.

Une requête média définit des règles sur quand certains styles doivent être appliqués. De telles règles peuvent être «seulement sous 600px» ou «entre 400px et 800px» et autres. Voici un exemple concret de cette requête multimédia:

@media (max-width: 640px) { ... }

Les styles entre les crochets seront appliqués uniquement sous une largeur de 640px. Vous pouvez ajouter n'importe quel CSS avec autant de sélecteurs que vous le souhaitez. Voici un autre exemple plus complexe:

@media (min-width: 640px) and (max-width: 1024px) {
.selector-1 {
...
}

.selector-2 {
...
}
}

Les styles ci-dessus seront appliqués à la gamme de tablettes commune. C’est un excellent moyen de cacher du contenu sur une tablette! Ces deux options – largeur min et largeur maximale couvrir la plupart des requêtes de médias.

Tous les exemples CSS ci-dessus sont des exemples de ce que vous pouvez écrire dans le personnaliseur WordPress Dashboard ou dans votre thème enfant.

Façons de salir votre site Web

Nous avons couvert les cas élémentaires d’édition de styles et lié quelques ressources pour une lecture plus approfondie. L'objectif était de fournir une vue d'ensemble des options que vous avez pour modifier votre site Web avec des styles écrits personnalisés.

Le problème avec CSS est qu’il est simple de comprendre la syntaxe et le but de la tête, cela devient complexe lorsque vous l’appliquez pour des sites volumineux. Par exemple, lorsque vous sélectionnez un élément tel que .bouton, vous sélectionnez TOUS les éléments avec cette classe sur toutes les pages de votre site Web, aucune exception. C’est beaucoup, non?

C'est pourquoi nous avons couvert les sélecteurs et comment écrire des plus complexes qui vont au-delà de quelques niveaux. Dans une structure frontale mal conçue, vous pourriez trouver des sélecteurs comme celui-ci:

body #wrapper .header > nav.site-navigation ul li ul li {}

C’est simple pour un développeur front-end de voir le problème avec cela. Les sélecteurs mal écrits créent du désordre dans le code, ce qui est difficile à maintenir. Vous finissez donc par écraser le code pour le réparer.

C’est pourquoi, lorsque vous engagez une agence professionnelle pour gérer et redimensionner votre site Web ou votre plate-forme numérique, une approche commune consiste à modifier le code CSS / HTML dans son intégralité. il pourrait être plus coûteux de maintenir que de reconstruire.

Donc, chaque fois que vous décidez d'appuyer sur votre bouton 10px ci-dessus avec une propriété comme marge supérieure: 10px, assurez-vous que votre sélecteur ne cible que les éléments souhaités.

Mais les choses ne s'arrêtent pas là. Lorsque vous ciblez des éléments spécifiques, vous vous retrouvez avec du code répété. Imaginez que vous souhaitiez réparer dix boutons sur les 500 que vous avez sur le site. Eh bien, de tels sélecteurs vont s'accumuler et votre code CSS va également commencer à paraître compliqué avec des sélecteurs chaînés comme celui-ci:

.aside .header button,
.main-area .site-button,
.header > .button {}

L'extrait ci-dessus est toujours un petit problème. Nous avons vu des sélecteurs chaînés qui ressemblent à un énorme mur de code minifié, ce qui est terrible à tous les niveaux.

En bout de ligne, il est très difficile de savoir si le sélecteur que vous écrivez est suffisamment précis. Que se passe-t-il si, sur une autre zone du site, un changement survient et que votre page se brise? Méchant! Encore une fois, une autre raison d’embaucher des développeurs professionnels. Ils vont créer une architecture propre à partir de la base et définir des règles à travers des composants réutilisables. Un problème assez complexe qui prend beaucoup à maîtriser.

Envelopper

Il est très facile de modifier votre site via CSS. C’est aussi très facile de le casser. Il faut des années d'expérience pour savoir quoi faire et comment le faire. Parfois, les ajustements ne font qu'aggraver les choses en interrompant l'expérience de l'utilisateur ou en supprimant visuellement une partie du site.

La conception affecte les taux de conversion et la rentabilité ou non de votre site Web. Par conséquent, toute modification du code, grande ou petite, peut être distrayante et difficile à trouver. Ainsi, si vous exploitez une entreprise en ligne et que votre nom et vos bénéfices dépendent de la qualité de votre site Web, il est judicieux de faire appel aux services de développeurs expérimentés.

Cependant, s’il s’agit de votre blog personnel ou que vous êtes du genre à aimer expérimenter et que vous n’avez pas peur de casser quelque chose de temps en temps, allez-y! Si possible, envisagez de tester sur votre ordinateur local avant d'appliquer les modifications à votre site actif. C’est plus sûr et vous avez plus de temps pour créer le site Web parfait!