Bases de l'Inspecteur d'éléments : Personnaliser WordPress pour les utilisateurs autodidactes

Beaucoup d'entre nous sont curieux de comprendre la conception d'un site Web sans risquer d'apporter des modifications permanentes. L'Inspecteur d'éléments sert d'outil inestimable à cette fin, vous permettant d'apporter des modifications temporaires directement dans votre navigateur.

Beaucoup de nos utilisateurs débutants nous ont dit qu'ils trouvaient difficile d'éditer du HTML/CSS. Nous recommandons toujours à ces utilisateurs d'expérimenter avec l'outil Inspecteur.

Il est simple et facile à utiliser, et vous pouvez voir les résultats de vos modifications instantanément. Nous l'utilisons tout le temps pour prévisualiser des modifications allant de petites modifications de texte à des refontes de mise en page complètes.

Ce guide vous guidera à travers les étapes pour utiliser efficacement l'Inspecteur d'éléments sur votre site WordPress, vous aidant à donner vie à vos idées de conception en toute sécurité et efficacité.

Qu'est-ce que l'outil Inspecteur ?

Nous avons utilisé les outils de développement de navigateur d'innombrables fois pour dépanner et expérimenter des modifications de site Web. Les navigateurs Web modernes comme Google Chrome, Firefox, Safari et Microsoft Edge sont équipés d'outils intégrés conçus pour aider les développeurs Web à déboguer les erreurs sans effort.

Ces outils affichent le code HTML, CSS et JavaScript d'une page tout en montrant comment le navigateur le traite. Pour nous, c'est comme essayer nos codes de triche sans affecter le site Web réel.

Vous pouvez accéder à ces outils de développement sur n'importe quelle page en faisant un clic droit et en sélectionnant « Inspecter » dans le menu. C'est l'une de nos actions privilégiées lorsque nous testons des modifications de conception ou que nous déboguons un problème.

Avec l'outil Inspecter, vous pouvez modifier temporairement le code HTML, CSS ou JavaScript et voir les changements en direct sur votre écran. Nous l'avons utilisé pour prévisualiser tout, des ajustements de style mineurs aux idées de mise en page complètes. (Nous vous montrerons comment plus tard dans cet article.)

Le meilleur dans tout ça ? Ces modifications n'affectent pas la page Web réelle. Une fois que vous rechargez la page ou fermez le navigateur, tout revient à la normale. Cela en fait un outil sûr et fiable pour tester des idées.

Nous l'avons trouvé particulièrement utile pour les propriétaires de sites Web et les développeurs qui ont besoin d'un moyen rapide de tester ou de déboguer. Voici quelques cas d'utilisation :

• Appliquez de nouveaux styles CSS et voyez immédiatement à quoi ils ressemblent sur votre site.
• Les rédacteurs techniques peuvent modifier le HTML pour des captures d'écran, masquer des informations sensibles ou personnaliser le texte visible.
• Les développeurs l'utilisent souvent pour identifier les erreurs WordPress courantes, déboguer des problèmes JavaScript ou résoudre des erreurs 404.

Et ce n'est qu'un aperçu. Ces outils sont incroyablement polyvalents, ce qui en fait un favori pour quiconque travaille avec des sites Web.

Dans ce guide, nous nous concentrerons sur l'outil Inspecter de Google Chrome, car c'est le navigateur le plus populaire auprès de nos lecteurs. Cependant, Firefox, Safari et Microsoft Edge ont des outils similaires qui peuvent être accessibles via leurs options d'inspection.

Prêt à commencer ? Utilisez les liens ci-dessous pour accéder à n'importe quelle section de l'article et suivez le guide :

• Lancement de l'outil Inspecter et localisation du code
• Modification et débogage du code dans l'élément Inspecter
• Trouvez facilement les erreurs sur votre site
• Comment utiliser l'outil Inspecter sur mobile (iOS ou Android) ?
• Comment appliquer les modifications de l'élément Inspecter de manière permanente dans WordPress
• Bonnes pratiques lors de l'utilisation de l'élément Inspecter
• Questions fréquemment posées sur l'élément Inspecter
• Tutoriel vidéo
• En savoir plus sur la personnalisation de WordPress

Lancement de l'outil Inspecter et localisation du code

Vous pouvez lancer l'outil d'inspection en appuyant sur CTRL + MAJ + I (Commande + Options + I pour MacOS) sur votre clavier.

Vous pouvez également cliquer n'importe où sur une page web et sélectionner « Inspecter » dans le menu du navigateur.

Vous pouvez également accéder à l'outil depuis le menu principal du navigateur.

