Construire le site web

Une fois les documents réunis et préparés, passer le plus rapidement possible à l’environnement de destination – pas nécessairement sur le web – permet d’économiser du temps de développement. Ce tutoriel de création de site web scientifique se base sur la prémisse que vous avez décidé d’utiliser le système de gestion de contenus WordPress.

Mettre en place un site en local

Les instances locales d’applications destinées au web sont une pratique courante. Elles sont utilisées préalablement à la mise en ligne, puis en parallèle pour développer et tester d’autres changements.

L’installation d’un serveur local avec un site WordPress ne requiert pas de connaissances techniques, grâce aux paquetages tout-compris de Bitnami, fournis à titre gratuit sur fond de fourniture de services cloud, optionnels et payants. Bitnami est l’objet de commentaires enthousiastes et se voit largement recommandé.

La première mise en ligne peut se faire par exportation-importation, les mises à jour peuvent se limiter à la feuille de style ou d’autres éléments.

Cette partie du tutoriel se penche sur la mise en place du site local et sur les différents aspects de la création des pages, laissant la mise en ligne et le référencement à un troisième chapitre.

Précautions

Malgré la simplicité d’utilisation, il faut noter d’entrée qu’il arrive qu’un utilisateur casse tout et perde l’accès facile à ses données.⁠1Mercymury, Re:How to Install WordPress Locally on your PC (and practice making your website), commentaire YouTube, 01/10/2020 ; kmb123, Can’t edit or access my site, forum Bitnami, 09/12/2019 ; r2eq,
Unable to connect localhost after aborted backup, forum Bitnami, 19/10/2014 ; markbow,
Cannot connect to localhost, forum Bitnami, 22/07/2019. Pour rassurer un peu, on peut noter que tant que la base de données n’est pas corrompue, les sources WordPress des pages et articles peuvent être récupérées si l’identifiant et le mot de passe sont connus.

Dans le navigateur, il faut se souvenir du numéro de port s’il n’est pas 80 : « localhost:81 », « localhost:8080 » ou 8081, ou 1024 ?

Le démarrage de l’infrastructure sous Linux n’est pas automatisé, contrairement à Windows.⁠2Disable Service Auto-Start On Windows, documentation Bitnami, 05/09/2018 Il faut alors savoir ouvrir le gestionnaire, dépourvu d’icône d’application et qui ne peut être épinglé dans la barre de lancement.⁠3balwuw, Bitnami WordPress stack for Linux to **natively** auto start server and DB after boot like it does on Windows, forum Bitnami, 28/05/2020.

Pour conserver l’accès aux données via un serveur local sur un ordinateur personnel, le mieux est de placer un signet sur l’URL en plus de garder sous le coude l’identifiant et le mot de passe.⁠4mohamed.a.sabri, I successfully installed WP on my computer (Windows), but I cannot access my dashboard, forum support Bitnami, 11/10/2020. Pour la maintenance, il faut aussi noter le chemin de l’installation.

Installation

Bitnami, filiale espagnole de la filiale Dell VMware,⁠5María Ángeles Guzmán, Martha Mills, Multinational North American company VMWare buys Sevillian business Bitnami due to its leadership in the ‘Cloud’, Sevilla World, 11/06/2019. distribue de nombreuses piles applicatives gratuites, parmi lesquelles le pack ou pile applicative Bitnami WordPress, un ensemble complet composé d’un serveur Apache, d’une base de données mySQL et d’une instance WordPress, pour tout ordinateur sous Windows, Linux ou macOS.⁠6Bitnami WordPress pour la présentation et les différentes options, dont l’installation sur PC ou Mac. Shubhang de Websitelearners explique en détail comment installer Bitnami WordPress sur un ordinateur personnel.⁠7Shubhang, How to Install WordPress Locally on your PC (and practice making your website), tutoriel sur la chaîne YouTube de Websitelearners, 16/02/2018.

La page de bienvenue affichée à la suite de l’installation a une autre version, plus complète, à l’adresse « http://localhost/​bitnami/index.html », qui comporte aussi le lien vers la zone d’administration : « http://localhost/wp-admin/ ».

Configuration

Réglages

Pour commencer, on peut régler le fuseau horaire et le format de date, et revoir tous les autres paramètres dans les différentes pages du menu « Réglages », qui demandent chacune à être enregistrées si les changements doivent prendre effet.

D’autres actions s’assimilent aux réglages, comme le renommage de la catégorie par défaut, dans la page « Catégories » du menu « Articles ». Plutôt que « Non classé », on peut choisir « Nouvelles », car ce sera la catégorie de tous les articles publiés dans l’urgence.

Configurer l’URL de base

Dans le projet WordPress sur le point de naître, les liens générés automatiquement – dans les menus, les plans de site – sont portables Ce qui ne l’est pas sont les liens internes ajoutés manuellement quand les pages se renvoient les unes vers les autres, sauf si ce sont des URL relatives à chemin identique sur les deux sites : local, et « live ».

• Si le blog WordPress en ligne va être à « (domaine.tld)/wordpress/ », tout est prêt.
• Si WordPress va être dans « /wp/ », « /blog/ » ou un autre dossier, ou s’il va constituer le site à la racine du domaine, autrement dit si la page d’accueil dans WordPress va être directement la page d’accueil du site, sans redirection, avec une adresse de la forme « domaine.tld » ou « sous.domaine.tld », le site local n’est pas prêt.

La pile applicative Bitnami WordPress

Les piles applicatives Bitnami sont des ensembles autonomes à installer soit sur des serveurs distants, soit sur l’ordinateur de l’utilisateur. Plusieurs piles, y compris WordPress, peuvent être installées sur le même ordinateur.

Bitnami propose aussi des instances WordPress sur des serveurs distants.⁠8Bitnami Cloud Hosting comporte un panneau d’administration pour l’hébergement cloud Amazon. Si WordPress y est installé, il est par défaut à la racine.

URL de base

En utilisant telle quelle la pile Bitnami WordPress, on va constater que les URL relatives de pages sur le site, comme « /plan », qui seront à la racine du site en ligne, ne sont pas trouvées en local.⁠9Local WordPress: Set relative URIs through configuration, Bitnami Community support forum, 01/09/2020.

Dans la pile locale Bitnami WordPress gratuite, l’URL du site n’est pas à la racine mais commence par « /wordpress ». Grâce à cette sage décision, le serveur Apache peut aussi servir à d’autres usages. Car une fois que WordPress a été reconfiguré pour répondre à la racine du serveur, il ne pourra plus reprendre sa configuration initiale, et les dossiers ajoutés à la racine deviendront inaccessibles via Apache.

Utilitaire Bnconfig inclus

La même configuration est obtenue en local si après l’installation de la pile, un utilitaire inclus dans le paquetage est lancé une fois pour reconfigurer WordPress.

Un petit script propose de compléter l’interface utilisateur du logiciel.⁠10Réponse 17 dans « Local WordPress: Set relative URIs through configuration », Forum Bitnami, 07/09/2020. — En plus de cette version anglaise, une version française est disponible ici.

Avoir WordPress dans un autre dossier

Si le site doit comporter des pages servies autrement que via WordPress, et qui ne seront pas hébergées plutôt sur un autre site utilisant un sous-domaine – en pratique toujours sous le même domaine –, WordPress ne devra pas être installé à la racine, car avec WordPress tel quel, on ne peut mettre rien d’autre à côté, par exemple un autre CMS dans un sous-dossier, si WordPress est à la racine du domaine.

Couramment, les articles d’un site WordPress mis en place par un acteur économique sont regroupés en sous-pages de « /blog/ ». À l’installation de WordPress, un dossier « wp » est suggéré afin d’éviter que WordPress soit le système exclusif. Suggestion assortie du conseil de laisser le champ plutôt vide, pour une installation à la racine.

Bitnami explique pas à pas⁠11Move WordPress To A Different URL Path On The Same Domain With Apache, Documentation pour « Bitnami WordPress Stack For Windows / Linux / MacOS / OS X VM », Bitnami, 07/05/2020. les modifications à apporter dans les fichiers de configuration, dont 3 sont à éditer, avec à la clé, la possibilité de configurer WordPress pour fonctionner avec une URL comme « (serveur local)/blog ».

Un script de commandes⁠12Le script « urlbase.sh » est disponible ici. permet d’automatiser la configuration d’un sous-dossier.

Mettre WordPress à la racine

Pour être compatibles avec un site WordPress.org hébergé, dans la plupart des cas les URL du site WordPress local ne doivent pas commencer par « /wordpress », mais par « / ». Pour y parvenir, deux méthodes s’offrent à nous, une lourde et une légère.

Méthode légère

Le serveur local est instruit pour insérer « /wordpress » dans les URL des requêtes dont le début n’est pas « /wordpress », dans un fichier nommé « .htaccess » et placé dans son dossier racine, configuré pour être « (chemin de l’installation)/apache2/htdocs/ ».⁠13How do I ignore a directory in mod_rewrite?, Stack Overflow, 02/10/2008 ; Excluding a directory from a root .htaccess rewrite rule to allow it to be password protected?, Serverfault, 15/07/2012. Dans le code ci-après, seules les lignes ne commençant pas par « # » sont requises.⁠14Voir le fil cité ; le fichier est aussi disponible ici ; pour l’utiliser, supprimer « (disabled) » dans le nom du fichier, mais laisser le point, et activer l’option d’affichage des fichiers masqués.

#2020-09-06T1323+0200
# (disabled).htaccess
# Fix for WordPress Stack root folder configuration.
# Place this into the Apache server’s root directory,
# renaming it to ".htaccess" in the process, so that
# it results in /INSTALLPATH/apache2/htdocs/.htaccess
# Prepending it to WordPress .htaccess does not work.
<IfModule mod_headers.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_URI} !^/wordpress
RewriteRule ^ http://%{HTTP_HOST}/wordpress%{REQUEST_URI} [R=301]
</IfModule>

Comme les URL à récrire ne commencent pas par « /wordpress », ajouter ces instructions au début du fichier « .htaccess » de WordPress, dans « apps/​wordpress/​htdocs/ », n’a aucun effet.

Il n’est pas utile de redémarrer le serveur après la maintenance de fichiers « .htaccess ».

Le grand avantage de cette méthode est sa versatilité : En modifiant simplement le nom de ce fichier ou en le déplaçant dans un sous-dossier, dans le gestionnaire de fichiers ou dans le terminal, on peut activer et désactiver la réécriture d’URL en un rien de temps, selon que l’on travaille sur le site WordPress ou sur un autre projet hébergé sur le même serveur.

Chaque fois que le serveur donne suite à une requête, il doit ouvrir et lire tous les fichiers .htaccess présents sur le chemin. C’est ce qui pose le problème de performance pointé par Apache. Mais au niveau d’une petite installation locale, cela n’a pas d’importance.

Méthode lourde

Avec chaque pile applicative, Bitnami fournit plusieurs utilitaires, dont l’un, « bnconfig », se trouve à /(chemin de l’installation)/apps/(nom de l’application)/bnconfig. Il est capable de faire des changements, en partie non documentés et non détectés, suite auxquels WordPress répondra toujours aux requêtes faites à la racine du serveur, sauf pour afficher la page d’orientation « bitnami/index.html ». Il a une interface en ligne de commande, pas très conviviale, notamment qui n’affiche la mise en garde sur l’irréversibilité que si un argument autre que « / » est fourni.⁠15Learn About The Bitnami Configuration Tool, Documentation Bitnami, 13/08/2020 

L’utilitaire « bnconfig » ne doit être utilisé que si aucune autre tâche n’est dévolue au serveur Apache, à part de servir les pages du site WordPress. Après la commande suivante, dont l’exécution se termine par le redémarrage d’Apache, tous les dossiers autres que ceux gérés par WordPress deviendront inaccessibles, à la seule exception de « localhost/​bitnami/​index.html ». Cette page sera accessible par un clic sur le logo d’angle (« corner-logo.png ») nouvellement apparu dans l’angle inférieur droit des pages du site.

<chemin de l’installation>/apps/wordpress/bnconfig --appurl /

Le logo d’angle (non la seconde page de bienvenue) peut être désactivé par le même utilitaire « bnconfig » par une commande non listée mais indiquée en ligne⁠16Remove the Bitnami banner, documentation Bitnami, 08/04/2020. avec la commande :

<chemin de l’installation>/apps/wordpress/bnconfig --disable_banner 1

Pour retrouver le logo d’angle, supprimer le fichier vide « <chemin de l’installation>/apps/​bitnami/​disable-banner » (plutôt que de passer à la commande l’argument « 0 »).

Finaliser la reconfiguration

À la suite, 3 choses restent à faire :

1. Redémarrer Apache ;
2. Vider le cache du navigateur ;
3. Mettre à jour l’élément « Accueil » du menu principal.

Choisir et personnaliser le thème

Une partie essentielle d’un site WordPress est le thème.⁠17Le thème utilisé sur ce site est la version gratuite de Catch Everest de Thèmes Catch. Le thème par défaut de WordPress change d’année en année et constitue une une bonne base sur laquelle construire. On peut aussi l’utiliser tel quel, mais cela est parfois considéré comme un manque d’engagement.

Choix du thème

