Extensions de l'ouvrage

Supports
Tutoriels Installation des CMS et Intégration de Contenu
Fonctionnalités des CMS

Tutoriel WordPress Niveau I (30 minutes)

  • Micro-tâches (+/- 5) : 85
  • Temps de réalisation (+/- 5 minutes) : 30 minutes

Site à réaliser : [WordPress] Mon Agence

Site de démarrage : [repli]

Site complémentaire de démo : [WordPress] Mon Centre de Formation [repli]

Figure 1. Architecture logique des pages.
  • Page d'accueil (niveau de base) : Mon Agence
    • Page de niveau I : [Embedded] Mes Services
      • Page de niveau II : Service A
      • Page de niveau II : Service B
      • Page de niveau II : Service C
    • Page de niveau I : Mentions Légales

[Site vitrine WordPress] Étapes

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

B. Intégration des contenus :

  • Étape 1 : Mettre à jour le titre et le slogan du site
  • Étape 2 : Créer le menu
  • Étape 3 : Créer les pages, en tant que pages
  • Étape 4 : Reprendre l'ordre des pages
  • Étape 5 : Mettre à jour le libellé du lien sur la page d'accueil et ajouter les liens manquants
  • Étape 6 : Activer la nouvelle page d'accueil

Prérequis

Vrai site Web (site de production) : domaine + hébergement. Pour ouvrir un vrai site Web, c'est-à-dire un site auquel tout le monde pourra accéder, il faudra installer WordPress chez un hébergeur, ce qui suppose la location d'un domaine et d'un hébergement.

Site de test : installation locale des serveurs. Pour seulement tester, il ne sera pas nécessaire de passer par un hébergeur, mais il faudra alors s'occuper soi-même — sur son propre poste, appelé poste local — de l'installation des serveurs dont l'outil a besoin pour fonctionner (serveur de page Web/serveur de base de données) : pour cela, on fera appel à des logiciels tels que WampServer.

Préalable

1. Se connecter au back-office de WordPress. Pour se connecter au back-office de WordPress, on reprendra l'adresse de son site Web (typiquement, https://www.mon-site-web.com) et on ajoutera, à la fin, « /wp-admin » (avec https://www.mon-site-web.com, cela donnera https://www.mon-site-web.com/wp-admin).

2. Ouvrir une session back-office. Une fois connecté au back-office, on ouvrira sa session avec l'identifiant et le mot de passe transmis lors de l'installation de l'outil.

3. Afficher le site Web (front-office) dans un autre navigateur. Pour tester le travail réalisé, et mieux visualiser les résultats, on affichera le site Web dans un autre navigateur que celui utilisé côté back-office (on utilisera par exemple Firefox pour travailler et Chrome pour tester).

Pour accéder aux écrans

Menu et sous-menus | Items | Chemins

Le menu principal du back-office (items Accueil/Articles/Médias/Pages…) et ses sous-menus (items du sous-menu Pages : Toutes les pages/Ajouter) indiquent les chemins à suivre pour accéder aux écrans à configurer.

Le chemin que l'on aura à prendre pour créer une nouvelle page, par exemple, sera le suivant :

Pages > Ajouter

L'item Ajouter étant le lien sur lequel on cliquera pour accéder à l'écran de création de page.

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

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

[But] Changer l'apparence du site.

Procédure : confer (cf.) tutoriel d'initiation à WordPress.

# Coût de Procédure : idem #

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

[But] Remplacer le nouvel éditeur (Gutenberg) par l'ancien.

Procédure : cf. tutoriel d'initiation à WordPress.

# Coût de Procédure : idem #

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

[But] Rendre le back-office plus lisible.

Procédure : cf. tutoriel d'initiation à WordPress.

# Coût de Procédure : idem #

B. Intégration des contenus

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

[But] Définir l'identité du site.

Procédure : cf. tutoriel d'initiation à WordPress.

# Coût de Procédure : idem #

Étape 2 : Créer le menu

[But] Créer le menu du site (comme élément de structure seulement).

Procédure : cf. tutoriel d'initiation à WordPress.

# Coût de Procédure : idem #

Étape 3 : Créer les pages, en tant que pages

