Rédiger un article avec WordPress

Cet article est un tutoriel pratique pour apprendre à rédiger un texte pour le web avec WordPress. Chaque page web doit avoir un titre H1 unique contenant le mot-clef de la page (avec un bon thème WP le titre de l’article est automatiquement en H1 comme ici). On commence par l’introduction de l’article qui s’affichera dans les listes d’articles et on insère ensuite la balise Lire la suite… Dans l’onglet Document on choisit une image de petite dimension (Image mise en avant). On doit aussi modifier le Permalien (WP reprend automatiquement le titre H1 de l’article qui est souvent trop long). On choisit la Catégorie et les Étiquettes qui vont permettre de classer l’article.

Normalement pour bien référencer cet article j’aurais développé le thème Rédiger un article avec WordPress en présentant les différentes variantes du mot-clef et en les développant. Ce n’est pas le but de cet article.

Premier titre (H2)

La hiérarchie des titres doit être respectée; il ne doit y avoir qu’un titre H1, le premier sous-titre devra donc être un H2. Je peux ajouter des sous-titres H3 > H4 à ce bloc puis retourner au niveau H2… Jamais H2 > H4 directement. Une page web est un document structuré selon des standards à respecter pour être facilement référencée.

L’éditeur visuel de WP permet de marquer le texte en code HTML sans avoir besoin de connaître ce code; on peut basculer vers l’éditeur HTML pour intervenir directement dans le code. Quand on visualise la page dans le navigateur on peut voir le code source de la page qui a été généré par WP en faisant Ctrl+U. C’est le fichier HTML de la page.

L’article qu’on rédige dans l’éditeur va venir s’insérer dans un assemblage formé de l’en-tête, des barres latérales et du pied de page. Chaque partie du code est indépendante et le code PHP fait l’assemblage pour le servir au navigateur. Le code PHP permet de servir une page dynamique, l’affichage des blocs entourant le contenu de l’article pourront varier selon les besoins. (Generate Press permet avec le menu tout en-bas de l’éditeur WP de gérer finement la mise en page de chaque article)

Code HTML (H3)

Je commence un nouveau paragraphe; dans le code source de la page généré par WP cette partie du texte sera entourée de 2 balises HTML <p>texte…</p>. Le mot suivant mis en gras Bold (menu B) donnera le code HTML <strong>Bold</strong>. C’est un code simple, il suffit de connaître les balises principales à utiliser. Chaque balise a une valeur sémantique: la balise H1 sert à définir le titre du document, il n’y en a qu’une par document; cette balise ne sert pas à afficher du texte en gros caractères comme on le voit souvent. Pour différencier un paragraphe du contenu d’un paragraphe d’une colonne on crée des classes: <p class=“contenu>texte</p> et <p class=“colonne>texte</p>.

Code CSS (H3)

Le thème gère la feuille de style, le fichier CSS. Un bon thème comme Generate Press permet de modifier cette feuille pour la personnaliser et de tout centraliser dans 1 seul fichier. La mise en page se fait donc pour tout le site à partir de ce fichier. Le code CSS est simple à comprendre mais complexe à mettre en pratique; on définit des règles de mise en page pour chaque élément. Par exemple la couleur et la taille des titres H2 va être définie pour tout le site; ensuite les titres H2 du contenu, des colonnes, du pied de page ou de l’en-tête vont pouvoir être traités spécifiquement en définissant des classes.

Dans le code source d’une page (le fichier HTML) on voit que le thème à créé de très nombreuses classes qu’elle utilise dans le code HTML. On peut ainsi mettre en page n’importe quel élément spécifiquement. Et on peut créer nos propres classes pour faire exactement ce qu’on veut.

