Les auteurs WordPress ont la possibilité de créer des pages et des publications dans un Éditeur visuel ou un éditeur de texte. Alors que l’éditeur visuel fait un travail raisonnablement bon avec ses options de barre d’outils et son environnement d’édition facile, l’utilisation de l’éditeur de texte permet une flexibilité maximale sur la façon d’organiser le contenu.

Permettez-moi d’expliquer non seulement pourquoi vous souhaitez utiliser l’Éditeur de texte (à la place de l’éditeur visuel), mais à quel point il peut être facile à utiliser.

Pourquoi préférez-vous l’Éditeur de Texte?

• Votre contenu aura plus de sens pour vos lecteurs et moteurs de recherche.
• Il vous suffit de connaître quelques balises HTML pour rendre l’Éditeur de texte très utile.
• Vous pouvez appliquer des propriétés de style CSS directement à votre code HTML.

Que Se Passe-T-Il Lorsque Vous Utilisez L’Éditeur Visuel ?

Lorsque vous ajoutez une copie, un média ou des liens à votre éditeur visuel, vous ajoutez vraiment du HTML à votre page ou à votre publication. Tout se passe sous le capot.

Vous ne savez pas ce que je veux dire? Essaie ça.

Ajoutez une copie dans l’éditeur visuel. Sélectionnez ensuite l’onglet Texte. Ce que vous regarderez, c’est du HTML. Tout comme avec l’Éditeur visuel, vous pouvez modifier votre code HTML directement avec l’Éditeur de texte.

En fait, vous pouvez faire beaucoup plus avec l’Éditeur de texte qu’avec l’Éditeur visuel. Cela rend le travail en mode texte non seulement plus productif mais aussi plus satisfaisant. Vous serez en mesure de balisage plus précis de votre contenu, ce qui profitera à vos lecteurs et stimulera vos efforts de référencement.

HTML est à peu près aussi simple que possible. Chaque page web, y compris celles générées par WordPress, l’utilise.

Apprendre le HTML aura des avantages bien au-delà de l’utiliser avec WordPress!

Qu’est-ce que le HTML ?

Connu sous le nom de lingua franca du web, le langage de balisage hypertexte (HTML) est un système qui permet aux auteurs d’attribuer un sens au contenu. En utilisant des éléments HTML (mieux connus sous le nom de balises), vous pouvez définir le contenu comme étant des paragraphes, des en-têtes, des listes, des liens et d’autres structures.

HTML ressemble beaucoup à la grammaire.

Cela n’a RIEN à voir avec l’apparence d’une page Web ou son style. La question de la conception de pages Web – mise en page, typographie et couleur – est abordée avec CSS (Feuilles de style en cascade), le langage du style de conception Web.

HTML est développé par le World Wide Web Consortium (W3C). La version la plus récente est HTML5.

Les Balises Que Vous Êtes Le Plus Susceptible D’Utiliser

HTML est un système de balisage conteneurisé. Pour chaque balise ouverte, il existe une balise de fermeture correspondante.

Par exemple, pour le contenu le plus important d’une page ou d’une section d’une page, vous utiliseriez une balise En-tête 1 comme celle-ci.

< h1 > Tout sur HTML </h1 >
La balise open est < h1 > et le conteneur est fermé avec </h1 >

De même, voici comment un paragraphe est marqué:

< p> Il y a plusieurs années, un client et bon ami m’a suggéré d’apprendre WordPress. À l’époque, j’étais contre tout type de CMS. Je ne savais pas que j’en viendrais à l’aimer et à l’enseigner à de nombreuses personnes dans les salles de classe de New York et via un webinaire.</p >

Tout ce que vous avez à faire est d’écrire votre contenu dans l’éditeur de texte, en ajoutant vos balises au fur et à mesure ou après avoir tapé la copie.

Voici une explication des balises les plus courantes que vous utiliserez lors de l’écriture de HTML. Ce sont l’en-tête, la liste, le lien, le regroupement et quelques balises diverses.

ÉTIQUETTES DE TITRE

<h1></h1>

<h2></h2>

<h3></h3>

• Il existe également des étiquettes d’en-tête h4, h5 et h6 qui, en pratique, sont rarement utilisées.
• N’utilisez jamais de balise d’en-tête dans le but de modifier la taille de la police.

BALISES DE LISTE

Vous pouvez créer 3 types de listes avec HTML. Les 2 listes les plus populaires sont les listes ordonnées et non ordonnées.

Une liste non ordonnée est utilisée lorsque l’ordre des articles n’est pas important.

< ul>

< li > fleurs < / li>

< li > légumes < / li>