Choisir le thème est une démarche importante du fait que beaucoup en dépend et que toute erreur grave peut avoir de lourdes conséquences.⁠18Dimi, Remember Things To Pay Attention When Choosing Your WordPress Theme, ThemeFuse, 24/03/2016.

Plus un site est important, plus il risquera de nécessiter un thème spécifique, voire une création unique.

Souvent on pense que ce sujet pourra être reconsidéré à un stade ultérieur, car il n’est pas trop difficile de changer de thème en cours de route. Mais ce n’est que partiellement vrai, tant un thème sous-optimal peut faire perdre de temps à le corriger, de crédibilité si le site est scientifique, et d’argent s’il s’agit d’un commerce.

Adaptation du thème

De nombreux réglages concernent l’apparence du site. Ils sont dans la partie « Apparence » du panneau de configuration. Auto-explicatifs, ils sont très faciles à piloter, souvent par glisser-déposer. C’est ce qui rend WordPress très facile d’utilisation pour les administrateurs et auteurs.

Icône du site

WordPress explique sous « Personnaliser > Apparence > Identité du site> Icône du site » que l’icône est « ce que vous voyez dans les onglets du navigateur, les barres de signets, et dans les applications mobiles WordPress », avant de recommander qu’elle devrait être un carré « d’au moins 512 × 512 pixels ». Mais on peut aussi utiliser le format traditionnel d’une image de 16 × 16 pixels au format « bitmap » (extension « .bmp ») nommée « favicon », en renommant son extension en « .ico ».

Une fois l’icône en place, ce volet doit aussi être enregistré par le bouton « Publier » situé en haut.

Dériver un thème enfant

Créer un thème enfant est une démarche très simple et extrêmement payante.⁠19Tom Ewer, How to Create a Child Theme in WordPress, ManageWP, 03/09/2012. Le conseil officiel est de toujours commencer par créer un thème enfant⁠20L’extension gratuite Generate Child Theme, de Catch Themes, permet même d’automatiser ce processus. si des modifications sont à faire, voire dès que les règles de style ajoutées dans la feuille de style personnelle embarquée deviennent nombreuses, car celle-ci figure en tête de chaque page web du site. On peut certes trouver plus de 810 000 caractères de CSS minifié dans l’en-tête d’un site prestigieux réalisé avec WordPress,⁠21home.unicode.org mais mieux vaut mettre le tout dans une feuille de style externe, qui sera mise en cache par les navigateurs et remplacée en cas de mise à jour versionnée.⁠22Une manière simple de versionner dans WordPress est suggérée plus bas.

Compléter la partie PHP

Dans son tutoriel de dérivation de thème enfant,⁠23Child Themes, Theme Handbook, WordPress.org WordPress.org fournit le code à mettre dans un fichier « functions.php » dont le chemin à partir du dossier-racine du site sera « /wp-content/themes/nom-du-thème-enfant/functions.php ». Quand le processus indiqué dans le tutoriel est achevé, on peut avoir par exemple, dans le cas du présent site, ceci :

<?php
add_action( 'wp_enqueue_scripts', 'custom_theme_enqueue_styles' );
function custom_theme_enqueue_styles() {
    $parenthandle = 'catch-everest'; // This is the only field to edit in this.
    $theme = wp_get_theme();
    // This enqueues the parent theme configuration files:
    wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', 
        array(), // If the parent theme code has a dependency, copy it to here.
        $theme->parent()->get('Version') // Parsed in "style.css" header.
    );
    // This enqueues the child or custom theme configuration files:
    wp_enqueue_style( $theme, get_stylesheet_uri(),
        array( $parenthandle ),
        $theme->get('Version') // Needs Version in "style.css" header to work.
    );
}

Commentaires de code

Il est utile de toujours suivre la recommandation d’ajouter des commentaires tant que l’on a les informations, si le code ne s’explique pas de lui-même. Dans le code ci-dessus, plusieurs commentaires étaient fournis, d’autres ont été ajoutés, dont celui sur le seul endroit à modifier dans tout cela.

Dans le fichier ci-dessus, un en-tête comme celui-ci peut être ajouté. Pour l’interopérabilité avec le reste du monde, l’anglais est privilégié dans le code, à la différence de tout ce qui apparaît dans l’interface utilisateur et qui, si le public est Français, doit bien sûr être typographié en bon français.

<?php
/* Purpose:       Custom theme’s or child theme’s "functions.php"
 * Courtesy:      WordPress.org
 *                <https://developer.wordpress.org/themes/advanced-topics/child-themes/>
 * Date:          2020-05-26T1724+0200
 * Last modified: 2020-08-28T0214+0200
 */

Horodatage et sauvegarde

En principe, chaque fichier comporte une date de création figurant dans l’en-tête, et s’il est modifié, une deuxième date est mise à jour avant de publier. Cette syntaxe avec un T et sans espaces, sans deux-points et sans obliques est choisie parce qu’elle est compatible à la fois avec le web et avec les systèmes de fichiers.

Il peut aussi être utile de faire des copies de sauvegarde, idéalement avec la date dans le nom de fichier, dans cet ordre pour le classement automatique. Commencer par faire une sauvegarde est très important, en particulier quand il s’agit de PHP⁠24Histoire de PHP, The PHP Group, 2001–2020. ou JavaScript ou d’un autre langage de programmation interprété, car dans ces langages de script, il n’y a pas de compilateur pour vérifier le code, les modifications sont testées directement sur le site en développement.

On pourrait penser qu’une sauvegarde rapide n’est qu’une affaire de copier-coller Ctrl + CV dans le gestionnaire de fichiers. Or dans certains dossiers, les fichiers sont lus même sans porter leur nom d’origine, et le site peut tomber en panne pour cause de doublon.

Débogage en PHP

Contrairement au HTML, PHP a zéro tolérence pour les erreurs de syntaxe. Un point de trop ou un guillemet oublié, et généralement le site entier tombe en panne. Par défaut, WordPress informe seulement de la présence d’une « erreur fatale », et pour le reste affiche un écran blanc avec un lien vers le tutoriel de débogage de WordPress.org.⁠25Débogage de WordPress, Support WordPress.org.

Le mieux est d’avoir sous le coude une version du fichier de configuration réglé en débogage. Dans « (chemin de l’installation)/​apps/wordpress/htdocs/​wp-config.php », la ligne 80 d’origine est :

define( 'WP_DEBUG', false );

Selon les instructions de WordPress.org, en mode débogage cette ligne finit en « true » et est suivie de deux autres pour conserver une trace et inclure les scipts :

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', '/tmp/wp-errors.log' );
define( 'SCRIPT_DEBUG', true );

Ainsi, le fichier et la ligne défectueuse seront indiqués en haut de l’écran blanc. Après le débogage, d’autres informations s’affichent en haut de la page active, dont certaines ne nous concernent pas. On peut alors remettre le « wp-config.php » normal, et garder l’autre sous le coude, à côté, car ici ce sont bien les noms de fichiers qui déterminent ce qui est lu.

Versionnage de la feuille de style

Pour faire des économies sur le trafic internet et accélérer l’affichage des pages, les navigateurs mettent en cache un maximum de fichiers afin que les pages les mutualisent. Quand une feuille de style modifiée doit remplacer la version cachée, l’auteur du site peut le faire manuellement par Ctrl + F5, alors que pour les navigateurs des visiteurs, le signal est donné par le numéro de version qui change. Cela doit apparaître dans le code source de la page, qui lui est rechargé au simple appui sur F5. D’origine, la feuille CSS responsive du thème parent de ce site et la feuille du thème enfant sont incluses ainsi :

<link rel='stylesheet' id='catcheverest-responsive-css'  href='https://blog.dispoclavier.eu/wp-content/themes/catch-everest/css/responsive.css?ver=5.4.2' type='text/css' media='all' />
<link rel='stylesheet' id='catcheverest-style-css'  href='https://blog.dispoclavier.eu/wp-content/themes/catch-everest-custom/style.css?ver=5.4.2' type='text/css' media='all' />

La manière la plus simple et la plus sûre de faire recharger la feuille enfant après chaque mise à jour est d’incrémenter un numéro de build ajouté aux numéros majeur, mineur, patch du numéro de version de WordPress. La variable à modifier est définie à la ligne 16 de « /wp-includes/version.php » et sera utilisée dans le « functions.php » du thème enfant pour la concaténer avec un numéro librement incrémentable.

Le commentaire qui précède cette ligne pourra ressembler à ceci. La chaîne « /** » est comme « /* » pour le serveur, mais elle indique aux outils qui récupèrent de la documentation, qu’il y a des choses intéressantes ici.

/**
 * Versionizing style sheets
 *
 * For browsers to reload stylesheets, the WP version number
 * needs to be incremented, so we need to append a build number.
 * Referring to: wp-includes/version.php(16)
 * See: <https://stackoverflow.com/questions/118884/how-to-force-the-browser-to-reload-cached-css-js-files>
 * We’ll append a BUILD number to:
 * 
 * The WordPress version string.
 *
 * @global string $wp_version
 */
$wp_version = $wp_version . '.34';

Après chaque mise à jour de WordPress, ce numéro pourra être remis à zéro, et le dernier numéro noté en commentaire pour être sauté, au cas où des navigateurs auraient rechargé les feuilles de style entre-temps.

Désactiver le remplacement automatique des guillemets génériques

WordPress contient la fonction « wptexturize » qui remplace les guillemets génériques par des guillemets typographiques conformes à la région. Pour avoir des guillemets génériques dans le texte, il faut dès lors marquer ces endroits comme étant du code.

Or les guillemets typographiques sont nécessaires partout où l’on écrit en français, pas seulement dans les environnements équipés comme les traitements de texte et les blogs. C’est l’une des raisons d’être des dispositions de clavier complètes.

N’ayant plus besoin de wptexturize, on retrouve la liberté d’utiliser des guillemets génériques pour ce qu’ils sont, sans crier gare.

Pour désactiver wptexturize, il faut seulement ajouter une ligne de code dans son functions.php⁠26The Web Flash, How to Properly Disable wptexturize in WordPress, The Web Flash, 25/01/2018. :

/**
 * Disable wptexturize
 * 
 * With complete keyboard layouts in use, guessing typographic quotes
 * from generic quotes is no longer needed, and these can be used 
 * without marking them up as code.
 * 
 * <https://www.thewebflash.com/how-to-properly-disable-wptexturize-in-wordpress/>
 * 2020-08-27T2234+0200
 */
add_filter( 'run_wptexturize', '__return_false' );

Pages les plus importantes

La page d’accueil et la page des mentions légales, destinées à donner une idée de ce que représente le site, posent chacune un défi : La première ne doit souvent pas comporter de titre, du moins pas « Accueil », tout en figurant sous ce nom dans le plan du site ; la deuxième doit être liée convenablement dans le pied de page, aussi dans les thèmes qui ne prévoient pas de personnaliser cette zone.

Sauvegardes dans l’éditeur

En rédigeant du texte dans le nouvel éditeur de blocs après un certain temps, mieux vaut commencer par cliquer sur « Mettre à jour » ou faire Contrôle + S. Si WordPress indique que « La mise à jour a échoué », répéter l’action la fait souvent réussir. Si le mot « Enregistrement » précédé d’un nuage ne laisse plus la place à « Basculer en brouillon », la page doit être rechargée, car elle va sinon rester coincée pendant le prochain enregistrement et gaspiller du temps de calcul.

Il arrive alors que WordPress enregistre et publie malgré tout, et que la page se rafraîchit à l’identique. Il arrive aussi que WordPress récupère des textes déjà saisis mais pas encore publiés, parfois en deux temps, d’abord en montrant les différences pour approbation, ensuite en restaurant d’autres phrases saisies tout dernièrement, cette fois sans les montrer. Cette dernière étape est parfois proposée sans qu’il n’y ait aucune différence entre le texte affiché et le texte restauré, malgré que WordPress affirme que « la sauvegarde est différente ».

Pour éviter de stresser sur un éditeur non rafraîchi à temps, il est recommandé de copier la saisie non enregistrée, ou toute la page en cliquant dans la marge puis Ctrl + AC (avec une pause entre A et C, le temps que WordPress effectue la sélection de tout), avant de recharger la page. On peut se rassurer en collant la copie dans un éditeur de texte, puis dans un autre fichier la copie de la page rechargée, avant de differ les deux pour voir si et où il y a des différences.

Page d’accueil

Depuis la page d’accueil du tableau de bord, dont l’adresse à la racine du site est « /wp-admin », le lien « Modifiez votre page d’accueil » ouvre cette page dans l’éditeur, où elle se présente en général comme toutes les autres pages et articles avec un champ pour le titre, à remplir par « Accueil » si c’est ce nom qui doit apparaître dans l’onglet du navigateur et dans le plan du site, avant de le faire disparaître par une règle CSS.⁠27How to Hide the Page Title in WordPress – 5 Easy Ways!, Delicious Themes, 15/05/2020. Faute de remplir ce champ, la page portera son numéro dans le plan du site.

Une autre méthode serait de laisser le champ vide et d’indiquer « Accueil » dans les métadonnées de la page. Mais les deux sont indissociables si l’automatisme ne fait pas d’exception pour l’accueil.

Une solution est d’ajouter, d’abord dans le CSS additionnel pour voir directement l’effet dans l’aperçu de la page d’accueil à côté, la règle suivante :

