Languages: English • (Add your language)
Page d'accueil du Codex en français - Télécharger WordPress en français
Les utilisateurs francophones se retrouvent sur le site WordPress-Francophone, notamment sur son forum d'entraide.
Ce qui suit ne concerne pas le choix d'un Thème WordPress, mais plutôt de rechercher les styles CSS dans le thème actuellement installé. Il arrive souvent qu'un problème survienne dans la mise en page de votre thème. Prenons un exemple tout simple : il y a une bordure que vous ne souhaitez pas entre le menu de la barre latérale (ou sidebar) et le reste de la page. Vous cherchez encore et encore mais mais vous ne trouvez aucune référence à cette bordure. Alors que faire ?
Commençons par jouer aux détectives CSS. Vous constatez le problème mais vous n'arrivez pas à trouver son origine. Dans l'exemple ci-dessus, vous devez rechercher une bordure.
Commencez par examiner attentivement une page quelconque publiée (ou une page de test) et recherchez un texte caractéristique dans la barre latérale, près de la bordure indésirable. Disons que dans la barre latérale vous avez un titre intitulé "Vive les langoustines". Vous savez que vous trouverez ce titre dans votre barre latérale lorsque vous afficherez le code source de la page.
Pour afficher le code source d"une page, allez dans la menu de votre navigateur et choisissez VUE > SOURCE DE LA ¨PAGE ou VUE > SOURCE. Cela peut différer selon votre navigateur. Par exemple avec Firefox, vous faites un clic droit sur votre page, puis Code source de la page. Vous devez alors avoir maintenant le code source affiché.
Ouvrez votre outil de recherche (habituellement avec le raccourci clavier Ctrl + F). Tapez "vive les langoustines" et cliquez sur Rechercher. Il est fort à parier, à moins que vous ayez aussi ce texte dans votre article, que le résultat de la recherche soit celui de la barre latérale. Si ce n'est pas le cas, cliquez à nouveau sur Rechercher jusqu'à ce que vous ayez trouvé la bonne phrase dans la bonne zone.
Si vous utilisez Internet Explorer, une autre méthode consiste à utiliser la barre d'outils de développeur d'Internet Explorer, qui vous permet de voir et de sélectionner visuellement les éléments, les ID et les Classes de la page. Il affiche les éléments dans la hiérarchie de la page, leurs attributs CSS, et peut décrire les DIVs, les tables, etc. Vous pouvez télécharger la barre d'outils à partir de Microsoft.
Dans la dernière version de Firefox, un outil de développement est également intégré d'origine. Vous pouvez donc y explorer le code source, voir les css etc.
Une fois que vous avez trouvé la phrase, il est temps de jouer au détective CSS. Regardez le code concernant la phrase "Vive les langoustines". Il doit ressembler à quelque chose comme ci-dessous, utilisant des mots comme sidebar, menu, ou sidecolumn :
<div id="sidebar"> ou <div class="sidebar">
C'est la section principale qui contient votre menu barre latérale (sidebar). Vous avez trouvé le premier indice.
Ouvrez maintenant votre fichier style.css et faites une autre recherche pour sidebar ou un autre terme suivant les résultats de votre précédente recherche. Il est généralement identifié de deux façons:
#sidebar ou .sidebar
Regardez dans les styles CSS et voyez s'il y a une mention de bordure (border), ressemblant souvent à ceci:
#sidebar {position: relative; float: right; width: 170px;
color: blue; font-size: 90%; border-right: solid 1px blue; }
Vous avez enfin trouvé le coupable ! Si vous n'en voulez plus, supprimez cette référence, et hop, problème résolu ... normalement.
Si ce n'est pas le cas, l'enquête continue.
Parfois, le coupable est celui que l'on soupçonne le moins. Peut-être que la bordure n'est pas causée par le suspect le plus évident, la barre latérale (sidebar) , mais par la section contenu (content) . Revenez au code source de la page et examinez le début du code publié. Il devrait y avoir quelque chose qui ressemble à cela :
<div id="content">
Suivant votre thème, ce peut être également content, page. post, maincolumn, widecolumn, ou un autre alias, mais ce doit être le container CSS qui contient les informations de votre article. Maintenant, revenez à la feuille de style et vérifiez s'il y a une bordure (border) dans cette section.
Si tout cela échoue, comme tout bon détective CSS, n'abandonnez jamais la chasse. Retournez à votre fichier style.css, et lancez une recherche avec "border" et examinez attentivement chaque suspect. Notez le nom de l'ID du sélecteur,comme sidebar, menu, content and page, puis revenez au code source de la page pour voir si cela pourrait être le coupable.
Vous pouvez également sélectionner la bordure suspecte que vous avez trouvée dans la feuille de style et la couper/coller dans un fichier TXT (comme le Bloc-notes). Notez quel sélecteur vous avez supprimé ainsi :
Suppression border: solid 2px green from #content
Ensuite enregistrez le fichier style.css et transférez le sur votre site. Actualisez la page de test et vérifiez si la bordure indésirable a disparu. Si c'est le cas, vous avez trouvé le coupable. Sinon, retournez dans le Bloc-notes, copiez le code et replacez- le dans votre style.css dans la section "content", en remettant les choses comme vous les avez trouvées. Procédez ainsi jusqu'à ce que la bordure disparaisse.
Si vous avez trouvé le coupable, bravo, vous êtes digne de rejoindre l'inspecteur Derrick.