< li > arbres < / li>

</ ul>

• fleurs
• légumes
• arbres

Une liste ordonnée est utilisée lorsque l’ordre des articles est pertinent.

< ol>

< li > Californie < / li>

< li > Texas < / li>

< li > Floride < / li>

</ ol>

1. Californie
2. Texas
3. Floride

( Dans cet exemple, l’ordre est pertinent et déterminé par les plus grandes populations des États américains.)

REMARQUE : Les listes peuvent également être imbriquées pour créer une hiérarchie d’éléments de liste. Ceci est difficile à faire lors de l’utilisation de l’éditeur visuel.

BALISE DE LIEN

Vous pouvez transformer du texte ou une image en lien en enveloppant le texte ou l’image à l’intérieur de n’importe quelle balise d’ancrage (lien). Bien que la syntaxe pour créer un lien soit toujours la même (<a href= »url » > texte du lien </a >), il existe 2 façons très courantes de le faire.

Pour un lien vers une page WordPress, utilisez:

< a href= »http://domain.com/this-is-the-page-title »>link vers une page WordPress < / a >

Pour un lien vers n’importe quelle page ou ressource, pas seulement une page WordPress, utilisez:

< a href= »http://domain.com/about.html »>link vers une page HTML < / a>

REMARQUE: Il existe en fait une troisième voie. Vous pouvez utiliser la façon spéciale dont WordPress crée des liens avec la syntaxe suivante:

< un index href= ».php ?page_id=356″> lien vers une page de votre site </a

Dans ce cas, vous devrez connaître la page ou l’id de publication de la page vers laquelle vous liez sur votre site. (Chaque page ou publication a un numéro d’identification unique).

BALISES DE REGROUPEMENT

Techniquement, il n’existe pas de « balises de regroupement », mais c’est le meilleur moyen de décrire un ensemble de balises HTML contenant d’autres éléments. Le but de ces balises est de décrire plus précisément la signification de votre contenu.

Par exemple, la balise <header > peut être utilisée pour définir la partie de votre page qui contient des informations principales comme celle-ci:

< en-tête>

< h1 > Une Ligne de cap Avant </ h1>

< img src = »url du fichier image »>

< p > Un paragraphe d’informations suivant l’en-tête et l’image qui tient logiquement ensemble comme un groupe d’informations.</l>

</ en-tête >

Voici quelques balises de regroupement très courantes

<main>

<section>

<article>

<aside>

<header>

<footer>

<nav>

<div>

AUTRES BALISES
Outre la balise, vous trouverez ces balises très utiles lorsque vous travaillez avec l’éditeur de texte.

<img src="url of image file">

<br>

<!-- hidden code or info here -->

<blockquote> or <q>

Bien que ces balises vous permettront de parcourir un long chemin, voici quelques ressources pour vous aider.

● Vous n’avez besoin que de 10 balises HTML (tutoriel)
● Référence de l’élément HTML dans l’ordre Alpha
● Référence de l’élément HTML

Les règles

La beauté du HTML est qu’il n’y a que quelques règles à suivre et qu’elles sont faciles à retenir.

* HTML Est insensible à la casse

Majuscules, minuscules ou casse mixte – écrivez du HTML comme vous le souhaitez. La pratique courante est la minuscule.

* Pour Chaque Balise Ouverte, Il Doit y Avoir une Balise Close

Il y a des exceptions à cela, mais pour le rendre très facile, prenez l’habitude de fermer toutes les balises ouvertes.

* Les balises Sont Fermées Dans L’Ordre Inverse Dans Lequel Elles Sont Ouvertes Dans Un Bloc

Cela peut être un peu difficile à comprendre, alors voici un exemple.

<p >Voici un paragraphe < strong > avec < un href= »url here » > un lien </un > </strong > à l’intérieur et une partie du texte est soulignée.</p >

Notez l’ordre: <p > < fort > < a >….</ a > < / fort > < / p>

* Certains Éléments N’Ont Pas De Balise de Fermeture

Balises telles que < br > et < img > n’ont pas de balise de fermeture car il n’y a aucune raison pour une.

* Utilisez Correctement Le Code HTML Et NE PAS Styliser Votre Page

Par exemple, n’utilisez pas les balises < br > lorsque vous avez une liste. Ou n’utilisez pas les balises < table > pour créer une grille de mise en page.

La Barre d’outils de l’Éditeur de texte

Parce que je trouve efficace d’écrire du code dans l’Éditeur de texte, je n’utilise généralement pas la barre d’outils. Cependant, si vous commencez avec le HTML, vous trouverez peut-être certains des outils utiles pour vous apprendre du HTML. En fin de compte, vous vous rendrez compte qu’il y a plus de balises que vous pouvez utiliser pour baliser correctement votre contenu que ce que la barre d’outils permet.

