Guide de la création des menus sous WordPress

Publié le 22 janvier 2025 | Temps de lecture : 10 minutes

Introduction

Barre de menu du blogue

WordPress offre une grande variété de maquettes (ou ‘thèmes’) qui sont autant de styles différents pour habiller un blogue. Chacune de ces maquettes vient avec sa propre barre de menu, d’habitude assez rudimentaire.

Pour l’étoffer, les programmeurs de WordPress ont créé un module à cette fin. Le didacticiel qui suit est valide pour les maquettes dites ‘classiques’, celles nées avant 2022.

Le module de création des menus

Pour utiliser ce module, on doit accéder au blogue à titre d’administrateur, puis cliquer sur ‘Apparence’, et enfin sur ‘Menus’.


 
L’interface du module se divise en deux parties.

À gauche, sous ‘Ajouter des éléments de menu’ (ici en jaune), on définit les nouveaux choix qu’on désire offrir aux lecteurs.

L’élément à ajouter peut être une ‘page’, un article, un lien personnalisé ou une catégorie.

À droite, sous ‘Structure du menu’, c’est là qu’on détermine l’endroit du menu (ou de ses sous-menus) où on désire voir apparaitre ce nouveau choix.

L’ajout d’une page

Parmi tous les documents que peuvent consulter les lecteurs d’un blogue, WordPress distingue entre les ‘pages’ et les ‘articles’. Fondamentalement, c’est pareil.

Les articles sont des documents qui s’ajoutent à la queue leu leu au fur et à mesure de leur publication. Ils sont créés en cliquant sur ‘+ Créer’ dans le menu horizontal du Tableau de bord.

Par contre, les pages sont des documents ‘intemporels’ dans le sens qu’ils ne sont pas liés à une date de publication. Ils sont créés en cliquant sur ‘Pages’, à gauche, un peu en haut d’Apparence, dans le menu vertical du Tableau de bord, puis en cliquant sur ‘Ajouter une page’.

La meilleure manière de créer un texte de présentation d’un blogue, c’est de le faire sous forme d’une ‘page’ à laquelle on accède par le biais d’un élément de la barre de menu. Par exemple, en cliquant sur ‘À propos’, le visiteur peut consulter le texte en question.


 
Pour permettre aux visiteurs du blogue d’accéder à une ‘page’ par le biais d’un élément du menu, on clique sur la petite flèche à droite de ‘Pages’, on coche le nom de la page à ajouter et on clique sur le bouton ‘Ajouter au menu’.

Positionner un élément de menu


 
Dès qu’on clique ‘Ajouter au menu’, le nouvel élément (ici en bleu) apparait dans la moitié droite de l’interface, complètement à la fin des éléments actuels (ici en gris) de la barre de menu.

Si on clique sur la petite flèche à droite du nom de la page, on a alors la possibilité de modifier le nom que portera l’élément qui sera ajouté à la barre de menus.

Par exemple, dans la case ’Titre de la navigation’ (ici en jaune), si on abrège le nom de ‘À propos de l’auteur’ à ‘À propos’ (tout court), le titre du document demeurera le même, mais le nom raccourci sera celui qui apparaitra sur l’élément de la barre de menu.

Puis, à l’aide du curseur de la souris (sur un ordinateur) ou à l’aide d’un doigt (sur une tablette), on déplace cet élément vers l’endroit où on veut le voir apparaitre dans la barre de menu.

Dans ce cas-ci, on le laissera à la fin des éléments du menu. Ce qui correspond à l’élément le plus à droite de la barre de menu.

Si on déplace ce nouvel élément un peu vers la droite, il devient un élément de sous-menu. Dans l’exemple ci-dessus, si on déplace ‘À propos’ non pas en suivant la flèche rouge vers le haut, mais en le déplaçant légèrement vers la droite, ‘À propos’ deviendrait le premier élément d’un sous-menu de ce qui le précède, soit ‘Récits de voyages’.

Dans ce cas, dès le nouveau menu sauvegardé, l’élément ‘Récits de voyage’ perdrait le code qui lui est propre pour ne devenir d’une simple ‘étiquette’ qui, cliquée, permet simplement d’accéder au sous-menu.

D’autre part, au lieu déplacer manuellement le nouvel élément au sein du menu, on peut obtenir les mêmes résultats en choisissant sa position dans la liste déroulante de la case ‘Ordre du menu’. Quant à la case ‘Menu parent’, elle est une autre manière de créer des sous-menus et des sous-sous-menus.

Pour terminer, on clique sur le bouton ‘Enregistrer le menu’. En allant sur le blogue, on peut tester le résultat.

L’ajout d’un article


 
Pour permettre aux visiteurs d’un blogue d’accéder directement à un article à partir de la barre de menu, on clique sur la petite flèche à droite d‘Articles’.

Pour trouver l’article à associer avec cet élément du menu, il est plus simple d’effectuer une recherche à partir d’un mot-clé.

Dans la boite de saisie, on entre ce mot-clé; WordPress dressera alors la liste de tous les documents dont le titre ou le texte contient ce mot-clé. On coche le nom du document qu’on veut associer et on clique sur le bouton ‘Ajouter au menu’.

Tout comme pour une ‘page’, le titre du document apparaitra dans la moitié droite de l’interface, complètement au bas des éléments actuels de la barre de menu. On le déplace donc là où on veut qu’il apparaisse dans la barre des menus en suivant les instructions données précédemment au sujet d’une page.

Pour terminer, on clique sur le bouton ‘Enregistrer le menu’ et on vérifie le résultat.

L’ajout d’une catégorie

Une des utilisations les plus fréquentes des menus, c’est de donner accès à tous les documents qui appartiennent à une même catégorie.


 
Pour connecter une catégorie à un élément du menu, on clique sur la petite flèche à droite de ‘Catégories’ et on choisit d’effectuer une recherche sur le nom de la catégorie à connecter.

Contrairement à la recherche d’un article — où le mot-clé peut se trouver dans le titre, de même que dans le texte d’un document — ici le mot-clé doit se trouver nécessairement dans le nom de la catégorie.

Une fois trouvé, on coche à côté du nom de la catégorie et on clique sur le bouton ‘Ajouter au menu’.

Et comme précédemment, le nom de la catégorie choisie apparait au bas de la moitié droite de l’interface. On le déplace alors là où on veut qu’il apparaisse dans la barre des menus en suivant les instructions données précédemment au sujet d’une page.

Pour terminer, on clique sur le bouton ‘Enregistrer le menu’ et on vérifie le résultat.

L’ajout d’un lien personnalisé

À l’aide de la boite de saisie ‘Rechercher le texte’ (ci-contre), si on effectue une recherche sur un mot-clé, on obtiendra tous les documents du blogue dont le texte contient ce mot.

Dans cette liste, WordPress donnera préférence aux documents dont le titre contient également le mot-clé.

Mais comment faire pour demander l’affichage des documents qui contiennent deux mots-clés ? Ou le premier sans le deuxième ?

On ne peut pas exiger des lecteurs d’un bloque qu’ils soient familiers avec la terminologie des recherches avancées de WordPress. Voilà pourquoi il est utile de les codifier sous forme d’éléments de menu.

Partons d’un exemple.

Si on demande à WordPress d’afficher tous les textes qui contiennent le mot ‘Olympus’, on remarquera que dans la partie supérieure de l’interface du navigateur (Google Chrome, Apple Safari, etc.), l’URL affichée sera la suivante :


 
Donc, pour obtenir l’affichage sélectif de tous les documents qui contiennent le mot ‘Olympus’, le suffixe à ajouter au bout de l’adresse du blogue est :
/?s=Olympus

À l’inverse, le signe marque l’exclusion. Pour afficher tous les documents du blogue sauf ceux qui contiennent le mot ‘Olympus’, ce suffixe sera :
/?s=-Olympus

Pour afficher les documents qui contiennent simultanément les mots ‘Olympus’ et ’Sigma’, à l’exclusion donc de ceux qui ne contiennent que l’un des deux, ce suffixe est :
/?s=Olympus+Sigma

Pour afficher les documents dont le texte contient le mot ‘Olympus’, à l’exclusion de ceux qui contiennent le mot ’Sigma’, le suffixe est alors :
/?s=Olympus+-Sigma

En somme,
veut dire ‘sans…’,
+ veut dire ‘…et…’,
+- signifie ‘…et à l’exclusion de…’.

Il est à noter que ces suffixes s’appliquent également à une catégorie.

