How to add a table of contents to your blog posts?

Published on 09/09/2019 | 49 comments

Adding a table of contents - also called summary - at the beginning of your blog posts can be a "real plus", both in terms of SEO optimization of your blog than improving the user experience (UX) of your readers.

Affichage d'une table des matières
Display a table of contents at the beginning of your WordPress articles (Gutenberg or Divi).

In the past, you needed some knowledge of HTML to be able to insert a table of contents in your articles.

Here you will see that there are several solutions and we will go through them all...

Announcement: this article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Why insert a summary at the beginning of a blog post?

Adding a summary at the beginning of your blog posts may seem insignificant, but it's quite the opposite!

When I was starting out in blogging, I only inserted a table of contents if it was really worth it. That is, if the article was really long or a bit complex.

Over time, I realized that this "little extra" was actually essential for many reasons:

  • As my articles are less and less succinct and more and more developed, a summary allows to make the content more digestible.
  • This helps Divi Tips readers better navigate and understand the chapters in my articles. This way, they can quickly get to the part that interests them the most.
  • Reading the summary of the article can also whet the curiosity of readers who might not have bothered to go beyond the introduction.
  • This is essential for Google, which also needs to know quickly the content of your article and to understand it better thanks to a appropriate HTML semantics.
  • The table of contents allows the indexing robots to propose enriched results (Richs Snippets) directly in its search results, with links pointing to some of your chapters.
Rich Snippet avec liens pointant vers les chapitres énumérés en table des matières
Rich Snippet with suggested links pointing directly to chapters listed in table of contents

Adding a summary to your articles is an optimization not to be underestimated and can help you improve your position in search results as explained in this article full of tips for quickly reach the 1st page of Google.

So, with a table of contents at the beginning of your articles, you kill two birds with one stone!

In fact, when I have a little time, I try to update my old articles to optimize and update the content and I always take the opportunity to add a summary, if it is not already the case... It's a big job but it's worth it!

2 - Insert a table of contents with a free extension

If you are thinking of doing this, I suggest you discover a simple way to do it.

The free extension named LuckyWP Table of Contents is very easy to configure and gives a more than satisfactory result, let's see how to do it...

2.1 - Installing LuckyWP Table of Contents

LuckyWP Table of Content
LuckyWP Table of Contents

Simply go to the tab Extensions > Addtab, available directly from the administration part of your site.

Do a "table of contents" search: install and activate the LuckyWP plugin.

You can find the plugin settings under the tab Settings > Table of Contents.

2.2 - LuckyWP Configuration

Setting up this plugin is very easy and its options are available in ENG/FR. Just navigate through the various tabs to check/uncheck the options available to you.

2.2.1 - General tab

TOC - onglet Général
LuckyWP - General Tab

It is from this tab that you can make the main settings such as :

  1. The minimum number of titles that triggers the creation of a table of contents.
  2. The possibility to display the summary according to the hierarchy of your titles (H1 - H2 - H3 etc.).
  3. The type of numbering to be used: numbers, Roman numerals, no numbering etc.
  4. The numbering suffix: none, a parenthesis or a dot.
  5. The title to be displayed above the table of contents.
  6. Activate the filter allowing the user to show or hide the summary. You can even change the labels.
  7. Add an automatic margin before the anchor point and enable smooth scrolling.

Once you have made your settings, don't forget to save your changes.

2.2.2 - Appearance tab

TOC - onglet Apparence
LuckyWP - Appearance Tab

The Appearance tab allows you to customize the display of your summary.

You will be able to specify the font, the fat and especially the colors to be used.

The options are quite complete and allow you to fully customize your table of contents by deciding the background color, link color, hover links and visited links.

In short, everything is done so that your summary blends in with the graphic charter of your site/blog!

2.2.3- Auto Insert Tab

TOC - onglet Insertion Auto
LuckyWP - Auto Insert Tab

The LuckyWP plugin allows you to automatically insert a table of contents in your publications.

