Créer un article avec WordPress

Voici un guide pour créer un article propre, correct et lisible avec WordPress. Il s’adresse principalement aux débutants et aux utilisateurs ne se préoccupant uniquement que de la partie éditoriale. De fait nous éviterons au maximum d’entrée dans des aspects techniques.

wordpress-banner

Création et édition d’un article

Un fois que vous accéder à voter compte WordPress, il faut cliquer sur l’onglet article dans la part de gauche puis sur le bouton ‘Ajouter article’.

creer_article

Nous allons nous intéresser à la partie supérieure de la page :

creer_article2

L’éditeur de WordPress a des fonctions similaires à un traitement de texte de type Microsoft Word ou Open Office concernant la mise en forme.

menu1_wordpress

En cliquant sur le bouton situé à droite, on peut déployer le menu en totalité :

menu2_wordpress

La principale différence avec un traitement est que le style des différents éléments du texte (police, taille, etc) sont déjà paramétrés pour chaque template.

Ce qui signifie que copier/coller un article du traitement de texte vers WordPress dans l’onglet ‘Visuel’ ne garantit pas une mise en forme identique à celle du texte originel.

Il est donc souvent nécessaire de faire des retouches dans l’onglet ‘Text’ où le code HTML est apparent.

onglet_text

En effet WordPress n’applique pas toujours de façon définitive les changement demandés dans l’onglet ‘Visuel’ (exemple : un texte qui devrait être aligné au centre reste aligné à gauche après plusieurs tentatives).

Cependant je recommande de créer le contenu dans un traitement de texte afin d’avoir une sauvegarde du texte.

De cette façon le texte est toujours disponible en cas d’erreur technique sur votre site. Imaginons que vous ayez écrit votre article uniquement dans WordPress et que la connexion plante au moment de la publication, vous risqueriez de perdre tout votre travail.

L’utilisation de quelques balises HTML peuvent faire la différence et vous épargner quelques bugs agaçants et chronophages.

Titres

On peut classer les titres en 3 niveaux de profondeur :

Titre 1 : <h1>Titre 1</h1>

La balise <h1> correspond au titre de votre article. C’est le « gros » titre qui n’est pas censé apparaitre dans le corps du texte.

Titre 2 : <h2>Titre 2</h2>

La balise <h2> permet d’identifier les différentes parties d’un article.

Titre 3 : <h3>Titre 3 </h3>

La balise <h3>, <h4>, etc permettent d’identifier les sous-sections.

Dans un article classique il est rare d’aller jusqu’à l’utilisation des balises h4 et plus, davantage utilisées pour du contenu technique.

Paragraphe

Si WordPress ne peut adapter le style existant dans le traitement de texte il respecte généralement la structure des paragraphes. Si néanmoins la structure n’est pas respectée, on peut utiliser la balise <p> pour encadrer le texte.

Paragraphe : <p>Ceci est le texte du paragraphe</p>

Un problème récurrent est  le saut de ligne qui ne correspond pas au texte initial ou qui ne s’applique pas bien que plusieurs aient été sautées dans  l’onglet visuel. L’ajout du code suivant permet d’ajouter une ligne ‘vide’ après ou devant un paragraphe ou une image :

<p>&nbsp ;</p>

Alignement

Je trouve que les fonctions d’alignement sont relativement instables sur WordPress. C’est pourquoi je recommande de faire l’alignement directement en HTML.

<p style="text-align: center;">paragraphe ou image</p>
<p style="text-align: left;"> paragraphe ou image</p>

<p style="text-align: right;"> paragraphe ou image</p>

paragraphe ou image

Il est préférable d’appliquer l’alignement justify dans la feuille de style , en particulier sur la balise p, afin de ne pas avoir à réitérer l’opération systématiquement.

Balise « Lire la suite »

Cette balise est relativement importante pour deux raisons :

    • Elle permet d’avoir un aperçu rapide des derniers articles.
    • Elle limite l’affichage de l’article et donc les ressources pour afficher votre page principale.

Exemple d’affichage avec l’insertion de la balise :

lire_la_suite

Exemple d’affichage sans appliquer la balise : tout l’article apparaît. On voit apparaitre le deuxième article seulement en bas de page. Cela génère un manque de visibilité pour les autres contenus et impose un contenu dense directement à l’utilisateur.

article_sans_lire_la_suite

Pour insérer la balise « Lire la suite » il suffit de se rendre dans l’onglet visuel et d’ajouter la balise à l’endroit souhaité, de préférence après l’introduction et une image d’illustration qui permet d’améliorer le visuel de l’article et la probabilité d’être consulté.

add_lire_la_suite

Les images

Il est préférable d’insérer une image ayant une largeur de 800px minimum ce qui permettra de prendre toute la largeur de la page. Dans l’exemple présenté, la largeur originale de l’image est de 2000px. Je l’ai inséré en format « Grande » ce qui lui donne une largeur de 1000 px. Attention aux images de trop grande taille : elles ralentiront pour sur l’affichage de votre page et sans aucun doute la patience de vos visiteurs. Si possible, optimisez la résolution de votre image à 72 px, les résolutions de 300 px sont bonnes pour des sites spécialisés dans l’image sinon il y a peu de chance que l’on fasse la différence.