On peut intervenir dans la mise en page de chaque page pour modifier les réglages par défaut mais il faut faire attention, il y a 2 façons de procéder dont une à éviter:

  • J’ai mis ce mot en rouge en utilisant le menu de l’éditeur WP. Le code HTML généré est <span style=“color: #ff0000”>rouge</span>. C’est du codage en ligne à éviter; pour le modifier il va falloir revenir sur chaque page du site.
  • Il faut plutôt définir des classes personnalisées dans le fichier CSS. En y ajoutant la règle .important {color: #ff0000; font-size: 120%;} qui définit la classe important je pourrai ensuite utiliser la classe n’importe où sur le site: texte important. Le code précédent serait donc <span class=“important”>texte important</span> . Et pour changer cette couleur sur toutes les pages du site il suffit de modifier la classe. (Avec le thème Generate Press on peut ajouter des classes facilement soit en utilisant le bouton Avancé soit en utilisant l’éditeur HTML).

Les traitements de texte modernes fonctionnent aussi avec les codes HTML et CSS. Il faut donc faire attention en copiant un texte et en le collant de ne pas coller le formatage aussi ce qui crée beaucoup de problèmes.

Code PHP

Le code PHP est le plus complexe mais WP permet de (presque) tout gérer sans devoir intervenir dans le code. Le principe d’un site dynamique est que tout le contenu est dans une base de données. Quand un internaute demande une URL (clique sur un menu ou un lien) le moteur PHP du serveur assemble la page demandée, il va chercher les informations nécessaires dans la base de données et les affiche. On peut donc avoir des assemblages très différents selon les sortes de pages ou les catégories d’articles en modifiant la disposition des colonnes et des widgets qu’elles contiennent.

Les différents widgets qu’on ajoute dans les colonnes latérales et le pied de page sont des fonctions PHP qui peuvent s’afficher ou non selon les conditions. Exemples de widgets: derniers articles, les plus populaires, derniers commentaires, calendrier, image, menu,,,

On intervient dans le code PHP en ajoutant des extensions; ces extensions ajoutent des menus à l’interface de l’éditeur WP et des widgets à utiliser que l’on paramètre selon ses besoins. On peut aussi ajouter ses propres fonctions (facilement avec Generate Press); on en trouve dans des bibliothèques qu’il suffit de copier.

Images (H2)

Pour ajouter une image dans un paragraphe on la télécharge dans la bibliothèque des médias puis on l’insère dans le texte avec le bloc Image. J’ai ajouté 2 images avant mon bloc Paragraphe et je les ai alignées des 2 côtés. J’ajoute ensuite une image centrée avec une légende.

Cultiver son jardin
Cultiver son jardin

Les robots d’indexation ne lisent pas les images. Pour les référencer il faut renseigner la balise Alt de chacune. On peut le faire dans la bibliothèque des médias (je renseigne systématiquement les 3 balises Texte Alternatif, Titre et Description sur Chroniques de Chertsey) ou quand on utilise l’image.</span>Les robots d’indexation ne lisent pas les images. Pour les référencer il faut renseigner la balise Alt de chacune. On peut le faire dans la bibliothèque des médias (je renseigne systématiquement les 3 balises Texte Alternatif, Titre et Description sur Chroniques de Chertsey) ou quand on utilise l’image.

</span>Plus une image est lourde plus elle va être longue à télécharger. Les fichiers images doivent donc toujours être édités pour le web. Une image de 5.000 pixels de large ne sert à rien puisque l’affichage d’un site est souvent limité à moins de 1.000 pixels. La page d’accueil du site et les différentes listes d’articles ne devraient utiliser que des images de petites tailles (400 px max.) pour que Google les juge performantes et les indexe mieux. Dans les articles on peut utiliser des images plus grandes et en cas d’image très grande on affiche une image moyenne et un lien renvoie au fichier média de l’image grand format.

Rivière Jean-Venne, Chertsey
En cliquant sur l’image on a le fichier média pleine taille

L’extension Yoast SEO (H2)

L’extension est essentielle pour un bon référencement mais son paramétrage est complexe. Elle permet d’optimiser le référencement du site en modifiant les balises <title> et <description> de chaque page. Avec la balise H1 se sont les 3 points principaux d’un bon référencement.

Comme toutes les extensions elle vient ajouter des menus à l’interface WP. Pour la rédaction des articles elle ajoute le bloc Yost SEO en-bas de l’éditeur WP. J’ai pu ainsi écrire un titre et une description optimisés pour référencer cet article. Dans les résultats de recherche de Google on trouvera exactement ce texte; sinon Google aurait repris automatiquement le titre H1 et les premiers mots de l’article.

L’extension permet aussi (avec beaucoup d’autres fonctions) de gérer les URL des articles. Quand un site a des URL du type: nom-de-domaine/categorie/article/ on ne peut plus modifier la catégorie de l’article sans casser l’URL: il faut aviser le robot d’indexation que l’article a changé de catégorie et qu’il a une nouvelle URL et rediriger les visiteurs habituels vers la bonne adresse. Il faut donc choisir le réglage des URL suivant: nom-de-domaine/article/. Un petit détail qui évite beaucoup de tracas.

Autres extensions (H2)

Sécurité (H3)

Dès l’installation du site il faut se protéger sérieusement, c’est la première extension à installer: j’ai choisi iThemes Security pour ce site. Dès sa mise en ligne un site internet est constamment testé par des robots qui cherchent une faille pour le contrôler; la sécurité est complexe, l’hébergeur du site offre une première protection mais il faut la compléter. Avec des mots de passe forts et des noms d’utilisateurs personnalisés pour le site et la base de données on a une bonne protection. L’extension de sécurité une fois bien paramétrée complète la protection.

Jetpack (H3)

Extension standard développée par WP offrant plein de fonctions sur le cloud de WP.

Images (H4)

Améliore la performance des images.

Spam (H4)

Filtre anti-spam pour les commentaires.

Statistiques (H4)

Statistiques de base sur la fréquentation du site; il y a d’autres fonctions.

Et les autres (H3)

  • Redirection: quand on supprime ou modifie l’adresse (URL) d’une page ou d’un article l’extension permet de rediriger le visiteur vers la bonne adresse pour éviter les erreurs 404.
  • Lite Speed Cache: pour améliorer la performance du site, la vitesse de chargement de chaque page; Google favorise les sites performants.
  • Lightweight Grid Columns: l’éditeur de WP ne permet pas de créer des colonnes dans les paragraphes, il faut donc ajouter une extension au logiciel pour pouvoir le faire.
  • Les extensions sont indispensables mais il faut faire attention car certaines peuvent entrer en conflit si elles font double emploi; il faut les installer une à la fois et tester que tout va bien, ne pas en abuser.

Sémantique (H2)

J’ai une hiérarchie de titres, sous-titres et paragraphes. Pour terminer la leçon sur la sémantique d’un texte on peut ajouter que pour une énumération on utilise une liste:

  • Item 1
  • Item 2
  • Item 3

Pour une citation on utilise le bloc Citation. Pour donner du poids à un mot on utilise la balise B (code HTML <strong>) et pour mettre une « emphase » la balise I (code HTML <em>). La sémantique respectée permettra à un lecteur d’écran de comprendre le texte et de donner les bonnes intonations. Si le lecteur d’écran comprend facilement le robot d’indexation comprendra aussi et la page sera facilement référencée.

Nom de l’auteur

Laisser un commentaire