.home .entry-title {
	display:none;
}

Cette règle agit sur l’élément du titre :

<h1 class="entry-title">Accueil</h1>

S’il porte une autre classe, comme « page-title » – à vérifier dans l’inspecteur (Maj+Ctrl+I) ou dans la source (Ctrl+U) –, il faut utiliser celle-ci. L’autre condition à remplir est que cet élément se trouve à l’intérieur d’un élément de classe « home ». Elle est remplie grâce au fait que WordPress ou le thème actif ajoute cette classe à l’élément « body » de la page d’accueil :

<body class="home page-template-default page […] ">

Mentions légales

Si pour le contenu, on peut partir de la page de mentions légales de ce site, il reste à insérer un lien facile à trouver mais discret qui apparaîtra sur chaque page. Beaucoup de thèmes même gratuits permettent de composer deux menus ou plus, et de placer l’un en haut, l’autre en bas.

Pour ajouter le lien dans un thème sans éditeur de pied de page, on peut copier le fichier « footer,php » du dossier du thème parent vers celui du thème enfant, puis y ajouter le lien au début du div « site-info » :

<div class="site-info">
	 <a href="/mentions-legales/">Mentions légales</a>

On peut ajouter plusieurs autres liens à cet endroit (voir la future section consacrée au pied de page).

Avoir des images en pleine largeur

Dans WordPress, selon le thème, les images insérées sont toujours entourées de marges. Les options « large » et « pleine largeur » peuvent ne pas être disponibles. Pour les ajouter, on peut ajouter ce code ⁠28John Regan, How to add full-width images in Gutenberg, 19/12/2018. dans le fichier « functions.php » du thème enfant :

/**
 * Add Theme Support for wide and full-width images.
 *
 * Add this to your theme's functions.php, or wherever else 
 * you are adding your add_theme_support() functions.
 * 
 * Courtesy: John Regan
 * <https://johnregan3.wordpress.com/2018/12/19/how-to-add-full-width-images-in-gutenberg/>
 * 
 * @action after_setup_theme
 */
function jr3_theme_setup() {
  add_theme_support( 'align-wide' );
}
add_action( 'after_setup_theme', 'jr3_theme_setup' );

Puis ce code dans la feuille de style du thème enfant :

/* Courtesy John Regan <https://johnregan3.wordpress.com/2018/12/19/how-to-add-full-width-images-in-gutenberg/> */
.alignwide {
  /* Set these margins to work with your own theme. */
  margin-left: -80px;
  margin-right: -80px;
  max-width: 100vw;
}
.alignfull {
  margin-left: calc(-100vw / 2 + 100% / 2);
  margin-right: calc(-100vw / 2 + 100% / 2);
  max-width: 100vw;
}
.alignfull img {
  width: 100vw;
}

Mettre en forme des blocs

Des résumés et des encadrés peuvent être ajoutés en leur assignant une classe stylée en fonction. Ces classes peuvent ensuite servir partout. Pour les appliquer, on peut les saisir dans la rubrique « Avancé », champ « Classe(s) CSS additionnelles », du nouvel éditeur de blocs dit Gutenberg de WordPress.⁠29WordPress Editor, section « How does the block editor work » — Ce nouvel éditeur de blocs est par contre dépourvu des raccourcis de titres et de paragraphe (Maj=Alt=2 à 7) disponibles dans l’éditeur classique.

Introductions et résumés

Ces classes peuvent être nommées « in » ou « intro », et « ab » ou « res », et les options de mise en forme sont multiples, par exemple :

.in {
	font-size: 120%;
}
.ab {
	margin-left: 4%;
	font-size: 120%;
	font-style: italic;
}

Les marges supplémentaires sont de préférence exprimées en pourcentage afin de faciliter l’adaptation aux différentes tailles d’écran. Ce pourcentage se calcule à partir de la largeur du bloc, tandis que l’unité « vw » pour « viewport width » se base sur la largeur de l’écran, dont elle représente un pour cent.

Encadré de prévention de risque

L’encadré rouge dans la section « Précautions » ci-dessus est produit tout entier, y compris le symbole de danger, par ce code CSS placé lui aussi dans la feuille de style du thème enfant. Dans la marge intérieure (« padding »), les côtés sont dans le sens horaire ; il s’agit ici d’avoir une marge plus importante à gauche, et une marge moins grande sur les autres côtés.

Ce qui apparaît sous la forme de « ::before » et « ::first-line » sont des « pseudo-éléments », ou éléments virtuels, qui ne sont pas codés en HTML mais ajoutés par CSS sur des critères de position. Selon la syntaxe en vigueur, les éléments virtuels sont précédés d’un double deux-points à la suite de l’élément auquel ils se rattachent, et qui peut être représenté par sa classe ou son identifiant. (Les classes virtuelles pour leur part, comme « :hover », prennent un seul deux-points.)

.att {
	border: 3px solid red;
	padding: 4% 4% 4% 6%;
	color: red;
	page-break-inside: avoid;
}
.att::before {
	font-size: 140%;
	content: "⚠ ";
}
.att::first-line {
	margin-left: -30px;
}

Sur les écrans de téléphone, le symbole normalement dans la marge doit être placé au-dessus.

@media (max-device-width: 900px) {
	.att::before {
		content: '⚠';
		display: block;
	}
	.att::first-line {
		margin-left: none;
	}
}

