В этой статье мы расскажем вам об использовании плагина Better Anchor Links для работы с HTML-якорями. Но давайте для начала разберемся, что такое HTML-якорь. На сайтах с большим содержанием статей в самый конец помещают ссылку, при нажатии на которую вы переходите в начало статьи. Это своего рода лифт, поднимающий вас на требуемый этаж. Этажи в данном случае это строки.
Якорь можно настроить на любую строку, таким образом, при нажатии на ссылку пользователь переходит в определённое место статьи. Это облегчает жизнь пользователю, которому в противном случае придется долго прокручивать страницу, это улучшает поведенческие факторы.
Как сделать оглавление без плагина
Обычно, для создания оглавления, напротив строки, на которую должен будет перейти пользователь, задают ее id, которое в дальнейшем прописывают в коде ссылки в самом содержании. Выглядит это примерно так:
<a id=”title”></a> (добавление id)
<a href=”#title “>ссылка на якорь</a>
Однако такой способ занимает больше времени и требует от пользователя хоть какого-то понимания html кода. Подходит он в том случае, если сайт ваш маленький или оглавление используются редко.
Содержание для сайта можно реализовать и без работы с кодом, для этого нужен плагин Batter Anchor Links.
Содержание для сайта с помощью плагина Batter Anchor Links
Скачайте плагин и проведите его стандартную установку и активируйте его. Модуль позволяет автоматически добавлять якоря в заголовки записей. Определение заголовков осуществляется по тегам <h>, о которых речь шла тут.
Особенности и достоинства плагина:
- Якоря создаются автоматически в заголовках.
- Можно заменить стили CSS на пользовательские. Для этого потребуется знание CSS.
- Возможность указания конкретного заголовка для создания якоря.
- Возможность создания ссылки для возвращения к оглавлению.
Плагин прост и примитивен в работе. Его удобно использовать, если вы делаете якорь на одинаковые заголовки. Если же в каждой статье якоря располагаются на разных позициях, то такой плагин подходит меньше.
Содержание для сайта с плагином TinyMCE Advanced
Также советуем обратить внимание на плагин TinyMCE Advanced. В нем больше настроек и вы можете создавать якоря в произвольных позициях. Кроме этого этот плагин представляет собой продвинутый редактор текста.
После установки плагина в настройках добавьте кнопку «Anchor» в инструментарий редактора. Теперь в любом нужном месте, нажимая на эту кнопку, будет создаваться якорь. Id якоря лучше прописывать латинскими буквами.
После добавления якоря перед якорной строкой появится значок якоря. Это говорит о том, что элемент добавлен успешно. Теперь можно создать ссылку на якорь.
В целом плагин также прост и удобен в работе.
Довольно интересная информация.