WordPress sous le capot : Guide HTML pour débutants

Damien Tremblay
15 juin 2022

Avez-vous un peu d’expérience avec le CMS WordPress ? Vous débutez, vous voulez creuser un peu plus et jeter un œil pour voir ce que ce CMS à sous le capot ? Dans cet article, nous allons au-delà de la simple publication d’une page, du téléchargement d’images et de l’installation de plugins.

Le code HTML dans WordPress

Dans ce didacticiel pour débutants, nous nous concentrerons sur le code HTML. Dans les didacticiels associés, nous verrons CSS, PHP et JavaScript, ainsi que la gestion des fichiers, dossiers et modèles.

Avez-vous besoin de connaître le HTML pour utiliser WordPress ?

La réponse est bien entendue non. Mais plus vous en saurez sur le sujet, mieux vous serez en mesure de gérer votre site Web WordPress (version auto-hébergée). Nous n’allons pas creuser trop profondément ici, juste assez pour vous donner les bases.

Comme vous le savez probablement déjà, WordPress a un côté administrateur (tableau de bord) qui permet de créer et éditer du contenu, et un front-end que les visiteurs de votre site naviguent.

Vous pouvez créer un site Web WordPress sans savoir coder en sélectionnant un thème, en publiant des pages, en créant un menu personnalisé et en ajoutant des pages à ce menu.

Mais tôt ou tard, vous aurez envie de peaufiner votre site ou de résoudre un éventuel problème.

Vous devriez comprendre comment fonctionnent les fichiers et le code qui fait tourner WordPress. En mettant les mains sous le capot, vous ferez un pas de géant et serez mieux préparé si jamais vous êtes confronté à des problèmes avec votre site Web.

Prêt? Commençons à creuser.

Vous ne savez peut-être pas que WordPress repose principalement sur 3 langages, PHP, CSS et HTML. Javascript gagne également en importance.

Pourquoi apprendre le HTML alors que je peux déjà publier facilement du contenu ?

Apprendre le HTML de base (ainsi que le CSS) vous aidera à mieux contrôler l’apparence de vos publications et des pages individuelles.

Qu'est-ce que le code HTML ?

HTML est le langage principal utilisé pour créer des pages Web. Il s’agit d’organiser et de contrôler l’affichage du contenu de votre site Web. À l’aide d’éléments HTML, vous pouvez définir du contenu sous forme de paragraphes, d’en-têtes, de listes, de liens, d’images, etc.

Vous connaissez peut-être déjà le code HTML si vous avez écrit un article WordPress et que vous êtes passé à votre éditeur de code dans votre éditeur WordPress Gutenberg.

(Pour votre information : l’éditeur WordPress Gutenberg pour les articles et les pages peut être trouvé lorsque vous accédez à Articles > Ajouter ou Pages > Ajouter)

Accédez à votre section d’administration WordPress (tableau de bord) et modifiez un article ou une page que vous avez écrit.

Comment accéder à l’éditeur de code Gutenberg

Ouvrez l’éditeur de publication/page.
Regardez à droite dans la barre de navigation supérieure.
Cliquez sur les trois points. Vous verrez » Plus d’outils et d’options « .
Dans le panneau déroulant, cliquez sur Éditeur de code.

Voyez-vous beaucoup de crochets < > ? Vous lisez actuellement le code HTML.

Comment reconnaître du HTML (syntaxe)

HTML repose principalement sur des éléments et des balises. Les éléments HTML sont les blocs de construction des pages HTML. Un élément HTML se compose généralement d’une balise de début, d’un contenu et d’une balise de fin.

Les balises HTML viennent normalement par paires comme <p> et </p>.
La première balise d’une paire est la balise de début. La seconde est la balise de fin.
La balise de fin a des crochets comme la balise de début, mais a également une barre oblique insérée avant le nom de la balise.

<h1> Ceci est un titre </h1>

L’élément <h1> est utilisé pour définir un grand titre.
L’élément <a> définit un lien.
L’élément <img> définit une image. (Il ne vient pas par paire. Il n’y a pas de balise de fin.)

Dans une page Web ( code source ), vous remarquerez peut-être que <html> est la balise d’ouverture. Il démarre les choses et indique au navigateur que tout ce qui se trouve entre cela et la balise de fermeture </html> est un document HTML.

Le contenu entre <body> et </body> est le contenu principal qui apparaîtra sur l’écran du navigateur Web.

Gardez à l’esprit que les navigateurs Web (ex. Chrome, Firefox) n’affichent pas les balises HTML, mais les utilisent pour déterminer comment afficher le document. Les navigateurs Web lisent les documents HTML et les affichent sur un écran.

Le saviez-vous ?

Saviez-vous que si vous travaillez strictement dans votre éditeur visuel WordPress (Gutenberg), vous ajoutez toujours du HTML à votre publication ? Cela se passe juste « sous le capot » où vous ne pouvez pas le voir.

Une fois que vous aurez migré vers l’éditeur de code, vous ferez votre premier pas vers une meilleure gestion de WordPress et vous acquerrez des compétences en HTML. Bien entendu, vous pouvez basculer entre l’éditeur visuel et l’éditeur de code.

Entraînez-vous un conseil.

Ajoutez une nouvelle publication à votre blog, écrivez quelque chose dans l’éditeur Gutenberg, mettez du contenu en gras puis jetez un coup d’œil à l’éditeur de code pour voir le code HTML. Conservez la publication sous forme de brouillon et essayez d’apporter quelques modifications dans l’éditeur de code.

Dans votre éditeur de code, vous verrez probablement des balises <h1>, des balises <a>, des balises <img> et des balises <strong>.

Éditeurs visuels en bref

Fondamentalement, l’éditeur de code vous montre le balisage HTML. L’éditeur visuel fait de son mieux pour interpréter ce balisage HTML et vous le présenter de la même manière qu’il apparaîtra dans un navigateur Web. En passant à l’éditeur de code, vous pouvez ajouter votre propre style personnalisé à votre contenu.

Voici un plugin WordPress utile pour vous aider à utiliser l’éditeur de code !

Ce plugin ajoute la coloration syntaxique à l’éditeur de code pour vous aider à faire la distinction entre le contenu et le HTML. Vous verrez différentes couleurs dans votre éditeur de code pour vous aider à mieux visualiser et comprendre le code HTML.

WordPress sous le capot : Guide CSS pour débutants

Damien Tremblay

Damien est un passionné du digital avec une préférence pour les sujets qui touchent au développement web, au référencement ou SEO et à la publicité sur les réseaux sociaux. Avec plus de 15 ans d'expérience dans le domaine, il a dirigé une agence de développement de sites web et collaboré avec de nombreux client de type PME ou grands comptes sur 3 continents différents. C'est le vétéran de l'équipe chez Opportunités Digitales et le rédacteur en chef !

Actu WordPress