Créer un sommaire en jQuery pour vos articles
Niveau intermédiaire
Un article bien structuré est important pour votre référencement. Cependant, ceux-ci peuvent parfois être longs. Afin d’améliorer l’expérience utilisateur, je vais vous montrer comment créer un sommaire bien structuré en utilisant jQuery. Vos utilisateurs pourront ainsi trouver rapidement les sections pertinentes et naviguer efficacement dans le contenu.
Dans cet article tutoriel, je vais vous expliquer étape par étape comment créer un sommaire interactif en utilisant jQuery. Vous obtiendrez un sommaire similaire à celui que j’utilise sur mon blog.
Prérequis
- HTML : Vous devrez avoir une connaissance de base du langage HTML..
- CSS : Même si je vous expliquerai le code, il est préférable de connaître les bases du CSS.
- Importer jQUery: Vous devrez savoir comment intégrer jQuery à votre site. Si vous utilisez WordPress, j’ai expliqué le processus dans cet article.
Création d’un sommaire en jQuery : Mise en place du HTML
Si vous utilisez WordPress, utilisez votre constructeur de page ou Gutenberg pour structurer votre page en utilisant des titres de niveau 2 (h2), de niveau 3 (h3) ou supérieur. Pour cet exemple, nous nous limiterons aux titres de niveau 3 (h3).
Voici un exemple de structure basique :
<!-- la balise HTML Body !-->
<body>
<!-- la balise main (tout dépendra de votre thème) c'est le conteneur principal !-->
<main>
<!-- Le bloc sommaire !-->
<div id="sommaire" aria-label="Sommaire de la page" role="navigation">
<div class="titre-sommaire"><span>Sommaire</span><i class="ico-close"></i></div>
<ol class="sommaire-list"></ol>
</div>
<!-- Mon titre de niveau 2 !-->
<h2>Cras maximus nulla ex</h2>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
<!-- Mon titre de niveau 3 !-->
<h3>Etiam augue arcu</h3>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
<!-- Mon titre de niveau 3 !-->
<h3>Curabitur libero mi</h3>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
<!-- Mon titre de niveau 2 !-->
<h2>Maecenas non ipsum vitae turpis aliquet</h2>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
<!-- Mon titre de niveau 3 !-->
<h3>Maecenas non ipsum </h3>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
<!-- Mon titre de niveau 3 !-->
<h3>Nullam pellentesque volutpat accumsan</h3>
<!-- Paragraphe !-->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lobortis eu leo et elementum. Morbi sit amet justo id arcu dictum mollis. Donec suscipit, libero vitae dignissim rhoncus, ex sapien bibendum dolor, a bibendum justo ex viverra turpis.</p>
</main>
</body>Pour un site statique
Nous créons dans notre code une division qui va servir à accueillir notre sommaire:
<!-- Le bloc sommaire !-->
<div id="sommaire" aria-label="Sommaire de la page" role="navigation">
<div class="titre-sommaire"><span>Sommaire</span><i class="ico-close"></i></div>
<ol class="sommaire-list"></ol>
</div>Explications :
- On place les normes ARIA nécessaires à l’accessibilité
- On va créer notre table des matières sous forme de tab que l’on ouvrira et fermera au clic
- Notre sommaire sera placé dans le <ol>
Pour un site WordPress
Le moyen le plus simple est de créer un shortcode (code court) que vous pourrez insérer dans vos pages.
Pour cela, ouvrez le fichier functions.php de votre thème enfant et copiez-collez le code suivant :
function sommaire_inu_media(){
$sommaire ='<div id="sommaire" aria-label="Sommaire de la page" role="navigation">';
$sommaire .='<div class="titre-sommaire"><span>Sommaire</span><i class="ico-close"></i></div>';
$sommaire .='<ol class="sommaire-list"></ol>';
$sommaire .='</div>';
return $sommaire;
}
add_shortcode('sommaire', 'sommaire_inu_media');J’ai repris le code que je vous ai fourni précédemment, mais je l’ai enveloppé dans une fonction permettant de créer un shortcode.
Pour afficher votre sommaire sur la page, vous devrez insérer un shortcode et y coller ceci :
[sommaire]
Vous devriez maintenant voir le bloc vide apparaître côté front-end.
Créer un sommaire en jQuery : ajout du CSS
Formulons notre bloc en CSS:
/* Sommaire */
#sommaire{
background: #f4f4f4;
}
/* Le titre */
#sommaire .titre-sommaire{
padding: 0.5rem; /* on met une marge interne */
display: flex; /* on utilise flex*/
min-height: 34px; /* on pour éviter des soucis sur mobile on met une hauteur minimum de 34px */
align-items: center; /* On centre le texte dans la div */
border-bottom: 2px solid #00a1ff; /* On ajoute une bordure bleue */
text-transform: uppercase; /* On met le text en majuscule */
font-weight: 600; /* on met le text en gras */
cursor:pointer /* On transforme le curseur en "main" pour indiquer que c'est cliquable */
}
/* L'icone */
#sommaire i{
display:flex; /* on utilise flex */
width:1.5rem; /* on indique une largeur */
height: 1.5rem; /* on indique une hauteur */
position: relative;
margin-left: auto; /* on met l'icone tout à droite */
font-style: normal; /* la balise i sert à mettre en italic habituellement donc ici on indique que notre texte sera en regular */
}
/* On met une fleche comme icone */
#sommaire i:after{
content: '\1F6C6'; /* on prend le code html d'une fleche arrondie */
color: #00a1ff;
display: flex;
font-size: 1.2rem;
align-items: center;
justify-content: center;
}
/* Quand le bloc est fermé on fait une rotation de l'icône */
#sommaire i.ico-close:after{
transform: rotate(180deg);
}
/* On met en forme le contenu du sommaire */
#sommaire .sommaire-list{
display: flex; /* on utilise flex */
flex-direction: column; /* on fait un rendu en colonne */
margin: 0; /* retire les marges externes */
padding-top: 1rem; /* on ajoute une marge interne */
padding-bottom: 1rem; /* on ajoute une marge interne */
}
#sommaire .sommaire-list li{
min-height:34px; /* on pour éviter des soucis sur mobile on met une hauteur minimum de 34px */
padding:0.3rem; /* on ajoute une marge interne */
}
#sommaire .sommaire-list .titre-h2{
margin-bottom: 0.5rem; /* on ajoute une marge externe à nos intitulé de h2 */
}
#sommaire .sommaire-list .titre-h2 a{
color:#E9015E; /* on met la meme couleur que le h2 au lien */
}
#sommaire .sommaire-list .titre-h3 a{
color:#006EA3; /* on met la meme couleur que le h3 au lien */
}
N’oubliez pas d’appeler votre CSS dans votre code.
Pour les utilisateurs de WordPress
Pour simplifier, vous pouvez coller le code CSS que je vous ai fourni dans le fichier style.css de votre thème enfant.
Si vous préférez le séparer dans un fichier distinct, nous allons modifier notre code de shortcode dans function.php.
function sommaire_inu_media_scripts_styles() {
// remplacez *votre-dossier* par le bon chemin
wp_register_style( 'inu-sommaire-style', get_stylesheet_directory_uri() . '/*votre-dossier*/sommaire.css');
}
add_action('wp_enqueue_scripts', 'sommaire_inu_media_scripts_styles');
function sommaire_inu_media(){
$sommaire ='<div id="sommaire" aria-label="Sommaire de la page" role="navigation">';
$sommaire .='<div class="titre-sommaire"><span>Sommaire</span><i class="ico-close"></i></div>';
$sommaire .='<ol class="sommaire-list"></ol>';
$sommaire .='</div>';
wp_enqueue_style( 'inu-sommaire-style' ); // On appelle le CSS
return $sommaire;
}
add_shortcode('sommaire', 'sommaire_inu_media');En utilisant cette méthode, le style est chargé uniquement lorsque le bloc sommaire est affiché. Cela évite de surcharger le site avec des CSS inutilisés sur certaines pages.
Vous obtenez maintenant ce résultat côté front-end.
Créer un sommaire en jQuery : mise en place du jQuery
À présent, on va remplir dynamiquement notre sommaire en fonction du contenu de la page
Pour être efficace, notre sommaire devra :
- Reprendre tous les titres h2 et h3.
- Conserver la hiérarchie de la page
- Permettre la navigation dans la page en cliquant sur les éléments du sommaire
$(document).ready(function() {
// Masquer la liste de sommaire au chargement de la page
$('.sommaire-list').hide();
// Gérer l'affichage/masquage de la liste de sommaire au clic sur #sommaire
$('#sommaire').click(function() {
$('.sommaire-list').slideToggle('slow');
$('#sommaire i').toggleClass('ico-close');
});
var headerHeight = $('#barre-top').outerHeight(); // Hauteur du header
var h2List = [];
// Parcourir tous les h2 de la page
$('.contenu-article article h2').each(function() {
// Ici je récupère le texte de mon h2, je supprime les accents et espaces et je m'en sers comme id pour créer une ancre
var sectionText = $(this).text().trim();
var sectionId = sectionText.toLowerCase().replace(/[^a-z0-9]+/g, '-');
$(this).attr('id', sectionId);
var listItem = $('<li class="titre-h2"></li>');
var link = $('<a></a>').attr('href', '#' + sectionId).text(sectionText);
listItem.append(link);
h2List.push({
id: sectionId,
listItem: listItem
});
});
// Parcourir tous les h3 de la page
$('.contenu-article article h3').each(function() {
var sectionText = $(this).text().trim();
var sectionId = sectionText.toLowerCase().replace(/[^a-z0-9]+/g, '-');
$(this).attr('id', sectionId);
var listItem = $('<li class="titre-h3"></li>');
var link = $('<a></a>').attr('href', '#' + sectionId).text(sectionText);
listItem.append(link);
// Trouver le h2 parent le plus proche
var parentH2 = $(this).prevAll('h2').first();
if (parentH2.length > 0) {
var parentH2Id = parentH2.attr('id');
var parentH2Item = h2List.find(function(h2) {
return h2.id === parentH2Id;
});
if (parentH2Item) {
var subMenu = parentH2Item.listItem.find('ol');
if (subMenu.length === 0) {
subMenu = $('<ol></ol>');
parentH2Item.listItem.append(subMenu);
}
subMenu.append(listItem);
return; // Ignorer le reste de la boucle pour ce h3
}
}
// Si aucun h2 parent n'est trouvé ou s'il n'est pas présent dans la liste, ajouter le h3 en tant qu'élément de premier niveau
$('.sommaire-list').append(listItem);
});
// Ajouter les éléments h2 dans leur ordre d'origine
h2List.forEach(function(h2Item) {
$('.sommaire-list').append(h2Item.listItem);
});
// Gérer le défilement vers la section correspondante au clic sur un lien du sommaire
$(".sommaire-list li a").click(function(e) {
e.preventDefault();
var target = $($(this).attr('href'));
console.log(target);
if (target.length > 0) {
var aid = $(this).attr("href");
$('html,body').animate({
scrollTop: $(aid).offset().top - headerHeight - 50
}, 'slow');
}
});
});
Il vous suffira de charger votre script dans votre page.
Pour cela, modifions une dernière fois notre fichier function.php.
function sommaire_inu_media_scripts_styles() {
// remplacez *votre-dossier* par le bon chemin
wp_register_style( 'inu-sommaire-style', get_stylesheet_directory_uri() . '/*votre-dossier*/sommaire.css');
wp_enqueue_script('inu-sommaire-js', get_template_directory_uri() . '/*votre-dossier*/sommaire.js', array( 'jquery' ), false, true );
}
add_action('wp_enqueue_scripts', 'sommaire_inu_media_scripts_styles');
function sommaire_inu_media(){
$sommaire ='<div id="sommaire" aria-label="Sommaire de la page" role="navigation">';
$sommaire .='<div class="titre-sommaire"><span>Sommaire</span><i class="ico-close"></i></div>';
$sommaire .='<ol class="sommaire-list"></ol>';
$sommaire .='</div>';
wp_enqueue_style( 'inu-sommaire-style' ); // On appelle le CSS
wp_enqueue_script( 'inu-sommaire-js' ); // On appelle le script
return $sommaire;
}
add_shortcode('sommaire', 'sommaire_inu_media');Ainsi, lorsque le shortcode sera ajouté à une page, WordPress chargera le HTML, le CSS et le jQuery.
Voici votre résultat final :
Vous souhaitez un développeur front-end ?
Intégrez vos designs dans vos pages web