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

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

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

якорь 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

плагин якорь wordpress

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

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

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

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

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

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

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

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

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

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

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

wordpress якорь на странице

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

id якоря wordpress

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

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

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

 

Читайте также:

4
Оставить комментарий

avatar
  Хочу подписаться  
последний первый проголосовавшие
Уведомление на
goszdravnadzor.ru
Гость
goszdravnadzor.ru

спасибо! помогло

Виталий
Гость
Виталий

Отлично объяснили, спасибо!

Анонимно
Гость
Анонимно

321

Анонимно
Гость
Анонимно

123

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: