Comment éditer un thème WordPress, guide complet

Ouvrir l’index du contenu

Ce guide a été mis à jour le

Modifier un thème WordPress peut être difficile et trop compliqué pour la plupart des gens qui viennent d’entrer dans le monde du blogging, mais c’est toujours une procédure faisable pour quiconque a un minimum de bonne volonté et le désir d’apprendre sans frais et dans un délai raisonnable.

La première suggestion que je veux vous faire est d’activer le support WordPress pour avoir un accès complet à l’espace membre et ensuite voir toutes mes leçons vidéo sur comment utiliser HTML et CSS pour modifier en profondeur tous les aspects de votre site Web dans WordPress.

Abonnez-vous également à notre vidéo de cours HTML et à notre vidéo de cours CSS et grâce à des leçons simples et claires, vous pourrez apprendre à faire des interventions sur les codes de votre site web, sans devoir toujours recourir à une aide extérieure.

« Combien y a-t-il pour étudier ? »

C’est vrai, si vous voulez obtenir des résultats, vous devrez travailler dur, mais ce n’est pas aussi compliqué qu’il y paraît à première vue.

Commencer à vous familiariser avec ces langues vous permettra d’avoir plus de contrôle sur votre site et d’obtenir également où les paramètres de votre thème ne vous permettent pas de faire des changements. Le résultat sera un site web complètement personnalisé dans tous ses aspects et résolument original et unique.

Savoir utiliser les langages HTML et CSS vous permettrait non seulement d’économiser beaucoup d’argent en termes de webmasters, mais vous donnerait aussi plus de liberté.

Voyons maintenant quelles sont les étapes de base pour aller de l’avant avec le processus de la édition d’un thème WordPress. Si vous avez des questions ou des préoccupations, veuillez utiliser la section commentaires sous l’article, nous vous répondrons dès que possible.

Comment modifier un thème WordPress

Il y a plusieurs façons d’aborder un modifier votre thème WordPress. Nous préférons l’approche directe et efficace de la « Tête et monture ».

De quoi s’agit-il ? Nous utilisons simplement les fantastiques outils Chrome Developer Tools, que vous pouvez également activer en allant dans la section Inspecter en cliquant avec le bouton droit de la souris. Cette ressource, similaire au Firebug de Firefox, nous permet de tester n’importe quel changements dans les CSS immédiatement, sans qu’il soit nécessaire de les sauvegarder à l’avance sur le serveur.

Vous pourrez prévisualiser le code source d’un élément graphique (par exemple un en-tête, une colonne, une image) et vous pourrez intervenir sur celui-ci, y apporter des modifications temporaires, observer immédiatement le changement et évaluer son effet.

Dès que vous rechargez la page, la version actuelle de votre thème sera restaurée et vous perdrez tous les changements temporaires. En utilisant cet outil, vous avez la possibilité de tester de nombreuses modifications de votre mise en page, sans aucun risque et en choisissant quelles modifications doivent être insérées dans le thème et lesquelles ne le sont pas.

Tout d’abord, assurez-vous d’avoir le navigateur Google Chrome disponible, et si vous ne l’avez pas, téléchargez-le en cliquant sur ce lien.

Une fois Chrome installé, utilisez ce navigateur pour ouvrir votre site et suivez les instructions ci-dessous.

Où tester vos modifications HTML et CSS

Avant de continuer, je voulais vous poser une question importante : avez-vous activé le thème enfant ? Si vous décidez de modifier votre thème WordPressIl est important que le thème enfant soit actif afin de pouvoir vous assurer que tout restera le même, même si le thème est mis à jour.

Maintenant que nous avons été clairs, passons à autre chose.

Avec Chrome, naviguez jusqu’à la page de votre site que vous souhaitez modifier. Cliquez sur l’élément de la page que vous souhaitez modifier (encadré, logo, contenu) avec le bouton droit de la souris, puis cliquez sur l’élément souhaité Inspecter.

Un écran s’ouvrira à partir duquel vous pourrez éditer toutes les lignes HTML et CSS de votre thème en mode prévisualisation, c’est-à-dire que les modifications que vous ferez seront temporaires et n’affecteront en rien le code de votre site. Toute autre personne qui se connecte à votre espace web ne verra rien de ce que vous testez, parce que vos actions sont seulement destinées à créer une simulation de ce à quoi ressemblerait votre site si vous apportez certaines modifications au code CSS et HTML.

L’écran qui s’est ouvert pour vous est divisé en plusieurs parties, mais pour l’instant nous sommes intéressés par le panneau Éléments, où vous pouvez trouver HTML et CSS (dans la section Styles).

Maintenant que vous avez ouvert la fonction Inspecterle code de l’élément sur lequel vous avez cliqué sera mis en surbrillance.

Pour passer à un élément différent, vous pouvez vous orienter dans le code et trouver ce que vous cherchez. Sinon, cliquez sur l’icône en haut à gauche du panneau Développeurs, puis sélectionnez l’élément qui vous intéresse.

Comment éditer un thème WordPress, guide complet

A ce stade, vous pouvez éditer, ajouter ou supprimer des lignes CSS, en ajoutant également des classes et des identifiants pour personnaliser davantage les graphiques.

Où éditer le CSS d’un thème WordPress

Une fois que vous avez identifié les modifications à apporter au code que vous devez activer pour rendre permanentes les modifications que vous voulez, tout ce que vous avez à faire est d’ouvrir le panneau d’affichage de votre site WordPress.

Je vous suggère de laisser la page avec les outils pour les développeurs ouverts et d’ouvrir le tableau d’affichage dans un nouvel onglet, toujours avec Chrome.

Maintenant, vous devez vérifier si votre thème a une zone spécifique pour les personnalisations CSS. Si vous le trouvez, vous pouvez insérer ici votre les changements apportés au thème.

Si ce n’est pas le cas, naviguez jusqu’à l’écran Apparence > Rédacteur en chef.

Comment éditer un thème WordPress, guide complet

A droite de la page de l’éditeur, vous verrez une colonne contenant des liens vers des fichiers php. Ne vous en souciez pas, mais allez plutôt au bas de cette liste et essayez de localiser un fichier css appelé habitude ou quelque chose comme ça : custom-style.css. Ce fichier est en fait l’endroit où insérer et enregistrer les modifications que vous avez déjà testées avec Google Chrome Item Inspector et Preview. Cependant, tous les thèmes ne sont pas assumés avec un fichier CSS personnalisé.

Les meilleurs thèmes, tels que ceux de la plate-forme Themeforest, impliquent souvent d’insérer des modifications au CSS directement dans les paramètres du thème. Ils ont ensuite la possibilité de modifier la feuille de style en sélectionnant les différentes options disponibles, telles que la couleur de police, la largeur des colonnes et bien plus encore.

Dès que vous êtes prêt à faire vos modifications, n’oubliez pas de faire une copie de toute la page sur laquelle vous travaillez et de la sauvegarder dans un endroit sûr, car il vaut toujours mieux vous protéger. Une erreur est toujours possible, il est donc important d’avoir une copie de sauvegarde pour revenir à la version précédente du thème lorsque vous le souhaitez.

Où éditer le HTML d’un thème WordPress

Avec HTML vous pouvez suivre la même procédure mais au lieu de travailler sur un fichier CSS vous travaillerez sur des fichiers.PHP.

« Quoi ? PHP ? Je dois étudier ça aussi ? »

Non, vous n’avez pas besoin d’apprendre à programmer en PHP, mais il serait utile de comprendre la syntaxe et son fonctionnement. Je vous suggère de jeter un coup d’oeil aux leçons PHP sur W3Schools, où vous commencerez à comprendre au moins comment vous orienter dans les fichiers.

En fait, les fichiers PHP que vous voyez sur WordPress sont un mélange de code HTML et PHP. Jetez un coup d’oeil et voyez comment ils sont organisés à l’intérieur. Vous pouvez déjà comprendre sa structure, car localiser des éléments HTML est très simple.

Si vous avez besoin d’insérer un élément particulier visible sur chaque page de vos articles, vous devez aller à single.php et en vous basant sur la ligne de référence que vous pouvez localiser grâce à Inspect Chrome Element, vous ferez votre changement.

Comment éditer un thème WordPress, guide complet

Conclusion

En apprenant les bases du HTML et du CSS, et en faisant confiance aux différentes parties du code, vous verrez que éditer un thème WordPress n’est pas si difficile.

Si vous pensez que, cependant, il est le cas de « passer le ballon » et de travailler directement sur le code n’est pas pour vous, n’oubliez pas que nous avons un département technique prêt à résoudre tout problème et effectuer tout travail de personnalisation.

Ce guide vous a-t-il aidé ?

Avez-vous déjà manipulé le code sur votre site web ?

Si vous avez des questions, n’hésitez pas à contacter notre espace de discussion en bas à droite, où nous sommes prêts à vous diriger vers la réponse que vous recherchez.

Partager l'article :

Facebook
Twitter
Pinterest
LinkedIn

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.

Continuer votre lecture