Articles

MarkoSaric

Cet article est un guichet unique pour vos codes HTML WordPress. Voici la liste des balises et codes HTML WordPress les plus couramment utilisés pour créer du contenu. Enregistrez la liste et utilisez-la comme référence lors de la rédaction de vos articles et pages de blog WordPress.

WordPress HTML dans l’éditeur Gutenberg

WordPress est l’une des meilleures plateformes de blogs. Des millions de personnes et de marques l’utilisent pour créer de superbes sites.

Ce guide est valable à la fois pour la version auto-hébergée et la version hébergée de WordPress. Voir la différence entre WordPress.com ou WordPress.org .

WordPress 5.0 avec le nouvel éditeur Gutenberg sorti en décembre 2018 a considérablement amélioré et facilité la façon dont vous travaillez avec les balises HTML dans vos articles et pages de blog.

Comment affichez-vous le code HTML dans les publications éditées par Gutenberg? Il vous suffit d’ajouter le bloc “Code” et de taper votre code. Il montrera le code à vos visiteurs.

Comment modifiez-vous vos publications Gutenberg en HTML ? Il vous suffit de cliquer sur “Modifier en HTML” dans le menu des options du bloc particulier que vous souhaitez modifier.

Vous pouvez également ajouter le bloc “Classique” ou le plugin “Éditeur classique” pour avoir l’ancien éditeur WYSIWYG que je décris plus bas dans ce post.

Éditeur classique: Quelle est la différence entre Visuel et Texte?

Vous avez deux options d’édition lors de la rédaction d’un article de blog ou d’une page dans l’éditeur WordPress classique. Vous pouvez utiliser la vue “Visuelle” par défaut ou le mode “Texte”.

En mode visuel, vous pouvez voir votre contenu tel quel. Le mode visuel s’appelle WYSIWYG, ce qui signifie exactement ce que fait le mode visuel: Ce que Vous Voyez Est Ce que Vous Obtenez.

Vous voyez votre contenu comme vos visiteurs le verront dans leurs navigateurs et vous disposez de boutons simples pour vous aider à le modifier. La plupart des gens utilisent cet éditeur de publication “visuel” dans WordPress lors de la création de leur contenu.

En mode texte, vous voyez le code et les balises HTML. Ce mode texte vous permet d’ajouter n’importe quel code HTML à n’importe lequel de vos articles ou pages de blog. L’éditeur de texte basé sur HTML a l’air plus effrayant et n’est pas si populaire auprès des débutants.

Mais que se passe-t-il si vous savez coder ou si vous souhaitez un peu plus de contrôle sur la mise en page et la structure lors de la création de vos publications ou pages? Vous devez utiliser l’éditeur “Texte”.

Comment modifier HTML dans l’éditeur WordPress Classic?

Alors, comment accédez-vous à l’éditeur de texte HTML? Dans votre article d’administration WordPress ou dans la section de rédaction de page, cliquez sur l’onglet “Texte”. C’est dans l’éditeur de texte que vous ajoutez et modifiez toutes vos balises HTML.

Comment ajouter du code HTML à un article ou une page WordPress?

Vous pouvez simplement écrire ou coller n’importe quel code HTML directement dans votre éditeur de “Texte” WordPress. Essayez-le avec l’une des balises les plus couramment utilisées de ma liste ci-dessous.

Copiez-le ici sur le site, collez-le dans l’éditeur de texte et “prévisualisez” votre publication ou votre page pour voir comment vos visiteurs le verront.

Il arrive parfois que le code soit supprimé lors du passage du mode texte au mode visuel.

Soyez prudent et vérifiez que cela ne vous est pas arrivé. Ou essayez de vous en tenir à l’éditeur de texte uniquement si vous prévoyez d’écrire du code pour ne pas rencontrer ce problème.

Pour ceux qui sont à l’aise avec le codage, vous pouvez même désactiver l’éditeur “visuel”. Allez dans “Utilisateurs” dans votre menu de navigation WordPress, cliquez sur “Votre profil” et sélectionnez “Désactiver l’éditeur visuel lors de l’écriture”.

Copier et coller entre Google Docs, Microsoft Word et WordPress

La version de WordPress 5.0 a facilité et facilité la copie de tout contenu de Google Docs ou Microsoft Word et le coller dans vos publications et pages WordPress.

Ce n’était pas toujours facile. Lorsque vous travaillez avec du HTML dans l’éditeur classique, vous pouvez parfois remarquer des caractères charabia.

Cela peut se produire si vous copiez / collez de Microsoft Word dans WordPress. Une source utile lors du collage de code HTML de Word dans l’éditeur WordPress est Postable.