C’est ainsi qu’après avoir demandé la consultation de tous les documents du blogue appartenant à la catégorie ‘Bijouterie’, on peut restreindre cet affichage aux seuls documents qui contiennent le mot ‘Fouquet’ en ajoutant à la requête le suffixe approprié, comme ci-dessous.
 

 
Pour afficher les documents publiés le 31 décembre 2024, le suffixe sera :
/2024/12/31

Pour tous les documents publiés au cours du mois de décembre 2024, le suffixe sera :
/2024/12/

Et pour tous les documents de l’année 2024, le suffixe sera :
/2024/

Et si on veut que les documents répondant à notre critère de sélection soient classés en ordre chronologique, c’est-à-dire du plus vieux au plus récent, le suffixe est :
/?order=asc

Alors prenons un exemple.

On trouve sur le blogue une série consacrée au droit international. Sous l’élément ‘Géopolitique’ de la barre de menu, si on veut ajouter un élément de son sous-menu qui permet de consulter cette série en ordre chronologique, on choisit cette catégorie à l’aide du module ‘Catégories’.


 
Puis on copie l’hyperlien qui s’affiche au haut du navigateur (ici en jaune).

On se rend ensuite dans le module de création des menus.


 
On clique sur la petite flèche à droite de ‘Liens personnalisés’ et dans la boite appelée ‘URL’, on colle l’hyperlien copié précédemment, en prenant soin de lui ajouter le suffixe ‘/?order=asc’.

Ensuite, on donne un nom à cet élément de menu (ici, ’Droit international), et on clique le bouton ‘Ajouter au menu’.

Finalement, dans la moitié droite de l’interface, on déplace ce nouvel élément à l’endroit approprié du menu. En le déplaçant légèrement vers la droite, on en fait un élément de sous-menu.

Et on termine le tout en cliquant sur le bouton ‘Enregistrer le menu’.

Dernier petit truc.

Il est possible d’ajouter à des documents du texte ‘invisible’, c’est-à-dire du texte qui ne s’affiche pas. Pour ce faire, il faut utiliser le code suivant :

Le module de recherche de WordPress ne fait pas la différence entre le texte visible et celui qui ne l’est pas. Ce qui signifie qu’on peut effectuer une recherche sur du texte caché et seuls les documents qui le contiennent s’afficheront.

Si on ne souhaite pas regrouper des documents au sein d’une catégorie qui leur est propre, on pourra donc créer un élément de menu qui affichera ces documents à deux conditions.

Premièrement, en prenant soin de leur ajouter secrètement un groupe unique de caractères (ZKBTNKN812, par exemple). Et deuxièmement, en créant un élément de menu basé sur le lien personnalisé suivant :
https://www.Nom_du_blogue/?s=ZKBTNKN812

Évidemment, un même document peut renfermer plus d’un ‘code secret’ si on veut qu’il soit appelé par plus d’un élément du menu.

2 commentaires

| Informatique | Mots-clés : , | Permalink
Écrit par Jean-Pierre Martel


Comment ajouter aux articles d’un blogue le temps qu’il faut pour les lire ?

Publié le 1 septembre 2024 | Temps de lecture : 5 minutes
Cliquez sur la photo pour l’agrandir

Introduction

De nos jours, sollicité de toutes parts, le lecteur moyen possède une durée d’attention très limitée.

Voilà pourquoi la personne habituée à lire sur l’internet des textes qui ne dépassent pas 280 caractères sera rebutée par de longues dissertations comme celles publiées sur ce blogue.

D’où l’idée d’afficher, dès le début d’un texte, le temps nécessaire pour le lire. Comme pour dire : ‘Oui, je sais, ça parait long. Mais vois-tu, ça ne te prendra que quelques minutes de ton temps.

Pour y parvenir, il y a deux grandes étapes. Premièrement, il faut doter le blogue de la capacité de calculer le temps de lecture. Une fois qu’il en est apte, il faut déterminer l’endroit où on veut que ce temps de lecture soit affiché.

Avant d’aller plus loin, il est recommandé d’effectuer une sauvegarde du blogue puisque la moindre erreur pourrait le rendre inopérant.

De plus, n’ajoutez pas de code en l’écrivant vous-mêmes; vous risqueriez de vous tromper. Ajoutez-le par copier-coller seulement.

Modifier la machine logicielle

