Comment éditer le CSS sur son Blog WordPress?

editer css wordpress

Si vous voulez être capable de personnaliser certains éléments de votre blog ou de votre site, vous avez besoin de connaître un peu de CSS.

Connaître les règles du CSS est une chose, et je reviendrai sur quelques bases à connaître dans un autre article. Aujourd’hui, je veux surtout vous montrer comment et où éditer la feuille de style de votre blog.

Comment éditer sa feuille de style dans WordPress

Il y a plusieurs façon d’éditer sa feuille de style dans WordPress. Et certains me diront que oui! c’est super, dans WordPress il y a dans l’ onglet Apparences  un « Editeur ». Cet éditeur vous permet d’accéder aussi bien à la feuille de style qu’aux fichiers php.

NON !

Non on édite pas ses fichiers à partir de là. Personnellement, je trouve  que cet éditeur est une très mauvaise idée. Une mauvaise manipulation, un signe mal écrit, un faux pas…et vous risquez l’Ecran Blanc de la Mort qui Tue. En gros vous êtes mis à la porte de votre back-office WordPress et pouvez observer un bel écran blanc en place de votre site. Dans ce cas il faut se connecter via FTP pour aller corriger l’erreur dans le fichier en question (et donc se souvenir de son erreur…vous voyez le topo).

En outre, si vous n’avez pas de thème enfant et que vous éditez directement votre feuille de style ici, à la prochaine mise à jour de votre thème, vous perdrez tout.

Utiliser Jetpack

  • Cliquer sur l’onglet Jetpack
  • Dans Réglages activez « CSS personnalisé »
  • Allez dans l’onglet Apparences, une option « Modifier le CSS » est apparue.
  • Ajouter vos règles de CSS dans l’éditeur
  • Cliquez sur enregistrer la feuille de style
