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

Поделиться с друзьями
Эдуард Бунаков

Здравствуйте! Я специалист cms-систем, автор серии обучающих курсов по созданию сайтов на cms-Joomla, WordPress, интернет-магазинов на Opencart.

Оцените автора
( Пока оценок нет )
Добавить комментарий

Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.

  1. Наталья

    Спасибо огромное автору этого руководства. Я не очень-то разбираюсь во всём этом, поэтому для меня это была очень ценная информация. Долго пыталась найти, как ставить якорь. Много разных авторов и объяснений, но всегда на языке программирования или очень сумбурно. А здесь автор очень просто и доступно объяснил всё. СПАСИБО! Спасибо за грамотную речь и уважение к тем, кто является «чайниками». НАС МНОГО! :))

    Ответить
  2. Эдуард Бунаков автор

    Попробуйте! И посмотрите как будет выглядеть в коде. Правда сейчас уже данный вопрос решает плагин, который выводит содержание записи автоматически, но можно и так, если Вы не сторонник лишних плагинов.

    Ответить
  3. Сурен

    ( h3 id=»jakor») заголовок (/h3) где(=< можно так без лишнего тега <а

    Ответить
  4. Сурен

    А можно ставить прямо в заголовке заголовок

    Ответить
  5. Алексей

    я написал код — но в комментарии он не отобразился ((
    Поэтому напишу словами.
    Для чего нужно добавлять новый элемент — якорную ссылку к элементу, если можно присвоить id непосредственно заголовку? Это тоже работает.

    Ответить
    1. Эдуард Бунаков автор

      Можно это сделать и в автоматическом режиме, с помощью плагина. Расскажу чуть позже

      Ответить
  6. Алексей

    зачем вставлять , если можно присвоить id самому заголовку? Я проверял- это раотает:
    Заголовок

    Ответить
  7. Кирилл

    Большое спасибо за информацию. Не знал как переходить по якорной ссылке с одной страницы на другую.

    Ответить
  8. Эдуард

    В новом редакторе гутенберг уже есть эта возможность.

    Ответить
  9. Аноним

    Возможно речь идёт о версии php.

    Ответить
  10. Александр

    Странно, пишет что для Вашей версии не поддерживается и установка невозможна (это про TinyMCE Advanced), хотя пользуюсь WP 5.3.4 :(

    Ответить
  11. Валерий

    Спасибо) в очередной раз добавляю якорь по вашему руководству.! всё работает!

    Ответить
  12. Игорь

    Спасибо за инструкцию по установки якоря с помощью TinyMCE Advanced. Данный плагин использую уже давно, и даже знал что в нём присутствует функция якоря, но так как не мог разобраться как устанавливать якорь, обходился без якорей. Хоте якоря в некоторых статьях моего сайта были очень необходимы! Ещё раз огромное спасибо!

    Ответить
  13. опро

    прорлрл

    Ответить
  14. goszdravnadzor.ru

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

    Ответить
  15. Виталий

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

    Ответить