Le fichier functions.php est en réalité le code d’un programme informatique. Il est un élément important de la machine logicielle qui permet au blogue de fonctionner. Pour doter le blogue du pouvoir de calculer le temps de lecture, il faut lui ajouter le code nécessaire.

Pour cela, il faut accéder au blogue à titre d’administrateur.

Cliquez sur la photo pour l’agrandir

Dans le panneau de gauche, lorsque le curseur de la souris survole l’item Apparence, un panneau latéral s’ouvre; cliquez sur le sous-item Éditeur de fichiers des thèmes.

Cliquez sur la photo pour l’agrandir

Par défaut, à l’ouverture, l’éditeur affichera le code du fichier style.css. N’y touchez pas.

Dans la liste des fichiers affichée à droite, cliquez sur functions.php. Aussitôt, l’éditeur affichera son code. De plus, près du coin supérieur gauche de l’écran, le nom de ce fichier (functions.php) sera affiché (ici en rouge) : cela vous indique que vous modifiez bien le bon logiciel.

Quelque part dans ce code, vous trouverez le texte :

/**
* Enqueue scripts and styles
*/

Cliquez immédiatement à droite de ce ‘*/’ et appuyez sur ‘Enter’ afin de créer une nouvelle ligne. Puis copiez le code ci-dessous et collez-le à la ligne vide que vous venez de créer.

function TempsDeLecture() {
   $article = get_post_field( 'post_content', $post->ID ); //lire le texte
   $NombreDeMots = str_word_count( strip_tags( $article ) ); //lui retirer les balises html
   $Temps = ceil($NombreDeMots / 200); //diviser le nombre de mots entiers par une vitesse de lecture de 200 mots par minute
   if ($Temps == 1) { //ajouter le pluriel si besoin
      $label = " minute";
      } else {
      $label = " minutes";
   }
   $NombreDeMinutes = $Temps . $label; //formater le résultat
   return $NombreDeMinutes;
   }

Le lecteur moyen lit entre 180 et 230 mots à la minute tandis qu’un lecteur chevronné peut lire jusqu’à 350 mots à la minute. Ici, le code suggéré se base sur une vitesse de lecture de deux-cents mots à la minute.

Une fois le code ajouté, appuyez sur le bouton Mettre à jour le fichier.

L’affichage du temps de lecture

Sous WordPress, l’affichage des articles est déterminé par deux programmes informatiques. Le fichier index.php détermine l’affichage des textes lorsqu’ils se suivent à la queue leu leu. Lorsqu’un seul texte est affiché à l’écran, c’est de programme single.php qui détermine sa présentation.

Dans un cas comme dans l’autre, une seule ligne de code sera nécessaire. Toutefois, il faut l’ajouter très précisément, au bon endroit.

Cliquez sur la photo pour l’agrandir

Pendant que nous sommes toujours sous l’éditeur de code, dans la liste des fichiers affichée à la droite de l’écran, cliquez sur single.php. Son code apparait aussitôt.

Parmi les premières lignes de code, trouvez celle-ci :

   <h2><?php the_title(); ?></h2>

Immédiatement après, ajoutez une ligne vide et collez-y le texte suivant :

   <small>Publié le <?php the_time(get_option('date_format')) ?> | Temps de lecture : <?php echo TempsDeLecture(); ?></small><br />

Ici, nous avons fait une pierre deux coup. À gauche du temps de lecture (obtenu grâce au code ajouté à la machine logicielle du blogue), nous avons également précisé la date de publication grâce à une fonction qui s’y trouvait déjà.

Une fois cette ligne de code ajoutée, finalisez le tout en cliquant sur le bouton ‘Mettre à jour le fichier’.

Pour ajouter la même chose aux articles lorsqu’ils s’affichent à la queue leu leu, la ligne de code à ajouter est identique.

Cliquez sur la photo pour l’agrandir

Toujours sous l’éditeur de code, dans la liste des fichiers affichée à la droite de l’écran, cliquez sur index.php. Son code apparait aussitôt.

Parmi les premières lignes de code, trouvez celle-ci :

   <h2><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h2>

À sa suite, ajoutez la ligne suivante…

   <small>Publié le <?php the_time(get_option('date_format')) ?> | Temps de lecture : <?php echo TempsDeLecture(); ?></small><br />