[But] Alimenter le site. Les pages devront être créées en tant que pages. Attention, il y aura une distinction à faire entre pages de niveau I : « Mon Agence » (la page d'accueil), « Mes Services » et « Mentions Légales » ; et pages de niveau II : « Service A », « Service B » et « Service C » (que l'on placera sous la page de niveau I « Mes Services »).

Figure 2. Architecture WordPress des pages (1).
  • [Page d'accueil] Page de niveau I : Mon Agence
  • Page de niveau I : Mes Services
    • Page de niveau II : Service A
    • Page de niveau II : Service B
    • Page de niveau II : Service C
  • Page de niveau I : Mentions Légales
Note : 1. On observera que, pour des raisons qui tiennent à la gestion des liens de menu(s) (voir infra), la page d'accueil (Mon agence) vient se placer au même niveau que les pages de premier niveau I (Mes Services/Mentions Légales), alors qu'en toute rigueur, elle devrait se situer au-dessus (voir supra, architecture logique des pages).

[Page d'accueil] Page de niveau I « Mon Agence »

Fragment de code 1. En-tête de section et contenu à copier-coller tels quels, dans l'éditeur de code (1).
<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>

Note : 1. Il s'agit là d'éviter les bugs d'affichage. On remarquera l'intégration de l'élément h2 (représenté par les balises <h2> et </h2>) pour l'en-tête ; et de l'élément p (balises <p> et </p>) pour le paragraphe. Normalement, il suffit de saisir le texte directement, sans avoir à se préoccuper des balises (l'éditeur les génère automatiquement, lors du travail de structuration).

# 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 « Mon Agence »
  2. Activer l'onglet Texte
  3. Copier-coller deux-trois fois la section de contenu ci-dessus

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 « Mon Agence » ; 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é automatiquement, c'est parce que notre menu a été configuré pour cela (voir supra).

Page de niveau I « Mes Services » | Pages de niveau II : « Service A », « Service B » et « Service C »

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

# Coût : 5 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Pages > Ajouter | Plus directement (depuis la page précédente), clic sur bouton Ajouter

Écran Ajouter une Nouvelle Page (le même que précédemment) :

  1. Champ Saisissez le Titre : renseigner « Mes Services »
  2. Activer l'onglet Texte
  3. Copier-coller le contenu de la première page

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

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, à côté du lien « Mon Agence », le lien « Mes Services »; vérifier que celui-ci donne bien accès à la page que l'on vient de créer.

Cas des pages de niveau II : Service A/Service B/Service C. La procédure à suivre sera la même à ceci près qu'il faudra sélectionner (comme page parente de ces trois pages) la page de niveau I « Mes Services », dans la liste déroulante Parent (qui se trouve dans le panneau Attributs de Page [que l'on aura à ouvrir]).

Remarque. — L'ajout des liens, dans le menu, devra se faire manuellement (voir infra, étape 5) : l'outil n'ajoute, automatiquement, que les liens sur pages de niveau I (voir supra).

Concernant le contenu, pas de changement : on fera un copier-coller du contenu de la première page.

# Coût de Procédure : 21 micro-tâches (CMS WordPress) #

Page de niveau I « Mentions Légales »

Procédure : voir supra. (La page se situera au même niveau que les pages « Mon Agence » et « Mes Services »).

# Coût de Procédure : idem #

Étape 4 : Reprendre l'ordre des pages

[But] Retrouver (dans le back-office) l'organisation générale des pages, telle que présentée plus haut ; et partant, gagner du temps sur l'intégration des liens (dans le menu, voir infra).

Il faudra donc réagencer les pages de manière à ce qu'elles se présentent (côté back-office) comme suit :

  1. Mon Agence
  2. Mes Services
    1. Service A
    2. Service B
    3. Service C
  3. Mentions Légales

Remarque. — Par défaut, les pages que l'on crée en tant que pages (comme dans le cas présent) sont classées par ordre alphabétique.

# Début de Procédure

# Coût : 8 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Pages

Écran Pages :

  1. Survoler la page « Mes Services » (pour afficher, notamment, le lien de modification rapide)
  2. Cliquer sur Modification Rapide
  3. Champ Ordre : renseigner le numéro 10 (et non le 1 [qui suffirait], pour se donner la possibilité d'intercaler des pages supplémentaires)

VALIDER en cliquant sur le bouton Mettre à Jour.

Pas de réponse du back-office : voir infra.

Pas de test à réaliser : voir infra.

Sur même écran :

  1. Survoler la page « Mentions Légales »
  2. Cliquer sur Modification Rapide
  3. Champ Ordre : renseigner le numéro 20

VALIDER en cliquant sur le bouton Mettre à Jour.

Pas de réponse du back-office : voir infra.

Pas de test à réaliser : voir infra.

Fin de Procédure #

Pas de réponse du back-office — ce qui est anormal : c'est en rechargeant l'écran (touche F5 du clavier) que l'on observera la remise en ordre effective des pages.

Pas de test à réaliser : la remise en ordre des pages n'a pas d'incidence sur la présentation des contenus (du côté du front-office).

Étape 5 : Mettre à jour le libellé du lien sur la page d'accueil et ajouter les liens manquants

[But] Tout d'abord, reprendre le libellé du lien sur la page d'accueil : on remplacera « Mon Agence » par « Accueil ». (Il s'agit là d'une convention. Ce lien est souvent représenté par une maison.)

[But] Ensuite, finaliser l'intégration des liens : les trois liens à ajouter, « Service A », « Service B » et « Service C », viendront se placer sous le lien de niveau I « Mes Services », en tant que liens de niveau II.

Figure 3. Architecture des liens de menu(s) : un seul menu côté back-office ; un menu principal (liens de niveau I) et un sous-menu (liens de niveau II) côté front-office (1).
  • Lien de niveau I : Accueil
  • Lien de niveau I : Mes Services
    • Lien de niveau II : Service A
    • Lien de niveau II : Service B
    • Lien de niveau II : Service C
  • Lien de niveau I : Mentions Légales

Note : 1. La page d'accueil étant, par définition, la page de plus haut niveau, le lien permettant d'y accéder (Accueil) devrait, en toute logique, se placer lui aussi au-dessus des autres liens. Cependant, pour des raisons d'utilisabilité, il est de coutume de venir le placer au même niveau que les liens de premier niveau (ici, Mes Services/Mentions Légales), afin que ces derniers restent, en page d'accueil notamment, visibles, et bien évidemment cliquable.

# Début de Procédure

# Coût : 12 micro-tâches

# CMS WordPress

CHEMIN À PRENDRE : Apparence > Menus

Écran Menus :

  1. Se reporter au panneau déroulant « Mon Agence » (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 Agence) par le nouveau (Accueil)

VALIDER la mise à jour en cliquant sur le bouton Enregistrer le Menu.

Réponse du back-office : « menu-principal [il s'agit de l'identifiant utilisé pour créer le menu] a été mis à jour ».

Test à réaliser : après rafraîchissement, on observera le changement de libellé.

Sur même écran :

  1. Se reporter au panneau Pages
  2. Cocher les pages « Service A », « Service B » et « Service C »
  3. Cliquer sur le bouton Ajouter au Menu

Sur même écran :

Saisir (d'un clic) le premier lien puis le glisser-déposer sous le lien « Mes Services », en les décalant vers la droite (de façon à les définir comme liens de niveau II)

[+] Répéter l'exercice avec les deux autres liens

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

Fin de Procédure #

Réponse du back-office : la même que précédemment (menu-principal a été mis à jour).

Test à réaliser : après rafraîchissement, on observera l'apparition du sous-menu, avec ses trois items (sous le lien « Mes Services ») ; vérifier que ces trois items donnent accès au pages que nous avons créées.

Étape 6 : Activer la nouvelle page d'accueil

[But] Substituer à la page d'accueil initiale, conçue pour afficher les derniers articles, notre propre page d'accueil. On l'activera en indiquant 1o que nous voulons afficher une page et 2o que cette page sera celle que nous avons à considérer dans le cas présent (Mon Agence).

Remarque. — On fera appel aux articles (le second type de contenu à considérer, avec WordPress) pour intégrer des contenus dynamiques (comme les billets d'un Blog, par exemple). (On utilise les pages pour intégrer des contenus statiques, comme dans le cas présent.)

# Début de Procédure

# Coût : 5 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 Agence »

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 site, que c'est bien la page « Mon Agence » qui est utilisée comme page d'accueil.