(Comme guillemets, les deux types « ' » et « " » sont équivalents.)

Compléter avec des extensions

Une instance WordPress est ainsi complétée par un thème, obligatoire, et plusieurs extensions optionnelles. Les plugins WordPress ajoutent de la fonctionnalité qui va au-delà de ce que l’on attend d’un blog à la base. Ce système courant parmi les logiciels open-source offre l’opportunité aux développeurs d’entrer en compétition pour offrir la meilleure qualité aux utilisateurs, invités à donner des notes et écrire des recensions, parfois aussi à faire un don si l’extension est gratuite. Parmi celles présentées ici, toutes gratuites, une seule a choisi cette démarche, tandis que plusieurs demandent à noter et commenter. Une partie des plugins du marché sont payants, tout comme une partie des thèmes. Nombre d’entre les produits payants ont des variantes bridées offertes gratuitement, comme le thème parent de ce site.

Notes de fin

Comme la gestion des notes influe sur la syntaxe des articles et inclut des questions de conversion entre différents formats, elle doit entrer en considération bien en amont. Aussi les résultats de l’évaluation d’une vingtaine d’extensions ont-ils été inclus dans la section « Gérer les notes de fin » du premier chapitre de cette méthode.

Solution simple

Quelques notes peuvent être gérées manuellement. À la fin de l’article, on ajoute le titre « Note » ou « Notes », en lui donnant l’identifiant « notes », puis suit une liste numérotée. Le tout peut être précédé d’un bloc séparateur et/ou d’un bloc d’espacement.

Les appels de note sont simplement des chiffres en exposant, éventuellement préformatés, avec un hyperlien vers le titre « Notes ».

Pour ajouter les liens de retour, il faut pouvoir (dans l’interface Gutenberg) ou savoir (en éditant le code, ou le bloc en HTML) ajouter un identifiant à l’alinéa de l’appel de note. Le lien de retour peut être placé dans le mot « retour » ou dans un symbole, par exemple « ▲ » ajouté au début ou à la fin de la note, de préférence à la fin pour ne pas gêner la lecture. Les ancres ajoutées et avec elles, le début de l’alinéa ciblé sont cachées par la barre d’outils d’édition, jusqu’à ce que cette barre soit désactivée dans les préférences utilisateur par utilisateur,⁠30Disable WordPress admin bar ou pour tous les utilisateurs.⁠31How to disable WordPress admin bar for all users except administrators

Solution recommandée

La seule solution utilisable dans de bonnes conditions à la fois par les visiteurs et par les auteurs est l’extension « Footnotes ».⁠32Mark Cheret, David Artiss, Footnotes, WordPress.org, 2019, réutilisant du code de Stefan Herndler (feuille de style datée du 15/05/2014). Encore est-elle inutilisable en l’état, à moins que le site doive absolument se faire une mauvaise réputation de délabrement et de dysfonctionnement. La plupart des solutions gratuites fonctionnent mal sans appliquer au moins une ou deux astuces (mais il arrive que des solutions payantes soient pires).

Débogage

À part certains réglages inaccessibles dans le panneau de configuration mais dont les valeurs par défaut ne sont peut-être pas préférées, il faut noter que le JavaScript ne doit pas être désactivé dans le navigateur, sinon cette extension perd toute interactivité. Le pire est que le lien « continuer » dans l’infoboîte réglée en abrégé ne fonctionne pas du tout, sauf qu’un clic fait défiler vers le haut de page.

Parmi les fichiers de cette extension sous licence GNU GPLv3, ceux dans lesquels des modifications sont suggérées dans la suite, sont disponibles ici.

Bouton « plus » des info-boîtes abrégées

L’abbréviation des info-boîtes, comme les info-boîtes elles-mêmes, est optionnelle, mais en présence de notes un peu longues, mieux vaut l’activer, pour éviter les info-boîtes qui dépassent le bord de l’écran par le haut ou le bas.

Le bug est à la ligne 370 de « wp-content/plugins/​footnotes/class/​task.php », où il manque l’identifiant préfixe, en plus de l’hyperlien pour fonctionner aussi sans JavaScript :

$l_str_ExcerptText .= " ..." . sprintf(__("%scontinue%s", MCI_Footnotes_Config::C_STR_PLUGIN_NAME), '<a href="" onclick="footnote_moveToAnchor(\'footnote_plugin_reference_'.$l_str_Index.'\');">', '</a>');

L’identifiant préfixe s’utilise notamment 7 lignes plus loin. Comme il est un nombre aléatoire, défini à la ligne 500, sa neutralisation est proposée plus bas, mais ici il faut ajouter sa variable :

self::$a_str_Prefix

L’identifiant de fragment de l’ancre de la note devient ainsi :

footnote_plugin_reference_' . self::$a_str_Prefix . $l_str_Index

L’URL de l’hyperlien doit aussi être renseignée, mais il reste d’autres hyperliens à ajouter dans d’autres fichiers. Les préfixes invariables, dont la longueur est excessive, vu qu’ils pourront apparaître dans la barre d’URL, ne pourraient être raccourcis que dans une opération synchronisée entre tous les fichiers concernés. Pour l’instant, on a ceci, mais cela va encore changer ci-après :

$l_str_ExcerptText .= " ..." . sprintf(__("%scontinue%s", MCI_Footnotes_Config::C_STR_PLUGIN_NAME), '<a href="#footnote_plugin_reference_' . self::$a_str_Prefix.$l_str_Index . '" onclick="footnote_moveToAnchor(\'footnote_plugin_reference_' . self::$a_str_Prefix . $l_str_Index . '\');">', '</a>');

Traduction du bouton « plus »

Après les points de suspension – à changer de trois points en U+2026 « … », faire précéder d’une espace insécable, et faire suivre d’une espace – le mot anglais « continue » figure faute de traduction française de l’extension, et surtout parce que cet élément a été exclu du panneau de configuration, qui permet de saisir le titre de la liste des notes.

Cela est le seul élément de l’interface visiteur à dépendre de la traduction, et il est appelé à l’endroit en cours d’édition ; autant y remplacer la variable directement par le texte à afficher, soumis au choix des auteurs de site, qui pour l’instant doivent éditer cette ligne, en la remplaçant par exemple par ceci :

$l_str_ExcerptText .= '&nbsp;&#x2026; <a class="continue" href="#footnote_plugin_reference_' . self::$a_str_Prefix.$l_str_Index . '" onclick="footnote_moveToAnchor(\'footnote_plugin_reference_' . self::$a_str_Prefix . $l_str_Index . '\');">lire&nbsp;plus</a>';

La classe « continue » doit permettre d’appliquer optionnellement de l’italique et une couleur :

.continue {
	font-style: italic;
	color: green;
	text-decoration: underline;
}
.continue:hover {
	color: blue;
}

Suppression du préfixe aléatoire

L’identifiant préfixe, défini à la ligne 500 comme un entier aléatoire à 4 chiffres suivi d’un tiret bas, s’utilise notamment 7 lignes plus loin. Par son instabilité, ce numéro empêche les notes d’avoir une URL, sans doute pour empêcher les visiteurs de se les partager, car les numéros de notes eux-mêmes sont instables : Une note ajoutée, et toutes les suivantes ont leur numéro décalé.

Si créer des complications inutiles est un geste mal vu, le préfixe aléatoire doit être supprimé dès maintenant. Cela se fait en désactivant (commentant) la ligne 500 :

//self::$a_str_Prefix = rand(1000, 9999) . "_";

Autres hyperliens manquants

Les appels de note et les liens de retour sont sans aucun hyperlien. Cela a une double conséquence :

1. Les renvois de défilement entre les appels de note et les notes fonctionnent uniquement si le JavaScript n’est pas désactivé dans le navigateur, alors que c’est facile à faire et, même si ce n’est pas recommandé par l’industrie, à cause de la perte de fonctionnalités, c’est préféré en raison de la protection contre le gaspillage de ressources, pour ne citer que cela.
2. Les notes ne peuvent être partagées, même à court terme où elles ne risquent pas de changer de numéro, ni – ce qui est peut-être plus grave – sur les pages stables. Une telle privation de fonctionnalité est d’autant plus répréhensible qu’elle est totalement gratuite : la présence et le fonctionnement des hyperliens internes n’empêchent pas le défilement contrôlé.

Les autres hyperliens s’ajoutent dans deux fichiers : « templates/​public/footnote.html » et « templates/​public/​reference-container-body.html ». Dans le premier,

<sup id="footnote_plugin_tooltip_[[id]]" class="footnote_plugin_tooltip_text" onclick="footnote_moveToAnchor('footnote_plugin_reference_[[id]]');">[[before]][[index]][[after]]</sup>

devient :

<a href="#footnote_plugin_reference_[[id]]"><sup id="footnote_plugin_tooltip_[[id]]" class="footnote_plugin_tooltip_text" onclick="footnote_moveToAnchor('footnote_plugin_reference_[[id]]');">[[before]][[index]][[after]]</sup></a>

Et dans « templates/​public/​reference-container-body.html », les deux lignes :

<td class="footnote_plugin_index"><span id="footnote_plugin_reference_[[id]]">[[index]].</span></td>
<td class="footnote_plugin_link"><span onclick="footnote_moveToAnchor('footnote_plugin_tooltip_[[id]]');">[[arrow]]</span></td>

deviennent, avec la suppression simultanée du symbole de retour, et l’attribution de sa fonctionnalité au numéro de note – voire à toute sa cellule de tableau, en défilement contrôlé –, une seule ligne :

<td class="footnote_plugin_index" id="footnote_plugin_reference_[[id]]" onclick="footnote_moveToAnchor('footnote_plugin_tooltip_[[id]]');"><a href="#footnote_plugin_tooltip_[[id]]">[[index]].</a></td>

Conversion en PDF et impression

Quand une page avec des notes par Footnotes est imprimée, le contenu des info-boîtes s’insère dans le texte. La règle qui doit le rendre invisible doit être restreinte à l’impression :

/* prevent Footnote plugin tooltip content from showing up in PDF */
@media print {
	.footnote_tooltip {
		display:none;
	}
}

Réglages

Défilement contrôlé

Ce plugin bénéficie d’un script réglant la durée et le niveau du défilement. Ne pas coller la cible tout en haut de l’écran est utile pour retrouver le fil après le retour à l’appel de note. Éviter les sauts brusques permet de voir le sens du défilement afin de ne pas perdre tous les repères — même si cela n’est pas utile quand il s’agit du va-et-vient entre le texte et les notes.

Dans cette extension, ces deux paramètres ont été soustraits au contrôle facile par les administrateurs, qui ne peuvent les changer qu’en retrouvant le code concerné dans les sources du plugin.

Raccourcir la durée

Or le défilement est paramétré pour durer une seconde entière, beaucoup plus qu’il n’en faut pour voir dans quel sens, et pas assez pour apercevoir le contenu au survol. Pour chaque consultation de note, on nous impose deux secondes de brouillage, alors que nous connaissons le sens à l’avance.

Le chiffre de 1000 (millisecondes) est au bas de « templates/​public/​reference-container.html » :

function footnote_moveToAnchor(p_str_TargetID) {
	footnote_expand_reference_container();
	var l_obj_Target = jQuery("#" + p_str_TargetID);
	if(l_obj_Target.length) {
		jQuery('html, body').animate({
			scrollTop: l_obj_Target.offset().top - window.innerHeight/2
		}, 1000);
	}
}

La durée suggérée est de 80 ms ; c’est presque instantané mais donne quand même une petite idée.

Ajuster le niveau

À la fin de la ligne précédente, ci-dessus, on voit aussi ce qui est la réalité assez contre-intuitive, pénible et agaçante à la longue, de cette extension : Quand elle a fini de défiler, il faut regarder — au milieu de l’écran. C’est à mi-hauteur qu’il faut chercher la cible. Les notes sont assez espacées, mais cela fait quand même perdre du temps, surtout aux visiteurs qui découvrent le site et n’en ont pas l’habitude.

Peu probable que la mi-hauteur s’imposera comme le nouveau standard de fait. Non qu’il faille remettre le niveau à 0 en partant du haut, pour continuer de coller au bord lors du retour dans le texte, où il est alors souvent nécessaire de défiler un peu plus vers le haut pour reprendre la lecture. 5 % paraît un bon compromis entre l’affichage de la note et le retour dans le texte :

function footnote_moveToAnchor(p_str_TargetID) {
	footnote_expand_reference_container();
	var l_obj_Target = jQuery("#" + p_str_TargetID);
	if(l_obj_Target.length) {
		jQuery('html, body').animate({
			scrollTop: l_obj_Target.offset().top - window.innerHeight * .05
		}, 80);
	}
}

Affichage des info-boîtes

Les notes peuvent être lues non seulement en bas de page, au prix d’un double défilement, mais aussi en petits caractères dans des info-boîtes s’affichant au survol. La présence, la qualité et le positionnement de ces encadrés surimposés sont des critères qui entrent en ligne de compte dans l’évaluation des plugins. Les dimensions peuvent être réglées dans le panneau de contrôle du plugin. Une option, évoquée plus haut, permet de n’afficher que les N permiers caractères.

Positionnement

La position de l’info-boîte peut être choisie parmi plusieurs options, puis ajustée au pixel près. Initialement nuls, les décalages horizontal et vertical peuvent être définis dans une fourchette de ±50 pixels. La boîte doit être assez près de l’appel de note pour ne pas s’effacer quand le pointeur y passe pour cliquer sur un hyperlien.

Délais

Ce qui n’est pas réglable dans le panneau sont le délai avant affichage et la durée des transitions. Ces paramètres sont dans le petit script inséré dans la source avec chaque note, dans « (chemin de l’installation)/​apps/wordpress/​htdocs/​wp-content/​plugins/​footnotes/​templates/​public/​tooltip.html » :

<script type="text/javascript">
	jQuery("#footnote_plugin_tooltip_[[id]]").tooltip({
		tip: "#footnote_plugin_tooltip_text_[[id]]",
		tipClass: "footnote_tooltip",
		effect: "fade",
		fadeOutSpeed: 100,
		predelay: 400,
		position: "[[position]]",
		relative: true,
		offset: [[[offset-y]], [[offset-x]]]
	});
</script>

Le pré-délai laisse le temps de cliquer si c’est dans ce but que l’appel est pointé. on peut aussi ajouter une transition d’effacement :

	predelay: 800,
	fadeInSpeed: 200,
	fadeOutSpeed: 2000,

Ce script peut optionnellement être minifié, surtout que la table des matières est “minifiée” d’origine et est répartie sur plusieurs lignes selon le code modifié plus haut.⁠33Dans le dépôt de ressources associé à cette méthode, les fichiers dans « plugins/footnotes/​templates/public/ » ont leurs scripts minifiés. Les mêmes fichiers non minifiés sont dans le sous-dossier « notMinified ».

Ajuster les styles

Les appels de note sont parfois considérés comme étant placés trop haut.⁠34Cheret.de, commentaire de Timothy W. : « No matter what setting I put in the number of the footnote in the text of a post is set too high. » Mais en français, on a l’habitude des exposants. Des crochets ont toutefois été ajoutés dans le panneau de contrôle de l’extension, pour leur effet d’élargissement, qui améliore la visibilité et réduit surtout la difficulté de pointer les appels.

Quelques autres ajustements sont toutefois dans ce code CSS concerrnant les couleurs, l’affichage des infoboîtes, et la mise en page des notes de bas de page dont les numéros ne doivent pas être alignés avec le corps des notes :

/*footnotes*/
div.fn {
	margin: 10px 20px;
	text-indent: -20px;
}
.footnote_plugin_text {
	color:#000000;
}
td.footnote_plugin_text a {
	color:#000099;
}
.footnote_tooltip {
	text-align:left;
}
.footnote_plugin_index {
	width:9px;
	cursor:pointer;
	color:#000099;
}
.footnote_plugin_text {
	width:99%;
}

Panneau de configuration

Les auteurs de sites doivent pouvoir modifier facilement les réglages codés en dur jusqu’ici parce qu’ils manquent dans le panneau de configuration. Dans cette sous-section, les paramètres devront être complétés et mieux répartis entre les onglets « Réglages », centré sur le fonctionnement, et « Personnalisation » qui concerne le réglage de l’aspect par les styles.

Échapper à la minification subie

Utiliser PHP a pour conséquence que le code source des pages envoyées aux visiteurs est généré par le serveur selon un algorithme au lieu d’être écrit par des humains. Ceux-ci sont tentés de ne vérifier que la page, sans regarder sa source, où toute la table des matières peut être sur une seule ligne, parce qu’elle sort d’une variable, remplie en mettant bout à bout tous les éléments HTML qui la composent. Le résultat ressemble à du code minifié.

Cela n’empêche pas ces pages de fonctionner dans les navigateurs. Mais les visiteurs peuvent faire Ctrl + U ou un clic droit, « Afficher le code source de la page », pour vérifier quelque chose, puisque la source contient beaucoup plus d’informations que la belle page. Le code mal présenté rebute les visiteurs et donne une mauvaise impression qui rejaillit sur l’auteur et ses outils.

Sans même parler d’indentation, le minimum à faire dans le script PHP⁠35php is a scripting language or server side language?, Stack Overflow, 06/07/2015. est de prévoir un saut de ligne après les balises fermantes d’éléments de liste. On utilise « \r\n » plutôt que « \n » seul, pour la compatibilité avec Windows.⁠36Difference between '\n' and '\r\n', Software Engineering, Stack Exchange, 22/12/2010 ; Why is a newline 2 bytes in Windows?, Stack Overflow, 08/03/2013. Ces séquences d’échappement ne fonctionnent comme telles que si elles sont entourées de guillemets doubles. On pourrait aussi refactoriser tout le code en utilisant des guillemets doubles à la place des simples, cela éviterait de multiplier les concaténations (par « . » en PHP) mais obligerait à échapper les guillemets doubles à insérer tels quels dans le code HTML. La raison pour laquelle les guillemets simples sont préférés est qu’ils permettent d’inclure des guillemets doubles sans les échapper.⁠37What is the difference between single-quoted and double-quoted strings in PHP?, Stack Overflow, 10/08/2010.

Aérer le code de la liste des notes

Pour éviter que tout le bloc des notes de fin soit sur une seule ligne dans la source, on peut insérer un ou deux sauts de ligne dans « wp-content/plugins/​footnotes/class/​task.php » en remplaçant la ligne 482 :

$l_str_Body .= $l_obj_Template->getContent();

Il faut le faire par étapes, comme ainsi :

$footnote_item_temp = $l_obj_Template->getContent();
$footnote_item_temp .= "\r\n\r\n";
$l_str_Body .= $footnote_item_temp;

Accès rapide et ancres de titres

Les URL des titres sont idéalement disponibles aussi bien dans une table des matières, qui peut s’intituler « Accès rapide », qu’au niveau des titres eux-mêmes.⁠38Christian Weiske, Usability: Clickable heading links, 04/01/2012–01/07/2015. La meilleure extension WordPress pour faire cela est Table of Contents Plus,⁠39Michael Tran, Table of Contents Plus, WordPress.org ; Dublue, Table of Contents Plus, 2012. qui peut aussi générer un plan du site, optionnellement en plusieurs pages. Elle a été traduite en français et dans 19 autres langues, et elle est la plus utilisée dans ce domaines.⁠40WordPress.org, TOC+, Statistiques. Elle peut être étendue pour remplacer les plugins d’ancres de titres, tout en améliorant la cohérence et le confort de navigation grâce aux liens de retour.

Défilement doux ou « saut » direct

Un premier critère à considérer est le comportement au défilement. Les effets d’animation appelés « défilement doux », réalisés en JavaScript ou en jQuery, produisent des transitions avec parfois un ralentissement final (voire une accélération initiale). Ils sont censés éviter de surprendre le visiteur, mais c’est très relatif puisque le défilement fait suite à une action et ne peut produire de surprise. Sur un site scientifique consulté pour l’information, ces optimisations de l’expérience utilisateur sont secondaires et ont plutôt tendance à faire perdre du temps. Mieux vaut privilégier la sobriété. Table of Contents Plus offre les deux comportements au choix.

Décalage de défilement

La tendance est d’éviter que les titres s’affichent collés contre le bord supérieur de l’écran selon le comportement standard des navigateurs selon HTML. Les notes et les retours à la table des matières ont avantage à positionner les cibles sous le bord de l’écran pour aider l’utilisateur à les retrouver. Mais les titres sont positionnés de préférence à une distance convenable du bord d’écran, afin de faire voir ce qui les précède immédiatement : du texte, ou un titre supérieur. Ce fonctionnement est connu du lecteur PDF de Chrome. En HTML, il se fait de préférence sans script, afin d’être présent aussi quand l’URL d’un titre est ouverte dans un nouvel onglet, suite à un partage ou si le visiteur souhaite ouvrir plusieurs sections en parallèle, par Ctrl+ clic dans la table des matières. (Dans ce dernier cas, les scripts impassibles font défiler en dépit de l’intention de l’utilisateur.) Un avantage supplémentaire est de fonctionner aussi dans les navigateurs où le JavaScript est désactivé.

Réaliser un décalage sans script

Plusieurs solutions avec CSS et avec ou sans HTML ajouté existent⁠41Chris Coyer, Hash Tag Links That Don’t Headbutt The Browser Window, CSS Tricks, 08/11/2017., mais il est plus sûr de déplacer l’ancre dans un div au sein du titre, et de décaler ce div vers le haut par CSS.

Cela est fait dans « toc.php »⁠42Le fichier modifié, toujours sous licence GNU GPLv2, est téléchargeable ici. de Table of Contents Plus, entre les lignes 1386 et 1389 qui se présentent ainsi :

array(
	$matches[$i][1] . '<span id="' . $anchor . '">',
	'</span></h' . $matches[$i][2] . '>'
),

Avant la balise fermante du titre vient le div « ancre décalée », porteur de l’identifiant. En conséquence il faut supprimer le même identifiant du span entourant le titre. On peut laisser le code du span, car il sera réutilisé dans la suite.

Avant de commencer à éditer un fichier PHP, il faut absolument faire une sauvegarde, afin d’être sûr de pouvoir tout annuler, en l’occurrence sans désinstaller et réinstaller le plugin.

Pour la clarté, une étape intermédiaire, où l’élément « span » serait supprimé tout entier, ressemblerait à ceci :

array(
	$matches[$i][1],
	'<div class="offset-anchor" id="' . $anchor . '"></div></h' . $matches[$i][2] . '>'
),

Titres avec leurs liens

La mise à disposition de l’URL de l’ancre au niveau du titre est considérée comme une bonne pratique. De nombreux sites offrent cette fonctionnalité.⁠43Une référence en la matière est GitHub. Exemple dans la documentation. Or si une table des matières est présente, deux liens différents peuvent être attendus au niveau de chaque titre : celui du titre dans la page, et celui du titre dans la table des matières. Ce dernier est le lien de retour.⁠44La fonctionnalité est demandée aussi sur le web : marbux, maketoc needs backlinks from headings to TOC, heading formatting options, outline numbering, etc., Development – Tiki Wiki CMS Groupware, 10/11/2005–10/09/2009 : « Backlinks from headings.
Links from the TOC to headings are now 1-way. For larger pages, maketoc would be much more user friendly for those viewing pages if clicking on a heading would take you back to the TOC. ».

Symboles de lien ajoutés

Plusieurs extensions WordPress proposent d’ajouter le lien de l’ancre du titre dans un symbole ajouté qui s’affiche en général au survol du pointeur à hauteur du titre.⁠45L’exemple sur Tiki Wiki cité ci-dessus ; la page sur CSS-Tricks citée plus bas, parmi beaucoup d’autres. Elles sont intéressantes pour les sites dépourvus de tables des matières.

Add Anchor Links⁠46Karolína Vyskočilová, Add Anchor Links, WordPress.org. est la meilleure extension d’ancres de titres. Elle embarque devant chaque titre une petite icône de lien en SVG, dans la marge, qui est portable.⁠47Pour copier-coller un titre avec son icône de lien Add Anchor Links contenant le lien, il faut commencer la sélection au moins un caractère avant le saut de paragraphe précédent, à effacer après le collage. Son générateur d’identifiants de fragment respecte les écritures non-latines et supprime les diacritiques sur les lettres latines. Cette extension est compatible avec les numéros de titres en CSS.

Interférence avec la table des matières

Comme les extensions d’ancres de titres génèrent des identifiants de fragment pour leur propre compte, et que l’attribut « name » – qui permettrait de répartir « id » et « name » entre les extensions, l’une générant des ID, l’autre des noms – ne doit pas être utilisé pour les fragments,⁠48Difference between id and name attributes in HTML, Stackoverflow, 09/09/2009. deux risques se présentent :

• Les deux plugins aboutissent aux mêmes identifiants,⁠49C’est dans ce sens qu’on a pu affirmer qu’un plugin d’ancres de titres est compatible avec un plugin de table des matières, comme dans : Best heading anchor plugin on the marketplace, Forum WordPress.org, 08/06/2020., qui sont alors doublonnés. Comme ils sont rattachés au même endroit dans la page, le fait que le deuxième soit ignoré n’a pas d’incidence pratique. Le côté “bricolé” n’apparaît qu’à l’examen du code source des pages servies.
• Les deux plugins utilisent des méthodes différentes pour générer les identifiants : certains suppriment les diacritiques, d’autres non ; il en existe même qui suppriment toutes les lettres non-latines au lieu d’utiliser l’encodage-pourcent. L’avantage de l’absence de doublons est annulé par l’inconvénient de disposer de deux URL par titre, selon qu’elle est récupérée au niveau du titre ou dans la table des matières. Vu que les deux ancres sont rattachées au même titre, aucune incidence pratique, de nouveau, mais le “bricolage” est plus visible.

La seule solution qui ne prête pas à critique est que la même extension gère et la table des matières, et les liens de titres. La suite montre que c’est même la seule solution viable.

Génération des identifiants de fragment

Les algorithmes de génération d’identifiants de fragment, attribués aux titres, risquent d’en faire trop, comme entrevu ci-dessus, dans le souci de répondre aux contraintes de la conformité.⁠50Jeff Starr, (Please) Stop Using Unsafe Characters in URLs, Perishable Press, 04/09/2020. ; Mislav, Uniform Resource Identifier (URI): Generic Syntax RFC 3986, Prettify RFC.}}} L’extension de table des matières qui connaît le plus grand succès, est utilisée sur ce site et recommandée dans cette page, Table of Contents Plus, n’en est pas exempte. La solution tient en quelques lignes de code à modifier ou ajouter.