insertion_img

L’image prend toute la largeur. Les templates WordPress étant tous au format responsive, l’image s’adaptera systématiquement à la largeur de la page. Donc autant voir les choses en grand et profiter pleinement des visuels, qui attire l’attention du lecteur et permette de faire des pauses visuelles si l’article est long.

inser_pic1

Par opposition voilà la même image en taille ‘moyenne’.

inser_pic2

Le visuel est plus discret et donne beaucoup d’impact et de dynamisme.

Si votre image doit être éditée afin d’optimiser son affichage et que vous n’avez pas de logiciel graphique sur votre machine, vous pouvez utiliser l’outil en ligne pixlr qui est très simple et efficace.

Voilà un ensemble de bonne pratique pour vous donner la main sur votre article et éviter les mauvaises surprises. J’utilise WordPress depuis 2008 et j’édite maintenant mes articles directement en HTML.

CARACTÉRISTIQUES DE L’IMAGE

Si l’on regarde plus en avant les détails de l’image on s’aperçoit qu’il y a plusieurs champs à remplir.

img_caracteristique

Titre : c’est le texte qui apparaît quand on laisse le curseur de la souris sur l’image. Cela peut servir à fournir le nom de l’image, une information ou une fiction spécifique.

image_title

Légende : c’est le texte qui s’affiche en dessous de l’image. Cela sert à présenter l’image, donner une explication spécifique ou indiquer la source de l’image. La légende n’est pas nécessaire si vous n’avez besoin d’ajouter d’informations supplémentaires.

image_legend

Texte alternatif :
On peut considérer ce champ comme le plus important. C’est le texte qui s’affiche à la place de votre image si elle ne peut s’afficher sur l’écran de l’utilisateur. Dans notre cas, c’est le texte « bannière wordpress » s’afficherait. Le texte alternatif est nécessaire pour les raisons suivantes :

  • Il rend le contenu ou la fonction de l’image accessible aux utilisateurs ayant des troubles visuels ou cognitifs.
  • Il est affiché par les navigateurs ne supportant pas les images ou lorsque l’image n’est pas disponible.
  • Il ajoute aux images un contenu sémantique et une description qui peuvent être lus par les moteurs de recherche ou utilisés pour déterminer le contenu de l’image à partir de son contexte.

Si vous ne devez remplir qu’un champ c’est celui du texte alternatif.

Description :
La description est principalement utilisée pour des sites avec du contenu principalement illustratif, un portfolio ou un site dédié à l’art ou à la photographie. Lorsque l’on ajoute une image dans un article, on peut en effet choisir l’URL de destination lors du clic sur la miniature.
Au lieu d’ouvrir l’image seule dans une fenêtre, elle s’ouvrira sur une page spécifique en taille réelle et accompagnée de sa description et de sa légende. La description n’est donc pas indispensable si votre contenu n’est pas centré sur l’image.

CODE HTML (POUR ALLER PLUS LOIN)

Nous avons vu les différentes éléments de l’image via l’éditeur de WordPress. Maintenant regardons de plus près l’affichage HTML de l’image dans la partie Texte. Vous pourrez ainsi éditer votre image sans avoir besoin de repasser par la partie visuel.

caption (légende)

caption_code_html

La balise “caption’ concerne la légende. Comme on le voit elle englobe la totalité de la balise image. Les éléments id, align, et width sont les paramètres de la légende

src (source)

<img src=" uploads/2016/05/2000px-WordPress_logo.svg_-300x68.png" title="bannière WordPress"  
alt="bannière wordpress" width="300" height="68" class="size-medium wp-image-66" />

la source indique le chemin où se trouve l’image.

title (titre)

<<img src=" uploads/2016/05/2000px-WordPress_logo.svg_-300x68.png" title="bannière WordPress"  
alt="bannière wordpress" width="300" height="68" class="size-medium wp-image-66" />

title permet d’afficher le titre.

alt (texte alternatif)

<<img src=" uploads/2016/05/2000px-WordPress_logo.svg_-300x68.png" title="bannière WordPress"  
alt="bannière wordpress" width="300" height="68" class="size-medium wp-image-66" />

alt permet d’afficher le texte alternatif.

Dimension et style

<img src=" uploads/2016/05/2000px-WordPress_logo.svg_-300x68.png" title="bannière WordPress"  
alt="bannière wordpress" width="300" height="68" class="size-medium wp-image-66" />
width="300"

c’est la largeur de l’image, mesurée en pixel.

height="68"

c’est la hauteur de l’image, mesurée en pixel.

class="size-medium wp-image-66"

c’est une classe attribuée automatiquement par wordpress sur les images. Le numéro 66 correspond au numéro de l’image.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*