
Finalement, je vais faire un nouveau journal de voyage après mon séjour en Asie de l’hiver dernier. Mais en repassant sur les pages existantes (Asie 2018), j’ai vu que j’avais un peu bâclé la navigation parmi les différentes pages, avec une simple liste HTML de liens en bas de page… Ce n’était ni très joli ni très pratique. Bizarrement, WordPress ne propose rien de base, il faut passer par des extensions.
J’ai donc regardé ce qui existait, il y en a quelques unes de pas mal, mais les versions gratuites sont assez basiques et limitées, et il faut payer pour avoir plus de fonctionnalités. Et les prix sont manifestement destinés à des entreprises, du genre plus de cinquante euros par an !
Je me suis alors orienté vers une autre solution, à base de deux extensions : une pour me générer une sidebar dédiée, et une autre pour rendre la TOC toujours visible à l’écran lors du défilement de la page. Mais là aussi, je me suis trouvé confronté à certaines limitations.
Finalement je me suis dit que j’allais faire ça tout seul, à base de HTML et de CSS, avec l’aide d’un template de page spécifique, chose que propose WordPress. Et comme j’avais un peu de mal à tout créer « from scratch », j’ai eu l’idée de demander de l’aide à ChatGPT ! Et là j’ai carrément été bluffé… 😮
Les pré-requis étaient un menu qui s’affiche à droite de la page, et qui reste présent à l’écran lors du défilement de celle-ci. Il doit aussi s’afficher en bas de page si l’on est sur un smartphone. Et pour le résultat final , voilà un aperçu :
Voyons voir tout cela étape par étape.
La situation de départ
Pour mon « Journal de voyage », j’avais initialement choisi d’utiliser le templage « Full width page » que propose WordPress, c’est-à-dire sans barre latérale de contenu (sidebar). L’idée, c’était de se concentrer sur la lecture et d’éviter les distractions.

Et donc j’avais fait une simple liste HTML à base de <ul>
et de <li>
qui servait à naviguer à travers les pages. Franchement, ce n’était ni joli ni pratique !
Les extensions pour TOC
WordPress ne proposant rien par défaut pour construire une table des matières, j’ai regardé du côté des extensions. Il y en a pas mal, et beaucoup sont payantes. Les rares gratuites comme Easy Table of Contents, permettent de faire des trucs pas mal, mais lorsque j’ai voulu aller un peu plus loin dans la personnalisation, je me suis retrouvé bloqué.
Je voulais que la TOC soit capable de gérer plusieurs pages puisque c’est mon cas, le journal de voyage s’étale sur plusieurs pages : une première définie comme « parent », et les autres définies comme « enfant ». J’avais bien trouvé un plugin qui faisait cela, mais seulement avec la version payante (CMTOC).
J’ai tout de même contacté le support de Easy TOC, mais après un ou deux échanges concernant ma demande, ils m’ont proposé une conf’call sur le web. J’ai laissé tombé, je voyais bien que ça allait se terminer par une prestation payante.
Une autre solution avec 2 extensions
J’ai alors essayé de trouver une autre solution. Et je suis tombé sur ces deux extensions qui pouvaient me convenir :

L’idée, c’est d’utiliser Sidebar Manager pour remplacer la sidebar par défaut de mon thème (c’est exactement ce qu’il permet) pour certaines pages, et d’utiliser Fixed Widget pour que ma TOC reste toujours visible à l’écran (basé sur une classe CSS), ce qui me convenait tout à fait.
J’ai donc avancé dans cette solution : modifié mes pages pour qu’elle utilisent le « Modèle par défaut » (c’est-à-dire avec la sidebar de mon thème), puis d’utiliser l’extension « Sidebar Manager » pour remplacer cette sidebar pour afficher à la place un widget HTML tout simple. Il ne me restait plus qu’à faire une TOC en HTML, et de créer un style CSS pour qu’il ait une belle allure. Et il restait affiché à l’écran grâce à l’extension « Fixed Widget ».
J’arrivais à un truc pas mal du tout sur le PC (TOC dans la sidebar et qui reste affichée quand la page défile), sauf que l’affichage sur smartphone était mal affiché et de plus tronqué :

