Il se peut donc que les informations qu'il fournit ne soient plus totalement exactes.
Vous êtes nombreux à choisir votre thème WordPress en fonction de sa couleur, de sa structure, des images qu’il contient, etc.
Vous mettez beaucoup de temps à choisir le thème qu’il vous faut car il respecte parfaitement le code couleur que vous souhaitez mais la structure (colonne, sidebar, etc.) ne vous correspond pas toujours.
Pourquoi ne pas prendre un thème qui vous corresponde parfaitement dans sa structure et en modifier le style visuel grâce au CSS ?
En plus, en modifiant votre style, vous allez petit à petit modifier la structure de votre site, supprimer le superflus, bref, mettre à votre sauce votre site !
Les principes sont très simples, vous avez des pages php qui contiennent les balises html auxquelles font référence vos différents styles et vous avez votre (vos) fichier(s) CSS.
Comprendre la structure de son thème
Avant de vous lancer dans ce qui peut vous paraître insurmontable, commencez par ouvrir une à une vos différentes page pour en observer la structure générale.
Par exemple dans le header, j’ai mes balises « head » et « body » mais j’ai aussi mon menu supérieur.
Dans ma sidebar j’ai la zone ou mes widgets vont être ajoutés mais j’ai aussi ma barre de recherche et mes boutons de partages, etc.
Commencez par bien vous imprégner de votre nouveau thème et faites vous, pourquoi pas, un petit croquis de sa structure sur une page blanche.
Utilisation de Firebug
Firebug est un addon de Mozilla Firefox qui permet d’éplucher le code de vos pages appelé le DOM. Il vous faut donc firefox et avoir installé le plugin Firebug (il existe également une version Chrome).
Une fois le tout bien installé et activé, rendez vous sur votre page d’accueil. Sélectionnez une zone comme si vous sélectionniez un bout de texte avec votre curseur.
Maitenant cliquez droit dessus et vous devriez voir en bas « inspectez l’élément avec Firebug ». Cliquez et c’est parti !
Vous avez un nouveau volet qui s’est ouvert en bas de page. Et en surbrillance le code HTML de l’élément que vous voulez inspecter. Ce qui nous intéresse pour le moment ce sont les noms des ID et des CLASS des balises qui vont nous permettre de modifier notre style.
Vous remarquez aussi que quand vous survollez le code dans Firebug, les différentes zones de votre pages changes de couleur. C’est tout simplement que le code survolé correspond à tels ou tels zones de votre page.
Modifier votre CSS
Maintenant que nous savons comment utiliser Firebug et comment trouver nos différents noms d’ID et de CLASS, nous allons en modifier l’aspect.
Rendez-vous dans votre dossier de thème et ouvez le fichier style.css pour commencer à modifier l’apparence de votre thème.
Attention : Si vous voulez profitez des mises à jours de votre thème, vous devez créer un thème enfant (child-theme) et y créer un fichier style.css pour que ce que vous y écrirez surcharge le style du thème parent.
Voir cet article pour plus de détails : Créer des thèmes enfants (child themes) avec WordPress
Solution 1 : La solution déconseillée
Vous n’incluez pas dans la feuille de style de votre thème enfant la feuille de style du thème parent, mais vous en copiez tout le contenu pour l’éditer dans votre thème enfant
Si vous voulez changer la couleur d’arrière plan d’un DIV, il vous suffit de de l’inspecter grâce à firebug.Relevez l’ID ou la CLASS de celle-ci puis notez le numéro de la ligne où est défini le style (Rendes-vous maintenant dans votre fichier style.css puis faite CTRL+G et inscrivez le numéro de la ligne concernée (selon votre éditeur de texte). Vous pouvez aussi rechercher le nom de votre ID/CLASS.Vous devriez aisément trouver les lignes de code qui vous intéressent et plus particulièrement ici « background-color ».Il vous suffit de changer la couleur en vous aidant par exemple d’un outil comme celui-ci : Couleur HTMLEnregistrez le tout et uploadez sur votre FPT.Rafraîchissez votre page (de préférence en faisant CTRL+F5 ou CTRL+R afin de vider le cache de la page).
Solution 2 : La solution conseillée
Vous incluez bien dans la feuille de style de votre thème enfant la feuille de style du thème parent grâce à @import.
- Si vous voulez changer la couleur d’arrière plan d’un DIV, il vous suffit de de l’inspecter grâce à firebug.
- Sélectionnez et copiez l’ensemble de l’élément dont vous voulez éditer le background
- Rendes-vous maintenant dans votre fichier style.css puis collez le style que vous venez de copier
- Supprimez les lignes de code qui ne concernent pas le backround de l’élément, donc à priori tout sauf « background-color ».
- Il vous suffit de changer la couleur en vous aidant par exemple d’un outil comme celui-ci : Couleur HTML
- Enregistrez le tout et uploadez sur votre FPT.
- Rafraîchissez votre page (de préférence en faisant CTRL+F5 ou CTRL+R afin de vider le cache de la page).
Vous savez maintenant comment simplement modifier le style de votre thème WordPress. N’hésitez pas à ajouter des balises HTML pour restructure petit à petit vos pages et répondre au mieux à vos besoins. Mais gardez en mémoire que si vous modifiez la structure des fichiers de votre thème, faites le dans un thème enfant pour ne pas tout perdre lorsque vous mettrez votre thème à jour.
Bon courage !
Salut, grâce à votre article j’ai finalement réussi à modifier quelques codes dans mon thème enfant. Maintenant mon site [modéré] a un rendu visuel que j’aime.
Merci beaucoup et courage
Bonjour,
Je dispose un site et je veux diminuer une partie donc je, vous montrerez une capture sur le site web. Je suis passé par inspecter l’élément, j’ai puis repère le div de cette partie a modifier ainsi que le fichier css mon problème après modification du fichier css, j’ai copié le code dans le fichier style.css de mon thème wordpress , malheureusement, je ne vois rien après mise à jour du fichier style.css. [lien édité – sup]
Bonjours la modification du fichier style.css se fais au travers du client ftp ou forcement dans aparence / editeur / style.css
Bonjour,
Il est préférable de le faire par FTP plutôt que par l’éditeur.
Bonjours je suis entraint de modifier un site wordpress sur chrome quand je fais clique droit inspecter l’élément a modification du css . je copie le css modifier et je cole dans le fichier style.css de mon wordpress . Le comble est que rien n’apparaît .Pouvez m’aidez
Bonjour,
Je viens de lire votre article et je tente également de modifier certains éléments de mon thème (en particulier certains éléments pour mes pages « produits » avec l’extension WOO COMMERCE que j’utilise).
Grâce à FIREBUG j’ai réussi à trouver ce que je voulais comme présentation (aggrandir l’image, déplacer et élargir la partie de description du produit). Toutefois, une fois qu’il faut coller cette information sur la page style CSS de mon éditeur WP, impossible de trouver la ligne associée à cette partie du site et même en ajoutant une nouvelle ligne.
Saurais-tu comment m’aider?
Merci
Merci pour votre réponse! en faite j’ai créée deux sites avec ce même thème, un en local et un sur wordpress.com. Je remarque déjà que les deux sites ne sont pas identique alors qu’il s’agit du même thème?! ensuite sur la version .com je me rends dans CSS et là je clique sur « Liste des révisions de votre CSS » et là il me permet de changer le css mais il me dit « sauvegarder et acheter l’extension » Je ne suis pas au bon endroit? Le problème de mon site en local est que le design n’est pas du tout le même et je ne comprends pas pourquoi une telle différence. Merci!
Je ne connais pas du tout WordPress.com, mais ce que je peux vous dire c’est que les modifications permises y sont très restreintes.
Votre site en local n’est pas le même car le thème est peut-être sensiblement différent et plus permissif du fait qu’il soit totalement modifiable (version opensource de WordPress). Je ne peux pas plus vous aider de ce côté là.
Bon courage.
Bonjour,
Est on forcé d’acheter la version premium pour pouvoir éditer le css et le sauvegarder?
Merci
Bonjour,
Je ne suis pas sûr de comprendre votre question. Normalement, vous n’avez pas à acheter quoi que ce soit pour modifier le design d’un plugin ou d’un thème.
Les thèmes ou plugins premium (donc payants) proposent plus de fonctionnalités, mais en général, leur design est le même que sur la version gratuite.
bonjours,
pouvez vous m’expliquer comment modifiez le texte d’un thème.
Mon problème ces que je n’arrive pas a trouver dans quelle fichié je pourrait modifié mon texte « connexion/s’inscire » qui est en ce moment écris comme cela : « connexion/se insrire »
Haha c’est bien ce que j’ai cru comprendre vu que ce n’était pas un de ces fichiers mais je ne suis arriver a trouver l’information nulle part.
Tan pis je vais bidouiller un petit truc. Malheuresement mon thème n’utilise pas de thème conditionnel, et je ne suis pas assez expérimentée pour codés des hooks (moi je préfère captaine hooks tu vois…). Mais merci quand même en tout cas tu m’as bien éclairé 🙂
Hello !
Dis j’ai fait un theme enfant, et j’aimerais modifier des fichier PHP. Mais quand je copie colle le fichier php dans mon dossier enfant avec la meme arborescence, mon fichier ne marche pas et mon fichier parents est appliqué ?
Il y a une manip a faire? car je pensait que cetait automatique :'(
Salut,
Il me semble, de mémoire et sauf erreur de ma part que seuls les fichiers de templating « natif »de WordPress sont sur-chargeables via le thème enfant.
En gros :
Je te conseils d’aller voir du côté de la Template Hierarchy pour plus d’infos.
Si ton thème est bien fait et pensé pour être utilisé avec un thème enfant (et si le développeur à jugé qu’il pouvait être intéressant que telle fonction soit modifiable), tu dois certainement pouvoir modifier ce que tu veux grâce à des hooks. Autre possibilité, le thème utilise un test conditionnel devant chaque fonction du type « Si cette fonction existe déjà (sous entendu présente dans le thème enfant) alors je ne fait rien ». En gros, tu copies/colles la fonction du thème parent dans ton thème enfant, et c’est celle du thème enfant qui sera appelée.
Ça se présente comme ça :
if ( ! function_exists( 'la_fonction_du_theme' ) ) {function la_fonction_du_theme () {
/* Le code de la fonction du thème PARENT*/
}
}
Tu n’auras donc qu’à recréer la fonction dans ton thème enfant (dans functions.php par exemple) :
function la_fonction_du_theme () {
/* Le code de la fonction du thème ENFANT*/
}
Si tu n’es pas allergique à l’anglais, voilà un billet intéressant
J’espère que c’est clair 🙂
Bon courage !
Bonjour
J’utilisait déja cette technique. Mais j’aimerai pouvoir ajoute directement des classe a du code html ou modifier du texte. Mais je ne sait pas comment retrouver mes fichier html du theme wordpress.
C’est possible avec firebug ou autre ?
Ce n’est pas possible ! WordPress fonctionne avec des fichiers en php qui génèrent automatiquement les pages html. Il faut modifier les pages php qu’on peut trouver dans le Tableau de bord > Apparence > Editeur
Bonjour! je suis sur la création d’un site wordpress…
ce que je ne comprends pas dans l’utilisation de l’outil d’aide au dévelopement de firefox c’est qu’une fois avoir inspecté l’élément, clic droit etc… comment il faut faire pour le retrouver et le modifier…
Un exemple, il est écrit « read more » pour indiquer qu’on peut avoir la suite (ou pas) d’une page/article j’aimerais le remplacer par « lire la suite » tout simplement …mais comment savoir où cela se trouve? au clic droit : cela affiche la ligne en dessous, mais comment trouver le fichier à modifier correspondant ? Merci pour vos infos… Bien cordialement DM
Bonjour Daniel,
Pour modifier le CSS, d’une manière général il faut ouvrir le fichier style.css de ton thème. En inspectant l’élément, tu peux voir quel fichier CSS est impliqué ainsi que la ligne à éditer.
Dans ton cas, pour traduire une chaîne de caractère, il faut utiliser un logiciel qui permet d’ouvrir les fichiers .MO/.PO de ton thème.
Voici un totu qui devrait te guider pas à pas : wpchannel.com/tradu…ress-i18n/
L’autre solution est d’utiliser un plugin tel que Codestyling Localization qui est à mon sens plus accessible.
Bon courage.
Bonjour Emelyn,
je ne connais pas du tout l’option que vous appelez « custom design », je pense qu’il s’agit d’un option propre à votre thème.
Elle n’est, dans tous les cas, pas obligatoire pour modifier votre thème en profondeur.
Pour modifier votre thème, vous devez utiliser Firebox (ou son équivalent Chrome, qui est natif sur ce dernier) et inspecter les éléments qui composent votre page. Vous pouvez ensuite noter les modifications à effectuer et vous rendre dans les fichiers de votre thème pour les modifier.
Il vous faut donc avoir les fichiers de votre thème en local (sur votre PC en somme) pour les éditer via un éditeur de texte tel que Notepad++ ou même Bloc-Note. Une fois les modification effectuées, il ne vous reste plus qu’à transférer les fichiers modifiés à la bonne place sur votre ftp (remplacer les fichiers existants par ceux que vous venez d’éditer sur votre « hébergeur »).
J’espère avoir pu vous apporter des éléments de réponse.
Si vous avez d’autres questions, n’hésitez pas à les partager.
Bonne journée.
Bonjour, bonjour !
En grande débutante sur wordpress et sans aucune connaissance de codage, je pense que vous allez pouvoir m’aider.. d’après cet article, il est donc possible de modifier le code HTML ou CSS de son blog wordpress sans passer par l’option payante « custom design » uniquement en installant Firebug?
Merci beaucoup pour votre réponse !