[Tweet « J’édite facilement mon css depuis #jetpack dans WordPress! Voici comment… « ]

Utiliser son thème premium

Si vous avez un thème premium, il se peut que votre thème possède une sorte de tableau de bord qui lui est propre et où vous pouvez choisir vos couleurs, vos polices, insérer votre logo etc.
Souvent dans ces panneaux à options, les développeurs ajoutent un encart appelé Quick CSS ou Custom CSS.

Il vous suffit d’ajouter vos règles à cet endroit et d’enregistrer. Aussi simple!

Via FTP

Pour ceux qui gèrent les fichiers de leur site via FTP (je recommanderais Filezilla que je vais utiliser dans cette vidéo) vous pourrez accéder à la feuille de style afin d’y appliquer vos changements.

Ressources: FilezillaTextwrangler

 

A savoir

Si votre site utilise un plugin de cache, il vous faudra certainement le désactiver pour pouvoir observer vos changements instantanément. N’hésitez pas également à rafraichir votre navigateur si vous ne voyez aucun changement.
Enfin, chez ovh il y a un fichier .ovhconfig avec une ligne comportant ceci:
environment:production 
Pour avoir la possibilité de voir vos changements en direct, vous devez passer cette ligne en
environment: development 
N’oubliez pas de remettre « production » une fois les modifications terminées.

[Tweet « Maintenant je n’ai plus aucune excuse pour ne pas faire des modifications CSS ! via@calliframe »]

Jette un oeil ici

Ola !

Je suis Christelle et je crée des sites internet pour les indépendants, coachs, thérapeutes dans le domaine du bien-être, professeurs de Pilates, de Yoga, infopreneurs et comme moi, les femmes qui se sont reconverties dans une activité en ligne durant leur expatriation. Parce que je comprends leur besoin et la stratégie à adopter en ligne, je suis à même de pouvoir les aider dans leur projet. 

J'aide également les Web Designers et Graphistes à réfléchir à la meilleure façon de développer leur activité et à travailler avec les clients qui sont faits pour eux. 

Tu n'as pas besoin de tout faire tout(e) seul(e). N'hésite pas à me contacter! 

9 Comments

  1. Elsa sur 26 juin 2015 à 23 h 06 min

    MERCI !!! Tu m’a éclairé !!! Je suis en train de construire mon blog et je découvre le CSS. Avec ta vidéo j’ai tout de suite compris le fonctionnement alors que je faisait des recherches depuis de longues heures !! Simple rapide et efficace ! Je vais tout de suite lire tes autres articles !!!

    • Christelle Bourgeois sur 27 juin 2015 à 14 h 54 min

      Merci! Ravie d’avoir pu t’aider. N’hésites pas à me dire quand ton site sera en ligne! Je suis toujours curieuse de découvrir les réalisations des autres.

  2. Cecilia sur 18 septembre 2015 à 21 h 09 min

    Salut!
    J’étais déjà pas mal passée sur ton blog qui m’a beaucoup aidé!
    Je me met plus sérieusement au design de mon blog, et j’ai lu des tonnes de site… j’aurais dû commencer par ta vidéo qui est on ne peut plus claire!
    J’ai quand même quelques petites questions si tu veux bien m’aider:
    – En changeant dans le FTP il ne faut pas de thème enfant?
    – Si on change via le thème (j’ai un premium) ou via jetpack, à la prochaine MAJ cela ne risque pas de s’effacer?
    – Si l’on crée un thème enfant, il faut copier coller le fichier CSS en entier dans le thème puis le modifier à partir de là ? ou juste copier les bouts que l’on souhaite modifier?

    Merci beaucoup pour ton aide par avance!

    • Christelle Bourgeois sur 23 septembre 2015 à 8 h 03 min

      Bonjour Cecilia, Le FTP et le thème enfant sont deux choses différentes. Le FTP te permet d’accéder aux dossiers et fichiers de ton WordPress. Dedans tu as le thème que tu utilises et effectivement il vaut mieux passer par là si on veut modifier des fichiers. Il n’est jamais bon d’utiliser l’éditeur que l’on trouve dans le back-office de WordPress. Mais si tu modifies via FTP des fichiers sur ton thème « parent » à la prochaine mise à jour celui ci risque de perdre tes changements. Il vaut mieux donc créer un thème enfant qui ne fonctionnera que si le thème parent est toujours là, mais c’est le thème enfant que l’on active dans l’onglet « Thèmes ».
      Si tu changes le css via jetpack à la prochaine mise à jour, pas de soucis, tu gardes bien tes modifs, mais si un jour tu ne veux plus jetpack (on ne sait jamais…genre tu as eu des ennuis avec et tu en as marre 😉 #vécu ) tu perdras donc tes modifications. Je préconise donc plus un thème enfant.
      Si on crée un thème enfant, il ne faut pas copier-coller toute la feuille de style css, il faut « appeler » celle du thème parent. Pour créer ton thème enfant: dans wp-content>themes , créer un dossier en lui donnant le nom de ton thème enfant (ex:voyageurs) , crée un fichier que tu appelles style.css (utilise un éditeur comme textedit ou textwrangler) et mets le dans le dossier de ton thème enfant et sur ta feuille css mets:
      /*
      Theme Name: voyageurs
      Description: Ceci est un thème enfant pour le thème (nom du thème parent)
      Author: Le nom de l'auteur
      Template: nom exact du thème parent
      */

      @import url("../nom-du-thème-parent/style.css");

      /*------------------ Commencer à coder sous cette ligne-------*/

      Et tu ajoutes juste le css que tu modifies sous la ligne. Attention j’ai déjà vu quelques thèmes premium qui avaient une spécificité pour créer un thème enfant..Mais normalement ceci est la marche à suivre.
      Bon courage!

      • Cecilia sur 23 septembre 2015 à 12 h 36 min

        Oh là là MERCI MERCI MERCI Christelle pour cette longue explication!
        Pour le FTP vs le thème enfant, j’avais compris la différence, j’ai dû mal m’expliquer…Merci!
        Dans mon thème il y a déjà un thème enfant de crée, avec feuille css mais je n’ai pas fouiné plus que ça. Je voulais être sûre de faire mes modifs au bon endroit…
        En tout cas mille fois merci encore une fois, c’est hyper clair!

  3. Claire sur 3 décembre 2015 à 7 h 23 min

    Je viens de découvrir ton blog et je l’ajoute dans mes favoris, tu fais un sacré travail (et moi j’ai de la lecture maintenant) !

    J’ai une question pratique 🙂
    J’adore la police d’écriture que tu as utilisée pour écrire « blog wordpress » sur la photo en haut de ton article.
    Tu pourrais me donner son nom ?
    Merci et encore bravo pour ton blog

    • Christelle Bourgeois sur 3 décembre 2015 à 17 h 01 min

      Bonjour claire! Merci pour ton petit mot! 🙂 La police est Alegance Typeface que l’on peut trouver sur creative market.

  4. K-rambolage sur 31 mars 2017 à 8 h 34 min

    Bonjour,

    Je viens d’arriver sur WordPress et je dois l’admettre, je suis parfois un peu perdue. J’aimerais faire des modifications sur mon site, sur le CSS notamment (mais je voudrais aussi installer un widget sur une page).
    Je me suis engagée sur la version totalement gratuite de WordPress, celui est-ce possible malgré tout ? Puis-je accéder à mes fichiers … et comment ?

    Ma question est probablement un peu simplette, mais je ne trouve l’information nulle part. Ai-je raté une étape ?

    Merci d’avance pour ta réponse !

    • Christelle Bres-Bourgeois sur 31 mars 2017 à 18 h 34 min

      Bonjour Lauriane, malheureusement sur la version gratuite tu es très limitée. Tu peux modifier le CSS en achetant une option normalement. Mais ce n’est pas gratuit. Quant-à ajouter un widget sur une page là encore, tu ne peux pas en mettre hors des zones de widgets déjà définies (sidebar et footer en général). Pour avoir une vraie liberté il faut que tu prennes la version auto-hébergée de WordPress et donc que tu achètes hébergement et nom de domaine. J’espère que ça t’éclaire. 🙂

Laissez un commentaire





Centre de préférences de confidentialité

Cookies newsletter

Les cookies suivants sont utilisés par le système de gestion de newsletter Convertkit (conforme au RGPD).

_ck_form, _mailapp_session, XSRF-TOKEN

Cookies Analytics

J'utilise Google Analytics afin de connaître l'utilisation et les performances de mon site et d'en améliorer le fonctionnement ou la façon dont je présente le contenu.

_ga, _gat_gtag_UA_40189715_1,

Scroll Up
423 Partages
Enregistrer419
Tweetez1
Partagez3
Partagez