lalahop

Quelques changements sur le blog (bis)

Table des matières

Ces temps-ci, j'ai effectué quelques modifications sur le blog.

Mise à jour de billets

J'ai mis à jour quelques billets, afin, comme toujours, d'apporter un complément d'information ou une correction. Ce coup-ci, c'est les billets suivants ont été mis à jour :

Amélioration de la structure des billets

Qu'est ce que j'entends par "structure" ? Le titre du blog ("GuiGui's Show" dans mon cas) est mis entre des balises qui symbolisent un titre de premier niveau (h1) et le titre d'un billet est mis entre des balises qui symbolisent un titre de deuxième niveau. Il apparaît donc logique, pour les sous-parties d'un billet, de continuer avec un titre de troisième niveau, etc.

Cela permet de mieux faire ressortir la structure du document auprès des moteurs de recherche afin que ceux-ci le "comprennent" mieux et l'indexent mieux. Mais pas seulement : une meilleure structure aide les logiciels dédiés aux personnes ayant une déficience visuelle.

Or, la qualité de ce blog en la matière était inégale. Certains corps de billet commençaient avec un titre de premier niveau, d'autres avec un titre de deuxième niveau, etc. Bref, c'était la jungle.

J'ai donc harmonisé tout cela en accord avec ce que je viens de vous dire.

J'ai également modifié les feuilles de style afin de faire ressortir la structure des billets et ainsi améliorer la lisibilité des billets.

Validation W3C

J'ai profité de l'optimisation ci-dessus afin d'améliorer la validation W3C des pages de ce blog. En effet, certaines balises sont mal fermées par WordPress et d'autres erreurs sont purement dues à des actions humaines 😉 . Mais cela est corrigé.

Les seules erreurs qui restent sont provoquées :

  • Par le JS que l’hébergeur incruste en bas de chaque page, en dehors de la balise html ...
  • L'attribut aria-required, qui indique si un champ de formulaire est obligatoire. Il fait partie du brouillon WAI-ARIA qui, comme je viens de le dire, est un brouillon et donc pas reconnu par le validateur.

J'ai fait cette optimisation dans le même but que la précédente : afin d'améliorer l’accessibilité et l'affichage de ce blog sur l'ensemble des navigateurs. Après, ce n'est pas encore la perfection (notamment au niveau du CSS) mais c'est moins urgent ... et puis, je ne suis pas le pire du web 😉 .

Table des matières

Contrairement aux autres changements cités dans ce billet, la mise en place d'une table des matières au début de chaque billet, était une fonctionnalité prévue depuis quelque temps sur ma TODO list.

Désormais, une table des matières sera donc insérée au début de chaque billet pour lequel cela se justifie (longueur, complexité entre autres). Comme vous pouvez le constater, les anciens billets sont déjà passés à la moulinette.

Choix de l'extension

Pour réaliser une table des matière de manière automatique, j'utilise l'extension Table of Contents Generator. Une extension libre (GNU GPL), simple et légère (un fichier, 120 lignes de PHP, point). C'est la seule extension parmi celles que j'ai essayées (Hackadelic SEO Table Of Contents, Table of Contents Creator) qui me convient.

Hacker l'extension

Personnaliser le style de l'extension

Cette extension utilise la feuille de style de votre thème. Il est donc très facile de la personnaliser : il suffit de créer/modifier un style div#main div.post div.entry ul dans la feuille de style de votre thème et de lui affecter les propriétés voulues.

On peut même faire un style rien que pour les tables des matières : il suffit de créer un style dédié, div.post div.entry ul.toc par exemple. Ensuite, dans le code de l'extension, il suffit de modifier deux lignes de la fonction get_toc() : la 51e et la 67e. Exemple avec la ligne 67 :

$html .= "<ol><li>$link";

devient

$html .= "<ol class=\"toc\"><li>$link";

Même modification pour la ligne 51.

Utiliser une liste non ordonnée à la place d'une liste ordonnée :

Il suffit de modifier le code de l'extension et notamment celui de la fonction get_toc() et de remplacer les écritures de balise "ol" par des balises "ul". Cela se joue aux lignes : 51, 59, 67, 73. Exemple avec la ligne 51:

$html .= "<ol><li>$link";

devient

$html .= "<ul><li>$link";
Un bug bien ennuyeux

Parfois, il arrive que la table des matières présente un bug d'affichage. En effet, WordPress ajoute une balise "</p>" dés qu'il voit un retour à la ligne ("\n" ou "<br />"). Le problème, c'est que cette balise est parfois insérée n'importe où et provoque un bug d'affichage de la table des matières. Voir un exemple.

La solution à ce problème est dans l'énoncé : il suffit d'enlever les retours à la ligne : <br /> ou \n. Là encore, il suffit de modifier, dans le code de l'extension, le code de la fonction get_toc. Le caractère \n est présent aux lignes 36, 55, 64, 67 mais il n'est pas utile de modifier la ligne 36. Voici un exemple de la modification de la ligne 55 :

$html .= "</li>\n<li>$link";

devient

$html .= "</li><li>$link";

Pour les autres lignes, la modification est identique. Mais ça, vous l'aviez déjà compris.

De nouveaux billets sont en cours de rédaction, stay tuned ! (Tiens, je n'ai pas déjà dit ça ? 😉 )