Nous avons vu, dans le cours précédent, comment publier un article ou une page dans WordPress. Et bien maintenant, il est temps de voir comment mettre le contenu en forme pour que ton site soit agréable à lire.
L'éditeur de texte va te permettre de structurer les éléments de ton site : texte, images… Comme on peut le constater sur la figure ci-dessous, le champ numéro 1 te permettra de saisir le titre de l'article ou de la page. La zone de saisie numéro 2 permettra de rédiger le contenu.
Tu remarqueras la barre d'outils qui ressemble fortement à celle que l'on peut trouver dans les logiciels de traitement de texte. On retrouve les icones de mise en gras, en italique, d'ajout de listes à puces ou encore les icones d'alignement.
La liste déroulante, à gauche de la barre d'outils, permet de choisir si le texte est un paragraphe, un titre de niveau 1 à 6 ou un texte préformaté. Je te conseille de bien structurer ton contenu et de commencer tes titres au niveau 2. Le titre de niveau 1 sera ton titre principal. Sans rentrer dans le détail, structurée ainsi, ta page sera mieux optimisée pour le référencement. En effet, une page ne devrait avoir qu'un seul titre de niveau 1 mais elle peut en avoir plusieurs de niveau 2, 3, 4...
Attention ! L'apparence du contenu dans l'éditeur de texte du back office sera très certainement différente à celle affichée sur le site. Et pourquoi me diras-tu ? Parce que la charte graphique ou le thème de ton site peut avoir défini un style et des couleurs qui lui sont propres.
En voici un petit exemple sur l'image ci-dessous :
Ici, j'ai ajouté un code CSS pour indiquer au navigateur d'afficher tous les titres de niveau 2 en vert et en gras. Le code CSS est la partie qui va venir « embellir » ta page web tandis que le HTML va structurer les éléments de la page avec des paragraphes, des niveaux de titre, des liens, des images...
Mais rassure toi, nous ne sommes pas là pour apprendre le code. L'éditeur de texte va se charger d'écrire le HTML pour toi. Le thème, lui, proposera sûrement des options pour changer les styles et les couleurs sans avoir à écrire du code CSS. On y reviendra plus tard dans cette formation WordPress 😉
Bref ! Tout ça pour dire qu'il ne faut surtout pas mettre des couleurs dans tous les sens à travers l'éditeur de texte de WordPress. Contente toi de mettre le contenu avec ses paragraphes, ses titres, un peu de mise en gras ou italique si tu veux MAIS je me répète ! NE JOUE PAS AVEC LES COULEURS dans l'éditeur de texte ! C'est la feuille de style CSS qui s'en occupera.
Maintenant qu'on a un peu de contenu, tu voudras probablement ajouter des liens… Pour rappel, les liens hypertextes sont les zones de texte cliquables qui renvoient vers une autre page de ton site ou vers un autre site.
La manipulation est simple, il suffit de :
Maintenant que tu sais insérer du texte, c'est bien, mais tu vas sûrement vouloir insérer des images, non ? Et oui, tu voudrais bien insérer une ou plusieurs images pour que ton site soit plus attractif. Et comme on dit, une image vaut mille mots...
WordPress permet d'ajouter des médias tels que les images, les documents ou encore de la vidéo ou de l'audio.
Voici les formats de médias autorisés par WordPress :
On pourrait ajouter d'autres formats de médias afin de personnaliser la liste ci-dessus, comme par exemple un format d'image vectoriel tel que « .svg ». Mais, cela suppose une intervention dans le code source de WordPress et on ne va pas s'attarder là-dessus étant donné que cette formation WordPress est pour débutants.
Tout simplement en cliquant sur le bouton « Ajouter un média » qui se trouve au-dessus de la barre d'outils.
Une fenêtre modale va s'ouvrir et tu pourras :
Rien de bien compliqué ici, je suis certain que tu sais comment choisir un fichier de ton ordinateur pour le télécharger dans WordPress.
MAIS ATTENTION ! Sur un serveur web, les noms de fichiers ne devront pas avoir d'espace ou de caractères spéciaux… Sinon tu risques d'avoir des surprises…
Si tu veux envoyer ton image « Mes vacances d'été à Ibiza.jpg » que tu as sur ton ordinateur, tu ferais bien de la renommer en « mes-vacances-ete-ibiza.jpg ».
Une fois le fichier téléversé, quelques réglages restent à faire.
Il faudra renseigner les champs de titre, de légende si besoin, de texte alternatif et pourquoi pas une description. Cela n'a rien d'obligatoire mais c'est mieux pour le référencement. Google appréciera d'associer un mot clé à une image.
Ensuite tu pourras aligner ton image à gauche, à droite ou au centre.
Le réglage « Lier à » permet de faire un lien vers le fichier média (autrement dit, cela va l'ouvrir en grand dans le navigateur en cliquant dessus). Tu peux également faire un lien personnalisé vers une autre page ou laisser à « Aucun » si tu ne veux pas que ton média soit cliquable...
Une fois les réglages réalisés, il ne reste plus qu'à cliquer sur le bouton « Insérer dans la page ». Il y aura toujours moyen de revenir sur les réglages en cliquant dans l'image dans l'éditeur de texte.
La bibliothèque des médias, accessible via la menu « Médias ->Bibliothèque » est l'endroit où seront stockés les médias. Petit à petit, tu vas te constituer une base de médias. Les filtres de recherche te permettront de chercher un média par type, par date… Cela te sera utile quand tu commenceras à avoir une masse de média dans ton site...
On peut également ajouter des médias via la bibliothèque en passant par le menu « Media -> Ajouter ».
On a vu beaucoup de choses, te voilà maintenant capable de rédiger une page, de la mettre en forme avec du texte et des images.