…puis cliquez sur le bouton ‘Mettre à jour le fichier’.

Voilà !

2 commentaires

| Informatique | Mots-clés : , | Permalink
Écrit par Jean-Pierre Martel


Comment supprimer les demandes intempestives d’abonnement sous WordPress

Publié le 30 août 2024 | Temps de lecture : 3 minutes
Cliquez sur l’image pour l’agrandir

Introduction

Il y a quelques jours, je me suis rendu compte que des demandes d’abonnement surgissaient lorsqu’on consultait mon blogue à partir d’un appareil mobile. Peut-être était-ce le cas également lorsque cette consultation s’effectuait sur un ordinateur.

Depuis quinze ans, n’importe quelle personne peut consulter gratuitement mon blogue, abonnée ou non.

Au contraire, cette fenêtre popup laisse entendre qu’il faut s’abonner au blogue si on veut poursuivre sa lecture ou consulter d’autres articles.

Antérieurement

Cliquez sur l’image pour l’agrandir

Jusqu’à tout récemment, il y avait deux moyens de s’abonner au blogue.

Le premier moyen se trouvait au bas de chaque texte; c’est le formulaire de commentaire (ci-dessus, à gauche), dont la dernière ligne sert justement à s’abonner.

Le deuxième moyen s’affichait au bas de la colonne de droite de l’interface (ci-dessus, à droite), soit le formulaire d’abonnement proprement dit. Or c’est ce deuxième moyen qui disparait, remplacé par des fenêtres surgissantes.

Le coupable

Parmi tous les modules facultatifs de WordPress, le plus utile est Jetpack.

Malheureusement, sans aviser ses millions de blogueurs, Jetpack a décidé dernièrement de supprimer le formulaire d’abonnement proprement dit, et de le remplacer par des fenêtres popup.

Comment faire en sorte qu’elles n’apparaissent plus ?

La solution

Cliquez sur l’image pour l’agrandir

Pour corriger cela, il faut accéder au blogue à titre d’administrateur. Il est préférable de le faire à partir d’un ordinateur.

On clique d’abord sur Jetpack, puis sur Réglages.

Cliquez sur l’image pour l’agrandir

Dans les réglages, on clique sur l’onglet Newsletter, situé en haut, à droite.

Cliquez sur l’image pour l’agrandir

C’est l’item ‘Afficher la fenêtre contextuelle d’abonnement…’ qui fait problème. Il suffit de l’inactiver pour que le problème s’évanouisse.

Et pendant que nous y sommes, attardons-nous quelques instants sur ces réglages.

On pourrait tout aussi bien inactiver le premier réglage, soit ‘Donner la possibilité aux visiteurs de s’abonner à ce site…’. Mais ce faisant, on inactiverait tous les réglages qui suivent, dont l’avant-dernier. Cela ferait donc disparaitre le choix de s’abonner en cochant la dernière ligne du formulaire de commentaire.

Si on laisse le premier réglage actif, on peut toutefois remplacer la case à cocher du formulaire de commentaire par une version plus petite de la fenêtre popup dont nous parlons depuis le début, et qu’on trouverait donc au bas du formulaire de commentaire.

Pour ce faire, il suffit d’activer l’item ‘Ajouter le bloc S’abonner à la fin de chaque article’ (ci-dessus, au centre).

Lorsque l’item ‘Superposition d’abonnement sur la page d’accueil’ est activé, la première chose qu’une personne voit en accédant au blogue, c’est un formulaire d’abonnement encore plus gros que la fenêtre surgissante dont nous parlons. De quoi faire fuir tous ceux qui accèdent au blogue.

Le retour de l’ancien formulaire d’abonnement

Cliquez sur l’image pour l’agrandir

Pour faire réapparaitre l’ancien formulaire d’abonnement, il faut cliquer sur ‘Apparence’, puis sur ‘Widgets’.

À droite, on doit fouiller, parmi les ‘widgets’ désactivés, pour trouver celui qui correspond à l’ancien formulaire d’abonnement. Puis il faut le faire glisser vers le haut, parmi les widgets actifs.

Pour terminer, on clique sur le bouton ‘Mettre à jour’.

Et voilà !

Laissez un commentaire »

| Informatique | Mots-clés : , , | Permalink
Écrit par Jean-Pierre Martel