🚀 Мои услуги
Header Image
пр. Мира 620000 Россия +7900-000-00-00
Логотип блога интернет-бродяги

Оглавление (содержание) записи без плагина

Как вывести содержание записи без плагина
Обновлено: 2023-01-15 в 16:24
Актуально на 2025 год
Просмотры: 124

Предлагаю вашему вниманию отличный способ вставить оглавление записи без плагина. Достаточно будет сформировать якорные ссылки. В чём суть? Внутри текста заголовкам присваиваем уникальные идентификаторы, а в оглавлении вставляем ссылки на них. Подобная реализация вывода содержания статьи не для ленивых, но прекрасно работает и не создаёт нагрузку на сайт.

Кроме того, используя 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>
Здесь снова какой-то текст...

В результате, в том месте записи, куда был установлен первый код, вы увидите оглавление, как на изображении ниже.

Внешний вид оглавления на сайте

При клике в оглавлении по одному из его пунктов, произойдёт скроллинг до соответствующего заголовка. Чтобы облегчить себе жизнь и каждый раз не копировать вышеприведённые коды в новую запись, можно добавить в редактор свои кнопки и выводить содержание записи с их помощью.

И ещё один момент — скроллинг будет мгновенным. Если же есть желание оформить этот процесс визуально более привлекательным, посмотрите, как сделать плавную прокрутку до якоря.

Если материал оказался полезен и помог решить проблему, можете поддержать автора, направив камеру смартфона на QR-код.
QR-Сбер

Оцените статью:

Рейтинг: 0.0 (Голосов: 0)

Почитайте похожие материалы

Об авторе: Hobo

Занимаюсь созданием и оптимизацией сайтов, о чём и пишу в этом блоге. Иногда делюсь опытом использования различной техники, которая побывала у меня в руках.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

SQL - 71 | 0,069 сек. | 6.93 МБ