It's a good option that could save you a lot of time, but fortunately it's only an option.

If you don't check it, the summary will not be added automatically and this will leave you more freedom on where you want to insert it (manual method).

2.2.4 - Table of contents settings tab

TOC - onglet Traitement des titres
LuckyWP - Title Processing Tab

From this tab, you will simply decide which publication types can host a table of contents.

2.2.5 - Miscellaneous Tab

TOC - onglet Divers
LuckyWP - Miscellaneous Tab

The Miscellaneous tab offers interesting options, especially in terms of SEO...

  1. Check off the titles you want to exclude from your summary. For example, you could decide that only the H1 - H2 and H3 titles should be included and that the others should be hidden.
  2. Decide on the format of your URLs. A link is automatically created internally: an anchor is therefore placed at the end of the URL of your articles. With this option, you can decide on the appearance of the anchor.
  3. Concerning these anchors added to the URL, you will be able to convert your titles to lower case and replace the underscores (the underscores _ ) by dashes.
  4. Two SEO options are also possible: tagging the summary with a "noindex (this tells Google not to index these URLs) and to add a "nofollow to your summary links (this tells Google not to follow these URLs). It's up to you to choose what you think is best...
  5. Other settings are also possible, such as deciding in which HTML tag your table of contents will appear (UL or DIV).

2.3 - Inserting the LuckyWP summary into your blog posts

Now that the settings are done, you can enjoy this new feature.

If you have decided to automatically insert the summary, everything is normally already in place. You won't have to do anything more than check the appearance of the summary within your articles.

If, on the other hand, you have decided to manually insert LuckyWP's table of contents into your articles, here's what you need to do:

Insertion de la table des matière avec Gutenberg
LuckyWP offers a Gutenberg Block to display the table of contents

When writing your articles with the new WordPress editor (Gutenberg), you can easily insert a "Table of Contents" block - available in "Common Blocks" - where you want it.

This block will retrieve all the titles identified in your articles and list them in the form of a clickable summary.

You have nothing else to do...

Find out more about Divi compatible plugins... and who really want you well 😉

3 - Inserting a summary manually with Gutenberg

If you're the reluctant type and don't like adding plugins unnecessarily, you should follow this second solution: manually add a table of contents using Gutenberg.

Ideally, you would need some knowledge of HTML, but nothing too complicated if you follow these steps:

When your writing is complete, or when the outline of your paper is finished, you will need to add an IDENTIFIER for each of your paragraphs.

Gutenberg's TITLE blocks are ideal for this purpose.

Insérer manuellement une table des matières avec Gutenberg
Create useful anchors for the Gutenberg summary
  1. Select the title block to be modified: click on the contextual menu (the 3 small dots) and choose "modify in HTML".
  2. Vous verrez alors la version HTML de votre titre. Celui-ci est placé dans des balises H2, H3 H4 etc. Dans cette balise, vous devez ajouter un <strong>identifiant unique</strong> que vous créerez pour chaque titre. La balise <strong><em><h2></em></strong> devra ressembler à cela <strong><em><h2 id= »mon-identifiant-1″></em></strong>. Vous renouvellerez cette action pour chaque titre en prenant le soin de ne <strong>jamais utiliser le même ID</strong> et <strong>sans utiliser des espaces ou des caractères spéciaux</strong>.
  3. You can then close the editing of the HTML by selecting "Edit visually".
créer le sommaire avec une liste Gutenberg
Create the table of contents using a Gutenberg "list" block

Once all your titles have an ID, you can insert a "List block" to list the items in your table of contents.

For each element, you will just have to insert a link such as #my-identifier-1, #my-identifier-2, #my-identifier-3 etc.

This allows you to create an internal link to the article that will lead the user to the desired location.

It is time to test Divi for free to see what it can do... It's over here!

4 - Inserting a table of contents manually with the Divi Builder

To create a table of contents in a page/article using the Divi Builder, it's pretty much the same as with Gutenberg :

