Quelques balises HTML utiles pour WordPress

Rassurez-vous, vous n’avez pas besoin de connaître le HTML pour utiliser WordPress. Mais avoir sous la main quelques balises HTML utiles pour WordPress peut vous aider. En effet, créer/modifier du code HTML peut être d’une grande aide lorsqu’on édite du contenu d’un site web. Découvrez ici quelques balises HTML utiles pour WordPress que vous pouvez utiliser pour formater le contenu de vos publications et pages. Et revenez sur cette page dès que vous en avez besoin !

L’un des avantages de l’utilisation de WordPress est l’accessibilité pour composer et mettre en forme votre contenu, sans connaitre l’HTML. Par exemple, WordPress possède des fonctionnalités uniques telles que des thèmes, des plugins et des widgets qui vous permettent de gérer votre site web sans avoir à toucher au code. Il propose aussi un contenu intégré facile à utiliser qui vous permet de créer et de formater facilement du contenu simplement en en cliquant sur quelques boutons de menu.

Dès que vous le sentez nécessaire, n’hésitez pas à revenir aux documentations dédiées à ces sujets : Les thèmes et plugins et Les widgets

Mais, l’ensemble des sites web est construit et piloté par du code, plus précisément du HTML (avec l’aide du langage CSS – mais ce n’est pas le sujet de ce guide).

Dans le cas où vous prévoyez de gérer vous-même votre site web, vous aurez besoin, tôt ou tard, de modifier quelque chose en HTML. Avoir à disposition ce guide pourra donc vous faire gagner du temps.

A quoi sert le HTML

Par exemple, disons que :

• D’abord, vous souhaitez ajuster certains éléments existants, ajouter un lien et une image dans une section de votre barre latérale, ou diriger vos visiteurs vers un formulaire de contact… Si vous connaissez le langage HTML de base, vous pouvez le faire facilement et rapidement.
• Ensuite, vous sous-traitez l’écriture de contenu à un rédacteur web et recevez des fichiers contenant du code HTML. Avoir une certaine connaissance du HTML vous aidera donc à mieux comprendre votre contenu avant d’accepter et de payer le travail.
• Quelqu’un d’autre créé vos publications/pages. Vous voyez ensuite quelques erreurs simples dans le texte (un passage qui aurait dû être en gras ou un lien hypertexte manquant). Connaître le HTML de base vous aide à corriger des choses simples dans vos pages sans délai.
• Finalement, vous souhaitez discuter d’un projet avec un développeur de site web. Connaître le HTML de base peut non seulement vous aider à communiquer plus efficacement avec les développeurs web. Mais cela vous aide également à vous sentir plus confiant et mieux informé lorsque vous discutez d’idées ou demandez un travail personnalisé sur votre site web.

En bref, vous n’avez pas besoin de devenir un amoureux du code. Il suffit d’être suffisamment familier avec le HTML de base pour devenir conscient de ce qu’est le web !

Remarque :
Comme mentionné plus haut, un autre langage est souvent associé au HTML. Cet autre pilier du web, c’est le CSS. Si le HTML créé la structure des pages et ses contenus, alors le CSS permet de modifier l’apparence des contenus de la page. On va par exemple pouvoir définir la taille, la couleur ou l’alignement de certains contenus HTML.

Une définition de base du HTML

HTML est un acronyme de HyperText Markup Language. Selon la définition de Wikipédia du HTML :

Le HTML est le principal langage de balisage pour créer des pages web et d’autres informations pouvant être affichées dans un navigateur web. Le HTML est écrit sous la forme d’éléments HTML constitués de balises entre crochets (comme <table>), dans le contenu de la page web.

Les balises HTML se présentent le plus souvent par paires comme <h1> et </h1>, bien que certaines balises, appelées éléments vides, ne soient pas appariées, par exemple <img>.

La première balise d’une paire est la balise de début, la deuxième balise est la balise de fin (elles sont également appelées balises d’ouverture et balises de fermeture). Entre ces balises, les concepteurs web peuvent ajouter du texte, des balises, des commentaires et d’autres types de contenu textuel.

Le but d’un navigateur web est de lire des documents HTML et de les composer en pages web visibles ou audibles. Le navigateur n’affiche pas les balises HTML, mais utilise les balises pour interpréter le contenu de la page.

Les éléments HTML forment les éléments constitutifs de tous les sites web. Le HTML permet d’incorporer des images et des objets et peut être utilisé pour créer des formulaires interactifs. Il fournit un moyen de créer des documents structurés en indiquant une sémantique structurelle pour du texte tel que des en-têtes, des paragraphes, des listes, des liens, des citations et d’autres éléments. Il peut intégrer des scripts écrits dans des langages tels que JavaScript qui affectent le comportement des pages web HTML.

Source : Wikipédia, HTML

Donc, pour coder en HTML, il faut utiliser des balises. Elles seront ensuite interprétées par les navigateurs web pour être affichées correctement.

Utilisation de balises HTML utiles pour WordPress

WordPress offre aux utilisateurs la possibilité d’ajouter du contenu à vos pages à l’aide d’un l’éditeur visuel Gutenberg. Cet éditeur vous permet d’ajouter du HTML et d’autres langages de script (par exemple JavaScript) lors de la composition ou de l’édition de votre contenu.

Remarque :
Les images de cette section montrent l’éditeur Classic de WordPress – et non Gutenberg. Pour apprendre comment passer de l’éditeur Visuel à l’éditeur Texte sur Gutenberg, consultez le chapitre Éditeur du guide Comment modifier les pages sur WordPress. Si vous souhaitez uniquement modifier le code HTML d’un bloc, c’est expliqué dans le chapitre Modifier au format HTML du guide Éditer du contenu WordPress.

Le menu de l’éditeur de texte HTML, qu’est-ce que c’est ?

L’éditeur de texte WordPress vous permet de coller, modifier et travailler avec du code HTML et JavaScript. Et l’éditeur de texte propose par défaut un ensemble de boutons dans son menu, qui sont en fait des raccourcis pour écrire les balises HTML.

Voici une brève description de leur fonction HTML :

1. b

<strong> </strong> : pour mettre le texte en gras.

2. i

<em> </em> : pour mettre le texte en italique.

3. lien hypertexte

<a href="http://exemple.com"> </a> : pour ajouter un lien hypertexte vers une URL.

4. b-quote

<blockquote> </blockquote> : pour citer un texte.

5. del

<del> </del> : pour mettre en évidence le texte qui a été supprimé du contenu existant. De nombreux navigateurs web l’afficheront généralement sous forme de texte barré.

6. ins

<ins> </ins> : pour indiquer le texte qui a été inséré dans le contenu actuel. De nombreux navigateurs web affichent généralement cela sous forme de texte souligné.

7. img

<img src="http://www.votredomaine.com/wp/wp-content/uploads/2021/01/image.jpg" alt="image description" /> : pour insérer une image dans votre publication ou votre page et ajouter une balise Alt (une description textuelle de votre image au cas où l’image ne s’afficherait pas dans le navigateur d’un utilisateur. Vous pouvez également utiliser le bouton Ajouter un média (15) pour insérer une image dans votre contenu.

8. ul

<ul> </ul> : pour insérer une liste à puces. Cette balise doit être utilisée avec des balises <li> (voir ci-dessous) pour chacun des éléments.

9. ol

<ol> </ol> : pour insérer une liste numérotée. Cette balise doit être utilisée avec des balises <li> (voir ci-dessous) pour chacun des éléments.

10. li

<li> </li> : pour insérer ou transformer le texte sélectionné en un élément de liste. Cette balise doit être utilisée en conjonction avec la balise ul ou ol.

11. code

<code> </code> : pour afficher du code dans votre texte (comme des balises HTML, qu’on voudrait afficher sans qu’elles soient interprétées). Le texte apparaîtra généralement avec un style de texte préformaté, par exemple une police à espacement fixe comme Courrier.

12. plus

<! - more -> : pour diviser votre publication en sections « et « reste du contenu ». Par exemple, si vous ajoutez un ou deux paragraphes, puis insérez la balise « plus » et ajoutez le reste du contenu de votre publication, les visiteurs ne verront que les premiers paragraphes de votre publication avec un lien hypertexte (par exemple, continuer la lecture), ce qui fait apparaître le reste de la publication si vous cliquez dessus.

13. Fermer les balises

Pour fermer toutes les balises HTML ouvertes laissées ouvertes. Vérifiez votre contenu après avoir utilisé cette fonction pour vous assurer que toutes les balises HTML ont correctement formaté votre texte.

14. Mode d’écriture sans distraction

Pour travailler en mode d’écriture et rester pleinement concentré !

15. Bouton Ajouter un média

Cliquez sur ce bouton pour insérer un média dans votre contenu, comme des images, des vidéos, des fichiers audio…

Astuce :
Si vous souhaitez ajouter des éléments de conception plus complexes à votre contenu (par exemple, des guillemets, des paragraphes à trois colonnes…) sans apprendre le HTML, vous pouvez essayer de couper-coller votre code HTML à partir de site qui proposent des modèles HTML (comme https://www.w3schools.com/html/ ou https://codepen.io/ )

Dépannage des erreurs de balise HTML utiles pour WordPress :

Si la mise en forme de votre texte ne s’affiche pas correctement après la publication de votre publication/page, assurez-vous que vous avez correctement saisi votre texte au format HTML dans l’onglet Texte, pas dans le visuel Éditeur. Par exemple, si vous entrez le texte ci-dessous dans l’onglet Visuel.

Votre texte ressemblera à ceci lorsque votre publication sera publié.

Vous pouvez voir le problème en passant à l’onglet Texte.

Comme vous pouvez le voir ci-dessus, WordPress convertit les symboles « < » et « > » en leurs équivalents de code HTML (appelés caractères ASCII). Donc :
– « <« (crochet ouvert)= <
– « > »(Crochet angulaire fermé)= >

Pour conserver les symboles « < » et « > » intacts et vous assurer que votre texte sera correctement formaté, vous devez donc coller le code dans l’onglet Texte, et pas Visuel.

Remarque :
Dans le cas où la suggestion ci-dessus ne résout pas le problème et que vous continuez à rencontrer des problèmes lors de l’ajout de code HTML à votre contenu, vous devrez peut-être examiner d’autres options. Cela peut inclure :
– Demander à une personne expérimentée de dépanner les erreurs WordPress de vous aider
– Recherche sur le forum d’assistance WordPress et les ressources de dépannage WordPress pour les causes et solutions possibles
– Réinstaller votre application WordPress (c’est-à-dire effectuer une nouvelle installation)
– Contacter votre hébergeur pour obtenir de l’aide

Désormais, vous connaissez les bases de l’utilisation du HTML pour formater et styliser votre contenu. Maintenant, passons à l’intégration manuelle de code HTML, pour un usage encore plus avancé !

Intégrer manuellement votre HTML utile pour WordPress

Attention :
Nous vous recommandons de sauvegarder votre base de données et vos fichiers avant d’ajouter du code ou des scripts à WordPress. Si vous ne souhaitez pas effectuer vos propres sauvegardes de site, obtenez l’aide d’un professionnel WordPress.

L’avantage, c’est que WordPress vous permet d’insérer de nombreuses balises de mise en forme HTML utiles pour WordPress, y compris les suivantes

Balise HTML	Description	Exemple
<a>	Lien	<a href="https://google.com">Lien vers google.com</a>
<blockquote>	Section de texte citée d’une autre source
<br>	Passage à la ligne	<p>Mon 1er paragraphe</p> <br> <p>Mon 2nd paragraphe</p>
<caption>	Légende
<div>	Element dans un document
<em>	Text en italique	<p>Lorem Ipsum <em>mon texte en italique</em></p>
<h1></h1>,  <h2></h2>,  <h3></h3>,  <h4></h4>,  <h5></h5>,  <h6></h6>,	Titres  NB: <h1></h1> est le plus gros titre.	<h1>Mon titre principal</h1> <h2>Mon 1er titre secondaire</h2> <p>Un paragraphe</p> <h1>Mon 2nd titre secondaire</h1> <p>Un autre paragraphe</p>
<img>	Image	<img src="http://www.votredomaine.com/wp/wp-content/uploads/2021/01/image.jpg" alt="Grapefruit slice atop a pile of other slices">
<ul>	Liste à puce	<ul>     <li>Milk</li>     <li>Cheese     <li>Coffee</li> </ul>
<p>	Paragraphe	<p>Lorem Ipsum</p>
<section>	Section d’un document
<small>	Texte plus petit	<p>Lorem Ipsum <small>texte plus petit</small></p>
<span>	Section d’un document
<strike>	Texte barré	<p>Lorem Ipsum <strike>Texte barré</strike></p>
<strong>	Texte important	<p>Lorem Ipsum <strong>texte important</strong></p>
<sub>	Indice	<p>Lorem Ipsum <sub>Texte en indice </sub></p>
<sup>	Exposant	<p>E = MC<sup>2</sup></p>
<u>	Texte souligné	<p>Lorem Ipsum <u>texte souligné</u></p>

Les shortcodes

Qu’est-ce qu’un code court/shortcode?

Un « shortcode » est un raccourci de code. Il vous permet de déclencher des fonctions complexes, en PHP, sans compétences ni connaissance. Les codes courts peuvent par exemple être intégrés dans les pages, les widgets et les publications. En effet, ils ressemblent à des chaînes de texte placées entre crochets, par ex. «[my-form-shortcode]».

Les codes courts permettent :

• D’une part, aux développeurs de plugins de créer des scripts complexes et contextuels comme des générateurs de contenu, des formulaires utilisateur…
• D’autre part, aux éditeurs d’insérer du contenu dynamique où vous le souhaitez avec une courte chaîne de texte.

Comment fonctionne un shortcode WordPress

La capture d’écran ci-dessus explique comment utiliser les codes courts :

• Vous installez un plugin qui vous permet de coller du code dans un champ spécial. Votre développeur peut également développer un shortcode spécifique pour vos besoins.
• Après avoir ajouté votre shortcode, le plugin crée un raccourci unique pour traiter ce script.
• Copiez ce shortcode dans votre presse-papiers, puis collez-le dans toutes les publications, widgets ou pages souhaitées.
• Ensuite, le plugin va charger le script partout où le shortcode a été ajouté.

L’avantage d’utiliser des codes courts est que vous n’avez pas à vous soucier du code PHP appelé. Ajoutez simplement le code court à l’endroit où vous souhaitez que le script apparaisse et WordPress s’occupe du reste !

Remarque :
Certains shortcode ont besoin de paramètres pour fonctionner, par exemple [my-form-shortcode id=’85’]. Reportez-vous à la documentation de votre développeur ou celles de vos plugins pour comprendre exactement comment appeler le shortcode que vous désirez.

Si vous êtes arrivé jusqu’en bas de cette page sans connaitre le HTML utiles pour WordPress au préalable, franchement, RESPECT ! On a bien conscience que ça peut faire peur, mais vous avez franchi la première étape, et vous devez être un peu plus à l’aise maintenant.