Là aussi, j’ai contacté le support de l’extension Sidebar Manager, mais je n’ai pas eu de réponse dans un premier temps (j’en ai reçu une depuis, ou quelqu’un me dit qu’il va voir cela avec son équipe…). Bon entre-temps j’étais passé à la solution suivante.
La solution sans extension
Finalement, je me suis dit : pourquoi ne pas tout faire à la main ? avec le CSS, c’est facile de diviser une page en 2 zones (une pour la sidebar), d’y mettre une TOC avec l’apparence que l’on veut, qui reste affichée à l’écran, et qui s’affichera sous la page en fonction de la taille de l’écran…
Pour cela, il me fallait un template de page spécifique. Cette page donne les explications de base nécessaires, ce qui assez simple finalement : j’ai copié le fichier full-width.php
dans le répertoire page-templates
du thème, pour en créer un appelé template-asie-2018.php
. Il faut ensuite éditer le nouveau fichier et changer son « Template Name » pour qu’il soit affiché correctement par les pages d’admin de WordPress :
<?php
/**
* Template Name: Template Asie 2018 Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
J’ai choisi le template full-width puisque je veux créer une sidebar avec le CSS, c’est donc une page HTML sans barre latérale dont j’ai besoin.
Reste à faire cette partie de code, et après quelques essais « à la main » plutôt laborieux, je me dis tout d’un coup : « pourquoi ne pas demander à ChatGPT ? ». C’est étonnant, car c’est bien la première fois que j’utilise l’AI, mais manifestement j’avais l’info en tête quelque part… Bizarre comment fonctionne le cerveau ! 🙄
Bref, après quelques affinements, ChatGPT m’a fourni un fichier HTML et un autre CSS qui faisaient exactement ce que j’avais demandé : « Fais-moi une page html et css avec une colonne à droite dans laquelle un cadre contient un menu qui reste affiché à l’écran quand la page défile. Ce cadre doit passer en bas de page quand la largeur d’écran est inférieure à 600 px« . Bluffant ! Voilà les fichiers pour les curieux :
À partir de là, il ne reste plus qu’à intégrer les parties nécessaires de ce code dans le template WordPress que l’on précédemment créé. Voilà ce que ça donne, les ajouts sont indiqués par un commentaire « Personnalisation de la TOC »
<?php
/**
* Template Name: Template Asie 2018 Page
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header(); ?>
<div id="main-content" class="main-content">
<!-- Personnalisation pour la TOC -->
<div class="container-toc">
<div class="content-toc">
<!-- FIN Personnalisation pour la TOC -->
<?php
// Start the Loop.
while ( have_posts() ) :
the_post();
// Include the page content template.
<!-- Personnalisation pour la TOC -->
get_template_part( 'toc', 'page' );
<!-- FIN Personnalisation pour la TOC -->
// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) {
comments_template();
}
endwhile;
?>
</div>
<!-- Personnalisation pour la TOC -->
<div class="sidebar-toc">
<div class="floating-menu-toc">
<ul>
<h2>Voyage Asie 2018-2019</h2>
<h3>Table des matières</h3>
<li id="country">Thaïlande</li>
<li id="locations"><a href="">Bangkok</a> |</li>
<li id="locations"><a href="">Bangkok - Siem Reap</a></li>
</ul>
</div>
</div>
<!-- FIN Personnalisation pour la TOC -->
</div>
</div>
<?php
if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
// Include the featured content template.
get_template_part( 'featured-content' );
}
?>
</div><!-- #main-content -->
<?php
get_sidebar();
get_footer();
On voit que le menu doit y être créé directement, ce template ne servira donc que pour ce journal de voyage, mais ce n’est pas vraiment gênant. À noter la ligne suivante :
// Include the page content template.
<!-- Personnalisation pour la TOC -->
get_template_part( 'toc', 'page' );
<!-- FIN Personnalisation pour la TOC -->
En fait, cette ligne permet au template de page d’appeller un autre fichier, qui par défaut s’appelle content-page.php
. J’ai donc remplacé « content » par « toc » dans la ligne et copier content-page.php
dans un nouveau fichier appelé toc-page.php
. Ceci afin de modifier la classe utilisée CSS pour qu’elle convienne à celle que j’utilise pour la TOC :
$ diff content-page.php toc-page.php
18c18
< <div class="entry-content">
---
> <div class="content-toc">
Et enfin voilà le CSS ajouté au fichier style.css
du thème :
.container-toc {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
padding: 20px;
}
/* Contenu principal */
.content-toc {
flex: 1;
margin-right: 20px; /* Espacement entre le contenu et la colonne */
}
/* Sidebar avec un menu flottant */
.sidebar-toc {
width: 250px;
background-color: #f4f4f4;
padding: 20px;
border-radius: 8px;
}
/* Menu flottant */
.floating-menu-toc {
position: -webkit-sticky; /* Pour les anciens navigateurs Safari */
position: sticky;
top: 100px; /* Menu fixé à 100px du haut de la page */
background-color: #f9f9f9;
padding: 15px;
border-radius: 8px;
border: 1px solid #ddd;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 100;
}
/* Liste du menu */
.floating-menu-toc ul {
list-style-type: none;
}
.floating-menu-toc li {
margin: 0;
color: #444;
font-size: 0.8em;
}
.floating-menu-toc h2 {
list-style-type: none;
list-style-position: inside;
font-size: 0.9em;
margin-top: 1em;
margin-bottom: 0.5em;
color: #888;
}
.floating-menu-toc h3 {
list-style-type: none;
list-style-position: inside;
font-size: 0.8em;
margin-top: 0em;
margin-bottom: 1em;
color: #888;
}
li#locations {
display: inline;
list-style-position: inside;
font-size: 0.8em;
margin: 0px;
line-height: 1;
}
li#country {
list-style-image: url(images/puces-toc.png);
font-size: 1em;
margin-left: 5px;
}
.floating-menu-toc a {
color: #888;
}
.floating-menu-toc a:hover {
color: #24890d;
text-decoration:underline
}
/* Médias queries pour gérer les petits écrans */
@media (max-width: 600px) {
.container-toc {
flex-direction: column;
}
.sidebar-toc {
width: 80%; /* La colonne prend toute la largeur sur les petits écrans */
margin-top: 20px; /* Espacement entre le contenu et la sidebar */
margin-left: 15px;
}
.floating-menu-toc {
position: static; /* Le menu n'est plus flottant, il se place normalement */
margin-top: 20px; /* Espacement entre le contenu et le menu */
}
}
Conclusion
Voilà, j’ai désormais un beau menu pour mon journal de voyage de 2018, et tout cela sans installer de nouvelles extensions, ce que je préfère.
Quand je vais commencer mon journal de voyage de 2023, je devrais juste créer un nouveau fichier template-asie-2023.php
, puisque le contenu du menu y est indiqué en « dur ». C’est la seule contrainte, et elle est franchement minime.
Et bravo à ChatGPT, j’ai franchement été très impressionné par sa facilité à créer exactement ce que je voulais.