Le problème réside principalement à la ligne 1147 du fichier « toc.php », situé dans « wp-content/plugins/table-of-contents-plus » :

// remove non alphanumeric chars
$return = preg_replace( '/[^a-zA-Z0-9 \-_]*/', '', $return );

Les écritures non-latines vont rester sur des chaînes vides et utiliser le supplétif, survenant autant de fois que la page compte d’intertitres, ce qui résultera dans un simple numérotage continu des titres, et une instabilité totale des identifiants, décalés dès qu’un titre supplémentaire, aussi unique fût-il, est intercalé. On ne saurait faire au monde non-latin un tel affront, pour la simple raison que l’encodage-pourcent, grâce auquel les ancres s’affichent en clair dans la barre d’URL du navigateur, est ignoré.

WordPress contient plusieurs fonctions dans le domaine, qui ne se valent pas et doivent être soigneusement choisies et, le cas échéant, déboguées. L’une d’entre elles est « remove_accents() » qui remplace aussi (sauf en allemand) le eszett allemand par un simple s, comme si cela faisait sens, et ignore toujours la majuscule de cette lettre, dans Unicode depuis 2008.⁠51Capital ẞ, Wikipedia anglophone. Elle supprime aussi le symbole £, alors que l’€ devient E. Des choses sur lesquelles il faut prendre les devants. Une autre, « sanitize_titles_with_dashes() » est plus performante que « sanitize_titles() », qui elle, inclut essentiellement la fonction de suppression des diacritiques et nécessite donc les mêmes précautions.

Correction d’un algorithme de génération d’identifiants

La conversion des lettres latines diacritées en lettres de base est admise, car elle est propice à la lisibilité des ancres. Si les lettres doivent conserver leurs diacritiques, il faut supprimer les 5 lignes ci-dessous, qui rectifient et appliquent la fonction WordPress de suppression de diacritiques « remove_accents() », appliquée à la ligne 1138 du code d’origine de « toc.php »⁠52Si tous les changements sont acceptés, au lieu de faire les modifications une à une, on peut télécharger ici le fichier fini, sous licence libre GNU GPLv2 comme l’original, ou le visualiser dans le navigateur (pour cela, cliquer sur la version texte), et le « differ » contre le fichier d’origine avant de le mettre à sa place. :

// convert accented characters to ASCII       // OK, meets user expectations
$return = str_replace( 'ß', 'ss', $return );  // useful default, not German only
$return = str_replace( 'ẞ', 'SS', $return );  // now we have uppercase too
$return = str_replace( '£', 'L', $return );   // euro is E, why not pound L
$return = remove_accents( $return ); // bad function as-is ('ß' defaults to 's')

Vient ensuite le principal problème qu’est la ligne 1147 qui « supprime les caractères non alphanumériques ». Elle et son commentaire sont remplacés par la fonction WordPress « sanitize_titles_with_dashes() », complétée par la suppression de l’espace fine insécable :

// remove non alphanumeric chars    // detrimental to i18n, poor UX for non-Latin
// $return = preg_replace( '/[^a-zA-Z0-9 \-_]*/', '', $return );  // instead use:
$return = sanitize_title_with_dashes( $return, $return, 'save' );  // performs better
// $context must be 'save', or a bunch of characters won’t be stripped off
$return = str_replace( '%e2%80%af', '', $return );  // NNBSP missing from the list

Liens dans les titres et leurs numéros

Le mieux est sans doute de mettre les liens des titres sur les titres – ce système offre aussi la plus grande utilisabilité, puisque les visiteurs peuvent récupérer les liens tout le long des titres et ne sont pas tenus de viser un point précis –, et idéalement les autres liens, les liens de retour, sur les numéros, qui pour le confort de consultation devraient figurer non seulement dans la table des matières, mais aussi devant les titres eux-mêmes, où il peuvent être moins colorés afin de ne pas trop disperser l’attention dès le premier survol.

Liens dans les titres

Il reste encore à remplacer le « span id », laissé à l’étape précédente (mais effacé du code pour la clarté) par un « a href » :

array(
	$matches[$i][1] . '<a href="#' . $anchor . '" class="heading-link">',
	'</a><div class="offset-anchor" id="' . $anchor . '"></div></h' . $matches[$i][2] . '>'
),

Voilà les titres correctement ancrés et hyperliés. Leurs numéros pourraient être ajoutés par l’extension, codés en dur comme dans la table des matières. Cela n’est pas inclus, et il faut être compétent en PHP pour ajouter cela. Dans la solution plus simple présentée ici, les numéros sont ajoutés par des compteurs CSS, et leurs liens sont produits par une numérotation plate des titres. La condition pour que tout cela fonctionne est que tous les titres soient dans la table des matières, que le visiteur est libre de réduire (« masquer »).

Liens dans les numéros de titres

Cette solution simple ajoute, au même endroit, ce code devant le titre, faute de pouvoir réutiliser la valeur de $anchor, qui même augmentée d’un préfixe (ajouté au début ou à la fin) serait désambigüisée par un algorithme qui ajoute un numéro :

<a class="toc-backlink" href="#t' . $toc_backlink . '"></a>&#x2002;

Une classe est ajoutée pour sélectionner directement cet élément afin d’y appliquer des styles CSS pour la couleur ou l’absence de “couleur”, la transparence, les conditions de visibilité du soulignement.

On voit dans ce code que l’élément « a » est vide. Il sera rempli en faisant précéder ce vide, par le numéro composé à partir de compteurs CSS comme indiqué plus bas.

Puis, « &#x2002; » est une espace demi-cadratin U+2002, qui met une bonne distance – ni trop petite, ni trop grande – entre le numéro et le titre.

Enfin, « $toc_backlink » est une nouvelle variable qui est simplement le numéro du titre sans tenir compte de sa hiérarchie. Dans l’absolu, c’est mal fait, mais pour un usage de base c’est le plus simple et le plus rapide (« quick and dirty »). Elle est remise à zéro avant, et incrémentée après, un peu plus haut autour de la ligne 1377 (la dernière de 6 lignes identiques de ce contenu) du « toc.php » d’origine :

