Comment modifier le style CSS dans WordPress – Guide du débutant

Comment modifier le style CSS dans WordPress – Guide du débutant

8 janvier 2020 Non Par Julien

Vous pensez peut-être que la modification du code CSS n’est pas nécessaire si vous utilisez WordPress et un constructeur visuel, et c’est en partie vrai, je vous recommande, si vous en avez la chance, d’apprendre à l’utiliser. Découvrez les conseils de notre partenaire ici.

La modification du code CSS dans WordPress est un ajout et un plus lors de la conception d’un site web, car il y aura toujours des parties que le modèle ou la mise en page ne pourront pas atteindre et vous devrez recourir à ce langage de feuille de style.

Cela peut vous sembler complexe car le html et le CSS sont deux langages complexes mais pas du tout difficiles à comprendre de nos jours.

Pour que vous puissiez apprendre à les utiliser et donner une touche spéciale à vos dessins, j’ai amené un invité très spécial, il est Argentin et son nom est Luis Forgiarini et il a écrit ce guide pour les débutants en CSS, vous allez l’adorer, je vous laisse avec lui :

La grande majorité des utilisateurs de notre bien-aimé WordPress, l’utilisent sans toucher une seule ligne de code. Mais le fait que la plupart d’entre eux ne le font pas ne signifie pas que c’est le meilleur, car connaître le HTML et le CSS ouvre un large éventail de possibilités lorsqu’il s’agit de personnaliser votre site/blog.

Comme je veux que vous fassiez partie de ceux qui mettent la main sur le code, je vous laisse ce guide sur la façon de modifier les styles CSS dans WordPress.

Introduction au CSS

Mon objectif est que tout nouvel arrivant comprenne ce poste. Je commencerai donc par vous donner une brève introduction sur le sujet. Aussi brièvement que possible. Hehe

Que sont des styles CSS ?

Dans un site web, y compris ceux montés en WordPress, le code HTML est chargé de donner la structure.

Sans aller plus loin, sous ces lignes que vous êtes en train de lire, il y a du code HTML qui donne forme à tout. Différencier les titres du texte commun, placer des liens, laisser des espaces entre les paragraphes, placer des images, etc.

Les feuilles CSS sont chargées de donner à cette structure HTML, des styles visuellement plus agréables.

Pour faire une analogie, supposons que vous preniez une photo avec votre smartphone et qu’avant de la télécharger dans Instagram, vous appliquiez un filtre. Si nous comprenons la photo comme du HTML, le CSS est le filtre. En principe, la photo/HTML reste inchangée, mais son apparence change en fonction de chaque filtre/CSS que vous appliquez.

Plus précis, le CSS est un langage de feuille de style qui permet d’appliquer des styles de manière sélective aux éléments des documents HTML. Vous pouvez colorier et dimensionner le texte d’un paragraphe, définir l’alignement d’une image, modifier l’épaisseur d’un trait, etc.

Structure des feuilles de style CSS

Pour que, lorsque nous commencerons à écrire nos premières lignes dans le CSS, vous ne vous perdiez pas, je veux que vous compreniez sa structure. Ce qui, vous le verrez, est très simple.

Sélecteur

C’est là que commence la règle, et c’est celui qui définit quel élément HTML se verra attribuer un style. Nous verrons ensuite qu’il peut s’agir d’une balise, d’un identifiant, d’une classe, d’un attribut ou même d’une pseudo-classe.

Propriétés

C’est ici que vous définissez ce que vous voulez changer (taille, couleur, alignement, etc.)

Valeur de la propriété

Pour finir, la valeur de la propriété est donnée. Par exemple, si la propriété est une couleur, la valeur pourrait être verte.

Un exemple simple est le suivant, dans lequel un titre h1 se voit attribuer un style.

h1 { color : red ; }

Dans ce cas, il est défini que tous les titres h1 seront rouges. Maintenant, si vous voulez que h2 et h3 aient aussi cette couleur, vous pouvez faire ce qui suit.

h1,h2,h3 { color: red ; }

Il suffit de faire une règle avec plusieurs sélecteurs.

Types de sélecteurs

Au fur et à mesure, les sélecteurs peuvent être de différents types. Mais chacun est appelé du CSS d’une manière différente :

Sélecteur de balises

Il sélectionne les éléments à l’intérieur d’une balise. Exemple :

p { color: red; }

Ce code sélectionne la balise <p>.

Sélecteur d’identification (ID)

