Comment modifier un thème WordPress ?

modifier un theme wordpress

Depuis sa sortie, WordPress séduit de plus en plus d’utilisateurs pour sa simplicité et la richesse de ses outils par rapport aux autres CMS. La possibilité de personnaliser un thème wordpress est un réel atout et permet d’obtenir un design unique. Pour pousser encore plus un thème, il faudra tout de même passer par des modifications dans le code.

Dans cet article, je vais vous expliquer Les bases pour modifier un thème WordPress afin de pousser d’avantage la personnalisation de votre blog. 




 Comment se compose un thème wordpress ?

modifier un theme

Un thème wordPress est le plus souvent composé des fichiers suivants:

style.css (permet d’effectuer des modifications dans le style du blog, taille des titres par exemple.)

single.php (destiné aux éléments intégrés aux pages, les titres et les infos importantes.)

sidebar.php (fichier réservé aux widgets, menus situés à droite ou à gauche d’un blog.)

page.php (représente chacune des pages d’un blog, différent de single.php)

archive.php (comme son nom l’indique, fichier qui est destiné aux archives d’un blog.)

index.php (représente généralement une partie de la page d’accueil, comme les extraits d’articles.)

header.php (représente l’en-tête, les menus dans la partie supérieure d’un blog.)

home.php (représente la Home page, la page d’accueil d’un blog.)

footer.php (représente le footer, le pied de page d’un blog, tout en bas.)

search.php (représente la fonction recherche d’un blog.)

comments.php (représente le système de commentaires.)

 

Quel est la différence entre .php et .css ?

comment modifier un theme wordpress - PHP CSS

