{"id":4213,"date":"2020-06-09T08:20:06","date_gmt":"2020-06-09T08:20:06","guid":{"rendered":"https:\/\/histoiredebambou.com\/?p=4213"},"modified":"2025-01-05T19:28:24","modified_gmt":"2025-01-05T17:28:24","slug":"comment-creer-un-sommaire-cliquable","status":"publish","type":"post","link":"https:\/\/histoiredebambou.com\/blog\/comment-creer-un-sommaire-cliquable\/","title":{"rendered":"Comment cr\u00e9er un sommaire cliquable ?"},"content":{"rendered":"

\"Comment-creer-un-sommaire-cliquable\"<\/p>\n

 <\/p>\n

Comment cr\u00e9er un sommaire cliquable ?\u00a0<\/strong><\/span><\/h2>\n

Aujourd\u2019hui nous allons voir comment cr\u00e9er un sommaire cliquable<\/strong>, dans un carr\u00e9 color\u00e9, comme celui qui se trouve ci-dessous.<\/span><\/p>\n

Sommaire<\/span><\/strong><\/div>\n
Pourquoi cr\u00e9er un sommaire pour vos articles ?
\n<\/span><\/a>Cr\u00e9er un sommaire pour faire gagner du temps aux lecteurs
\n<\/span><\/a>Cr\u00e9er un sommaire pou orienter les lecteurs
\n<\/span><\/a><\/strong>Placer les liens dans le sommaire<\/strong>
\n<\/span><\/a>1# Placer une ancre de lien sur chaque titre
\n<\/span><\/a><\/span>2# Reporter chaque titre en haut de la page<\/a><\/span>
\n<\/span>3# Lier chaque titre avec son ancre
\n<\/span><\/a>4# Soigner la mise en forme
\n<\/span><\/a>Cr\u00e9er un sommaire color\u00e9
\n<\/span><\/a>Pr\u00eat \u00e0 cr\u00e9er un sommaire cliquable ?<\/span><\/a><\/strong><\/span><\/div>\n

 <\/p>\n

<\/a>Pourquoi cr\u00e9er un sommaire pour vos articles ?<\/span> <\/strong><\/span><\/h2>\n

Un sommaire est presque toujours un atout pour un article de blog<\/strong>. Surtout lorsque celui-ci est assez long. Cr\u00e9er un sommaire en d\u00e9but d\u2019article est avantageux pour les lecteurs, et ce, pour deux raisons principales.<\/span><\/p>\n

 <\/p>\n

<\/a>Cr\u00e9er un sommaire pour faire gagner du temps aux lecteurs<\/strong><\/span><\/h3>\n

Tout d\u2019abord, les lecteurs peuvent rapidement identifier les diff\u00e9rentes parties de l\u2019article<\/strong>\u00a0sans avoir besoin de scroller enti\u00e8rement. Cela leur permet de gagner du temps<\/strong>, en jugeant rapidement de la pertinence d\u2019un article. En effet, le sommaire permet aux internautes de savoir si les informations qu\u2019ils recherchent se trouvent dans l\u2019article. Sans sommaire, ils sont oblig\u00e9s de parcourir l\u2019article entier. Lorsqu\u2019ils recherchent des informations pr\u00e9cises, ils peuvent \u00eatre d\u00e9motiv\u00e9s \u00e0 parcourir votre article.<\/span><\/p>\n

 <\/p>\n

<\/a>Cr\u00e9er un sommaire pour orienter les lecteurs<\/strong><\/span><\/h3>\n

Ensuite, cr\u00e9er un sommaire est b\u00e9n\u00e9fique pour votre article, car il permet aux lecteurs de pouvoir naviguer facilement \u00e0 travers les diff\u00e9rentes parties<\/strong>. En effet, il sera beaucoup plus pratique de cliquer sur le titre d\u2019une partie afin de la consulter \u00e0 nouveau, plut\u00f4t que de scroller \u00e0 l\u2019infinie \u00e0 la recherche de l\u2019information qu\u2019ils souhaitent revoir.<\/span><\/p>\n

 <\/p>\n

\"map-sommaire-blog\"<\/p>\n

 <\/p>\n

Passons maintenant \u00e0 la partie technique. Voyons d\u2019une part comment ajouter des liens cliquables<\/strong> \u00e0 notre sommaire. Par la suite, nous verrons comment y ajouter de la couleur<\/strong> afin de le mettre en valeur.<\/span><\/p>\n

 <\/p>\n

<\/a>Placer les liens dans le sommaire<\/strong><\/span><\/h2>\n

<\/a>1# Placer une ancre de lien sur chaque titre<\/strong><\/span><\/h3>\n

Les indications et les captures d\u2019\u00e9crans de cet article concernent uniquement WordPress<\/a> <\/strong><\/span>car c\u2019est le CMS que j\u2019utilise pour le Blog de Bambou<\/a><\/span>. La premi\u00e8re \u00e9tape de ce tutoriel commence donc lorsque votre texte est implant\u00e9 dans WordPress. Vos titres sont \u00e9galement pr\u00eats\u00a0: ils sont bien plac\u00e9s et poss\u00e8dent les bonnes balises.<\/span><\/p>\n

 <\/p>\n

En outre, le Blog de Bambou regorge de donn\u00e9es suppl\u00e9mentaires. Notamment sur l’optimisation des ancres de liens.\u00a0<\/strong><\/a><\/span><\/span><\/p>\n

 <\/p>\n

\"inserer-ancre-creer-un-sommaire\"<\/p>\n

 <\/p>\n

S\u00e9lectionnez un de vos titres, puis placez une ancre dessus<\/strong>. Pour se faire, allez dans Ins\u00e9rer, puis Ancre<\/strong><\/span>. Une fen\u00eatre s\u2019affiche alors, comme sur l\u2019exemple ci-dessous. Placez le nom de votre ancre. Veillez \u00e0 ne pas mettre de majuscule ou d\u2019accents. Pour ma part, je d\u00e9bute toujours mes ancres par le mot \u00ab ancre \u00bb. Mais vous n\u2019\u00eates absolument pas oblig\u00e9s de faire la m\u00eame chose. L\u2019important est de choisir des noms d\u2019ancres qui vous parlent<\/strong> et que vous saurez retrouver.<\/span><\/p>\n

 <\/p>\n

\"mettre-une-ancre-de-lien-sur-un-titre\"<\/p>\n

 <\/p>\n

Cliquez ensuite sur OK<\/strong>. Vous voyez une petite ic\u00f4ne appara\u00eetre devant votre titre. Il signifie que l\u2019ancre est bien en place.<\/span><\/p>\n

\"liens-creer-un-sommaire\"<\/p>\n

 <\/p>\n

<\/h3>\n

<\/a>2# Reporter chaque titre en haut de la page<\/strong><\/span><\/h3>\n

Une fois que tous vos titres ont des ancres, il est temps de cr\u00e9er votre sommaire. Rendez-vous en haut de votre page pour reporter tous vos titres<\/strong> les uns en dessous des autres. Ne placez pas de balise Titre dessus cette fois-ci. Il faut en effet les laisser en \u00ab\u00a0paragraphe\u00a0\u00bb<\/strong>, comme sur l\u2019exemple ci-dessous.<\/span><\/p>\n

 <\/p>\n

\"textes-wordpress-creer-un-sommaire\"<\/p>\n

\u00a0<\/strong><\/span><\/p>\n

<\/a>3# Lier chaque titre avec son ancre<\/strong><\/span><\/h3>\n

Il vous faut d\u00e9sormais ajouter les ancres<\/strong> dans votre sommaire. Pour se faire, s\u00e9lectionnez un des titres, puis cliquez sur l\u2019ic\u00f4ne de lien, comme sur l\u2019exemple ci-dessous.<\/span><\/p>\n

\"creer-un-sommaire-icone\"<\/p>\n

Une petite fen\u00eatre appara\u00eet, dans laquelle vous allez pouvoir ins\u00e9rer le nom de l\u2019ancre correspondant au titre que vous avez s\u00e9lectionn\u00e9. Sur cet exemple, on voit que l\u2019ancre de lien se nomme \u00ab\u00a0ancre-generique\u00a0\u00bb car elle correspond au titre sur les mots cl\u00e9s g\u00e9n\u00e9rique, de l\u2019article \u00ab\u00a0comment choisir ses mots cl\u00e9s SEO\u00a0?\u00a0\u00bb.<\/a><\/span><\/strong><\/span><\/p>\n

\"ancre-de-lien-wordpress\"<\/p>\n

 <\/p>\n

Il est tr\u00e8s important cette fois-ci d\u2019ajouter un # devant le nom de votre ancre<\/strong>. Sans quoi, le lien ne fonctionne pas.<\/span><\/p>\n

 <\/p>\n

<\/a>4# Soigner la mise en forme<\/strong><\/span><\/h3>\n

Vous avez ins\u00e9r\u00e9 tous les liens correspondants aux ancres de vos titres. Vous avez donc cr\u00e9\u00e9 un sommaire cliquable.<\/strong> Ajustez maintenant la mise en forme pour lui donner de l\u2019allure.\u00a0Diff\u00e9renciez<\/strong> par exemple vos grands titres et vos sous titres<\/strong>, avec des tailles, des caract\u00e8res en gras, des titres soulign\u00e9s\u2026<\/span><\/p>\n

Rendez votre sommaire le plus clair et agr\u00e9able possible pour les internautes.<\/span><\/p>\n

 <\/p>\n

 <\/p>\n

<\/a>Cr\u00e9er un sommaire color\u00e9<\/strong><\/span><\/h2>\n

La derni\u00e8re \u00e9tape de la mise en forme sera une touche de couleur pour le fond du sommaire.<\/strong> Nous allons voir comment ajouter un rectangle color\u00e9 \u00e0 votre sommaire afin de le rendre plus visible. Pour ce faire, nous allons utiliser la partie \u00ab\u00a0Texte\u00a0\u00bb de l\u2019\u00e9diteur WordPress.<\/strong> En d\u2019autres termes, nous allons r\u00e9diger un peu de code HTML.<\/strong><\/span><\/p>\n

 <\/p>\n

\"d\u00e9coration-couleur\"<\/p>\n

 <\/p>\n

Pas de panique pour les non-initi\u00e9s, les lignes de codes \u00e0 ajouter sont assez simples. Pas besoin d\u2019\u00eatre un d\u00e9veloppeur de g\u00e9nie pour ajouter un peu de couleur \u00e0 son blog.<\/span><\/p>\n

Voici ligne de code \u00e0 ajouter avant le sommaire :<\/span><\/p>\n

<div style=\u00a0\u00bbbackground-color: #ebf8ff; width: 50%; padding-left: 2%;\u00a0\u00bb><\/strong><\/span><\/p>\n

Sur cet exemple, nous utilisons la balise DIV<\/strong>, qui signifie Division du contenu. Cette balise nous sert \u00e0 cr\u00e9er le rectangle autour du sommaire. Ensuite, la couleur est indiqu\u00e9e sous forme de code. #ebf8ff correspond \u00e0 un bleu tr\u00e8s clair. Mais vous pouvez entrer n\u2019importe quel code afin d\u2019obtenir la couleur de votre choix.<\/strong><\/span><\/p>\n

 <\/p>\n

Juste apr\u00e8s, il y les indications de la taille<\/strong> du rectangle. Notamment sa largeur, ainsi que la marge laiss\u00e9e pour le texte. Ici, la largeur, nomm\u00e9e \u00ab\u00a0Width\u00a0\u00bb<\/strong> est de 50%. Cela signifie que le rectangle du sommaire prend l\u2019\u00e9quivalent de la moiti\u00e9 de la page web en termes d\u2019espace.<\/span><\/p>\n

 <\/p>\n

Enfin, le \u00ab\u00a0padding-left\u00a0: 2%\u00a0\u00bb<\/strong> permet de d\u00e9caler le texte de 2% par rapport au fond color\u00e9, ce qui donne une petite marge et am\u00e9liore la visibilit\u00e9 globale du sommaire.<\/span><\/p>\n

 <\/p>\n

Vous l\u2019avez compris, c\u2019est \u00e0 vous d\u2019effectuer vos propres r\u00e9glages. Ainsi, vous pourrez cr\u00e9er un sommaire qui vous ressemble.\u00a0<\/span><\/p>\n

 <\/p>\n

N\u2019oubliez pas de fermer la balise apr\u00e8s le sommaire\u00a0: <\/div><\/span><\/strong><\/p>\n

 <\/p>\n

\"histoiredebambou-illustration-ordinateur-blog\"<\/p>\n

 <\/p>\n

<\/a>Pr\u00eat \u00e0 cr\u00e9er un sommaire cliquable ?\u00a0<\/span><\/strong><\/span><\/h2>\n

R\u00e9sumons les \u00e9tapes ensemble, puis lancez-vous dans la cr\u00e9ation de vos sommaires. Pour cr\u00e9er un sommaire cliquable et color\u00e9, vous devez :\u00a0<\/span><\/p>\n