Site à réaliser : [WordPress] Mon Blog

Site de démarrage : WordPress [repli]

Tuto Codeur.com : https://www.codeur.com/…/creer-site-wordpress

A. Préparation de l'intégration des contenus

Installation (chargement et activation) d'un nouveau thème

[But] Changer l'apparence du Blog. On installera le thème Twenty Sixteen (édité par WordPress), lequel viendra se substituer au thème utilisé par défaut (Twenty Twenty).

Remarque. — Twenty Sixteen est gratuit.

# Début de Procédure

# Coût : 3 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Apparence > Thèmes

Écran Thèmes :

Se reporter au panneau du thème Twenty Sixteen

VALIDER le choix du thème en cliquant sur le bouton Activer.

Fin de Procédure #

Réponse du back-office : « Nouveau thème activé. Aller sur le site ».

Test à réaliser côté front-office : on observera le changement de thème en rafraîchissant la page (touche F5 du clavier).

Installation (chargement et activation) de l'extension Classic Editor

[But] Remplacer le nouvel éditeur (Gutenberg) par l'ancien, plus classique (afin de simplifier la future intégration des contenus). On installera l'extension Classic Editor, laquelle viendra se substituer au module d'édition utilisé par défaut.

# Début de Procédure

# Coût : 4 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Extensions > Ajouter

Écran Ajouter des Extensions :

1. Se reporter au panneau de l'extension Classic Editor
2. Cliquer sur le bouton Installer (cela aura seulement pour effet de charger l'extension)

VALIDER l'installation de l'extension en cliquant sur le bouton Activer.

Fin de Procédure #

Réponse du back-office : « Extension activée ».

Pas de test à réaliser : l'intégration des contenus viendra confirmer que l'extension a bien été activée.

Remarque. — Le nouvel éditeur de WordPress, Gutenberg, est intéressant (il permet de créer des blocs réutilisables d'une page à l'autre), mais pose un vrai problème d'utilisabilité, car il oblige l'utilisateur à intégrer les éléments de contenu (en-têtes de section, paragraphes, images, etc.) les uns après les autres, bloc par bloc.

Suppression de l'article créé lors de l'installation

[But] Rendre le back-office plus lisible. La suppression de l'article automatiquement créé, lors de l'installation de l'outil, se fera en deux temps. (Idem avec les pages, voir infra)

# Début de Procédure

# Coût : 7 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Articles

Écran Articles :

1. Survoler l'article
2. Cliquer sur Corbeille (entre Modification Rapide et Afficher)
3. Cliquer sur le lien Corbeille (au-dessus de la liste déroulante Actions Groupées)
4. Survoler à nouveau l'article

VALIDER la suppression de l'article en cliquant sur Supprimer Définitivement.

Fin de Procédure #

Réponse du back-office : « 1 publication supprimée définitivement ».

Test à réaliser : après rafraîchissement de la page (touche F5), on observera la disparition de l'article.

Remarque. — L'outil donne aussi la possibilité de supprimer plusieurs articles en même temps. Il faudra sélectionner les articles à supprimer ; sélectionner l'action Mettre à la Corbeille (dans la liste déroulante Action Groupées) ; puis cliquer sur le bouton Appliquer. On cliquera ensuite sur le lien Corbeille, puis on répètera l'exercice (comme avec un seul article) pour les supprimer définitivement.

Suppression de la page créée lors de l'installation

[But] Voir supra.

Procédure : voir supra, à ceci près qu'il faudra se reporter à l'écran de gestion des pages, et non celui des articles.

# Coût de Procédure : idem #

B. Intégration des contenus

Étape 1 : Mettre à jour le titre et le slogan du Blog

[But] Définir l'identité du Blog : son titre et son slogan. On substituera aux titre et slogan par défaut (My Blog /My WordPress Blog) le titre et le slogan de notre Blog (Mon Blog/Le slogan de mon Blog).

# Début de Procédure

# Coût : 4 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Réglages > Général

Écran Réglages Généraux :

1. Champ Titre du Site : remplacer le titre initial du site (My Blog) par le nouveau (Mon Blog)
2. Champ Slogan : remplacer le slogan initial (My WordPress Blog) par le nouveau (Le slogan de mon Blog)

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer les Modifications.

Fin de Procédure #

Réponse du back-office : « Réglages enregistrés ».

Test à réaliser : après rafraîchissement de la page (touche F5), on observera l'apparition du nouveau titre et du nouveau slogan.

Étape 2 : Créer le menu

[But] Mettre en place le menu du Blog (c'est plus tard que l'on s'occupera des liens). Il conviendra de le configurer correctement (sous peine de ne pas voir apparaître les liens qui y seront ajoutés).

Remarque. — À ce stade, le menu n'est qu'un élément de structure.

# Début de Procédure

# Coût : 8 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Apparence > Menus

Écran Menus :

1. Se reporter au panneau Structure du Menu
2. Champ Nom du Menu : renseigner « menu-principal » (pas de caractère spéciaux, pas de majuscule : il s'agit d'un identifiant)

VALIDER la création du menu en cliquant sur le bouton Créer le Menu.

Réponse du back-office : affichage de la section Réglages du Menu.

Pas de test à réaliser : le menu est vide (il ne contient aucun lien).

Sur même écran :

1. Se reporter à la section Réglages du Menu
2. Cocher la case « Ajouter automatiquement les pages de premier niveau à ce menu » (pour gagner du temps)
3. Cocher la case « Menu principal » (« Menu principal » désignant l'emplacement, autant dire le bloc, dans lequel seront intégrés les liens du menu)

VALIDER la création du menu en cliquant sur le bouton Enregistrer le Menu.

Fin de Procédure #

Réponse du back-office : « menu-principal a été mis à jour ».

Pas de test à réaliser : il se fera ultérieurement, lors de l'intégration des liens.

Attention. — Ne pas oublier d'activer l'option « Ajouter automatiquement les pages de premier niveau à ce menu », de façon à gagner du temps sur l'intégration des liens.

Remarque. — Le thème utilisé donne la possibilité de créer un second menu pour les liens sur les réseaux sociaux, que l'on appellerait « menu-reseaux-sociaux » et qui (une fois les liens ajoutés) viendrait s'afficher en bas, dans le pied de page. (Le notre s'affichera en haut.)

Étape 3 : Créer les billets, en tant qu'articles

[But] Alimenter le Blog. Les billets devront être créées en tant qu'articles : avec une accroche (photo + texte), qui servira à introduire leurs contenus respectifs ; et quelques mots-clés (trois par billet), qui eux serviront à optimiser leur référencement.

Commentaire. — L'outil donne la possibilité de définir l'accroche soit en tant qu'extrait (technique ici retenue) soit en tant que résumé. La différence entre les deux tient au fait que les résumés, affichés dans la page qui sert à introduire les articles (dans notre cas, la page d'accueil), ne sont pas réaffichés dans les articles présentés individuellement.

Intégrer le texte (accroche + détail du contenu)

<h2>En-tête de section</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sit amet nisi non augue vestibulum pulvinar. Morbi purus quam, tristique vitae blandit a, ultricies vitae orci. Ut imperdiet odio vel feugiat euismod. Sed auctor sollicitudin ullamcorper. Donec quis interdum ipsum. Donec condimentum sapien at felis convallis commodo. Vestibulum ex erat, porta non malesuada sit amet, aliquet sit amet neque. Suspendisse in urna eget leo sagittis fringilla. Sed nec aliquam nisi. Nulla pharetra massa neque, congue dictum nisi faucibus elementum. Nam vitae nunc at elit volutpat faucibus. Nullam finibus, lacus id ornare placerat, est turpis fringilla magna, ac suscipit est elit vitae mi. Aenean sapien turpis, egestas ac elit convallis, consectetur commodo diam. Pellentesque sit amet mattis justo. Cras vitae consequat sem.</p>

# Début de Procédure (1er article, accroche + détail du contenu)

# Coût : 7 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Articles > Ajouter

Écran Ajouter un Nouvel Article :

1. Champ Saisissez le Titre : renseigner « Billet I »
2. Activer l'onglet Texte (pour accéder à l'éditeur de code)
3. Copier-coller une première fois le contenu de la section ci-dessus, pour l'accroche de l'article, puis répéter le copier-coller deux-trois fois, avec l'en-tête en plus (pour le détail du contenu)
4. Activer l'onglet Visuel (pour retrouver l'éditeur de texte Wysiwyg)
5. Après avoir positionné le curseur à la fin de la première section, cliquer sur l'icône "Insérer la balise « Lire la suite… » (Shift+Alt+T)" (le raccourci clavier fonctionne aussi)

VALIDER la création de l'article en cliquant sur le bouton Publier.

Fin de Procédure #

Réponse du back-office : « Publication mise en ligne. Voir la publication ».

Test à réaliser : c'est dans la page d'accueil (clic sur titre du Blog) qu'on verra apparaître l'article, ou plus exactement, l'accroche de l'article ; celle-ci sera suivie du traditionnel « Continuer la lecture » sur lequel on cliquera pour vérifier que l'article a bien été intégré.

Ajouter la photo (au tout début de l'article)

# Début de Procédure (1er article, avec photo)

# Coût : 11 micro-tâches

# CMS WordPress

Écran Modifier l'Article (titre initial, Ajouter un Nouvel Article) :

1. Insérer une ligne (au tout début de l'article) et y maintenir le curseur (c'est ici que l'on souhaite afficher la photo)
2. Cliquer sur le bouton Ajouter un Média (au dessus de l'éditeur)

Détour par lightbox Ajouter un Média :

[Onglet Téléverser des Fichiers (par défaut)] Cliquer sur le bouton Sélectionnez des Fichiers

En dehors du back-office de WordPress :

1. Sélectionner la photo (préalablement) enregistrée sur poste local
2. Cliquer sur le bouton de chargement (Ouvrir, sous Windows) dans l'environnement WordPress

Retour sur lightbox Ajouter un Média :

1. [Onglet Bibliothèque de Médias (par défaut)] Se reporter au panneau Détails du Fichier Joint (colonne de droite)
2. Champ Texte Alternatif : renseigner « texte-alternatif-photo-billet-I » (information non affichée mais importante pour le référencement)
3. Champ Légende : renseigner «légende-photo-billet-I » (information affichée sous la photo, elle aussi importante pour le référencement)
4. Se reporter au bandeau du bas
5. Cliquer sur le bouton Insérer dans la Publication

Retour sur écran Modifier l'Article :

VALIDER l'ajout de la photo en cliquant sur le bouton Mettre à Jour.

Remarque. — La description de la photo est une information que l'outil exploiterait, et afficherait, dans la page spécialement attachée à la photo, mais pas dans l'article.

Fin de Procédure #

Réponse du back-office : « Publication mise à jour. Voir la publication ».

Test à réaliser : on verra apparaître la photo aussi bien en page d'accueil (après rafraîchissement) que dans l'article (auquel on accèdera en cliquant sur le lien « Continuer la lecture »).

Ajouter les mots-clés

# Début de Procédure (1er article, avec mots-clés)

# Coût : 4 micro-tâches

# CMS WordPress

Sur même écran :

1. Se reporter au panneau déroulant Étiquettes (colonne de droite)
2. Cliquer sur la flèche descendante
3. Renseigner « mot-clé I.1, mot-clé I.2, mot-clé I.3 » (espaces ajoutées après virgules non obligatoires)
4. Cliquer sur le bouton Ajouter

VALIDER l'ajout des mots-clés en cliquant sur le bouton Mettre à Jour.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Publication mise à jour. Voir la publication).

Test à réaliser : après rafraîchissement, on verra apparaître les mots-clés aussi bien en page d'accueil (en dessous de la date de publication) que dans l'article (au même endroit).

Cas des deux autres articles : Billet II/Billet III. Pas de changement, on suivra la même procédure (à ceci près qu'il ne sera pas nécessaire de repasser par le menu pour accéder à l'écran de création d'article, il suffira de cliquer sur le bouton Ajouter).

Les mots-clés à ajouter (en bloc) seront les suivants : « mot-clé II.1, mot-clé II.2, mot-clé II.3 » pour le deuxième article ; et « mot-clé III.1, mot-clé III.2, mot-clé III.3 », pour le troisième.

Concernant le contenu, pas de changement : on fera un copier-coller du contenu du premier article.

# Coût de Procédure : 44 micro-tâches, 22 par article (CMS WordPress) #

Étape 4 : Créer la page de présentation de l'auteur, en tant que page

[But] Légitimer les contenus du Blog. On créera la page de présentation de l'auteur en tant que page, et non comme article (cela aurait pour effet de la mélanger avec les billets du Blog, ce qui n'aurait pas de sens).

# Début de Procédure (1re page)

# Coût : 5 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Pages > Ajouter

Écran Ajouter une Nouvelle Page :

1. Champ Saisissez le Titre : renseigner « Présentation de l'Auteur »
2. Activer l'onglet Texte
3. Copier-coller deux-trois fois la section de contenu déjà utilisée pour les articles (voir supra)
4. Activer l'onglet Visuel (pour retrouver l'éditeur de texte)

VALIDER la création de la page en cliquant sur le bouton Publier.

Fin de Procédure #

Réponse du back-office : « Page mise en ligne. Voir la page ».

Test à réaliser : après rafraîchissement, on verra apparaître, dans le menu, le lien « Présentation de l'Auteur » ; vérifier que celui-ci donne bien accès à la page que l'on vient de créer.

Remarque. — Si le lien a été ajouté, c'est parce que notre menu a été configuré pour l'intégrer automatiquement (voir supra).

Étape 5 : Intégrer la nouvelle page d'accueil du Blog

Cette page affichera la liste des billets selon un format qui servira seulement à les introduire : avec un titre (celui des différents billets), une accroche (photo + texte), et un lien (pour accéder au détail des contenus).

Créer la page, en tant que page

[But] Mettre en place la page d'introduction des billets (il s'agit bien d'une mise en place, l'intégration des billets [dans la page] se fera dans la procédure d'après). Il faudra créer cette page en tant que page.

# Début de Procédure (2e page, sans contenu)

# Coût : 3 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Pages > Ajouter

Écran Ajouter une Nouvelle Page :

Champ Saisissez le Titre : renseigner « Mon Blog »

VALIDER la création de la page en cliquant sur le bouton Publier.

Rappel. — Pas de contenu à renseigner dans l'éditeur.

Fin de Procédure #

Réponse du back-office : la même que précédemment (Page mise en ligne. Voir la page).

Test à réaliser : après rafraîchissement, on verra apparaître le lien « Mon Blog», à côté du premier lien, sur la droite (le clic sur le lien affichera une page vide).

Remarque. — L'ajout d'une énième page donnerait lieu à un énième lien, en énième position (sur la droite) : l'outil affichent les liens les uns après les autres, en suivant la chronologie des pages créées.

Reprendre le contenu de la page : y intégrer les billets

[But] Substituer au contenu (vierge) de la page que l'on vient de créer la liste des billets. Il suffira de coupler la page « Mon Blog » aux articles.

# Début de Procédure (2e page, avec liste des articles)

# Coût : 4 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Réglages > Lecture

Écran Options de Lecture :

1. Boutons radio de la page d'accueil : choisir l'option Une Page Statique
2. Liste déroulante Page des Articles : sélectionner la page « Mon Blog »

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer les Modifications.

Fin de Procédure #

Réponse du back-office : « Réglages enregistrés ».

Test à réaliser : après rafraîchissement de la page, on verra apparaître les articles.

Reconfigurer le lien sur la page

[But] Amener le lien en première position et reprendre son libellé : on remplacera « Mon Blog » par « Accueil » (il s'agit là d'une convention, ce lien est souvent représenté par une maison).

# Début de Procédure

# Coût : 6 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Apparence > Menus

Écran Menus :

1. Se reporter au panneau déroulant « Mon Blog » (qui intègre les paramètres du lien)
2. Cliquer sur la flèche descendante
3. Champ Titre de la Navigation : remplacer le libellé initial (Mon Blog) par le nouveau (Accueil)
4. Étiquette Déplacer : cliquer sur « Un cran vers le haut »

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer le Menu.

Fin de Procédure #

Réponse du back-office : « menu-principal a été mis à jour ».

Test à réaliser : après rafraîchissement de la page, on observera le changement de libellé et le réagencement des liens.

Activer la page, en tant que nouvelle page d'accueil

[But] Substituer à la page d'accueil initiale, notre propre page d'accueil. On l'activera en indiquant 1^o que nous voulons afficher une page et 2^o que cette page sera celle que l'on vient de créer (Mon Blog).

Attention, il faut savoir que la page d'accueil initiale, à laquelle on accèdera en cliquant sur le titre du Blog, se présente exactement comme la page que nous venons de créer.

Mais les enjeux sont ailleurs.

Pour d'autres types des sites (un site vitrine par exemple), il conviendra de rompre ce couplage entre page d'accueil et liste des articles, de façon à pouvoir afficher des contenus plus adaptés (qui présenteront un caractère promotionnel dans le cas des sites vitrines).

C'est en rattachant les articles à une page dédiée que l'on y parviendra à détacher les articles de la page d'accueil.

L'avantage sera double.

1^o Les articles continueront d'être accessibles (on passera par le lien de menu sur la page dédiée) ; 2^o l'espace libéré permettra de faire appel à une autre page pour la page d'accueil.

# Début de Procédure

# Coût : 4 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Réglages > Lecture

Écran Options de Lecture :

1. Boutons radio de la page d'accueil : choisir l'option Une Page Statique
2. Liste déroulante Page d'Accueil : sélectionner la page « Mon Blog »

VALIDER la nouvelle configuration en cliquant sur le bouton Enregistrer les Modifications.

Fin de Procédure #

Réponse du back-office : « Réglages enregistrés ».

Test à réaliser : vérifier, en cliquant sur le titre du Blog, que c'est bien le contenu intégrant page (Mon Blog) et articles associés (nos billets) qui est utilisé en page d'accueil.

Annexe

Pour intégrer une vidéo de YouTube

Préalable : soit rouvrir l'un des articles précédemment créés (en passant par l'écran de gestion des articles : Articles > Tous les Articles) soit créer un nouvel article. (Cela fonctionnera aussi bien avec les pages.)

# Début de Procédure

# Coût : nc micro-tâches

# CMS WordPress

# Différence par rapport aux photos : la vidéo n'aura pas à être chargée sur le serveur du Blog (ordinateur sur lequel sont enregistrés les contenus du Blog, avec les programmes de WordPress), ce sont les serveurs de YouTube qui hébergeront (et fourniront) les données de la vidéo.

Écran Ajouter un Nouvel Article (ou Modifier l'Article) :

1. [Éditeur de texte] Amener le curseur là où l'on souhaite voir apparaître la vidéo
2. Cliquer sur le bouton Ajouter un Média

Détour par lightbox Ajouter un Média :

1. Se reporter au panneau Actions (colonne de gauche)
2. Cliquer sur « Insérer à partir d'une adresse Web » (tout en bas)

Détour par lightbox « Insérer à partir d'une adresse Web » :

Champ « http:// » : copier-coller l'adresse de la vidéo

Réponse du back-office : affichage de la vidéo (si l'adresse renseignée est correcte).

Pas de test à réaliser : il faut maintenant insérer la vidéo. (Il faudra ensuite valider son intégration.)

Lightbox « Insérer à partir d'une adresse Web » (suite) :

1. Se reporter au bandeau du bas
2. Cliquer sur le bouton Insérer dans la Page

Retour sur écran Ajouter un Nouvel Article (ou Modifier l'Article) :

VALIDER l'intégration de la vidéo en cliquant sur le bouton Mettre à Jour.

Fin de Procédure #

Réponse du back-office : « Publication mise à jour. Voir la publication ».

Test à réaliser : afficher le nouvel article (ou rafraîchir le contenu de l'article modifié) et vérifier que la vidéo fonctionne bien en cliquant sur le bouton de lecture.