$toc_backlink=0;   // reset heading counter
for ($i = 0; $i < count($matches); $i++) {
	++$toc_backlink; // increment heading counter

Le code cité devient ainsi :

array(
	$matches[$i][1] . '<a class="toc-backlink" href="#t' . $toc_backlink . '"></a>&#x2002;<a href="#' . $anchor . '" class="heading-link">',  // add hyperlinks
	'</a><div class="offset-anchor" id="' . $anchor . '"></div></h' . $matches[$i][2] . '>'  // add offset anchor
),

Répartir le code source sur plusieurs lignes

D’origine, toute la table des matières tient en une seule immense ligne de code source, comme plus haut la liste des notes de fin. Afin d’éviter cela, des sauts de ligne sont à prévoir, comme l’original le fait déjà à trois endroits. Pour indenter le tout proprement, un algorithme serait nécessaire, dont le développement n’est pas prioritaire.

Voici ce code avec des sauts de ligne :

array(
	"\r\n" . $matches[$i][1] . '<a class="toc-backlink" href="#t' . $toc_backlink . '"></a>&#x2002;<a href="#' . $anchor . '" class="heading-link">',  // add hyperlinks
	'</a><div class="offset-anchor" id="' . $anchor . '"></div></h' . $matches[$i][2] . '>' . "\r\n"  // add offset anchor
),

Le même code entre guillemets doubles est légèrement plus concis :

array(
	"\r\n" . $matches[$i][1] . "<a class=\"toc-backlink\" href=\"#t$toc_backlink\"></a>&#x2002;<a href=\"#$anchor\" class=\"heading-link\">",  // add hyperlinks
	"</a><div class=\"offset-anchor\" id=\"$anchor\"></div></h" . $matches[$i][2] . ">\r\n"  // add offset anchor
),

Cibles des liens dans la table des matières

Quelque chose de similaire va dans le générateur des entrées de table des matières, plus haut à la ligne 1218 du fichier d’origine (rechercher le commentaire « // list item »). Le code à ajouter en-dessous de la condition qui vérifie si l’option des numéros de titres est active :

// list item
if ( in_array($matches[$i][2], $this->options['heading_levels']) ) {
	++$toc_backlink;  // increment heading counter

Puis quelques lignes plus bas, ajouter « id="t' . $toc_backlink . '" » ainsi :

$html .= '<span id="t' . $toc_backlink . '" class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">';  // add heading number ID

On peut là aussi profiter pour insérer quelques sauts de ligne après les balises fermantes, histoire d’éviter que toute la table des matières se retrouve sur une seule énorme ligne dans le code source, même si cette écriture quelque peu « minifiée » ne l’empêche pas de s’afficher correctement.

La variable « $toc_backlink » doit être initialisée plus haut, au début de la fonction « build_hierarchy() » qui commence à la ligne 1186. On ajoute, à la ligne 1192 en-dessous de « $numbered_items_min = null; » :

$toc_backlink=0;  // initialize heading counter

Indiquer l’astuce

Pour finir, on peut ajouter plus bas, à la ligne 1531 du fichier d’origine, une information sur le fonctionnement des numéros de titres tant que le système n’est pas courant. La ligne d’origine est :

$html .= '<ul class="toc_list">' . $items . '</ul></div>' . "\n";

L’information doit être dans une liste à puces de classe « toc_list » (la classe seule ne suffit pas) pour être masquée avec la table. Une deuxième classe est ajoutée comme sélecteur spécifique qui servira à appliquer des règles de style.

L’astuce est précédée de l’émoji « ℹ », à insérer comme image «  » grâce aux Twemoji de Twitter, sous licences MIT et CC-BY 4.0, dont une copie locale sera hébergée à la racine du site en ligne, et dans le dossier « apps/wordpress/htdocs » du site local. Si WordPress dispose d’un script remplaçant tous les caractères émojis par des Twemoji, ce script peut tomber en panne totale ou partielle.

Ainsi cette ligne devient (avec quelques sauts de ligne et une ligne vide après) :

$html .= '<ul class="toc_list">' . $items . '</ul>' . "\r\n" . '<ul class="toc_list toc-info"><li><img class="emoji" alt="&#x2139; [i]" src="/svg/2139.svg" title="U+2139-Twemoji"> Un clic sur le numéro de titre ramène à la table des matières.</li></ul>' . "\r\n" . '</div>' . "\r\n\r\n"; // added usage hint info, needs to be ul.toc_list for hiding

Numérotation des titres par la feuille de style

Souvent, les numéros de titres ne sont pas souhaités. L’endroit où ils sont le mieux tolérés est la table des matières. La conséquence est qu’ils sont omis, induisant une perte d’information et, potentiellement, la désorientation, dont l’effet s’aggrave encore si les niveaux de titres ne sont pas bien reconnaissables. Or, offrir un maximum de moyens d’orientation participe du respect des visiteurs du site.

Si les numéros de titres étaient absents, les liens de retour devraient être sur les titres, comme cela se fait en publication ebook et PDF.⁠53HendrickHillBooks, Return links for Table of Contents list and in-book headings, Ebooks Beta Stack Exchange, 24/07/2018 ; caligula, Hyperlinks from chapter and section headings back to the table of contents, TeX Stack Exchange, 24/06/2015. Si les URL des titres sont souvent mises à disposition dans des éléments ajoutés (« § », « # », icône), on peut aussi utiliser ces éléments pour les liens de retour, afin de laisser aux titres leur propre lien. Mais fonctionnellement, cela revient à ajouter des boutons dans la page, autour des titres (avant, ou après), quoique certains aient la forme d’icônes soigneusement dessinées.

Ici une voie moyenne est proposée : les numéros de titres sont présents et portent les liens de retour, mais leur opacité est réduite pour les faire moins apparaître, et on peut même les placer dans la marge, sauf sur les petits écrans. En plus de numéroter les titres, il est possible d’ajouter un numéro de chapitre.

Numérotation des titres

L’élément d’hyperlien vide ajouté devant le texte des titres est rempli automatiquement par des règles de style qui utilisent la fonctionnalité de comptage incluse dans le langage CSS.⁠54Dr. Axel Rauschmayer, Automatically numbering headings via CSS, 2ality – JavaScript and more, 12/01/2012 (solution sans JavaScript), article auquel renvoie Steven Stern, modérateur de forum et bénévole d’assistance technique chez WordPress.org, dans : rezadan, Automatic numbering of headings, 27/10/2017. Voici le code à ajouter dans la feuille de style du thème enfant créé plus haut.

L’espacement, présent dans la source citée sous la forme d’une double espace insécable – celle-ci n’est pas fusionnée comme le seraient deux espaces-mots – est déjà dans le code ajouté plus haut dans le « toc.php » de TOC+, car il ne doit pas être souligné au survol du pointeur.

body {counter-reset: h2}
h2 {counter-reset: h3}
h3 {counter-reset: h4}
h4 {counter-reset: h5}
h5 {counter-reset: h6}

h2 a.toc-backlink::before {counter-increment: h2; content: counter(h2) "."}
h3 a.toc-backlink::before {counter-increment: h3; content: counter(h2) "." counter(h3) "."}
h4 a.toc-backlink::before {counter-increment: h4; content: counter(h2) "." counter(h3) "." counter(h4) "."}
h5 a.toc-backlink::before {counter-increment: h5; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "."}
h6 a.toc-backlink::before {counter-increment: h6; content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "."}

Ajout de numéros de chapitre

Niveaux de titres en HTML

Au sein des pages, la spécification HTML5 permet plusieurs occurrences de titres de niveau 1 si l’élément « <section></section> » est utilisé pour hiérarchiser la page.⁠554.3.6 The h1, h2, h3, h4, h5, and h6 elements, dans HTML Living Standard — Last Updated 2 September 2020, WHATWG (Apple, Google, Mozilla, Microsoft). L’élément de section peut être emboîté autant que souhaité, et les pages ne sont plus limitées à 6 niveaux de titres, ou 5 niveaux d’intertitres. Mais ce nouvel élément, qui peut être saisi à la main en mode code, n’est pas du tout supporté par WordPress, qui referme sur place toute balise ouvrante “dépareillée”, et supprime la fermante qui avait été placée au bon endroit.

Par conséquent, il faut s’en tenir à l’ancien usage, dans lequel le bouton « H1 » et la ligne de menu « Titre 1 » sont complètement inutiles. WordPress en a déjà désactivé le raccourci clavier Maj + Alt + 1 dans l’éditeur classique. Dans le nouvel « éditeur Gutenberg », « H1 » n’est que dans le panneau latéral, pas dans le menu du bloc en cours d’édition. (Les H5 et H6 certes non plus.) Il ne faut en aucun cas se laisser tenter d’utiliser le niveau de titre 1 ailleurs que là où il est automatique : dans le champ « Titre de la page ».

Solution « un chapitre, une page »

L’incompatibilité avec les traitements de texte, où le « Titre 1 » est le premier titre de section, peut certes être levée en déclassant d’un niveau tous les intertitres du document, mais aussi en divisant le document en autant de pages – enfants de la page d’introduction – qu’il compte de titres 1, et d’ajouter des numéros de chapitre à tous les numéros de titres de ces pages.

Pour ajouter un numéro de chapitre par CSS, la page concernée doit pouvoir être sélectionnée dans la feuille de style, grâce au fait que d’une des classes CSS de sa balise <body> est unique sur tout le site. Le numéro de la page, qui apparaît dans la barre d’URL quand la page est éditée, figure dans l’une de ces classes. Par exemple, la balise <body> de cette page-ci était à l’origine :

<body class="page-template-default page page-id-417 page-child parent-pageid-438 logged-in wp-embed-responsive no-sidebar-full-width">

L’identifiant unique « page-id-417 » permet de mettre dans la feuille de style du thème enfant, des règles qui ne seront valables que pour cette page.

Or ce numéro identifie cette page seulement sur ce site et les autres sites qui seront créés par exportation et importation de ce site. Ce n’est pas une solution portable. Pour tout dire, elle n’est pas très intuitive non plus, et plutôt compliquée à utiliser ; à la rigueur, il faudrait ajouter le nom de la page dans un commentaire partout où le numéro apparaît dans la feuille de style, ou placer en tête de feuille une clé d’équivalence, puis apprendre les numéros par cœur.

Maîtriser le moyen de sélectionner une page

La solution est d’utiliser la dernière partie de l’adresse de chaque page pour en faire une classe à ajouter aux classes de la balise <body>. Ce « slug » peut – mais ne doit pas forcément – être précédé d’un préfixe ou du type de page : « page » ou « post ». Ainsi, à l’origine, dans le code suivant,⁠56How to Add Page Slug in Body Class of your WordPress Themes, WPBeginner, 12/09/2012. « $post->post_name » était « $post->post_type . '-' . $post->post_name ». D’autres intercalent même « '-slug-' ». Selon ce que l’on met, la classe ajoutée est « construire-le-site », « page-construire-le-site » ou « page-slug-construire-le-site ».

Or plus on en ajoute, plus la complexité s’accroît, avec le risque de créer des complications inutiles et contre-productives. D’où l’intérêt d’opter pour la forme la plus concise, étant donné que le nom de l’élément, « body » en l’occurrence, pourra être précisé dans la feuille de style — même si un validateur CSS pourra pointer cela comme de la surdéfinition. La feuille fonctionnera quand même.

Cette fonction va dans le fichier « functions.php » du thème enfant, créé plus haut :

/* Add slug as a class to the body element
 * <https://www.wpbeginner.com/wp-themes/how-to-add-page-slug-in-body-class-of-your-wordpress-themes/>
 * 2020-09-05T1704+0200
 */
function add_slug_body_class( $classes ) {
  global $post;
  if ( isset( $post ) ) {
    $classes[] = $post->post_name;
  }
  return $classes;
}
add_filter( 'body_class', 'add_slug_body_class' );

Décliner les règles de numérotation

Le numéro du chapitre peut désormais être ajouté dans un jeu spécifique de règles de numérotation pour chaque page concernée. Dans l’exemple de la présente page, les règles suivantes ont été ajoutées dans la feuille de style du thème enfant. La première de ces règles complète la table des matières. La suivante ajoute ce numéro au titre de la page ; cette règle devra être omise si ce numéro doit être visible dans l’onglet du navigateur. Dans ce cas, il faudra le saisir dans le champ du titre.

body.construire-le-site .toc_number::before {content: "2."}
body.construire-le-site h1::before {content: "2.\2002"}
body.construire-le-site h2 a.toc-backlink::before {counter-increment: h2; content: "2." counter(h2) "."}
body.construire-le-site h3 a.toc-backlink::before {counter-increment: h3; content: "2." counter(h2) "." counter(h3) "."}
body.construire-le-site h4 a.toc-backlink::before {counter-increment: h4; content: "2." counter(h2) "." counter(h3) "." counter(h4) "."}
body.construire-le-site h5 a.toc-backlink::before {counter-increment: h5; content: "2." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "."}
body.construire-le-site h6 a.toc-backlink::before {counter-increment: h6; content: "2." counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6) "."}

Un de ces blocs de code CSS sera copié-collé pour chaque nouvelle page avec numéros de chapitre. Dans la copie du bloc, il s’agit de mettre à jour la classe de slug, ici « construire-le-site », en mode colonnes, et de rechercher-remplacer, dans la sélection, « "2. » par la chaîne avec le bon numéro de chapitre.

Maintenant que tous les éléments nécessaires se trouvent dans les pages, il s’agit d’en assurer la mise en forme.

Styler et régler

Grâce à la puissance du langage CSS des « feuilles de style en cascade », qui définit même des effets d’animation, sans le moindre script, le potentiel de mise en forme est énorme.

Ces règles s’ajoutent à leur tour dans la feuille de style du thème enfant qui aura été mis en place.⁠57La feuille de style, enfant de Catch Everest de Thèmes Catch, utilisée sur ce site est disponible ici.

Pour le décalage de défilement

La distance entre le titre et le bord de l’écran après le défilement vers une ancre de titre est égale à la hauteur du div « ancre décalée » plus les marges supérieures intérieure et extérieure du titre. La hauteur du div est ici indiquée en pourcentage de la hauteur du port de vue (viewport height, vh) afin qu’elle s’adapte à la taille d’écran. Cette valeur permet de régler la distance du haut de l’écran qui décale les titres vers le bas quand on y saute.

Les div « ancre décalée », qui restent invisibles, se positionnent sur la dernière partie de ce qui précède le titre.⁠58How can I send an inner <div> to the bottom of its parent <div>?, Stack Overflow, 27/01/2010. La bordure, commentée (désactivée), peut être décommentée temporairement aux fins de démonstration ou de maintenance. Elle marque le point où se trouve le div d’ancre (qui étant vide et sans dimensions, est réduit à un point).

/* for TOC+ */
h2, h3, h4, h5, h6 {
	position: relative;
}
div.offset-anchor {
	position: absolute;
	top: -15vh;
	/*border: 5px solid blue;*/
}

Semi-banaliser les hyperliens de navigation interne

Au niveau des titres, la qualité d’hyperlien ne doit bien sûr pas apparaître par la couleur bleue et le soulignement permanent. À l’autre extrême, seule la forme du pointeur change (de « texte » à « pointeur »). On peut considérer que sur le web, le minimum est de faire apparaître au survol aussi le soulignement. Éviter que les titres et leurs numéros prennent l’air d’hyperliens tient en deux règles, et une troisième s’ajoute pour faire quand même apparaître le soulignement quand les titres ou leurs numéros sont pointés :

.heading-link,   /*heading text*/
.toc-backlink {  /*heading number*/
	color:inherit;
	text-decoration:none;
}
.heading-link:hover,
.toc-backlink:hover {
	text-decoration:underline;
}

Tout changement de couleur (de l’écriture, voire du fond) est optionnel et ajouterait une touche colorée qui devra être en harmonie avec le style ou thème du site.

Faire passer à l’arrière-plan les numéros de titres

Les numéros de titres, parfois perçus comme des éléments de trop qui dispersent l’attention en précédant chaque titre, sont faciles à rendre plus discrets, tant par la couleur du texte que par le positionnement.

Semi-transparence

La semi-transparence (« grisé »), évite la surcharge optique. Toujours les numéros peuvent-ils s’afficher en pleine opacité quand ils sont survolés par le pointeur. Une fois celui-ci sorti de l’élément, une transition d’une dizaine de secondes évitera une impression d’agitation.⁠59Les transitions en CSS : Sara Cope, transition, CSS-Tricks, 15/05/2017.

L’effet de transition fonctionne dans les deux sens s’il s’applique à l’élément, comme ici. C’est pourquoi il faut appliquer en même temps à la « pseudo-classe » de survol « :hover », une autre transition qui, elle, ne s’applique que dans le sens de l’entrée du pointeur. Elle peut être nulle ou néant pour une réactivité maximale.

Cet effet peut être souhaitable et dans l’article, et dans la table des matières. On s’occupera de celle-ci un peu plus loin ; pour les numéros de titres dans la page, le code CSS à prévoir est à peu près comme ceci :

.toc-backlink {
	opacity: .4;
	transition: opacity 10s;
}
.toc-backlink:hover {
	opacity: 1;
	transition: none;
}

Retrait négatif

Le positionnement des numéros de titres dans la marge va de pair avec leur semi-transparence. Il rétablit l’alignement des titres avec les alinéas. Seule la première ligne doit commencer dans la marge, afin que les titres qui s’étendent sur plusieurs lignes soient correctement alignés.⁠60Christopher Heng, How to Create Hanging Indents in HTML and CSS, thesitewizard.com, 22/10/2019.

La valeur exacte de « text-indent » pour chaque niveau de titre dépend d’abord du thème, puis de la police et de sa taille éventuellement modifiées ailleurs dans la même feuille de style. Pour l’ajuster, on peut sélectionner un titre par niveau dans la console du navigateur, repérer la règle dans le volet « styles » et éditer sa valeur jusqu’à ce que le résultat, rafraîchi en temps réel, montre un alignement correct.

Cela suppose que les numéros ne dépassent pas 9.

Sur les appareils mobiles, où les marges sont réduites au minimum, ce retrait des titres n’est pas possible, d’où la requête média qui conditionne la validité de ces règles :

/*for desktop screens only: */
@media (min-device-width:900px) {
	/*for hanging heading numbers: */
	article,
	#respond {
		margin-left:64px;
	}
	h2 {
		text-indent:-38px;
	}
	h3 {
		text-indent:-55px;
	}
	h4 {
		text-indent:-66px;
	}
	h5 {
		text-indent:-77px;
	}
	h6 {
		text-indent:-80px;
	}
}

Pour les pages avec numéros de chapitres, le retrait doit être plus grand. Ces règles sont ajoutées dans la même requête média.

La mise en page du code est optimisée pour l’ajout facile de nouvelles pages en mode colonnes :

@media (min-device-width:900px) {
	/*for prepended chapter numbers: */
	body.adapter-les-contenus h2, body.construire-le-site h2, body.mettre-en-ligne h2 { text-indent:-61px; }
	body.adapter-les-contenus h3, body.construire-le-site h3, body.mettre-en-ligne h3 { text-indent:-76px; }
	body.adapter-les-contenus h4, body.construire-le-site h4, body.mettre-en-ligne h4 { text-indent:-85px; }
	body.adapter-les-contenus h5, body.construire-le-site h5, body.mettre-en-ligne h5 { text-indent:-91px; }
	body.adapter-les-contenus h6, body.construire-le-site h6, body.mettre-en-ligne h6 { text-indent:-94px; }
}

Compléter la table des matières

L’extension Table of Contents Plus offre plusieurs thèmes pour la table des matières, plusieurs positionnements – dont l’un est dans un widget dans la marge –, et de nombreuses autres options, mais il prévoit la possibilité que l’auteur du site utilise une feuille de style et souhaite désactiver le chargement de celle de l’extension.

Sur les écrans de bureau et de portable, l’encadré de la table des matières devrait laisser une marge intérieure à gauche, afin d’éviter que la liste se colle inutilement contre la bordure.

Quand la table des matières est réduite et masquée, cette marge intérieure asymétrique décentre le titre, d’où la nécessité soit d’ajouter la même marge intérieure à droite quand la table est réduite, soit de mettre une marge intérieure gauche et droite de 15 pixels. La notation la plus brève confirme aussi la marge intérieure haute et basse de 10 pixels définie dans la feuille de style d’écran de l’extension :

@media (min-device-width:900px) {
	#toc_container {
		padding-left:10%;
	}
	#toc_container.contracted {
		/*padding-right:10%;*/
		padding:10px 15px;
	}
}