Copiez / collez votre code HTML à partir de Word (ou d’une autre source) dans l’outil pour obtenir une version WordPress conviviale et propre du code que vous pouvez ensuite insérer dans votre contenu.

Comment afficher les codes HTML sur mes articles de blog sous forme de texte normal?

Que diriez-vous si vous vouliez insérer et afficher des balises HTML et d’autres codes dans votre publication pour que vos visiteurs les voient comme du texte normal?

Un peu comme je le fais ici dans mon article? Vous utilisez toujours l’éditeur de texte mais vous enveloppez votre code comme ceci:

<code><div class="header"></code> 

Plugins de syntaxe HTML WordPress pour un affichage plus agréable du code

Il existe des plugins WordPress qui peuvent vous aider dans ce processus et vous permettent également de modifier la mise en page et la façon dont le code est présenté sur votre blog pour vos visiteurs.

Je recommande les deux suivants. SyntaxHighlighter Evolved est l’option la plus populaire, tandis que Pastacode est celle qui fonctionne le mieux pour ceux qui utilisent des constructeurs de pages lors de la conception d’un blog.

Codes et balises HTML WordPress les plus couramment utilisés

Insérer une image

<img src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" alt="Description of the image">

Rendre l’image cliquable vers une nouvelle destination

<a href="Destination-URL"><img alt="Description of the image" src="https://markosaric.com/essential-html-tags-wordpress/Image-URL" /></a>

Insérer un lien

Notez que le texte d’ancrage est la partie visible de votre lien. C’est le mot ou la phrase sur lequel vos visiteurs cliqueront pour accéder à la page vers laquelle vous créez un lien.

<a href="Destination-URL">Anchor text</a>

Créer le lien nofollow

À des fins de référencement, vous devrez peut-être créer une partie de votre lien nofollow. Voici comment:

<a href="Destination-URL" rel="nofollow">Anchor text</a>

Ouvrez le lien dans une nouvelle fenêtre de navigateur

<a href="Destination-URL" target="_blank">Anchor text</a>

Lien vers une section spécifique sur une longue page

Ce sont des sauts de page. Vos visiteurs peuvent cliquer sur un lien et se déplacer quelque part plus bas ou plus haut dans l’article.

Ceci est particulièrement utile pour les guides plus longs que vous souhaitez diviser en différents chapitres à l’aide de la table des matières.

La première partie de la création d’un saut de page consiste à attribuer une section (ou une cible) à laquelle vous souhaitez créer un lien.

Placez ce code dans la section de votre page vers laquelle vous souhaitez créer un lien. La deuxième partie consiste à créer un lien vers cette section assignée à partir de votre intro ou de votre table des matières.

<a></a><a href="#Specific-section">Anchor text</a>

Cela fonctionne également si vous souhaitez créer un lien vers une section spécifique de votre page à partir d’un autre article de votre blog. Vous pouvez insérer un lien vers cette cible : https://yourblog.com/yourpost/#Specific-section.

C’est aussi ainsi que fonctionnent ces liens “retour vers le haut”. Attribuez un nom de section en haut de votre publication et incluez un bouton “aller en haut” en bas de votre publication, qui renvoie à la section supérieure.

Créer des titres et des sous-titres proéminents

<h1>This is a heading H1</h1> <h2>This is a heading H2</h2> <h3>This is a heading H3</h3>

Insérer un saut de ligne

<p>This is<br>a paragraph</br> with a line break</p>

Créer un nouveau paragraphe

<p>This is the first paragraph</p> <p>This is the second paragraph</p>

Faire une liste à puces

<ul> <li>list item with a bullet point</li><li>another item with a bullet point</li></ul>

Faire une liste numérotée

<ol><li>list item with number 1</li><li>list item with number 2</li></ol>

Mettez en surbrillance le texte d’un article avec un fond jaune (ou toute autre couleur)

<span style="background-color:yellow;">Your text</span>

Attribuez le numéro d’un article de votre liste numérotée

<ol start="7"><li>List item number 7</li></ol>

Faites une liste de lettres

<ol type="A"><li>Item A</li><li>Item B</li><li>Item C</li><li>Item D</li></ol>

Faites une liste de chiffres romains

<ol type="I"><li>Item I</li><li>Item II</li><li>Item III</li><li>Item IV</li></ol>

Centrez votre texte

<center>to be centered</center>

Mettez votre texte en gras

<strong>to be bold</strong>

Mettez votre texte en italique

<em>to be italic</em>

Changer la couleur du texte

<span style="color: #000000;">Your text</span>

Insérer un blockquote

<blockquote>Your quote</blockquote>

Créer un tableau

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.