Последнее обновлене - 15 января 2023 в 16:24
Предлагаю вашему вниманию отличный способ вставить оглавление записи без плагина. Достаточно будет сформировать якорные ссылки. В чём суть? Внутри текста заголовкам присваиваем уникальные идентификаторы, а в оглавлении вставляем ссылки на них. Подобная реализация вывода содержания статьи не для ленивых, но прекрасно работает и не создаёт нагрузку на сайт.
Кроме того, используя css, такому оглавлению можно придать любой внешний вид в соответствии с дизайном сайта. Выглядит конструкция следующим образом:
<div style="border: 1px dotted green; padding: 5px 50px 0 15px; margin: 5px; background:#fbfbfb;">
<p style="font-size: 26px;">Содержание:</p>
<ol>
<li><a href="#id1">Заголовок №1</a></li>
<li><a href="#id2">Заголовок №2</a></li>
<li><a href="#id3">Заголовок №3</a></li>
</ol>
</div>
Этот код надо вставить в запись, переключившись в редакторе в режим «Текст». Далее, в тексте статьи, сами заголовки обернуть тегом h2 с соответствующими идентификаторами. Выглядит это так:
<h2 id="id1">Заголовок №1</h2>
Здесь какой-то текст...
<h2 id="id2">Заголовок №2</h2>
Здесь ещё какой-то текст...
<h2 id="id3">Заголовок №3</h2>
Здесь снова какой-то текст...
В результате, в том месте записи, куда был установлен первый код, вы увидите оглавление, как на изображении ниже.
При клике в оглавлении по одному из его пунктов, произойдёт скроллинг до соответствующего заголовка. Чтобы облегчить себе жизнь и каждый раз не копировать вышеприведённые коды в новую запись, можно добавить в редактор свои кнопки и выводить содержание записи с их помощью.
И ещё один момент — скроллинг будет мгновенным. Если же есть желание оформить этот процесс визуально более привлекательным, посмотрите, как сделать плавную прокрутку до якоря.