Dans Google Chrome, cliquez sur le menu à trois points en haut à droite, puis faites défiler jusqu'à Plus d'outils » Outils de développement.

La fenêtre de votre navigateur se divisera en deux.

D'un côté, vous verrez la page que vous consultiez. De l'autre côté, vous verrez le code HTML et les règles CSS.

La position de la fenêtre d'inspection varie, mais vous pouvez la modifier en cliquant sur le menu à trois points et en sélectionnant la position « Côté de la fenêtre ». Vous pouvez voir l'icône à cliquer dans l'image ci-dessus.

En déplaçant votre souris sur la source HTML, la zone affectée sur la page Web sera mise en surbrillance.

Vous remarquerez également que les règles CSS changent lorsque vous cliquez sur un élément dans le code HTML.

Vous pouvez également pointer le curseur de la souris sur un élément de la page Web, faire un clic droit et sélectionner l'outil « Inspecter ».

L'élément sera mis en surbrillance dans le code source.

Modification et débogage du code dans l'élément Inspecter

Le HTML et le CSS dans la fenêtre d'inspection de l'élément sont modifiables. Vous pouvez double-cliquer n'importe où dans le code source HTML et modifier le code comme vous le souhaitez.

Vous pouvez également double-cliquer et modifier tous les attributs et styles dans le panneau CSS.

Pour ajouter une règle de style personnalisée, cliquez simplement sur l'icône + en haut du panneau CSS.

Au fur et à mesure que vous apportez des modifications au CSS ou au HTML, ces modifications seront reflétées instantanément dans le navigateur.

Ces modifications seront enregistrées dans la mémoire temporaire de votre navigateur et n'affecteront pas votre site Web.

Pour apporter les modifications, vous devrez ajouter du CSS personnalisé à votre thème ou modifier le modèle pertinent pour ajouter les modifications que vous souhaitez enregistrer.

Avant de commencer à modifier votre thème WordPress existant à l'aide de l'outil Inspecter l'élément, assurez-vous de créer une sauvegarde de WordPress.

Trouvez facilement les erreurs sur votre site

L'outil Inspecter possède une zone appelée Console, qui affiche les erreurs survenues lors du chargement de la page.

Lorsque vous essayez de déboguer une erreur ou de demander de l'aide aux auteurs de plugins, il est toujours utile de regarder ici pour voir s'il y a des erreurs ou des avertissements.

En utilisant l'onglet Console, vous pouvez résoudre plusieurs problèmes courants. Par exemple, voici quelques-unes des choses que vous pouvez faire avec la console Inspecter :

• Découvrir pourquoi une image que vous avez ajoutée ne s'affiche pas
• Pourquoi un plugin ou un thème ne se comporte pas correctement
• Quel plugin ou extension de navigateur peut causer le conflit

Même les utilisateurs non techniques peuvent y jeter un coup d'œil pour trouver des indices sur l'origine d'un problème.

Par exemple, si vous êtes un client OptinMonster et que vous vous demandez pourquoi votre formulaire d'inscription ne se charge pas, vous pouvez facilement trouver le problème « Votre slug de page ne correspond pas ».

L'utilisation d'outils comme la console Inspecter l'élément peut vous aider à recueillir des détails techniques utiles lorsque quelque chose ne fonctionne pas correctement sur votre site. Le partage de ces informations, telles que les messages d'erreur ou les ressources manquantes, peut aider les équipes de support de plugins ou de thèmes à comprendre et à résoudre le problème plus rapidement.

Comment utiliser l'outil Inspecter sur mobile (iOS ou Android) ?

Les options développeur ne sont pas activées par défaut dans les navigateurs mobiles, car les fabricants supposent que la plupart des utilisateurs mobiles ne les utiliseraient pas.

La manière la plus simple de dépanner et d'utiliser l'outil d'inspection pour les problèmes mobiles est d'utiliser la fonction d'émulation mobile de votre navigateur de bureau.

Vous pouvez ensuite choisir un appareil en haut ou les dimensions de l'écran. Chrome émule alors cette taille d'écran pour vous.

Comment appliquer les modifications de l'élément Inspecter de manière permanente dans WordPress

Lorsque vous travaillez avec l'outil Inspecter l'élément, vous vous demandez peut-être comment rendre permanentes les modifications que vous avez testées. Dans cette section, nous vous expliquerons comment procéder sur votre site WordPress.

Tout d'abord, identifiez les modifications que vous souhaitez conserver et copiez-les dans un fichier texte à l'aide d'une application comme Notepad ou TextEdit. Ensuite, vous pouvez essayer l'une des méthodes ci-dessous.

1. Ajouter des modifications CSS à votre site WordPress à l'aide de l'éditeur de site

Une fois copié, accédez à votre tableau de bord WordPress et allez dans Apparence » Éditeur pour lancer l'éditeur de site.

Cliquez sur la fenêtre d'aperçu pour commencer à modifier votre site.

Dans l'éditeur, cliquez sur le bouton Style en haut, puis cliquez sur le menu à trois points et sélectionnez « CSS supplémentaire ».

Cela ouvre le panneau CSS supplémentaire, où vous pouvez simplement coller le CSS que vous souhaitez enregistrer.

Vous pouvez voir vos modifications s'appliquer instantanément dans la fenêtre d'aperçu. N'oubliez pas de cliquer sur « Enregistrer » pour publier vos modifications.

2. Ajouter du CSS personnalisé à votre site à l'aide de WPCode

Si vous avez besoin d'un moyen plus simple d'ajouter du CSS personnalisé à votre site, cette méthode est faite pour vous.

Pour cette méthode, nous utiliserons WPCode. C'est le meilleur gestionnaire de snippets de code WordPress et il vous permet d'ajouter du code personnalisé, du HTML et du CSS à votre site sans modifier votre thème.

Remarque : Il existe également une version gratuite de WPCode que vous pouvez utiliser. Cependant, nous vous recommandons de passer à un plan payant pour libérer tout son potentiel.

Nous utilisons WPCode sur nos propres sites car il facilite la gestion du code. Plus important encore, il dispose d'une protection intégrée qui désactive votre code s'il renvoie une erreur. Pour plus de détails, consultez notre avis complet sur WPCode.

Tout d'abord, vous devez installer et activer le plugin WPCode. Si vous avez besoin d'aide, consultez notre tutoriel sur comment installer un plugin WordPress pour obtenir des instructions.

Une fois activé, allez simplement dans Extraits de code » + Ajouter depuis le tableau de bord d'administration de WordPress.

Ensuite, vous pouvez survoler l'option « Ajouter votre code personnalisé (Nouvel extrait) » dans la bibliothèque d'extraits de code et cliquer sur « + Ajouter un extrait personnalisé ».

Après cela, vous devez sélectionner « Extrait CSS » comme type de code dans la liste des options qui apparaissent à l'écran.

Ensuite, en haut de la page, vous pouvez ajouter un titre pour votre extrait CSS personnalisé. Cela peut être n'importe quoi qui vous aide à identifier le code.

Une fois que vous avez entré un titre, vous pouvez écrire ou coller votre CSS personnalisé dans la boîte « Aperçu du code ».

Après avoir ajouté votre code CSS personnalisé, cliquez sur le bouton « Enregistrer l'extrait » et basculez le statut sur « Actif ».

3. Ajouter un extrait HTML à votre site WordPress

Pour ajouter des modifications HTML à votre site, vous devez les coller dans le bon fichier modèle de votre thème.

Pour savoir quel fichier de thème modifier, consultez notre guide sur comment trouver les fichiers à modifier dans le thème WordPress.

Vous devrez utiliser un client FTP ou l'application gestionnaire de fichiers sous votre compte d'hébergement pour modifier les fichiers de votre thème.

Alternativement, vous pouvez également utiliser WPCode pour ajouter des extraits HTML personnalisés. Ajoutez simplement un nouvel extrait de code et sélectionnez HTML comme type d'extrait.

Après cela, fournissez un titre pour votre extrait HTML qui vous aide à l'identifier.

En dessous, ajoutez votre code HTML personnalisé dans la boîte d'aperçu.

WPCode vous permet de choisir où vous souhaitez insérer n'importe quel extrait de code.

Faites défiler vers le bas jusqu'à la zone « Insertion » et cliquez sur « Emplacement » pour afficher les options disponibles.

Après avoir sélectionné un emplacement, n'oubliez pas de cliquer sur « Enregistrer » et de basculer le statut de l'extrait sur Actif.

Vous pouvez maintenant visiter votre site pour le voir en action.

Bonnes pratiques lors de l'utilisation de l'élément Inspecter

L'utilisation de l'outil Inspecter peut donner l'impression d'ouvrir une fenêtre secrète sur la conception Web. Mais pour en tirer le meilleur parti, voici quelques bonnes pratiques, particulièrement utiles si vous débutez :

• Commencez par explorer en toute sécurité : Toutes les modifications que vous apportez dans Inspecter l'élément sont temporaires. N'hésitez donc pas à expérimenter sans crainte, rien ne se cassera définitivement.
• Essayez différents styles et mises en page : Testez les couleurs, les polices, l'espacement ou le positionnement pour voir ce qui rend bien avant d'appliquer les modifications à votre thème ou à votre feuille de style réelle.
• Prenez des notes sur ce qui fonctionne : Si une modification vous plaît, copiez le CSS et collez-le dans un fichier texte ou une application de prise de notes pour ne pas le perdre.
• Testez sur différents navigateurs : Une modification de conception qui rend bien dans Chrome peut sembler étrange dans Firefox ou Safari, alors vérifiez toujours.
• Restez organisé : Tenez un registre de toutes les modifications que vous avez apportées et pourquoi. Cela vous aidera si vous devez un jour annuler quelque chose ou résoudre des problèmes plus tard.
• Ne modifiez pas les sites en direct à la légère : Si vous apprenez, il est préférable de vous entraîner sur un site de staging ou un environnement de test pour éviter les problèmes accidentels sur votre site en direct.

Questions fréquemment posées sur l'élément Inspecter

Voici quelques-unes des questions les plus fréquemment posées par nos utilisateurs concernant l'utilisation de l'outil Inspecter.

1. Puis-je utiliser l'outil Inspecter sur n'importe quel site Web ou seulement sur le mien ?

Oui, vous pouvez utiliser l'outil Inspecter sur n'importe quel site Web. Faites simplement un clic droit et sélectionnez l'outil Inspecter dans le menu du navigateur pour voir le code derrière n'importe quel site Web. Étudier le code d'autres sites Web est un moyen rapide d'apprendre et d'améliorer vos propres compétences en CSS/HTML.

2. Pourquoi ne puis-je pas trouver l'outil Inspecter dans mon navigateur ?

Google Chrome peut masquer l'option Inspecter dans le menu contextuel, en particulier lorsque plusieurs extensions ajoutent leurs propres options au menu contextuel.

De plus, la fonction de clic droit peut être désactivée à l'aide de JavaScript, ce qui peut masquer l'option « Inspecter ». Dans de tels cas, vous pouvez toujours ouvrir les Outils de développement en utilisant le raccourci clavier Ctrl + Maj + I (ou Cmd + Option + I sur Mac) ou en accédant à Menu » Plus d'outils » Outils de développement.

3. Puis-je voir les modifications sur différents navigateurs ?

Oui, Inspect Element est disponible dans les navigateurs majeurs, vous permettant de tester et d'observer les changements dans Chrome, Firefox, Safari et Edge.

4. Comment Inspect Element peut-il aider au débogage JavaScript ?

Inspect Element comprend un onglet Console où vous pouvez voir les erreurs et les avertissements JavaScript. Cet outil est incroyablement utile lorsque vous avez besoin de comprendre ce qui ne va pas avec les scripts de votre site. C'est comme avoir une ligne directe vers le processus de pensée du navigateur, vous permettant d'identifier rapidement les problèmes.

5. Inspect Element peut-il affecter la sécurité de mon site web ?

Non, l'utilisation d'Inspect Element n'affectera pas la sécurité de votre site web. C'est un outil de navigateur qui modifie temporairement l'apparence ou le comportement du site sur votre machine locale sans altérer les données backend ou leur intégrité.

Tutoriel vidéo

S'abonner à WPBeginner

En savoir plus sur la personnalisation de WordPress

Si vous souhaitez explorer davantage comment utiliser l'outil Inspect pour faire plus de choses sur votre site WordPress, les ressources suivantes seront un bon point de départ :

• Comment personnaliser votre thème WordPress – Ce guide pour débutants montre comment personnaliser votre thème WordPress étape par étape.
• Comment ajouter correctement du CSS personnalisé dans WordPress – Ce tutoriel montre plusieurs façons d'ajouter facilement votre CSS personnalisé dans WordPress.
• Comment optimiser la livraison CSS dans WordPress – Trop de fichiers CSS individuels peuvent dégrader les performances. Ce tutoriel montre comment optimiser la livraison CSS pour améliorer la vitesse de WordPress.
• Tableau récapitulatif CSS généré par défaut par WordPress – Ce guide pratique vous montrera de nombreuses classes CSS que WordPress ajoute par défaut à différents éléments. Vous pourrez ensuite utiliser ces classes CSS dans votre code CSS personnalisé pour modifier l'apparence de ces éléments.

Nous espérons que cet article vous a aidé à apprendre les bases de l'outil Inspecter l'élément et comment l'utiliser avec votre site WordPress. Vous voudrez peut-être aussi consulter notre tableau récapitulatif CSS généré par défaut par WordPress pour accélérer vos compétences en développement de thèmes ou notre boîte à outils WordPress ultime pour les pros.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.