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

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

Как вывести содержание записи без плагина

Последнее обновление - 28 июля 2020 в 00:34

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

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

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

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

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

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

Друзья, плюсаните, вдруг пригодится!

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

Об авторе: Hobo

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

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

10 × 1 =

 

Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять