Вселенная полезных советов 
Здравствуйте читатель. Давайте представим что блог это книга, в принципе так оно и есть, и чтобы правильно находить информацию на сайте существует поиск. А что делать когда пост большой, и надо найти в нем то место которое необходимо, тут поиск уже не поможет, а пригодится сделать содержание в статьях, но как? Вот именно об этом и пойдет речь, кстати вот и оно.
Содержание
Html основа.
Все просто, оглавление это список, который задается в html тегом ol или ul, первый это цифровой, а второй маркированный, но я думаю использовать лучше первый, как в обычных книжках, все по порядку. Давайте сделаем сам заголовок с названием “Содержание к этой статье”, и поместим все в блок, не пугайтесь все очень просто, вот пример.
<div class="soderganie"> <h3>Содержание к этой статье</h3> <ol> <li>пункт 1</li> <li>пункт 2</li> <li>пункт 3</li> </ol>
Я сделал контейнер div с классом soderganie, потом я написал саму надпись заголовка, ну и далее идет сам список, пунктов, их можно добавлять и убавлять, но про это позже.
Настройка ссылок.
Сам каркас мы сделали, теперь надо сделать наши пункты активными. Для этого просто присоединяем к пунктам тег ссылки, и добавляем куда он будет вести, Вот смотрите, как уже видоизменится код.
<div class="soderganie"> <h3>Содержание к этой статье</h3> <ol> <li><a href="#name1">пункт 1</a></li> <li><a href="#name2">пункт 2</a></li> <li><a href="#name3">пункт 3</a></li> </ol>
Опять поясню, мы присоединили тег ссылки, но как бы без самой ссылки в нее понятии, к примеру https://wpsovet.ru/, а сделали по id с помощью знака решетки. Но вы не замарачивайтесь, главное у каждой ссылки прописать разные идентификаторы, то есть name1, name2, name3 и так далее. Вот что уже получилось
Теперь можете заметить что пункты стали активными, как ссылки, но при нажатии ничего не происходит, это потому что мы не назначили те места куда они будут вести, чем сейчас и займемся.
Делаем перенаправление к необходимым пунктам.
Тут еще все проще, к примеру я присоединяю к заголовкам h2, а так можно прикрепить к любому элементу, но лучше это делать именно к заголовкам, чтобы человек перемещался сразу же в нужное место. Вот у нас есть “пункт 1”, в статье я его обозначу так.
<h2>пункт1</h2>
Но нам надо сделать так чтобы на него вела ссылка, просто делаем вот такой вид и все.
<h2 id="name1">пункт1</h2>
Я к пункту один прикрепил его идентификатор, который прописывал к нему в первом коде, теперь браузер будет знать куда вести посетителя. Вот так будет выглядеть это в режиме html, в визуальном редакторе вордпресса.
Внимание, забыл сказать раньше, все эти коды вставляем в режиме “html (текст)”, в редакторе, когда пишите статью, ни в коем случае не во вкладке “визуально”.
Но внешний вид оставляет желать лучшего, давайте я покажу как его маленько изменить.
Присоединяем стили.
Как видите я в первом коде прописал класс “soderganie” ко всему блоку вывода. Так вот это не зря, теперь идем в файл стилей style.css. Я предлагаю свою комбинацию, но вы конечно же будете прописывать свои под ваш дизайн. Даю вам код стилей, а под ним разъясню за что отвечает каждая строчка.
.soderganie ol{background: #DADADA;display: inline-block;padding: 0 0 0 10px;border: #000 2px solid;width: 90%;margin-bottom:20px;}
.soderganie ol li{margin:15px 7px;}
.soderganie ol li a {text-decoration: none;font: 16px arial;color:#E6E6E6;}
- Первая строчка задает стиль ко всему содержанию, фон, внутренние отступы, обводка, длинна (кстати уже адаптивная), и внешние отступы.
- Стиль самих пунктов, тут я прописал только внешние отступы, чтобы они не сливались.
- Третья тут сами ссылки, убрал подчеркивание, настроил величину текста, сам шрифт, и его цвет.
Вот так у вас должно выглядеть в самом файле style.css, вставляйте в любое место, но лучше в самый низ.
Теперь если все в порядке, то могу вас поздравить вы смогли сделать содержание в статьях и причем все своими руками. Ваши дальнейшие действия сводятся к тому, чтобы вставлять код вывода каждый раз когда будуте писать в статью. Жду ваших отзывов в комментариях.