First of all, you will need to insert as many lines (rows) or sections as you need for a paragraph. Learn more about how the Divi Builder works.

When your paragraphs are well separated in different rows and sections, you will be able to add an ID (CSS identifier) that will be used to create your table of contents.

Ajouter un ID CSS dans une ligne Divi
Add a CSS ID in a Divi row
  1. Edit the row settings
  2. Go to the ADVANCED tab
  3. In the "CSS ID" field, enter your unique identifier. For example : summary-1. Do not use special characters or spaces.
  4. Save your changes.

You will need to repeat this step for each of your paragraphs.

Then, you can create the summary using a Text module in which you add a bulleted list (or a numbered list if you prefer).

Créer un sommaire avec Divi
Create a summary with Divi using a bulleted list or a numbered list.
  1. Open the Divi Text Module
  2. Highlight one of the items in the summary (bulleted or numbered list)
  3. Click on the insert link icon
  4. Add the CSS identifier of the paragraph with a "hashtag" as a prefix. For example: #summary-1
  5. Validate by clicking on OK
  6. Repeat these actions for each paragraph: the identifiers must be unique, don't forget that.
  7. Save your changes.

Now you have a working table of contents for your publication using the Divi Builder!

5 - Insert a summary manually with the classic WordPress editor

If you are still using the old WordPress editor to write your blog posts, you can also add a table of contents easily.

Table des matières avec le Classic Editor
Table of contents with the classic WordPress editor

All you have to do is write your articles from the VISUAL editor (left screen on the screenshot above) and then switch to the TEXT version (right screen on the screenshot above), to insert the CSS identifiers (IDs) within the H2, H3, H4 tags etc.

Finally, you will be able to add these CSS IDs as link addresses within your summary, as we have seen before with Gutenberg or the Divi Builder.

Discover many other tips and resources directly on Elegantthemes' blog.

6 - In conclusion: manual or automated table of contents?

Manual methods are efficient and give you more freedom, however, it takes much more time than with the help of a plugin. Especially if your summary must display nested lists!

If you want to be tempted by the plugin method, you should know that there is not only LuckyWP, other free or freemium extensions are also available:

ajouter une table des matières dans Divi
Insert a table of contents in Divi blog post

2,000 words

8

You should like it too:

Product Carousel pour Divi et WooCommerce

Product Carousel for Divi and WooCommerce

If you're looking for a way to scroll through your WooCommerce store's products in a stylish carousel, the "Product Carousel" extension can help. It's quick and easy to use, and the results live up to expectations.

Popups for Divi : un plugin gratuit très malin !

Popups for Divi: a smart free plugin!

Free plugins for Divi are pretty rare, but "Popups for Divi" is pretty effective and easy to use. This plugin converts any Divi section into a popup. I explain how to use it.