Plugins HTML

Tôt ou tard, vous remarquerez que si vous créez un paragraphe dans l’Éditeur visuel, vous ne verrez pas de balise < p > enveloppant votre copie lorsque vous la verrez dans l’Éditeur de texte. Ne laisse pas ça te déranger. WordPress générera toujours une balise < p> lorsque la copie apparaîtra sur votre page.

Si vous rencontrez ce problème ou d’autres problèmes avec votre code, vous pouvez utiliser ces plugins.

Toujours Modifier En HTML

Cela garantit que lorsque vous allez créer ou modifier une page ou publier du contenu, votre éditeur s’ouvrira toujours en tant qu’Éditeur de texte et non en tant qu’Éditeur visuel. Cela peut être très utile car WordPress peut supprimer vos balises dans certaines circonstances où l’éditeur visuel est utilisé.

Préserver le balisage de l’éditeur HTML Plus

Si vous rencontrez des problèmes avec la suppression des balises, cela pourrait être votre solution.

Surligneur de syntaxe de l’éditeur HTML

C’est un plugin merveilleux qui transforme l’éditeur de texte fade en une corne d’abondance codée par couleur. Il peut également changer pour un fond noir et des polices plus grandes. Il est préférable d’utiliser ce plugin avec l’option Plein écran.

REMARQUE: Je n’ai pas testé deux ou plusieurs de ces plugins en même temps, donc des incompatibilités pourraient exister.

Comment Les Shortcodes S’intègrent dans l’image

Les Shortcodes sont ce que de nombreux plugins utilisent pour ajouter un formulaire, configurer des colonnes ou ajouter une autre fonctionnalité à une page ou un message. C’est un moyen facile d’ajouter du code comme HTML, javascript, CSS et PHP sans avoir à savoir quoi que ce soit sur ces langages.

Utilisez des shortcodes dans l’Éditeur de texte comme vous le feriez dans l’Éditeur visuel.

Pour les non-initiés, les shortcodes peuvent ressembler à du HTML, mais ils ne le sont pas.

Vous pouvez soit coller un shortcode de cette manière si vous ajoutez un formulaire de contact, par exemple, avec le plugin populaire Contact Form 7,

ou vous pouvez l’utiliser comme ceci pour un plugin,

Contenu pour le côté gauche de la colonne

Contenu pour le côté droit de la colonne

Qui crée deux colonnes sur une page.

Ce shortcode ressemble à du code HTML avec une balise open et close, mais ce n’est pas

Ajout d’un style CSS À l’aide de l’Éditeur de texte

Vous pouvez fournir des propriétés de style CSS au contenu que vous ajoutez dans l’Éditeur de texte. Cela ne peut pas être fait avec l’éditeur visuel par défaut.

Avec l’éditeur de texte, cela peut être fait de 2 manières.

Une façon consiste à ajouter un id ou un attribut de classe à un élément HTML comme dans cet exemple:

< p id = »lead » > Ceci est le paragraphe principal de mon post.</p >

Ensuite, dans votre style.fichier css vous ajouteriez les propriétés de style pour #lead. Peut-être quelque chose comme ça:

# lead

{ font-weight: bold;

text-align: center;

color: #f00; }

La deuxième façon consiste à ajouter un style en ligne. (Cependant, la meilleure approche est de garder votre HTML et CSS séparés comme dans le scénario ci-dessus.) Vous pouvez ajouter un style en ligne comme ceci:

< p style= »font-family: arial, helvetica, sans-serif » > La police pour ce paragraphe est Arial.</p >

REMARQUE : Cela remplacerait toute règle de style de famille de polices pour ce paragraphe qui peut être présente dans un fichier externe ou dans le conteneur < head > de la page.

Conclusion

L’éditeur de texte vous donnera un contrôle total sur la façon dont vous souhaitez formater votre page ou publier le contenu. Vous pouvez utiliser n’importe quelle balise HTML, pas seulement celles de la barre d’outils de l’Éditeur de texte. Le résultat sera un contenu plus facile à lire et à comprendre par les utilisateurs et les araignées des moteurs de recherche. Cela peut prendre un peu de temps pour s’habituer à écrire du HTML, mais au final, vous le trouverez très satisfaisant.

Biographie de l’auteur

Bud Kraus [email protected] est un instructeur WordPress vétéran à New York et enseigne WordPress pour les individus et les groupes via un webinaire. Il travaille également sur des sites pour de petites entreprises. http://joyofwp.com