Как создать оглавление с помощью якорей

Здравствуйте друзья! Научиться создавать оглавление статьи было моим давним желанием, но всякий раз я оставлял эту затею, начитавшись заумной теории о том, что такое якоря, зачем они нужны и как они должны выглядеть в html.

Да зачем мне, новичку, нужна твоя теория? Ты мне пальцем покажи, что куда ставить и что где нажимать и писать! А уж я потом, когда наступит время, сам как-нибудь разберусь в теории, если мне это нужно будет. Так каждый раз обращался я к невидимым авторам длиннющих трактатов о том, как сделать оглавление.

И только после того, как я поставил какой-то плагин, сейчас не помню названия, я их много перепробовал, плагин создал оглавление, заглянул в текстовый редактор и, наконец понял, как работают якоря (анкоры) и какие действия нужно произвести, если создавать оглавление “вручную”.

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

Прежде всего нужно добавить кнопку “Якорь” в панель инструментов визуального редактора WordPress (WP). Как оказалось, в новых версиях WP вставить (активировать) кнопку “Anchor” (Якорь) с помощью функций темы – не представляется возможным. Поэтому, воспользуемся плагином TinyMCE Advanced или, аналогичным ему.

Перетащите значок “Якорь” на одну из панелей инструментов визуального редактора (стрелка 1) и сохраните изменения (стрелка 2). Кстати, если активировано меню редактора (стрелка 3), можно воспользоваться им, нажав кнопку: Вставить и в открывшемся списке выбрать: Якорь. Ну, это на будущее.

 

Установка якорей

Для примера я взял черновик статьи из другого проекта, в ней много заголовков и легче будет показать что и как делать.

Установите мигающий курсор перед первым заголовком (стрелка 1).

 

Затем, кликните по значку: Якорь (Anchor) (стрелка 1).

 

В открывшемся окошке присвойте имя якорю. В моём случае, я использовал первые буквы заголовка (стрелка 1) и подставил единицу, чтобы обозначить, что это первый якорь. Лучше использовать латинские буквы. В принципе, цифры ставить не обязательно, это я просто для себя так сделал, чтобы не путаться потом. После присвоения имени, нажмите кнопку: ОК (стрелка 2).

 

Как видно из снимка, якорь установлен.

 

Таким же образом устанавливаем якоря перед всеми заголовками, которые должны фигурировать в оглавлении/содержании статьи. Второму заголовку я присвоил имя: vnr, а третьему: pzd.

 

Создание списка оглавления

Осталось дело за малым – создать список, т.е., само Оглавление. Сверху статьи пишем заголовок списка: Оглавление: или Содержание: или и то и другое через косой слэш (стрелка 1). Ниже, пишем заголовки параграфов (подзаголовки статьи)(стрелка 2), используя кнопки: Маркированный список или Нумерованный список (стрелка 3).

 

Примерно вот так будет выглядеть список в редакторе:

 

Выделите первый заголовок (стрелка 1) и нажмите кнопку: Вставить/изменить ссылку (стрелка 2).

 

В открывшемся окошке, в строке: URL впишите имя первого якоря, обязательно поставив перед ним значок: решётка (стрелка 1), после чего, нажмите: Добавить ссылку (стрелка 2).

 

Такие же действия примените ко второму и последующим заголовкам списка.

 

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

 

А вот теперь, давайте зайдём в текстовый редактор и посмотрим, за счёт чего работает содержание статьи. Там, где мы устанавливали курсор и кликали по значку”Якорь”, создались ссылочные идентификаторы (идентификационные имена) типа: <a id=»imya»></a> Следует не забывать, что ID-имя пишется только на латинице.

 

Получается, что если использовать этот шаблон “<a id=»imya»></a>”, подставляя свои имена, а затем создать ссылки на эти имена (идентификаторы), то значок якоря и не нужен вовсе.

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

Более того, можно присвоить ID – имя заголовку в одной из статей, а ссылку на него создать где-то в средине текста другой статьи. Но, только в пределах одного сайта. Так что, умение пользоваться анкорами (якорями), умение создавать их вручную, считаю очень полезным.

Что делать если уже написано много статей

Но, всё о чём написано выше — это если требуется вставить оглавление в одной статье, а если их десятки, сотни…? Тут уже и значок “Якорь” будет отнимать лишнее время. А значит, нужен плагин, который бы автоматически создавал оглавление статьи и в новых, и в уже написанных статьях. Ну, или почти автоматически.

Один из таких плагинов — Table of Contents Plus. Я его русифицировал, поэтому, у кого плагин ещё не установлен будет предложено скачать русифицированную версию, а у кого установлен, будут предложены файлы русификации. Но это будет в следующей статье.

 

Удачи Вам!

© mkovenkov

 

Поделиться ссылкой: