L'auteur.
Maxime Boudin, consultant web et Media Buyer. Expert SEO – SEA. Auteur du blog marketing digital On-me-trouve.fr, conseil en création de site web et référencement.
Les publications récentes.
Articles récents
Les catégories du blog.
Nos services
Les sites d'intérêt.
Littérature
7 balises html à utiliser dans l’éditeur de texte de WordPress
- Le Blog
- /
- 7 balises html à utiliser dans l’éditeur de texte de WordPress
Des astuces WordPress et des balises html qui sauvent la vie
Aujourd’hui, pour rendre la création de textes dans WordPress plus agréable, plus intuitive et plus rapide j’avais envie de vous partager quelques astuces et 7 balises html à utiliser dans l’éditeur de texte de WordPress.
La mise en forme de texte dans WordPress est un aspect du travail d’intégration de contenus web qui paraît très simple à priori, cependant la réalité est souvent plus complexe dès qu’on veut enrichir ses pages internet de liens, copier coller un texte depuis une source externe, ajouter des couleurs ou finir de donner un design web convaincant à ses contenus en créant des paragraphes par exemple.
Voilà donc quelques astuces à découvrir ou redécouvrir et 7 balises html pour gagner du temps et garder le sourire à chaque mise à jour future sur votre site.
1. Les différents éditeurs de texte WordPress existants
En matière de mise en forme de texte dans WordPress, on a plusieurs solutions.
La première solution, c’est de travailler avec l’éditeur par défaut, c’est-à-dire Gutemberg. C’est l’éditeur qui accompagne tout site WordPress depuis sa version 5.0. Cela veut dire que quand on commence à créer un article ou une page on est d’office propulsés dans la nouvelle expérience de création de contenu de WordPress voulue avec Gutemberg. L’insertion de blocs lui est propre et les outils d’édition de texte aussi.
Vue de l’éditeur de texte Gutemberg pour WordPress.
La deuxième solution, qui parlera surtout aux nostalgiques ou habitués des anciennes versions du CMS, consiste à créer ses contenus avec l’éditeur classique de WordPress qui s’obtient encore et fort heureusement en installant l’extension du même nom « Classic editor ».
Vue de l’éditeur de texte Classic Editor pour WordPress.
La troisième solution, ou plutôt les troisièmes, c’est d’utiliser l’éditeur de texte d’un constructeur de page comme Elementor ou Beaver. Mais comme il existe plusieurs constructeurs de page, il y a « des » troisièmes solutions. C’est encore une façon différente d’obtenir un même résultat de mise en forme.
Vue de l’éditeur de texte Elementor pour WordPress.
Pour finir, il faut savoir aussi que selon le projet sur lequel on peut être amené à travailler, on n’aura pas forcément trop le choix de l’outil et qu’en plus, en fonction du template utilisé sur le site WordPress, l’intégration et la mise en forme de texte se feront un peu différemment encore. Elles pourront être plus ou moins intuitives, d’où l’intérêt de savoir que ces balises html existent pour s’en servir en cas de besoin. Il est clair qu’avec un éditeur de texte évolué comme Gutemberg, les balises sont automatiquement intégrées quand on clique sur les options de gras, quand on crée un paragraphe etc… Dans les autres cas, il est préférable de les apprivoiser en html.
2. Le mode « Visuel » Vs le mode « Texte »
In fine, qu’on utilise l’une ou l’autre des solutions, on va toujours avoir besoin de veiller à la qualité du texte qu’on insère, surtout si on fait un copier coller depuis une source externe à son site. On peut aussi avoir besoin de supprimer une balise html indésirable ou d’en ajouter une manuellement, et pour ce faire la bascule entre le mode visuel et le mode texte (ou code) est très utile et peut même s’avérer cruciale.
- Attention donc au copier-coller en mode visuel qui a pour effet potentiel de coller tous les styles du texte source et donc de créer une mise en forme indésirable à l’arrivée, et un code très bof. Il est préférable de procéder à un copier-coller en mode texte, ou d’utiliser le bloc-notes de Windows pour faire un coller intermédiaire qui ne va pas tenir compte des mises en forme, avant le coller final dans WordPress.
- Le mode Texte permet aussi d’intégrer des balises html dont l’aspect peut ensuite être vérifié en mode Visuel.
3. La barre d’outils enrichie dans le Classic Editor
Si on utilise principalement Gutemberg ou un autre éditeur que l’éditeur classique de WordPress, on peut passer à la section suivante car il y a peu de chances qu’on soit concerné par cette section, même si un rappel est toujours utile dans tous les cas, au moins pour parfaire sa culture WP. Je tenais à faire un point sur cette barre d’outils du classic editor de WordPress, et je tenais surtout à le faire pour montrer où était l’option de coloration du texte. Pour l’afficher, il faut avoir cliqué sur le bouton encadré en rouge sur l’image « Permuter la barre d’outils ».
Autrement, cette barre d’outils de texte est utile quand on crée un site WordPress pour :
- Changer la couleur du texte en cliquant sur le A majuscule surplombant une barre horizontale de couleur ;
- Insérer un caractère spécial ;
- Créer une liste à puces ou une liste numérotée ;
- Nettoyer la mise en forme ;
- Accéder à des options d’indentation du texte.
4. Balises html à connaître
Maintenant qu’on a vu ensemble ces préalables à l’insertion et la mise en forme de textes dans WordPress, voyons de plus près quelques balises html incontournables :
- La plupart des balises html vont nécessiter une balise ouvrante et une balise fermante à l’exception de certaines, comme par exemple la balise <br> du saut de ligne.
- Dans WordPress, une balise s’insère toujours en mode « texte » (ou « code »).
- Voici la liste des balises html indispensables par ordre d’importance pour dompter la mise en forme de texte dans WordPress quel que soit l’éditeur choisi :
- <br> saut de ligne
- <b> gras ou bold </b>
- <strong> texte important en gras visuellement et aux yeux des moteurs de recherche </strong>
- <a href= »https://… » target= »_blank »>Intitulé du lien hypertexte</a>, l’ajout d’un target= »_blank » permet de créer un lien ouvrant un nouvel onglet dans le navigateur.
- <i> texte en italique </i>
- <u> texte souligné </u>
- <p> paragraphe </p>
5. Autres balises html utiles
- <div> section </div>
<span> sous-section </span> - <ul> ouverture d’une liste
<li> Element de liste 1 </li>
<li> Element de liste 2 </li>
<li> Element de liste 3 </li>
</ul> fermeture de liste - <table> tableau (à utiliser avec parcimonie)
<tbody> corps du tableau
<tr> ligne du tableau
<td> cellule 1 de tableau </td>
<td> cellule 2 de tableau </td>
</tr> fermeture de ligne de tableau
</tbody> fermeture du corps de tableau
</table> fermeture du tableau
- <div> section </div>
Comme alternative au tableau <table>, on privilégiera une structure en <div> les unes à côté des autres avec un style .css en float:left et un width qui utilise un % de la largeur de page selon le résultat voulu par exemple. Gros avantage l’adaptation responsive en .css selon le support utilisé pour naviguer sur la page web, en faisant varier le % de largeur de page utilisé.
- <style> Ouverture d’une mise en forme des éléments de la page,
Attention : préférer une feuille de style séparée en .css au style inline qu’introduit cette balise.
</style> Fermeture de la mise en forme
Cet article vous a plu ? Abonnez-vous à la newsletter pour rester informé(e) des dernières astuces et nouveautés.