Les .css permettent d’effectuer des modifications de style (changement de couleur d’un élément, modifications de la taille d’un élément, surlignage, gras, etc. style.css centralise le design de tous les éléments .php d’un thème wordpress.

Les .php permettent la modification des éléments. Par exemple, dans « search.php », vous pourrez modifier le système de recherche en profondeur, son fonctionnement, mais pas son style qui se trouvera dans le style.css.

Attention de ne pas confondre les deux. Pour illustrer, on peut dire que les .php sont les rouages d’un système et les .css leur apparence.

Identifier et personnaliser un aspect du thème WordPress (.css)

modifiez votre theme wordpress

La première chose à faire lorsque l’on veut modifier un aspect du thème wordpress choisi, c’est identifier  la partie du code désirée. Pour cela, plusieurs outils sont à votre disposition, mais nous nous contenterons du plus simple: la fonction « inspecter cet élément » intégrée dans Google Chrome et firefox.

Une fois que vous aurez cerné l’attribut exact que vous voulez modifier depuis votre navigateur internet, faites un clic droit dessus et cliquez sur « inspecter cet élément ».

Une fenêtre s’ouvre, elle ressemble à ceci:

inspecter cet élément

(Cliquez pour zoomer)

Ne paniquez pas lorsque vous verrez toutes les lignes colorées dans cette fenêtre, les couleurs sont plutôt là pour vous aider. Normalement, une des lignes sera surlignée dans un gris léger, celle-ci représentera l’élément que vous aurez sélectionné.

Positionnez le curseur de la souris sur cette ligne et vérifiez qu’il s’agit bien de l’élément désiré. Cliquez sur la ligne pour confirmer. Nous allons ensuite nous rendre dans la petite fenêtre à droite qui va vous permettre de vous donner une idée du bout de code à modifier.

Faites des tests, cochez et décochez des cases afin de cerner votre objectif. Pour vous aider dans vos recherches, voici une explication des principales fonctions css:

 

Color  (comme son nom l’indique, permets de modifier la couleur.)

Font-size (permet de modifier la taille de l’élément.)

text-align (permets de changer l’alignement.)

margin-left (permets d’ajouter une marge, ici en l’occurrence à gauche.)

font-weight (ajoute un attribut à la police. Par exemple, du gras (bold) , ou un surlignage.)

 Une fois que vous aurez déterminé l’aspect modifier, rendez-vous sur votre serveur FTP, ouvrez le fichier en question et commencez les modifications. Généralement, votre serveur FTP vous demande une confirmation de la modification, n’oubliez pas de confirmer sinon les changements ne seront pas effectifs.

ATTENTION: n’oubliez jamais de faire une sauvegarde préalable de chacun des fichiers à fin qu’en cas d’erreur, vous puissiez revenir en arrière.

modifier un theme wordpress FTP

Pour vous faciliter la vie, je vous conseille le logiciel Notepad++, conçu spécialement pour vous aider à vous repérer dans les multiples lignes de code.

 




37 Comments

  1. DydjyZ
    DydjyZ11-10-2012

    Vraiment pas mal ! Je vais pouvoir m'amuser à modifier mon thème !
    DydjyZ Articles récentsGTA 5: de nouvelles informations !

  2. Bruno
    Bruno11-12-2012

    Bonjour,

    Ce tutoriel est en effet intéressant pour ceux qui veulent vraiment personnaliser leur thème.
    Est-ce que les modifications sont préservées lors des mises à jours du thèmes ou faut-il refaire la manipulation à chaque fois?
    Bruno Articles récentsTrouver des idées d’articles pour alimenter son blog

    • Loic
      Loic11-12-2012

      @Bruno: Si la mise à jour concerne le fichier modifié, j'imagine que oui, il faudra refaire les modifications. Il faut toujours avoir des sauvegardes à portée de main.

      @Stef: Tu peux t'inscrire à la newsletter pour te tenir informé ! Sinon, je te ferais parvenir les futurs articles sur le php.
      Loic Articles récents5 astuces pour améliorer la vitesse de chargement de votre blog

  3. Stef
    Stef11-12-2012

    Merci pour les infos et surtout le NotePad++ que je m'en vais de ce pas télécharger.

    En attendant ton cours sur le php…
    Stef Articles récentsParamétrer WordPress: les premiers réglages

  4. Erwan@mon blog actu
    Erwan@mon blog actu11-21-2012

    merci pour les explications sur la destination des fichiers, j'ai du mal avec ça. J'aimerais trouver le moyen simple d'avoir UNIQUEMENT le fichier category.php qui créé les catégories, le fichier single.php qui créé les articles, etc. Malheureusement, c'est couplé avec les single. Je veux supprimer tout ce qui créé "tag", "archive", … proprement afin de supprimer les pages inutiles à DC.

    Sur un thème twentyten de base je ne m'en sors pas mais peut-être qu'il en existe des plus simples ?
    Erwan@mon blog actu Articles récentsLes meilleurs buts de football de 2012

    • Loic
      Loic11-21-2012

      Salut Erwan,

      Effectivement tout est couplé en général, sinon, ce serait la belle vie !

      Normalement le thème Twentyten est le thème de base de WordPress, donc il doit être simplifié par rapport à un thème premium.
      Loic Articles récentsComment exclure son trafic de Analytics ?

  5. sun
    sun04-24-2013

    merci pour ce beau tuto

  6. Ardecha
    Ardecha05-01-2013

    Sympa en effet, ça pose les bases !

  7. Mouillard Marie-Eve
    Mouillard Marie-Eve07-19-2013

    Bonjour,

    Je ne trouve pas l’article, où est-il ? Merci

    • Loic @ Le Journal du Blogueur
      Loic @ Le Journal du Blogueur07-21-2013

      Bonjour,

      L’article est de nouveau en ligne, navré pour la gêne.

      A bientôt !

  8. carmen
    carmen09-20-2014

    Bonjour, j’ai eu avec un webmaster un mauvais départ, d’ailleurs la version wordpress qu’il m’a mis est en anglais et le thème n’est pas a ma convenance, je souhaite carrément changer de thème, qu’est ce que je dois faire ? je vous remercie de votre conseil,
    Carmen de Paris

  9. annlee
    annlee11-13-2014

    Bonjour

    Merci pour ce super tuto.
    Je ne saisis pas la partie:  » rendez-vous sur votre serveur FTP, ouvrez le fichier en question et commencez les modifications. Généralement, votre serveur FTP vous demande une confirmation de la modification » Dois-je me rendre sur mon serveur FTP dans OVH pour le modifier ou bien dois-je passer directement par des logiciels tels que Filezilla pour pouvoir modifier dans mon FTP ?

    Merci de votre réponse

    • Loic
      Loic11-13-2014

      Bonjour,

      Passez par Filezilla, c’est gratuit et simple à utiliser.

  10. lanceau
    lanceau02-04-2015

    Bonjour,
    tuto très bien pour trouver et modifier le fichier.css.
    Cependant, comment puis-je retrouver aussi aisément le fichier .php à modifier lorsque le thème que j’utilise nécessite des modifications. Dans mon cas je souhaite modifier des fichiers .php pour effectuer quelques traductions et il existe des tas de fichiers .php, je ne sais jamais lequel je dois ouvrir.

    • Loic
      Loic03-01-2015

      Bonjour,

      C’est là que ça se complique ! Il faut chercher le bon php, bon courage 😉

  11. Lycia
    Lycia07-01-2015

    Bonjour ! Super article ! Grâce à toi j’ai pu enfin changer la couleur de mon nouveau site ! C’est cool ! Par contre je ne suis pas passée par le FTP mais directement par WP (par l’éditeur je crois) est-ce bon aussi ? Il me semble que oui ! Je suis nouvelle dans le blogging (1 an) mais j’apprends vite grâce à des tutos comme les tiens et ça fait plaisir ! Merci !!!! Par contre j’aimerais bien savoir comment à tu eu ces jolis et originaux boutons de partage social ! Pourrais tu nous faire partager cette info ???? Merci beaucoup ! Et à bientôt !

    • Loic
      Loic07-06-2015

      Bonjour,

      Vous pouvez bien entendu passer directement via WordPress mais c’est moins lisible et pratique.
      Concernant les boutons il s’agit de Digg Digg, c’est gratuit. Pour ceux qui verrouillent le contenu c’est Social Locker.

      A bientôt !

  12. Caillau
    Caillau07-03-2015

    Bonjours,
    Merci pour ce tuto , malheureusement j’ai un problème :
    Le bouton « mon compte » devient « connexion/se inscrire »
    Vous comprennez qu’elle élément je voudrais modifier…

    Sauf que la modification de l’élément fonction que lorsque je suis connectee.donc je me retrouve bloquer..
    Merci d’apporter un peut de lumière à mon soucis 🙂

    • Loic
      Loic07-06-2015

      Bonjour,

      Il ne s’agit plus de CSS mais je PHP dans votre cas.
      Essayez de repérer « Header.php », le bouton devrait s’y situer.

      A bientôt !

  13. Caroline
    Caroline07-30-2015

    Bonjour,
    ma question va sûrement paraître stupide, mais comment on enregistre nos codes?
    Merci.

    • Loic
      Loic07-31-2015

      Pour sauvegarder un fichier utilisez « control + S » ou « Fichier < Sauvegarder" en haut à gauche.

  14. lesage
    lesage08-09-2015

    Bonjour

    Merci beaucoup pour votre aide !!
    Je souhaite modifier l’entête noir en gris sur mon site.
    Je vais donc dans apparence puis editeur sur WordPress.
    Dans heading je rentre la couleur souhaitée puis je clique sur mettre à jour le fichier.
    Ensuite je rafraichie la page de mon site mais il n’y a aucune modification …
    QUe dois je faire ?

    Merci pour votre aide

    Chloé

    • Loic
      Loic08-10-2015

      Bonjour,

      Essayez de désactiver le plugin de cache si vous en avez un , sinon patientez. Sinon, vous avez fais une erreur.

  15. Tigran
    Tigran09-03-2015

    Bonjour,

    Merci pour vos explications. Je me permets de vous écrire, car je veux utiliser le thème jobshub de wordpress mais à la place de faire payer aux annonceurs ( comme c’est fait dans le theme) je veux faire payer les annonces aux visiteurs. Est il possible d’effectuer ce changement ?

    je vous remercie

    • Loic
      Loic09-04-2015

      Bonjour,

      Vous devriez certainement envoyer un mail au support du thème pour ce question technique.

  16. demenagement paris
    demenagement paris11-05-2015

    Comment je peux éliminer la balise <link rel=”canonical” qui s'affiche par défaut sur mes pages

  17. Caddy
    Caddy01-10-2016

    Bonjour,

    Comment faire pour bloquer une partie seulement d’un article et autoriser la suite de sa lecture après avoir renseigné un formulaire de contact?
    Bien cordialement.
    Caddy Articles récentsmicro entreprise : options avant le 1er février 2016

  18. ANIS
    ANIS01-17-2016

    Bonjour

    Votre tuto ci-dessus est bien mais devient bizarrement vague après l' »inspection de l’élément ».

    Avec chrome, j’inspecte par exemple l’élément qui est le prix d’un article sur une page produit, j’ai qqch du genre :

    4,99€

    Bon j’ai quelques connaissances dans le CSS mais comment trouver le fichier à modifier dans mon cas avec « Examiner l’élément » de Chrome? Merci pour votre aide ou au moins début de piste.

    Et avez-vous une page Youtube et des tutos vidéos pour vous suivre? Merci

    • Loic
      Loic01-19-2016

      Bonjour,

      Vous cherchez à faire quoi exactement ? Envoyez nous la page directement !

  19. ANIS
    ANIS01-17-2016

    Voici le code qu’il manque ci-dessus:

    //

    4,99€

    //

  20. ANIS
    ANIS01-17-2016

    Bon j’arrive pas à vous montrer mon code

    bref c’est contenu dans un et le prix entre 2

    MERCI

  21. ANIS
    ANIS01-17-2016

    ON VA Y ARRIVER…
    bref c’est contenu dans un DIV et le prix entre 2 SPAN

  22. Armand
    Armand02-22-2016

    Bonjour,
    J’ai un thème WordPress Premium (→Toujours) et j’ai le moyen d’accéder au CSS. Cependant, je ne vois pas comment il faut s’y prendre. J’ai juste à entrer mes lignes de codes de manière relativement aléatoire et WP les intégrera tout seul ?
    Avez vous un site qui montre plein de codes à mettre. Je connais simplement les bases des bases …
    Merci d’avance !!!

  23. Dream Steam
    Dream Steam11-18-2016

    Bonjour,
    Je cherche à modifier une chaîne de caractères dans le fichier up-sells.php
    Comment y accéder depuis l’admin de WP ?
    Merci

  24. Binisti
    Binisti12-08-2016

    Bonjour, site très intéressant !
    Mais ne réponds pas à mon problème
    J’ai un menu dont la barre horizontale est rouge.
    Je souhaite que sur le dernier onglet la coleur de fond soit d’une autre couleur… Ce serait top si je pouvais avoir une solution. Merci

    • Loic
      Loic12-10-2016

      Bonjour,

      Je n’ai pas trouvé la barre horizontale dont tu parles, envoie moi le lien 😉

Laisser un commentaire

Cochez cette case et partagez vos articles !