Différencier les couleurs

Les numéros de titres dérangent parfois la lecture en empêchant le survol des titres dans la table. Une coloration différente résoud ce problème.⁠61pizienolamitica, Great plugin but please ++++, à propos de Table of Contents Plus, forum de support WordPress.org : L’utilisateur donne l’exemple de numéros verts et de titres orange dans la table des matières probablement à fond noir, ce qui met les numéros en retrait.

Dans l’exemple ci-dessous, la couleur des lignes (titres et numéros) est définie d’une part, et d’autre part celle des numéros. Comme la sélection des numéros est plus spécifique, grâce au fait que chacun de ces <span> est un enfant d’un <a>, la couleur des numéros prévaut sur celle des lignes, qui ne restera ainsi que celle des titres.

Les numéros dans la table des matières sont sélectionnables même sans que leur élément porte de classe, à condition de le faire précéder d’ancêtres, ici jusqu’à l’identifiant « toc_container ».

Les deux derniers chiffres des codes de couleur hexadécimaux à 8 chiffres (et le dernier de ceux à 4 chiffres) indiquent l’opacité, « FF » ou « ff » par défaut. Ci-dessous, deux fois noir et une fois noir semi-transparent. L’aspect et l’effet seraient les mêmes avec « opacity: 0.5 » et la transition définie pour l’opacité, à condition de définir l’opacité (« 1 ») aussi pour le troisième.

#toc_container li a {  /*headings*/
	color: #000000;
}
#toc_container li a span {  /*heading numbers*/
	color: #00000088;
	transition: color 10s;
}
#toc_container li a:hover span {
	color: #000000;
	transition: none;
}

Rendre l’« info astuce » plus discrète

L’information sur l’utilisation des liens de retour, qui figure au bas de la table des matières, peut s’afficher à droite, en retrait dans l’angle du cadre. L’émoji étant bleu, le texte est ici d’une couleur assortie, la même que l’émoji, qui est #3B88C3, comme le révèle son fichier dans le jeu d’émojis Twemoji de Twitter,⁠62Les émojis Twemoji ont été créés par une équipe de Twitter. réutilisable sous licence Creative Commons Attribution.⁠63Licence CC-BY 4.0 Internationale, de Creative Commons. Le code est placé sous licence MIT.

.toc-info {  /*hint about using the backlinks*/
	float:right;
	color:#3B88C3;  /*same as emoji U+2139 */
	opacity:.4;
	transition:opacity 10s;
	font-style:italic;
}
.toc-info:hover {
	opacity:1;
	transition:none;
}

Ancres d’alinéas

Introduites au chapitre 1, les ancres d’alinéas lexicales sont ajoutées automatiquement par une extension redestinée, Add Anchor Links.⁠64Karolína Vyskočilová, Add Anchor Links, WordPress.org.

Code PHP

Dans « wp-content/plugins/add-anchor-links/include/class-add-anchor-links.php » on peut changer l’expression régulière de la ligne 38 afin qu’elle capture non plus les titres, mais les alinéas.

Les identifiants de fragment sont limités en longueur de manière automatique, sans que l’on voie à quelle étape. On peut ainsi capturer tout et laisser le système s’occuper du reste, à condition de lui fournir les bonnes instructions :

$pattern = '#<p(?: [^>]+)?>(.*?)</p>#is';

Pour la cohérence, « headings » sera remplacé par « paragraphs », à commencer par la fonction de mise en matrice des résultats :

preg_match_all( $pattern , $text , $paragraphs, PREG_OFFSET_CAPTURE );

Comme le premier groupe capturait le niveau de titre, il faut remplacer « [2] » par « [1] » dans la matrice à la ligne 44 :

$offset = 0;