Sélectionne tous les éléments qui se trouvent sous l’ID en question. Exemple :

#id-one { background : #FFF ; }

En utilisant le CSS ci-dessus, les balises identifiées par l’ID id-one sont stylisées (<h1 id= »#id-one »)

Sélecteur de classe

Sélectionne les éléments de la classe spécifiée. Exemple :

.class-one { font-size: 25px; }

Cette CSS modifie tous les éléments classés avec la classe .class-one (<p class= »class-one »>)

Sélecteur d’attributs

Sélectionne tout élément contenant l’attribut spécifié.

img[src] { padding: 65px 0 65px 0; }

En utilisant ce CSS , sélectionnez <img src=»unaimagen.png»> mais pas <img>.

Sélecteur de pseudo-classe

Les éléments spécifiés, mais seulement lorsqu’il est dans l’état spécifié. Exemple :

a:hover { color : #000 ; }

Lorsque vous survolez un élément <a>, il prend la couleur noire (#000). Très utile pour donner une dynamique et mettre en valeur un élément.

Combinaison de sélecteurs

Les sélecteurs peuvent être combinés, ce qui permet d’être plus précis dans la sélection. Exemple :

<div class= »class-one »> <h2>Un titre</h2> <p>Avec un paragraphe</p> </div> <div class= »class-two »> <h2>Autre titre</h2> <p>Avec un paragraphe</p> </div>

Vous ne pouvez pas l’appeler simplement une balise du CSS, mais nous devrons en combiner plusieurs.

p, h2 { text-align : center ; } .class-one h2 { color : #4BBB3E ; text-align : center ; font-size : 45px ; font-weight : bold ; font-family : arial ; }

On définit d’abord une propriété généralisée (alignement) aux balises h2 et p. Puis on appelle la classe .class-one, et à l’intérieur de celle-ci la balise h2 pour donner les styles à cette dernière.

5 façons d’éditer le CSS dans WordPress

L’un des piliers sur lesquels repose la grande popularité du gestionnaire de contenu WordPress est qu’il n’est pas nécessaire de connaître la programmation pour l’utiliser. Vos connaissances en HTML et CSS sont peut-être nulles, mais il vous est toujours possible de gérer un site web avec ce CMS.

Si vous êtes un de ces super débutants, qui ne touchent pas une seule ligne de code dans votre WordPress, j’ai une bonne nouvelle pour vous. L’édition de CSS dans WordPress n’est pas du tout difficile, et je l’expliquerai dans cette section.

Il existe plusieurs façons de mettre la main sur le CSS de WordPress. Nous allons examiner ce qui suit :

  • Depuis l’éditeur dynamique de WordPress.
  • Utilisation de plugins.
  • Création d’un thème enfant.

Depuis l’éditeur WordPress

L’édition de CSS à partir du panel lui-même était une tâche qui avait été demandée à WordPress depuis longtemps, et c’est dans la version 4.7 qu’elle a été intégrée. Maintenant, en cliquant sur Appearance → Customize → supplémentaire CSS, vous avez accès à un panneau d’édition CSS assez complet.

Dans ses premières versions, l’éditeur était très basique, presque comme s’il écrivait dans un txt. Mais il dispose désormais de fonctions qui permettent une écriture plus facile et plus rapide, dont voici quelques exemples

  • Code mettant en évidence les classes et les valeurs d’identification.
  • Texte autocomplété.
  • Détecteur d’erreurs d’écriture.

C’est sans doute la méthode la plus simple pour éditer les feuilles de style dans WordPress.

Utilisation de plugins

Avant la version 4.7 de WordPress, l’utilisation de plugins pour toucher les CSS dans WordPress était la première méthode vers laquelle un débutant se tournait.

De même, l’utilisation de Plugins est toujours répandue, et certains des plus populaires sont

  • CSS simple et personnalisé.
  • SiteOrigin CSS.
  • WP Add Custom CSS.
  • JetPack.

Personnellement, chaque fois que je peux me passer d’un plugin pour ajouter une fonction, je le fais. Mais bon, WordPress ne serait pas WordPress sans Plugins, donc je ne pouvais pas éviter cette méthode.

Créer un thème enfant

S’il n’y a pas de plugins ou l’éditeur de WordPress lui-même, si nous voulons changer ou ajouter des styles CSS, nous devons aller dans le fichier style.css de notre thème. Bien que cela semble être le moyen le plus logique, ce n’est pas du tout recommandé.

La principale raison pour laquelle je ne recommande pas cette méthode est que chaque fois que votre thème reçoit une mise à jour, le CSS ajouté sera perdu. Autrement dit, vous devez être au courant de chaque mise à jour, et ajouter à nouveau vos modifications CSS lorsqu’elles se produisent.

Pour résoudre ce genre de problèmes, il existe des thèmes pour enfants. Au cas où vous ne le sauriez pas, un thème enfant est un thème qui hérite des fonctionnalités d’un autre, que nous appelons « thème parent ». Cela vous permet de modifier et/ou d’ajouter des fonctionnalités au thème parent, sans toucher aux fichiers du thème parent. Au final, un moyen sûr de modifier un modèle dans WordPress.

Ainsi, en revenant à l’édition CSS, l’utilisation d’un thème enfant garantira que les modifications apportées à votre thème WordPress ne seront pas perdues avec les mises à jour du thème parent.

Vous devez comprendre que la création d’un thème enfant vous permet de modifier tous les fichiers du thème parent. Il s’agit notamment de la fonction .php. Dans la section suivante, vous verrez qu’il est très utile de pouvoir mettre la main sur un tel dossier.

Comment individualiser le CSS pour chaque poste ou entrée

Jusqu’à présent, nous avons vu comment donner un style général à votre site web. Cela signifie que tous les coins de la toile prendront les mêmes éditions. Mais supposons que vous deviez donner des styles individuels à chaque page ou message de votre site web. Comment feriez-vous ?

Eh bien, comme pour tout dans la vie, il y a une solution, en fait plusieurs solutions. Mais ici, je vous en donne deux.

Edition de plugins

Oui oui, pour chaque problème dans WordPress, il y a un plugin hehe. Le plugin en question que j’ai déjà recommandé quelques lignes auparavant et qui est le suivant.

WP Add Custom CSS

Vous l’installez, l’activez et vous aurez un éditeur de texte CSS disponible sur chacune de vos pages et entrées.

Edition au moyen du code .php

Le précédent est une bonne option, mais celui que je vais vous donner maintenant est meilleur car vous n’aurez pas besoin de plugin. Je vous ai déjà dit que chaque fois que je le pouvais, j’évitais les plugins (ce n’est pas parce que je dis que cela ne fait pas de moi un antiplugin que les 26 plugins actifs de mon blog en sont la preuve. hehe)

Pour contourner le plugin, nous allons ajouter quelques codes dans le fichier function.php. Pour ce faire, il est préférable d’avoir un thème enfant déjà créé. Toucher un fichier de fonction parent est risqué, et présente le même inconvénient que de modifier le fichier style.css. Les modifications sont perdues avec une mise à jour.

Eh bien, je suppose que vous m’avez écouté et que vous avez déjà votre thème enfant. Si c’est le cas, vous pouvez ajouter ce bout de code dans le fichier function.php.

//Custom CSS Widget add_action(‘admin_menu’, ‘custom_css_hooks’) ; add_action(‘save_post’, ‘save_custom_css’) ; add_action(‘wp_head’, ‘insert_custom_css’) ; function custom_css_hooks() { add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’) ; add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’) ; } function custom_css_input() { global $post ; echo ‘<input type= »hidden » name= »custom_css_noncename » id= »custom_css_noncename » value= »‘.wp_create_nonce(‘custom-css’). » » />’ ; echo ‘<textarea name= »custom_css » id= »custom_css » rows= »5″ cols= »30″ style= »width:100% ; »>’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’ ; } function save_custom_css($post_id) { if ( !wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) renvoie $post_id ; if (défini(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) renvoie $post_id ; $custom_css = $_POST[‘custom_css’] ; update_post_meta($post_id, ‘_custom_css’, $custom_css) ; } fonction insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) alors que (have_posts()) the_post() ; echo ‘<style type= »text/css »>’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’ ; endwhile ; endif ; rewind_posts() ; }

Cela vous donnera le même résultat que le plugin, une boîte d’édition CSS pour chaque message et entrée sur votre site web.

Note : vous ne pensez pas que j’ai écrit ce morceau de code php, n’est-ce pas ? hehehe. Non non, malheureusement mes connaissances en matière de php n’en arrivent pas là. Je l’ai obtenu d’un très bon post sur digwp.com.

Comment ajouter ou remplacer le CSS dans WordPress

En général, il y a deux tâches que l’on peut effectuer lorsqu’on travaille sur le CSS dans WordPress :

  • Ajouter de nouveaux styles.
  • Ecraser/modifier les styles précédemment créés.

Bien qu’il s’agisse de tâches similaires, nous allons les individualiser afin que vous puissiez mieux les comprendre.

Ajout de nouveaux styles

Nous en arrivons là lorsque nous avons besoin de nouveaux éléments de conception pour notre site web. Il peut s’agir de boutons, de zones de texte, de menus, de widgets, etc.

C’est très facile, il suffit de prendre le morceau de code CSS et de l’ajouter de l’une des trois façons que j’ai expliquées.

Par exemple, si vous recherchez le code CSS d’un bouton, cela peut être utile.

/* css button code red */ .button.red { display : inline-block ; padding : 10px 35px ; margin : 3px ; border : 1px solid #999 ; border-radius : 3px ; -webkit-transition:1.8s opacity ; transition : 0.2s opacity ; box-shadow : 0 1px 2px rgba(0,0,0,.2) ; font-size:16px ; background-color : #e62727 ; color : #FFF ; font-weight : bold ; } .button.red:hover{ background-color : #BF00FF ; }

Une fois ajouté dans votre feuille de style CSS WordPress, vous pouvez utiliser l’élément par le biais du HTML.

<!- code html pour le bouton -> <a class= »bouton rouge » href= »URL pour le bouton »><span>code html pour le bouton</span>>>

Le résultat final est le suivant :

<script async src= »//jsfiddle.net/luisfor09/m07z1612/1/embed/result/dark/ »></script>

Écraser/modifier les styles CSS créés précédemment

Il est très courant de devoir modifier le CSS dans WordPress d’éléments qui existent déjà dans notre thème. Nous pouvons vouloir changer la couleur de fond de notre menu, varier le style de police des textes, donner un style plus accrocheur à la boîte de commentaires, etc, etc. Les modifications possibles sont infinies.

Si l’élément à modifier est bien connu, par exemple les titres h2. Il n’y a pas beaucoup de tours, nous allons chez notre éditeur CSS et nous écrivons les styles que nous voulons donner.

h2 { color : #FFF ; text-align : center ; font-size:16px ; background-color : #e62727 ; }

Cela modifierait la couleur, l’alignement et la taille de ces titres.

Note : Il peut arriver que, pour certains tags, votre thème ne prenne pas les nouveaux styles comme il priorise les siens. Cela se produit dans les styles que vous écrasez, pas dans les nouveaux styles. Une solution consiste à utiliser la balise ! important.

En suivant l’exemple ci-dessus, si votre modèle ne prend pas en compte l’édition couleur dans le titre h2, vous devez ajouter la balise !important comme suit.

h2 { color : #FFF !important ; text-align : center ; font-size:16px ; background-color : #e62727 ; }

Cela obligera le système à prendre la couleur que vous dites.

Utilisation de l’inspecteur d’éléments de votre navigateur

Le cas que nous venons de voir est le cas idéal, mais en général, il faut modifier le style des éléments, dont on ne connaît pas les styles qui les régissent. C’est à ce moment que nous nous rendons à l’inspecteur des grands éléments de notre navigateur. Dans mon cas, Google Chrome.

L’utilisation de cet outil est très simple, il suffit d’ouvrir le site web avec le navigateur, de se placer dans l’élément que l’on souhaite modifier, de cliquer avec le bouton droit de la souris sur celui-ci et de cliquer ensuite sur inspecter.

L’inspecteur d’éléments vous donne un panneau sur la droite, qui en haut contient le code HTML du site web, et en bas le CSS.

Lorsque vous déplacez votre curseur dans le code HTML, les éléments qui définissent chaque balise sont mis en évidence sur le site web. En outre, les codes CSS relatifs à chacun d’eux sont indiqués.

Pour des raisons pratiques, le HTML est compressé, il montre la balise mère et le reste se réduit. Vous le remarquerez par les points de suspension (…), pour développer le code et arriver à la balise que vous voulez obtenir, vous devez double-cliquer sur les trois points.

Depuis le panneau CSS de l’inspecteur, vous êtes autorisé à effectuer des modifications, qui ne sont évidemment qu’au niveau de votre navigateur, et avec seulement une mise à jour, elles sont perdues.

Et bien c’est aussi simple que cela de faire de l’édition CSS dans WordPress, j’espère que vous avez compris toute la procédure. Sinon, collez une autre lecture, et si vos doutes persistent, laissez-les dans la boîte de commentaires.