Bureautique – Gestion commerciale – Images – Sites Internet
Éditeur WordPress
Introduction
Ce qu'il faut connaître pour écrire facilement un article avec WordPress.
Le titre « Éditeur WordPress » fait plus référence à l'humain qui écrit, corrige, valide un article dans le CMS WordPress qu'à l'outil proprement dit. Toute personne ayant le pouvoir d'accepter ou non la publication d'un article dans WordPress est désignée comme « Éditeur ». Les personnes qui n'ont pas ces droits sont des auteurs ou des abonnés (lecteurs).
La version de WordPress en cours lors de la rédaction de ce document est la 3.4
L'interface disponible à l'éditeur
(d'autres éléments peuvent apparaître aux administrateurs et certains éléments sont cachés aux auteurs)
À l'ouverture du panneau d'administration, nous avons une fenêtre comme ci-dessous : Attention, l'affichage peut varier selon les thèmes ou les extensions utilisés.
Kerniolen 56400 Pluneret Tel : 02 97 57 76 55 Mob : 06 11 33 30 11 [email protected] www.formation-auray.fr
La barre d'outils
Barre noire en haut de l'écran, elle apparaît aussi lorsqu'on consulte le site en étant connecté1. Elle permet un accès rapide à
• quelques informations sur WordPress,
• au site en lui même (faites un « clic droit – Ouvrir le lien dans un autre onglet » sur le nom du site) ;
• aux commentaires ;
• à l'ajout de nouveaux éléments ;
• à des informations de référencement (SEO – optimisation pour les moteurs de recherche, non disponible par défaut) ;
• et par l'intermédiaire d'un message de courtoisie, à la possibilité de se déconnecter.
Le menu vertical de gauche
Ce menu possède une double navigation : Le survol de la souris affiche un sous menu latéral alors qu'un clic sur un article déplie les sous-menus verticalement.
Le contenu de ce menu dépend du statut : abonné, auteur, éditeur, administrateur.
La zone principale de contenu
Sidebar et blocs en 1 ou 2 colonnes
Les éléments affichés dans cette zone varient selon la page concernée. Parfois, une zone latérale apparaît à droite, on parle de « Sidebar », comme par exemple en édition d'article, parfois nous avons deux colonnes de blocs, comme ici pour le tableau de bord, parfois encore les blocs se disposent en une seule colonne...
Les options d'écran et l'aide
Tout en haut à droite, sous la barre d'outils, nous pouvons plier ou déplier les onglets « aide » et
« options de l'écran ». Les noms sont trompeurs, il faut comprendre aide et options de l'écran pour la page en cours. Les options sont totalement différentes suivant que l'on est dans le tableau de bord ou dans l'édition d'un article par exemple.
Une fois dépliées, les options de l'écran vont nous permettre d'afficher ou de masquer les blocs qui peuvent nous être utiles.
Gardons ici les blocs « Aujourd'hui », « Commentaires récents » et « Liens entrants ».
Voir illustration 2 page suivante.
1 Noter que si la barre d'outils vous gêne en consultation de site, vous pouvez la désactiver par l'intermédiaire des réglages de votre profil.
Les blocs
Les blocs sont composés d'un contenu et d'une barre de titre. Le survol de cette dernière fait apparaître, à droite, une petite flèche permettant de plier ou déplier le contenu.
Sur l'illustration précédente, l'onglet des options de l'écran est déplié et les blocs « Aujourd'hui »,
« Liens entrants » et « Commentaires récents »ont été repliés.
De plus, par un clic prolongé sur la barre de titre, on peut déplacer le bloc et disposer ainsi son écran pour avoir les éléments les plus importants facilement accessibles (voir illustration 3 ci- dessous).
Illustration 2
Le tableau de bord (survol)
Le tableau de bord est notre page d'accueil lors de notre connexion. Il affiche des informations importantes, comme le nombre de commentaires indésirables, les commentaires récents qu'il convient d'accepter, de refuser ou auxquels on peut répondre.
Selon les plugins (extensions) disponibles, on peut trouver des informations sur les liens cassés, les statistiques...
On peut aussi s'intéresser à l'actualité de WordPress.
La création d'une page ou d'un article (pré-requis)
Article ou page ?
La rédaction de contenu, que ce soit un article ou une page, est relativement identique du point de vue interface. Les outils et les options seront presque les mêmes.
On réserve les pages à du contenu relativement figé, accessible directement par un menu, comme l'accueil, la page de contact, les mentions légales, la description de l'activité...
Les articles sont des contenus plus vivants, par exemple des actualités. Ils peuvent avoir des indications de date, d'auteur, de catégorie. Ce sont souvent les points d'entrée du site, avant même la page d'accueil, car ils peuvent être affichés par les moteurs de recherche comme résultats sur des requêtes ciblées.
Nous allons donc continuer ce tutoriel en nous concentrant sur la rédaction d'un article.
Affichage de la liste des articles
Menu article / Tous les articles
Nous accédons à la liste de tous les articles, affichés avec ou sans extrait selon notre choix, par les boutons au dessus à droite de la liste.
Nous aurons sans doute à modifier les options de l'écran pour n'afficher que le titre, l'auteur, la
Illustration 4
catégorie, les mots clés, les commentaires et la date.
Lorsque la souris survole un article, des liens apparaissent, nous donnant la possibilité de modifier, de faire une modification rapide, de mettre à la corbeille ou d'afficher.
La modification rapide
Permet de faire à peu près tout sur l'article, sauf d'en modifier le contenu.
On peut changer le titre et l'identifiant (utile pour une belle adresse Web de l'article), la date de publication, l'auteur, le statut public ou privé, avec mot de passe éventuel. On peut changer la catégorie, ajouter des mots clefs, autoriser ou non les commentaires et les notifications par ping. On peut aussi changer l'état de publication (brouillon, en attente de relecture ou publié), la mise en avant de l'article et son format.
Attention -et- comme souvent, il faudra que vous vous fassiez prendre plusieurs fois pour ne plus oublier - il est impératif de mettre l'article à jour (bouton bleu) pour que les modifications soient appliquées.
Mise à la corbeille
La mise à la corbeille n'est pas définitive. Dès que la corbeille contient un article, un accès à celle-ci apparaît en haut de la liste des articles.
Pour chaque article de la corbeille, un lien de restauration ou de suppression définitive apparaîtra au survol de souris.
Illustration 5
Illustration 6
Modifier
La page de modification est tellement proche de la page de création que nous allons plutôt décrire cette dernière.
La page de création (ou de modification) de l'article
Par le menu « Articles / Ajouter », nous obtenons la fenêtre « Ajouter un article ».
Commençons par gérer les options de l'écran (en haut à droite, sous le message de salutations) pour n'afficher que « Catégories », « Mots-clefs », « Image à la une » et « Extrait ».
Nous obtenons la fenêtre ci-dessous : (certains blocs ont été repliés)
Barre latérale droite (sidebar)
Nous remarquons la présence d'une zone verticale à droite, nommée « Sidebar » et comprenant les blocs « Publier », « Catégories », Mots-clefs » et « Images à la une »
Le contenu du bloc « Publier » va varier en fonction de l'état de l'article
Illustration 7
Zone principale de contenu
La partie centrale de notre fenêtre, ou zone principale de contenu, comprend :
• Le titre de l'article
• Une zone blanche dans laquelle apparaîtra dans un instant le « Permalien » de l'article.
• Des boutons « Envoyer/insérer » qui nous permettrons d'ajouter des images.
• Une barre de boutons d'édition avec deux onglets (Visuel et HTML)et une série de boutons sur une ou deux lignes, la deuxième ligne apparaissant lorsqu'on appuie sur le bouton des options avancées.
• Une zone blanche d'édition d'article
• En bas de la zone blanche, une zone de statistiques avec le nombre de mots de l'article.
• Pour finir, dans un autre bloc en dessous, la zone d'extrait.
Comme toujours, l'affichage et les boutons disponibles vont fortement varier d'un thème à l'autre.
Nous aurons souvent par exemple un bouton de « Shortcodes » qui n'apparaît pas ici.
Prêtons attention à quelques boutons :
• Bouton « Bloc de citation » qui permettra de mettre en évidence un petit paragraphe
• Bouton « Balise More » qui insèrera une rupture avec la mention « Lire la suite... » ou « En savoir plus... »
• Bouton « Plein écran » qui nous permettra d'avoir une zone d'édition plus large
• Bouton « Options avancées » pour afficher la deuxième ligne de boutons
• Bouton « Paragraphe » qui nous conduit aux styles
• Bouton « Coller du texte Word » qui gèrera les problèmes spécifiques aux textes Word
Visuel ou HTML ?
Deux options pour l'édition d'un texte : L'édition en visuel et l'édition en HTML.
Nous n'aborderons ici que l'édition en visuel, plus simple à priori (L'édition en HTML est très utile mais fera l'objet d'un autre article).
Cependant, il faut avoir à l'esprit que l'éditeur visuel n'assure pas la représentation du rendu final du site. Son rôle est de faciliter le travail d'écriture. Le rendu final dépend de tellement de facteurs qu'il ne pourra jamais être contrôlé. Songez par exemple à la multitude de tailles d'écrans, entre les mobiles, les tablettes, les petits portables, les PC 25 pouces... Songez aussi que les navigateurs n'affichent pas les sites de la même façon.
Création d'un nouvel article
Titre et permalien
Renseignez le titre puis cliquez ailleurs , dans la zone d'écriture par exemple.
Quelques secondes plus tard, dans la zone de statistiques du bas apparaît la mention « Brouillon enregistré à... » et quasiment en même temps, juste sous le titre, apparaît le permalien :
Permalien : http://www.xxxxx.fr/non-classe/le-titre-de-larticle/ Modifier
Il s'agit de l'adresse internet (URL) de l'article. Il faut la rendre plus civilisée.
Un clic sur le bouton « modifier » du permalien va nous permettre de modifier la dernière partie de l'URL surlignée en jaune crème (ici : le-titre-de-larticle). Il faut éviter les articles et mots inutiles, nous pourrions choisir « titre-article »
Notre URL est maintenant
Permalien : http://www.xxxxx.fr/non-classe/titre-article/ Modifier
« Non classé » ne fait pas très sérieux. Il reflète en fait la catégorie choisie pour l'article. Cela se règle dans le bloc « Catégories » de la sidebar de droite. Ajoutez une catégorie si nécessaire et cochez la bonne catégorie en décochant « Non-classé ».
Notre URL devient
Permalien : http://www.xxxxx.fr/categorie/titre-article/ Modifier
Prévisualisation
Au fur et à mesure de l'édition de l'article, il faudra enregistrer le travail en cliquant sur
« Enregistrer le brouillon » dans le bloc « Publier » de la sidebar de droite. Un bandeau jaune apparaitra au dessus de l'article avec un lien vers « Prévisualiser l'article ». L'appel de ce lien, ou un clic sur « Aperçu » dans le bloc « Publier » fera s'ouvrir un deuxième onglet présentant les modifications.
Un deuxième titre
Il peut s'avérer très utile de commencer par un titre de niveau 2, le titre d'article, que nous avons saisi précédemment, étant de niveau 1.
Il est fondamental de saisir ce titre en utilisant le bouton des styles « Paragraphe ». Ne jamais régler l'apparence des titres et paragraphes divers en utilisant les enrichissements (caractères gras, italiques, couleurs...) disponibles parmi les boutons de la barre d'édition.
Les moteurs de recherche ont besoin de connaître la structure du document par les titres de niveaux 1 à 6, ils y repèrent les mots clefs et jugent de l'importance relative de tel ou tel texte.
Les réglages que vous souhaiteriez apporter aux titres se font par l'intermédiaire des feuilles CSS.
Saisie de texte
Saisissons du texte sur une vingtaine de lignes. Pour l'instant, nous ne cherchons pas à insérer d'images.
Le bloc de citation
Pour mettre en valeur un paragraphe : Cliquez sur le bouton « Bloc de citation », rédigez votre citation puis cliquez à nouveau sur le bouton pour quitter le mode « citation ».
Balise more et extrait de texte (voir plus bas)
Il faudrait utiliser maintenant la balise more et le bloc d'extrait, mais pour mieux juger de leur utilité, nous aurons besoin de visualiser l'article. Je fais donc un aparté sur la visualisation.
Aparté : Visualisation et publication
Nous avons déjà utilisé les liens de prévisualisation ou le bouton aperçu, qui créent un onglet supplémentaire dans lequel l'article en cours d'édition s'affiche.
Si depuis ce nouvel onglet vous cherchez à naviguer, par exemple sur la page d'accueil, puis si, par l'intermédiaire des menus, vous cherchez le nouvel article, celui-ci n'apparaît pas. Il est encore enregistré comme brouillon, ce qui apparaît clairement si vous consultez la liste de tous les articles.
Le bloc « Publier »
Nous revenons sur la fenêtre d'édition (en cliquant sur « modifier » si nous avons consulté la liste des articles), et nous cliquons sur « Enregistrer brouillon ». Le contenu du bloc « Publier » se modifie comme ci-dessous.
Illustration 8
Le bouton « Enregistrer brouillon » disparaît
Le bouton « Aperçu » devient « Prévisualiser les modifications » Le bouton « Publier » devient « Mettre à jour »
Les liens « Modifier » permettent de gérer :
• L'état de l'article (Brouillon, en attente de relecture, publié).
• La visibilité de l'article (Public, privé ou protégé- un mot de passe pourra être configuré)
• La date de publication (Pour que l'article n'apparaisse pas tout de suite, si on veux anticiper sur un événement par exemple.)
Onglet de Visualisation et/ou onglet de Prévisualisation
Nous allons afficher plusieurs onglets dans le navigateur.
Nous connaissons la prévisualisation, représentation d'un article en cours d'édition avant qu'il ne soit enregistré en base de données. Cliquons sur « Prévisualiser les modifications » pour ouvrir un onglet..
Nous allons maintenant visualiser l'article après son enregistrement en base de données.
Pour cela, par « clic droit / ouvrir le lien dans un nouvel onglet » sur « Afficher l'article » dans la barre d'outils ou sur le bouton de même nom situé après le permalien. Un autre onglet s'ouvre.
Nous avons maintenant trois onglets :
• Onglet de modification d'article
• Onglet de Pré-visualisation
• Onglet de visualisation
Il est souvent très utile de disposer de ces trois onglets.
Illustration 9
Aparté : L'article est affiché en plusieurs endroits
Notre article apparaitra en plusieurs endroits sur le site.
Il apparaîtra sur la page de l'article bien sûr, celle qui correspond au permalien évoqué en début d'article.
Il apparaîtra aussi sur plusieurs pages regroupant les articles selon divers critères : articles récents, articles populaires, articles de telle ou telle catégorie, articles contenant tel ou tel mot clé... Ces diverses pages affichent donc plusieurs articles, les uns après les autres et selon les thèmes utilisés, ces articles seront tronqués après un certain nombre de caractères. Parfois 100 ou 200 caractères, parfois pas du tout.
Pour une plus grande facilité de lecture, il convient de tronquer soi même l'article là ou bon nous semble.
Deux méthodes pour cela, avec des effets toujours aussi variables selon les thèmes choisis. La
« balise More » et « l' extrait de l'article ». Il faut tester la méthode qui nous convient.
Nous retournons maintenant à l'endroit où nous avions quitté le fil pour brûler les étapes (page 8)
La balise more
Avant d'utiliser la balise More, allons dans notre onglet de visualisation (3ème onglet) et naviguons jusqu'au blog. En faisant défiler la page vers le bas, on constate que tous les articles apparaissent en entier, ou tronqués assez loin (selon les thèmes choisis).
Insérons maintenant la balise « more », dans l'onglet de modification d'article (1er onglet), après trois ou quatre lignes, en plein milieu d'un paragraphe s'il le faut. Mettons l'article à jour.
Allons consulter l'article en prévisualisation (2ème onglet) et naviguons jusqu'au blog. L'article n'affiche plus que les mots précédant la balise more, qui est remplacée par « Lire la suite-> » ou
« en savoir plus... »
Sur l'illustration ci-dessous, le blog affiche deux articles séparés par une ligne, avec la mention
« Lire la suite » de la « balise More ».
Vous verrez mieux la différence en passant maintenant de l'onglet 2 à l'onglet 3.
Petit inconvénient de la balise more
Avec la balise More, on perd un peu de liberté pour les premiers mots de l'article. On doit y placer suffisamment de mots-clés pour fabriquer une bonne représentation du contenu de l'article.
Pour remédier à cette contrainte, on peut utiliser le « bloc d'extrait »
Bloc d'extrait
En dessous du bloc d'édition de l'article se trouve le bloc d'extrait (voir au besoin dans les options de l'écran).
On y rédige un bref paragraphe représentatif de l'article, sans la contrainte de n'utiliser que les premières lignes.
Selon les modèles de thèmes utilisés, la balise more ou l'extrait seront utilisés pour afficher des résumés d'articles.
Pour le thème TwentyEleven utilisé pour cet article, c'est la balise more qui est utilisée, pour de nombreux autres thèmes, dont le présent thème admin, ce sera l'extrait
Illustration 10
Un exemple par l'image, voici deux versions de l'affichage du blog : avec et sans balise more.
Illustration 12
Autres blocs de la sidebar
Mots clefs
Par un bloc de la sidebar de droite, on peut ajouter des mots clés.
Attention, ceci ne sert pas directement au référencement, il ne s'agit pas des mots clefs que l'on remplissait dans le temps en tête de page pour renseigner les moteurs de recherche. Il s'agit ici, lorsque vous aurez beaucoup d'articles, de pouvoir les regrouper par des nuages de mots clefs, ou par le signalement d'autres articles contenant les mêmes mots clefs. On voit souvent cela dans les blogs, en bas des articles, les mentions « ceci devrait vous intéresser » ou « lire aussi... » qui présentent une série d'articles pour compléter la lecture sur le même thème.
Image à la une
Si le thème utilise cette fonction, mettre une image à la une pourra afficher l'image en tête d'article, ou dans le bandeau, ou dans d'autres endroits encore. Une fois encore, nous n'avons pas les mêmes résultats selon le thème WordPress choisi. Voir le paragraphe suivant pour l'insertion des images.
Insérer une image
Avant propos
Attention : la gestion des images nécessite un soin particulier si vous ne voulez pas pénaliser votre site. Il est très important d'utiliser des images de taille correspondant à l'affichage souhaité et optimisées pour le Web. Tous les éditeurs d'image dignes de ce nom vous proposerons cette optimisation.
Les images ne sont pas stockées dans la base de données, mais dans un répertoire de votre site.
Songez à en faire des sauvegardes régulières par FTP et pour cela, il vaut mieux éviter les accents dans les noms de fichiers.
Il est donc judicieux de préparer son image avant importation, avec un nom de fichier correct, sans espaces et sans accents.
Bouton d'insertion
Au dessus de la barre des boutons de la fenêtre d'édition d'article, on trouve un petit bouton permettant d'insérer des images, vidéos, sons.
L'appui sur ce bouton fait apparaître une fenêtre d'importation sur laquelle on fait glisser les images préalablement préparées.
On peut aussi naviguer dans les disques de l'ordinateur jusqu'au dossier des images préparées.
On peut également naviguer sur Internet (depuis le Web), dans les images préalablement insérées dans
notre bibliothèque de médias (Bibliothèque) voire dans ce même article (galerie).
Illustration 13
On glisse donc une image optimisée pour le Web et de taille raisonnable dans la zone « Déposez vos fichiers ici »
Le nom du fichier apparaîtra dans notre bibliothèque, il faut donc un nom explicite.
Le titre s'affichera sur le site, au survol de la souris. Il est en bon français, avec majuscules.
Le texte alternatif s'affichera si l'image n'est pas disponible.
Il renseigne aussi les moteurs de recherche.
La légende s'affiche sur le site web, à l'intérieur d'un cadre englobant aussi l'image.
La description appa- raîtra si l'on clique sur l'image et que l'on a choisi comme cible du lien l'adresse du fichier joint.
L'alignement gère la position de l'image par rapport au texte
Une fois tout rensei- gné, Enregistrez les modifications avant d'insérer dans l'arti- cle ou d'utiliser com- me image à la une, puis mettre à jour
Il est très important de prendre le temps de bien renseigner les champs de l'image. C'est utile en particulier pour le référencement.
Modifier une image dans l'article à postériori
Une fois l'image en place, il suffit de cliquer dessus dans l'éditeur de l'article pour faire apparaître deux boutons. Un bouton de suppression et un bouton de modification.
Je ne détaille pas les fenêtres de modifications qui apparaissent, si vous en êtes arrivés à ce stade de l'article, c'est que vous saurez vous débrouiller.
Je ne détaille pas l'édition du site en HTML, ce sera l'objet d'un prochain article
Illustration 15
Table des matières
Éditeur WordPress...1
Introduction...1
L'interface disponible à l'éditeur...1
La barre d'outils...2
Le menu vertical de gauche...2
La zone principale de contenu...2
Sidebar et blocs en 1 ou 2 colonnes...2
Les options d'écran et l'aide...2
Les blocs...3
Le tableau de bord (survol)...4
La création d'une page ou d'un article (pré-requis)...4
Article ou page ?...4
Affichage de la liste des articles...4
La modification rapide...5
Mise à la corbeille...5
Modifier ...6
La page de création (ou de modification) de l'article...6
Barre latérale droite (sidebar)...6
Zone principale de contenu...7
Visuel ou HTML ?...7
Création d'un nouvel article...8
Titre et permalien...8
Prévisualisation...8
Un deuxième titre...8
Saisie de texte...8
Le bloc de citation...9
Balise more et extrait de texte (voir plus bas)...9
Aparté : Visualisation et publication...9
Aparté : L'article est affiché en plusieurs endroits...11
La balise more...11
Petit inconvénient de la balise more...12
Bloc d'extrait...12
Autres blocs de la sidebar...14
Mots clefs...14
Image à la une...14
Insérer une image...14
Avant propos...14
Bouton d'insertion...14
Modifier une image dans l'article à postériori...16