if( $paragraphs ){
	foreach ($paragraphs[1] as $match) {
		list($paragraph, $pos) = $match;

		if ( strlen( $paragraph ) ) {

Débogage d’un algorithme WordPress de génération d’identifiants

En raison de l’obsolescence des fonctions de simplification qui ne prennent pas encore en charge l’espace fine insécable, il faut supprimer à part la chaîne résultant de l’encodage URL de ce caractère, afin d’éviter les ancres du style :

#l%e2%80%afen-tete%e2%80%af-de-la-page-web-[…]

Le déb́ut de l’alinéa exemple correspondant est : « L’« en-tête » de la page web […] ». Plus généralement, le problème est le même que plus haut. La solution aussi :

// converting accented characters to ASCII meets user expectations,
// but the function remove_accents() called by sanitize_title(),
// mis-handles the German 'ß' and is therefore not recommended.
// Fix:
$paragraph = str_replace( 'ß', 'ss', $paragraph );  // useful default, not German-only
$paragraph = str_replace( 'ẞ', 'SS', $paragraph );  // now we have uppercase too
$paragraph = str_replace( '£', 'L', $paragraph );   // euro is E, why not pound L
$anchor = remove_accents( $paragraph ); // sub-optimal function as-is, called by:
//$anchor = sanitize_title( $headline );
$anchor = sanitize_title_with_dashes( $anchor, $anchor, 'save' );  // performs better.
//                        $context must be 'save', or some characters won’t be deleted.
$anchor = str_replace( '%e2%80%af', '', $anchor );  // NNBSP missing from the list.

Respect de la licence

L’extension Add Anchor Links est sous licence GPLv2+.⁠65General Public License version 2 ou plus récente. Par conséquent, l’en-tête du fichier doit désormais comporter un crédit d’auteur, une mention de licence, et une notice de modification telle que :

/**
 * Add Anchor Links <https://github.com/vyskoczilova/add-anchor-links>
 * WordPress plugin <https://fr.wordpress.org/plugins/add-anchor-links/>
 * Author: Karolína Vyskočilová <https://kybernaut.cz>
 * License: GPLv2 or later <https://www.gnu.org/licenses/gpl-2.0.html>
 * 
 * Forked on GitHub by pewgeuges on 2020-10-20T0159+0200
 * This code has been customized on 2020-10-18T2246+0200
 * to handle paragraphs instead of headings.
 * Last modified:  2020-10-24T0538+0200
 */

Code CSS

Le même en-tête va dans le fichier « wp-content/plugins/add-anchor-links/assets/css/add-anchor-links.css », où la seule modification est l’ajout de « , p:hover .aal_svg » à la ligne 17 dans cette règle qui rend les icônes visibles au survol du pointeur :

h1:hover .aal_svg, h2:hover .aal_svg, h3:hover .aal_svg, h4:hover .aal_svg, h5:hover .aal_svg, h6:hover .aal_svg, p:hover .aal_svg {
    visibility: visible;
}

Fichiers de redestination téléchargeables

Les fichiers modifiés sont mis à disposition afin de simplifier la redestination de l’extension Add Anchor Links, à installer via WordPress au préalable.⁠66Karolína Vyskočilová, Add Anchor Links, WordPress.org, et par l’interface des extensions du logiciel : Menu > Extensions > Ajouter > Add Anchor Links.

Date de mise à jour

Les visiteurs sensibles aux repères temporels doivent pouvoir disposer de deux types d’information :

1. La date de publication (« publié le ») ;
2. La date de la dernière mise à jour (« mis à jour le »).

Selon qu’il s’agit, au sens de WordPress, d’un article (post) ou d’une page, les deux peuvent ne pas avoir la même importance.

• Souvent des écrits de circonstance, les articles doivent porter leur date de publication en bonne place, au début, et la date de mise à jour devra y être associée.
• Les pages au contraire sont davantage ancrées dans le temps long. La seule chose qui intéresse la plupart des visiteurs est de savoir quand elles ont été mises à jour pour la dernière fois. La coutume est de faire suivre cette information à la fin, avec (ou sans) la date de publication.

Quel que soit le type de page, la bonne pratique consiste à fournir les deux dates de publication et de mise à jour d’abord dans deux balises méta dans l’en-tête de la source, comme proposé pour Dokuwiki. En l’absence de ces deux balises méta, ces deux métadonnées ou, en tout cas, la date de mise à jour sont réputées inexistantes pour les moteurs de recherche.

Insertion par le thème enfant

La plupart des thèmes incluent par défaut la date de publication dans les articles, mais non dans les pages, et invitent leurs utilisateurs à remplacer dans un thème enfant les éléments fournis.⁠67Par exemple, dans Catch Everest, à la ligne 149 de « wp-content/themes/catch-everest/inc/template-tags.php » : « simply create your own […], and that function will be used instead. » Lignes 212 et 247 : « Create your own […] to override in a child theme. » Il manque en effet la date de dernière mise à jour, elle aussi présente dans la base de données.

La première méthode consiste à copier dans le thème parent les fichiers à modifier et à les coller dans la même arborescence de dossiers dans le thème enfant avant de les personnaliser.⁠68How to Display Blog Post Meta Data in Your WordPress Themes, WPbeginner, 28/08/2017. Cette démarche peut être importante pour arriver à ce que les moteurs de recherche affichent la date de mise à jour à la place de la date de publication.

La deuxième méthode, dans le présent cas la plus simple, est d’ajouter une fonction dans le fichier « functions.php » du thème enfant. Cela revient en pratique à installer une extension non paquetée. Quand ce système est faisable, il est très avantageux. Mais cela ne dispense pas d’être obligé de modifier si nécessaire, dans un thème enfant, le fichier « inc/template-tags.php » du thème.⁠69How to show ‘Last Update’ date for posts instead of ‘Published’ date?, forum de support WordPress.org, 13/06/2019.

Extension informelle

Comme il s’agit d’insérer un élément exactement avant ou après le contenu de l’article ou de la page, la fonction correspondante est assez simple. Le code ci-après, à mettre dans le « functions.php » du thème enfant, est essentiellement de Shaun Quarton⁠70Shaun Quarton, How to Display when a Post was Last Updated in WordPress, Pagely, 07/04/2019. avec quelques adaptations linguistiques et fonctionnelles. Celles-ci concernent le positionnement différencié et la mise en page avec hyperlien et infobulle. A été supprimée l’inhibition sous moins de 24 heures, selon l’usage dans la presse en ligne⁠71Les articles de Radio France et France Télévisions comportent toujours après du ou des auteurs : « Publié le », « Mis à jour le », aussi quand l’article n’a pas nécessité de modification après sa publication. qui veut qu’un article resté comme publié porte les mêmes date et heure au titre de « mise à jour », vu qu’une omission jetterait le doute.

/**
 * Add last modified date in posts and pages
 * 
 * Courtesy: Shaun Quarton, How to Display when a Post was Last Updated in WordPress, 07/04/2019.
 * <https://pagely.com/blog/display-post-last-updated-wordpress/>
 */
function display_date_metadata( $content ) {
  $id = get_the_id();
  $current_content_type = get_post_type( $id );  // whether it’s a post or a page.
  $post_page_url = get_permalink( $id );  // published dates often have a url hyperlink.
  //$original_time = get_the_time( 'U' );  // raw time for comparison, not needed.
  //$modified_time = get_the_modified_time( 'U' );  // modified times are provided without delay.
  //if ( $modified_time >= $original_time + 86400 ) {
  $updated_time = get_the_modified_time('H:i');  // time for the tooltip.
  $updated_day = get_the_modified_time('d/m/Y');  // French numeric date format.
  $updated_iso8601 = get_the_modified_time( 'Y-m-d\TH:i:sO' ); // for the time argument.
  $date_tag_content = "\r\n\r\n<p class=\"$current_content_type-last-modified\">Mis à jour le <a href=\"$post_page_url\" time=\"$updated_iso8601\" title=\"$updated_time\">$updated_day</a>";
  //}
  if ( $current_content_type == 'post' ) {  // posts’ published date is already present.
    $date_tag_content .= "</p>\r\n\r\n";  // close the tag.
    $content = $date_tag_content . $content;  // modified date inserted before content.
  }
  else if ( $current_content_type == 'page' ) {  // pages are lacking the published date.
    $published_time = get_the_time('H:i');
    $published_day = get_the_time('d/m/Y');
    $published_iso8601 = get_the_time( 'Y-m-d\TH:i:sO' );
    $date_tag_content .= "<br />\r\nPublié le <a href=\"$post_page_url\" time=\"$published_iso8601\" title=\"$published_time\">$published_day</a></p>\r\n\r\n";
    $content .= $date_tag_content;  // both dates are appended below.
  }
  return $content;
}
add_filter( 'the_content', 'display_date_metadata' );

Avec ce code, l’insertion se fait avant l’« article » et après la « page ». Pour que les deux soient traités de manière identique, on peut supprimer la condition et la concaténation devenues inutiles. Le format de la date est défini selon les conventions PHP.⁠72Formats de date, Manuel PHP, s.d.

À ce type d’extensions il manque le panneau de configuration, mais la personnalisation de ce code simple est relativement facile. Adopter cette démarche permet d’éviter un certain nombre de soucis.

Règles de style

Les problèmes sont le positionnement et la mise en forme en relation avec la date de publication.⁠73robbie13, Great plugin, with a few improvements it’ll be perfect, WordPress.org, 03/02/2019. Selon le thème, les règles ci-après devront être ajustées. Celles-ci ont été écrites pour Catch Everest.⁠74Catch Everest de Thèmes Catch.

.post-last-modified {
	font-size: 17.5px;
	font-family: sans-serif, Arial;
	color: #757575;
	margin-top: -35px;
	margin-bottom: 38px;
}
.entry-content .page-last-modified {
	font-size: 17.5px;
	font-family: sans-serif,Arial;
	margin: 70px 0 -23px;
	text-align: right;
}
body.infolettre .page-last-modified,
body.contact .page-last-modified {
	display: none;
}

Insertion par extension paquetée

La plupart des plugins d’insertion de date de mise à jour invitent (et de fait, obligent) les auteurs à insérer des abréviations de code, ou abrécodes (shortcodes) à l’endroit voulu. La meilleure pratique est d’économiser ce geste – qui risque d’être oublié – en automatisant l’insertion. L’une des extensions distribuées par WordPress.org automatise l’insertion de la date de mise à jour tout en fournissant aussi des abrécodes (shortcodes). WP Last Modified Info.⁠75Sayan Datta, WP Last Modified Info, WordPress.org. est bien notée mais s’attire des critiques et a récemment perdu une partie de son utilisabilité déjà incomplète.⁠76WP Last Modified Info reçoit 5 étoiles la plupart du temps. Bien que cette extension soit gratuite, certains se sont sentis importunés par son insistance à ce que ses utilisateurs écrivent une bonne évaluation. — Un dysfonctionnement a aussi été constaté. Dans la suite, il s’agit de compléter cette extension.

Mise en forme

Sous l’un des onglets de son panneau de configuration, l’extension WP Last Modified Info contient un champ pour les règles de style additionnelles. Le contenu de ce champ sera embarqué dans les pages. Du point de vue du développement web et du professionnalisme, il est préférable d’ajouter ce code CSS dans la feuille de style versionnée du thème enfant.

Lors du passage de la version 1.6.6 à la version 1.7.0, les classes CSS ont changé : « post-last-modified » et « page-last-modified » ont été fusionnées en « post-modified-info », cassant les styles des utilisateurs.

Différenciation entre pages et articles

La distinction entre pages et articles peut s’estomper, mais le plus souvent elle réplique celle entre le temps long et le court terme. Cela introduit un choix entre avant et après l’article. L’extension WP Last Modified Info avait, encore dans sa version 1.6(.6), deux modèles distincts pour les articles et pour les pages. Pour la version 1.7, les deux onglets ont été fusionnés en ajoutant deux zones d’activation et de désactivation par glisser-déposer des types de pages, mais en uniformisant le positionnement.

Si la date de mise à jour doit figurer en haut sur les articles, et en bas sur les pages, la solution la plus simple est d’installer la version 1.6.6.⁠77Au bas de la vue avancée du plugin WP Last Modified Info, sélectionner « 1.6.6 » et télécharger, puis importer le dossier compressé dans WordPress via la page « Ajouter des extensions », bouton « Téléverser une extension ».

Code HTML de la date de mise à jour

Jusqu’à la version 1.6, le code était paramétré par des menus et des champs. Pour la v1.7, des champs de codage avec coloration syntaxique ont été introduits, où l’utilisateur a la main libre pour personnaliser un modèle donné :

<p id="post-modified-info">Last Updated on %post_modified% by <a href="%author_url%" target="_blank" class="last-modified-author">%author_name%</a></p>

Exemple de personnalisation :

<p class="post-last-modified">Mis à jour le <a href="%post_link%" title="%post_modified_time%">%post_modified%</a></p>

Mais la variable hypothétique « %post_modified_time% » n’est pas disponible. Il manque toujours l’heure, traditionnellement indiquée en infobulle.

Compléter le code avec l’heure

Il faut de toute manière faire des ajustements dans les sources, où l’heure est disponible. La suite part de la dernière version facilement utilisable, v1.6.6.

Pages

À la ligne 132 de « /wp-content/​plugins/​wp-last-modified-info/​includes/​frontend/​page.php » se trouve le code que l’extension ajoute dans les pages :

$modified_content = '<' . $html_tag . ' class="page-last-modified"><span class="page-last-modified-text">' . $options_page . '</span> <time class="page-last-modified-td"'. $schema_page .'>' . $format . '</time>' . $lmt_pageauthor . '</' . $html_tag . '>';

À la ligne de code au-dessus, on voit la variable qu’il faut : « $updated_time_page ». Admettant qu’une valeur nulle pour une valeur d’URL restautomatiquement remplacée par l’adresse de la page courante :

$modified_content = '<' . $html_tag . ' class="page-last-modified"><span class="page-last-modified-text">' . $options_page . '</span> <a href="" title="'.$updated_time_page.'"><time class="page-last-modified-td"'. $schema_page .'>' . $format . '</time></a>' . $lmt_pageauthor . '</' . $html_tag . '>';

Articles

Les articles sont couverts par « /wp-content/​plugins/​wp-last-modified-info/​includes/​frontend/​post.php », où la ligne 134 consiste en :

$modified_content = '<' . $html_tag . ' class="post-last-modified"><span class="post-last-modified-text">' . $options_post . '</span> <time class="post-last-modified-td"'. $schema_post .'>' . $format . '</time>' . $lmt_postauthor . '</' . $html_tag . '>';

La complétion se fait de la même manière :

$modified_content = '<' . $html_tag . ' class="post-last-modified"><span class="post-last-modified-text">' . $options_post . '</span> <a href="" title="'.$updated_time.'"><time class="post-last-modified-td"'. $schema_post .'>' . $format . '</time></a>' . $lmt_postauthor . '</' . $html_tag . '>';

La seule différence est qu’on a « post » au lieu de « page ».

Balises méta de dates

Probablement WordPress n’insère pas les balises méta de la date de publication et de la date de dernière mise à jour parce que certains auteurs ne souhaitent pas divulguer ces informations,⁠78blissyung, Remove og article:published_time/modified_time, Support WordPress.org, 12/06/2020. alors qu’elles sont incluses aussi dans les métadonnées des documents Word et PDF. Sur le web, dans les en-têtes de pages, elles sont a priori destinées aux moteurs de recherche. Elles servent aussi aux logiciels bibliographiques. Faute de fournir ces informations, les publications risqueront de se voir citées avec la mention « s. d. » (sans date), qui peut faire mauvaise impression et suggérer un manque de professionnalisme. De quel côté dépend aussi de ces balises méta si les informations n’apparaissent pas dans la page, car dans ce cas, une citation directe correctement sourcée amène à consulter le code source.

Le système en usage dans WordPress pour ajouter des balises méta⁠79Voir wp_head() et do_action( 'wp_head' ), Code Reference WordPress.org. permet d’ajouter ces balises par une fonction à placer dans le « functions.php » du thème enfant.⁠80Aurovrata Venet, Re: wp_head, et the_modified_date(), Source, Code Reference WordPress.org, 2017. Le format proposé ici est traditionnel, non « Open Graph ». Le style OG utilise « property="article:published_time" » à la place de « name="date" », et « property="article:modified_time" » au lieu de « name="last-modified" ».

function add_date_meta_tags() {
	echo "\r\n\r\n";
	?>
	<meta name="date" content="<?php printf( __( '%s', 'textdomain' ), get_the_date( 'Y-m-d\TH:i:sO' ) ); ?>" />
	<meta name="last-modified" content="<?php printf( __( '%s', 'textdomain' ), get_the_modified_date( 'Y-m-d\TH:i:sO' ) ); ?>" />
	<?php
}
add_action('wp_head', 'add_date_meta_tags');

Autres extensions

Un formulaire de contact et un outil d’abonnement et d’expédition de lettre d’information peuvent aussi être ajoutés, mais ils sortent du cadre de cette série de recommandations.