49 Commentaires

  1. David C.

    Très bel article… Je voulais moi même rajouter cette fonction primordiale en méthode manuelle afin de ne pas surcharger le nombre de plugins. Par contre, si d’autres personnes publient, ils n’y penseront pas.
    En tous cas, très bien expliqué Lycia 😉

  2. romain

    Bonjour
    merci pour ce tuto qui est très bien !
    J’ai utilisé la méthode dans le divi Builder cela marche très bien mais je remarque tout de même un soucis : la pagge descend trop bas lors du clic sur le lien et on se retrouve un tout petit peu plus bas dans la page, ce qui fait que le titre du paragraphe n’est pas visible.
    Bref ça doit pouvoir se régler mais j’ignore comment, avez vous une idee?

  3. Lycia Diaz

    Salut Romain.
    Essaye de voir dans le sous-onglet Navigation > Paramètres généraux de Divi. Explications ici.
    Ça pourrait corriger le problème. À voir 😉

  4. Lycia Diaz

    Merci David,
    Je l’ai fait en manuel jusqu’à cet article. C’était très fastidieux bien qu’il y avait certains avantages dont le fait de pouvoir choisir son ID.
    😉

  5. David C.

    Salut Lycia,

    J’ai installé Lycky WP Table of Contents pour éviter de m’embêter à le faire manuellement.

    Le plugin est sympa. J’ai cependant quelques questions si cela ne t’embête pas.

    1. Que conseilles-tu d’activer pour le SEO entre les options rel= »nofollow » et ?
    Perso j’ai désactivé le noindex (pour que les titres soient indexés par Google) et activé nofollow (quel est sont utilité dans ce contexte ?)… C’est bon pour toi ?

    2. Le balisage des titres est mieux en UL/LI ou en DIV ?
    J’ai opté pour les listes UL/LI puisse que pour moi cela reste une liste.

    3. J’ai des problèmes d’accès aux titres depuis la table des matières.
    Lorsque je clique sur un titre, la page ne descends pas sur le bon titre… Mais sur un autre (souvent un ou deux titres qui se trouve avant).
    Pourtant les #id correspondent bien entre la table de matière et les titres.
    Pour info, je ne fait que sur 2 profondeur avec seulement les H2 et H3 (j’ai désactiver les autres). (exemple sur https://twp.proserv.fr/dolibarr-logiciel-erp-crm/)
    As-tu aussi ce problème ?

    Merci pour ton aide et au plaisir de te lire 😉

  6. Lycia Diaz

    Salut David,

    Alors, moi j’ai fait ces choix-là
    – j’ai coché noindex
    – je n’ai pas coché nofollow
    – j’ai opté pour des tirets et non des underscores
    – j’ai converti en minuscule
    – j’ai choisi les LWPTOC1… : même si cela ne m’enchante pas, je préfère ça à des URL qui font 2km de long si le titre en question est trop long

    Pour répondre à ton autre question : je n’ai aucun problème avec les renvois de titre. Mais effectivement, j’ai regardé ton lien et quand je clique sur le « 2 » ça renvoie sur le « 1.1 ». C’est très bizarre. Tu n’aurais pas un peu de code qui traîne et qui empêcherait le plugin de bien fonctionner ?

    Bon, perso je n’ai jamais noté cela sur Astuces Divi mais qui sait ?

    En tout cas, je gagne presque 10 minutes par article selon la complexité de la table des matières que je devais créer à la main et dont Gutenberg n’est pas du tout UX pour nous y aider !

  7. David C.

    Pour le noindex et nofollow, bizarre… tu ne veux pas que Google index ta TDM ?
    Ou j’ai peut-être mal compris le fonctionnement.

    Pour les tirets et minuscule, cela n’a pas d’importance étant en lwpto… en ID.

    Pour mon problème, j’ai remarqué que le plugin insère des span devant chaque titre.
    Mais pour ma part, il crée deux span au lieu d’un.
    Le premier est n’importe quoi… ce qui fausse le truc.
    Exemple, le titre 2 comporte span id=lwpto7 et ensuite un autre span id=lwpto2 (lui est bon)… Du coup, quand tu vas sur le 7ème ID, et bien il va sur le titre 2 🙁

    Je vais désactiver AMP et faire d’autres tests (comme mettre les ID en titre et non lwpto…)

    Si pas mieux -> ticket de support sur WordPress

    Merci pour ta réponse 😉

  8. Lycia Diaz

    Ah oui : AMP ? Moi je ne l’ai pas. Ça pourrait venir de là…
    Pour le NOINDEX, je t’avoue avoir hésité mais voici ma philosophie :
    1/ Lorsque je faisais mes TDM en HTML, j’avais noté que Google m’indexait mes liens (dans la Search Console). Résultat, un nombre incalculable d’URL indexées et peu de présentation dans la SERP et aussi peu de clic. J’ai pensé que cela n’était pas pertinent et pouvait diluer mon SEO. Je me trompe peut-être et si un expert SEO passe par là, j’aimerais bien son avis…
    2/ La deuxième raison, et là pour le coup, je suis sûre de moi : si un jour, je décide de supprimer le plugin Lucky (pour cause de conflit, de faille de sécurité ou parce qu’il n’est plus maintenu), je devrais alors faire une redirection de chaque URL (chaque sous-URL) qui aura été indexée dans Google. Bon tu vas me dire : les REGEX c’est fait pour ça et je te dirais : oui, dans le cas où tu as choisi les URL avec LWPTOC … mais si tu as choisi la translitération de tes titres : tu es bon pour faire tes redirections à la main.
    Qu’en penses-tu ?

  9. David C.

    Je suis d’accord avec toi pour le point N°2. C’est pour ca qu’il faut laisser les ID en LWPTO… histoire de faire des REGEX au cas où 🙂
    Et puis, les #ID à rallonge c’est pas top.

    Pour le point N°1 je suis partagé. C’est l’argument que tu présentes dans le chapitre 1 de ton article.

    C’est vrai que du coup un nombre impressionnant d’URL sera indexé.
    Mais ils ne sont pas intégré à ton site map. Cela ne reste que des liens ancre… Donc je sais pas, je suis loin d’être un expert SEO.
    Si tu connais quelqu’un, je serai aussi intéressé par sa réponse concernant l’indexation des liens d’ancres (et non des ancres de lien lol), je ne trouve rien sur le net 😉

  10. Lycia Diaz

    Je vais demander à notre ami Mickaël…

  11. David C.

    J’ai réécris le script.
    Je suis parti de zéro. Il ne fait que 200 lignes en JS et 50 lignes en CSS et plutôt bien écrit. En effet, le plugin LyckyWP charge un script de plus de 1000 lignes et beaucoup de CSS… Sans compter tous les fichiers PHP qui sont exécutés. J’ai regardé, c’était une usine à gaz.

    J’ai repris la quasi totalité des options proposées par le plugin LuckyWP et y ai rajouté quelques options importantes.

    Par contre je ne rajoute pas de bloc dans Gutenberg, mais fait appel (avec un bloc HTML) a un short-code que j’ai créé et liste les options que je souhaite modifier si besoin (en fonction de l’article).

    Si jamais tu es intéressée 😉

    PS : J’attends la réponse de Mickaël avec impatience 😉

  12. Lycia Diaz

    Merci David !
    Tu es sacrément fort dis-moi ! C’est super de pouvoir éditer des plugins comme on le souhaite ! Ce n’est pas dans ma capacité malheureusement mais effectivement, c’est intéressant…
    Du coup, tout est rentré dans l’ordre pour tes tables des matières ?
    Concernant Mickaël, je l’attends toujours… je vais le relancer… mais tu sais, les SEO, ils ne sont jamais très pressés (LOL, petite blague pour le jour où il passera par là)
    À bientôt
    Lycia 😉

  13. David C.

    Oui plus de problème, vu que je sais ce que le script fait exactement.
    J’ai rajouté une option où tu désignes une div qui contient les titres à indexer. Tu peux aussi ne pas prendre en compte des titres en rajoutant une classe sur les titres à ne pas indexer.
    Seul problème, ce n’est pas compatible avec les pages AMP…

  14. Lycia Diaz

    Ah oui mais si ce n’est pas compatible AMP, ce n’est pas très bon ? Quand tu dis « pas compatible », tu veux dire que ça ne s’affiche pas sur la version AMP ou que ça fait une erreur ?

  15. David C.

    Juste que ça ne s’affiche pas en AMP.
    En effet, je construis la table des matières en jQuery, et comme les pages AMP ne prennent pas les scripts, la table des matières ne s’affiche pas. J’ai d’ailleurs fait en sorte qu’aucune partie de la table des matières ne s’affiche (encadré, etc…).
    Mais je pense d’ailleurs que c’était à cause des pages AMP que LuckyWP posait problème.

    Après concrètement ce n’est pas dramatique. La table des matières étant un petit plus, pas une nécessité.

  16. Lycia Diaz

    Oui, merci David.
    Effectivement, AMP enlève toutes les « fioritures » donc c’est un peu normal que la TOC n’apparaisse pas. En tout cas, bravo pour l’avoir codé toi-même…
    Pour ma part, je me pose des questions, je continue à utiliser ce plugin (bien pratique) mais je n’aime pas être dépendante d’un plugin quel qu’il soit, ou du moins, le moins possible… Alors je le garde par fainéantise mais je sais que rien ne vaut « à la mano »… Et en même temps, il me fait gagner beaucoup de temps ! Entre les deux mon cœur balance…

  17. David C.

    En effet, mais le plugins LuckyWP fonctionne lui sur les pages AMP (enfin à mes souvenirs)… J’ai l’impression qu’il traite en amont lors de la demande du chargement de la page… Pas comme un JS qui lui se lance seulement une fois la page chargée.
    Si tu veux que je te partage mon script n’hésite pas. Tu as mon mail/tel 😉

  18. Lycia Diaz

    Merci David 😉 !

  19. Julie

    Salut Lycia, super article qui m’a permis une installation sans problème. J’aurais une question en ce qui concerne la partie divers. On nous propose de ne pas prendre en compte certains titres H1 H2… ou alors de le faire en choisissant le texte.
    « Spécifiez les titres (un par ligne) à exclure de la table des matières.Utilisez un astérisque * comme caractère générique pour faire correspondre n’importe quel texte.  »

    Je ne sais pas du tout comment je dois écrire mon exclusion dans l’encart? J’ai en bas de page de mon article une baise H3 « Articles suivants » qui se joint à ma table des matières pas terrible. Merci beaucoup pour le coup de main 😉

  20. Lycia Diaz

    Salut Julie, sur un de mes sites, je me suis trouvée avec le même souci. Les « articles à lire » de JetPack se retrouvaient dans ma table des matières. Effectivement, c’est ennuyeux… J’ai corrigé ça avec un peu de CSS (display none). Il te suffit de trouver la balise à exclure et le tour est joué. Tu t’y connais un peu en CSS ?

  21. David C.

    Normalement il n’y a que le titre à écrire. (comme il est écrit dans la table des matière)
    On peut mettre un étoile avant ou après quelques mots si le titre comporte un texte variable.
    Exemple pour le nombre de commentaire… Il faut mettre *commentaire*. Par contre si dans l’article il s’y trouve un titre avec le mot commentaire il ne sera pas pris en compte.
    Ce sont les défauts que je trouvais à ce plugin : le fait de ne pouvoir définir une zone où sont pris en compte les titres.

  22. Caroline

    bonjour,
    j’ai construit mon site avec DIVI Builder
    je viens de tester d’installer ce plugin.
    lorsque j’active l’insertion auto, je vois bien apparaitre le sommaire sur les articles déjà publiés, mais pas sur mes brouillons, et si j’enlève l’insertion auto, je n’arrive pas à l’intégrer car le module « table des matières » n’apparait pas danas les modules de construction DIVI. y a-t-il une astuce ?

  23. Lycia Diaz

    Salut Caroline.
    Ok, je comprends.
    Moi je l’utilise dans Gutenberg, donc, le module existe.
    Pour le Divi Builder, il te suffit d’ajouter un shortcode dans un module de texte : lwptoc entre crochet (je ne veux pas l’insérer en commentaire alors je ne dois pas ajouter mes crochets, mais toi, oui). C’est écrit dans la documentation ici : https://fr.wordpress.org/plugins/luckywp-table-of-contents/ au paragraphe « Manual Insert ».

  24. BLET

    Bonjour,

    Je viens de paramétrer l’extension. J’ai créé un article à l’adresse de mon site, https://divi.prenommer.com
    En automatique, il m’est impossible d’afficher la table des matières ! Notamment à cette adresse : https://divi.prenommer.com/le-medecin-des-pauvres-du-venezuela-bientot-beatifie/
    J’ai également testé sur la page Politique de Confidentialité. Rien à faire. Cela ne fonctionne pas. Est-ce le fait de n’avoir insérer aucun shortcode ?
    Suis un peu perdu !

    Merci d’avance si vous pouvez m’aidez,

    Bien cordialement,

    Claude

  25. Lycia Diaz

    Salut Claude, soit tu utilises un shortcode soit tu paramètres le plugin pour que l’apparition de la table des matières soit automatique. As-tu bien vérifié cela dans les réglages de l’extension ?

  26. Claude BLET

    Re-bonjour,

    Cela fonctionne, je viens de voir que tous les titres (de H1 à H6) étaient cochés, j’ai coché seulement H1 ce qui me paraît logique finalement. Excepté qu’au déroulement du texte cela ne s’arrête que deux ou trois lignes en dessous de la section !

    Bien cordialement

    Claude

  27. Claude BLET

    Bonjour Lycia,

    J’ai paramétré l’extension afin que la table des matières apparaisse automatiquement. J’ai vérifié dans les réglages de LWPTOC et j’avais malencontreusement cochés 4 titres (de H1 à H4). Maintenant tout cela fonctionne je n’ai laissé cjoché que H1. Merci Lycia.

    Bonne journée,

    Claude

  28. Lycia Diaz

    Super !

  29. esther

    merci pour ce super travail. Toutes ces captures d’ecran.. J’ai choisi l’insertions automatique pour mes 83 articles mais le sommaire integre aussi les 3 titres des articles qui sont affichés dans le bloc « articles similaires ». Comment puis-je faire pour supprimer cela?

  30. Lycia Diaz

    Salut Esther.
    On peut facilement les cacher. Il faudrait que tu rajoutes ce code :
    li.lwptoc_item:last-child {
    display:none !important;
    }

    Si ça ne marche pas, donnes-moi l’URL de ton site, je regarderai de plus près.

  31. esther

    merci beaucoup de ta reponse, tres concrete..mais il me manque un detail: je le mets où ce code magique??

  32. Lycia Diaz

    Salut Esther, tu le mets à l’onglet Apparence > CSS Personnalisé

  33. esther

    hello, encore merci pour ta reponse…..
    Toute à ma joie d’avoir enfin le sesame, j’ai failli pleurer quand la clef n’est pas rentré dans la serrure!!

    je n’ai pas trouvé « CSS personnalisé » dans l’onglet « apparence ». du coup j’ai cherché « CSS »… partout. j’ai trouve dans « gestion des titres » mais le code n’obtient pas le resultat souhaité.

    Dans toutes mes bidouilles, j’ai vu que je pouvais exclure un titre en ecrivant « *mon tittre à exclure »…j’ai essayé, çà marche…à condition de saisir les 83 titres dejà en ligne + tous ceux à venir. En terme de travail çà ne m’inquiete pas mais la fenetrre de saisie a sans doute une limite de caracteres??
    .
    Comme tu me l’avais suggéré, je te donne l’URL de mon site.

    desolée de ces tracasserie techniques.

  34. Lycia Diaz

    Pardon, c’est Apparence > Personnaliser > CSS additionnel

  35. Lycia Diaz

    C’est un onglet de WordPress, pas du plugin

  36. esther

    le petit detail qui change tout!!
    j’ai trouvé, j’ai essayé, çà n’a pas marché.
    je ne veux pas t’embeter plus longtemps, tant pis…
    merci en tout cas pour le temps que tu m »as consacré, c’est adorable.

    cdlmt

  37. Lycia Diaz

    Donne moi le lien de ton site, je regarde à l’occasion

  38. Lycia Diaz

    Salut Esther.
    Est-ce que tu peux essayer ce code :

    .lwptoc_itemWrap:last-child
    {
    display:none !important;
    }

    .lwptoc_itemWrap:last-child(-1)
    {
    display:none !important;
    }

    .lwptoc_itemWrap:last-child(-2)
    {
    display:none !important;
    }

    .lwptoc_itemWrap:last-child(-3)
    {
    display:none !important;
    }

    Il y a de grandes chances que ça ne marche pas. Dans ce cas, tu regardes la pastille n°5 du chapitre 2.2.5 de mon article et tu choisis UL au lieu de DIV. Une fois que c’est fait, je regarderai à nouveau le code et je pense pouvoir trouver une solution. Tiens-moi au courant.

  39. Lycia Diaz

    Ou bien essaye celui-ci, ça va marcher, je pense :

    .lwptoc_item:last-child
    {
    display:none !important;
    }

    .lwptoc_item:last-child(-1)
    {
    display:none !important;
    }

    .lwptoc_item:last-child(-2)
    {
    display:none !important;
    }

    .lwptoc_item:last-child(-3)
    {
    display:none !important;
    }

  40. David C.

    Sinon tu peux aussi faire :
    .lwptoc_item:nth-last-child(-n+4) {
    display: none !important;
    }

    Code identique.

  41. Lycia Diaz

    Salut David ! Ça faisait un bail 😉 ! Pas mal l’idée mais tu crois que ça prend les 4 derniers dynamiquement ? Bon ben Esther n’a plus qu’à tester …

  42. esther

    merci à tous les 2 pour la peine que vous vous donnez à mon sujet.

    j’ai essayé TOUTES vos suggestions (mais j’ai pas compris la mention « meme code »).
    rien n’a marché.
    comme j’en avais marre de toutes ces bidouilles, j’ai pris le temps de saisir les titres à exclure « par le texte »…ouais, les 83 titres actuels… C’est surement pas propre, informatiquement parlant, mais çà marche!! donc çà me va.

    cdlmt

  43. David C.

    @Esther, je pense que tu as mis ton code dans un mauvais endroit… Sinon je peux t’assurer que ce fonctionne.
    Mais je te l’accorde, c’est un peu de la bidouille, c’est ce qui m’a fait développer mon propre plugins de table des matières, et j’ai poursuivi avec une barre de progression de lecture, un compteur de mots/temps de lecture et pour finir l’activation des titres de la TOC lors de la lecture.

    @Lycia : Yes, j’essaie de sortir la tête de l’eau de temps en temps. J’étais sur un site immo qui m’a prit un peu de temps.
    Oui ça prend bien les 4 derniers dynamiquement, c’est d’ailleurs une des propriété CSS qui est fait pour ça.
    Je teste à chaque fois ici : https://css-tricks.com/examples/nth-child-tester/

  44. Lycia Diaz

    Merci David 😉

  45. Stéphanie

    Salut Lycia,

    Est-ce que par hasard tu aurais de bons conseils pour installer un sommaire dans la sidebar qui défile à la lecteur ?
    Avec ou sans plugin ? Et si possible un truc designable 🙂

    Je cherche désespérément depuis quelques mois.

    À chaque fois que je le vois sur un autre site, je trouve cela bien cool d’un point de vue UX, mais impossible de trouver comment faire.

    Merci pour tes bons tuyaux.

    Stéphanie

  46. Chris WLP

    Bonjour,

    Un grand merci pour ce tuto et cette aide car pour ma part, je suis très heureux de ce plugin.
    J’ai néanmoins une question car je remarque que le défilement amène bien jusqu’au titre sur la version mobile tandis que sur la version website ordinateur, j’ai un défilement qui descend un peu trop.

    Pour mieux comprendre, je vous invite à jeter un oeil sur le blog : http://www.welove-paris.com

    Pourriez-vous me donner une astuce pour que le défilement soit bien identique sur les deux versions ? Ou une astuce pour faire en sorte que ce soit améliorer pour les lecteurs.

  47. Lycia Diaz

    Salut Chris, on dirait que le souci vient du header qui couvre l’ancre. Le scroll se passe bien mais il est masqué par le menu. De plus, je vois que c’est le thème Extra. As-tu contacté le support pour voir ?

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This