Якорь wordpress-3 простых способа его установки на странице

Якорь wordpress позволяет разбить статью на логические разделы в виде ссылок (анкоров). Создать краткое содержание всей страницы, помогает читателям быстро переместиться в тот или иной раздел, улучшая при этом юзабилити, удобство пользования, профессионализм и прочие моменты.

Примеры таких якорей – это ссылки в конце страницы “на верх” или “вернуться назад”, содержание электронной книги, поста. Такие якоря применяются широко на лендингах для навигации и описания товара, услуге.

Как сделать якорь wordpress и какие для этого есть инструменты.

На практике, такие якоря целесообразно применять если статья достаточно большая, чтобы в самом начале можно было ознакомиться с кратким содержанием всех разделов и при необходимости сразу попасть в нужный.

Есть 3 наиболее простых и доступных варианта для решения данной задачи.

Поставить якорь в wordpress с помощью html-кода.
Установить плагин Better Anchor Links
Установить редактор TinyMCE Advanced

Конечно есть и другие возможности (php, framework, javascript), но это можно оставить любителям тестировать и программировать.

Проверить работу таких якорей можно покликав по каждой ссылке в начале поста.
А теперь по порядку.

Как поставить якорь в wordpress с помощью html-кода.

Делается это в режиме html-кода любого редактора которым вы пользуетесь в своем движке wordpress. Допустим что у меня есть заголовок третьего уровня <h3>Заголовок третьего уровня</h3> и для быстрого доступа к этому заголовку, мне необходимо поставить якорь вначале статьи.

Для этого, к данному заголовку нужно добавить пустую ссылку-якорь и придумать для нее идентификатор (id).
Например <a id=«integer»></a>, и этот id необходимо подставить в начале заголовка <h3><a id=«integer»></a>Заголовок третьего уровня</h3>

Следующий шаг – это создать ссылку на это самый id. В моем примере, id=«integer»
<a href=«#integer»>ссылка на якорь</a>. При нажатии на эту ссылку, будет происходить автоматическая прокрутка до якоря.

Якорь wordpress можно поставить в любом месте страницы и навигацию по этим якорям можно сделать с прокруткой в любое место статьи.

Как поставить якорь в wordpress с помощью плагина Better Anchor Links

Плюсы и минусы этого варианта.

+ автоматическое создание якоря в тегах h1-h6 и содержания в начале страницы
+ базовые и собственные css-стили якорей
+ собственный виджет
+ создание собственного заголовка
+ «вернуться к содержанию» рядом с заголовком (ссылка при необходимости).

На практике все выглядит достаточно просто. Как только в тексте появляется тег любого из заголовков h1-h6, плагин тут же автоматом подставляет якорь.

– давно не обновляется
– узконаправленность плагина (только для якорных ссылок)

Скачать плагин можно на сайте wordpress Better Anchor Links

Якорь wordpress с помощью визуального редактора TinyMCE Advanced

И третий, на мой взгляд, самый практичный – это установить редактор TinyMCE Advanced, который способен решить множество задач не только с контентом и его форматированием, но и с якорями в том числе.

Вопрос установки пропустим и сразу взглянем на внешний вид настроек данного редактора.

Главные особенности редактора

Во-первых, сам редактор с более широким функционалом (15 дополнительных кнопок) чем редактор установленный по умолчанию в wordpress.
Во-вторых, настройка функционала происходит путем перетаскивания нужных кнопок в рабочую поверхность.
В-третьих, всегда актуальная версия

Что касается непосредственно установки якорных ссылок, то для начала необходимо добавить в рабочую панель редактора специальную кнопку.

Якорь wordpress создается путем перетаскивания кнопки-якоря в нужное место на странице, а затем просто делается ссылка на этот якорь с указанием id. Название id можно придумывать какое угодно.

Ссылка на этот якорь делается как обычно. Выделяем нужный нам текст и в качестве ссылки подставляем решетку с названием придуманного id.

Важно чтобы для каждого якоря должен быть разный id.

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