Ноя
24
5

Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links

html якорьДля одной достаточно большой статьи блога про разные дизайнерские курсы фотошопа мне потребовалось создать в начале текста что-то вроде оглавления. Я использовал при этом классический механизм html якорей (anchor), которые размещаются в определенных местах текста, а потом на них легко можно ссылаться. В данной заметке я расскажу о том как создать html якорь, что он из себя представляет и как можно автоматизировать процесс с помощью модуля Better Anchor Links. Итак, поехали.

В чистом html для создания якоря в определенной части страницы вам нужно добавить в текст пустую ссылку с id, например:

<a id="first"></a> Обычный текст на странице.

Затем в другом месте документа вы просто создаете линк с этим якорем:

<a href="#first">ссылка на якорь</a>

При клике пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылки Читать далее добавляется якорь #more — при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.

Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант — для него потребуется плагин TinyMCE Advanced. В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.

Якорь в TinyMCE Advanced

После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.

Создем html якорь в WordPress

После создания увидите соответствующую картинку перед текстом — значит, html якорь создан. Дальше вам нужно создать ссылку на якорь (похоже на работу с картинками но проще).

Создание html якоря в вордпресс

В текстовом редакторе TinyMCE Advanced при добавлении линка вы увидите всплывающее окно, где в пункте Anchors в выпадающем списке можете выбрать один из якорей. После этого его название (#yakor) будет поставлено в поле URL.

Что там и как работает в базовом редакторе, к сожалению, уже не помню — ориентируйтесь на теорию относительно html якорей, что я изложил в начале статьи.  А еще лучше поставьте себе TinyMCE Advanced:)

Better Anchor Links

Плагин Better Anchor Links

Напоследок хотелось бы рассказать еще об одном плагине — Better Anchor Links. Основная его задача — это создание якорей из заголовков страницы и автоматическое их расположение в начале статьи или других местах. По сути, это инструмент для создания оглавления, похожий на тот, что есть в word. Вот как это приблизительно выглядит на сайте.

Настройки плагина Better Anchor Links

У Better Anchor Links есть несколько полезных настроек. Тут можно найти заголовок для оглавления,  автоопределение оглавления по H тегам, подключение своих CSS стилей и многое другое.

Якори в вордпресс - плагин Better Anchor Links

Список основных функций Better Anchor Links:

  • Автоматическое создание якорей из H тегов в тексте статьи.
  • Возможно отключить базовые CSS стили плагина для задания своих.
  • Имеется специальный виджет.
  • Можно указать свой заголовок для оглавления.
  • Можно выбрать список ссылок с цифрами или без.
  • Поддержка локализации qTranslate/mqTranslate.
  • Если требуется, есть ссылка возвращения к оглавлению.

В официальном репозитории вордпресс на странице FAQ описания плагина имеется парочка советов (кодов) как выводить оглавление не в тексте статьи. То есть вы, например, можете разместить список ссылок на якоря в сайдбаре (с помощью виджета или PHP).

Нужно ли использовать Better Anchor Links? Это вопрос из области «излишней функциональности» — если у вас из 100 записей на сайте только 1-2 требуют оглавления, то, конечно, все это проще сделать вручную. Если же оглавления для постов блога/сайта создаются часто и весьма органично смотрятся в дизайне блога, то модуль пригодится. К тому же Better Anchor Links позволяет выводить оглавление не только в статье, а и в сайдбаре — это можно использовать интересным образом.

рейтинг Оцените статью:
Ужасная статьяНичего интересногоТак себеНормальноХорошоКлассный постВ закладки!
(голосов - 12, средний балл: 5,67 из 7)
Загрузка...

категория Категории: Возможности; Плагины;
теги Теги: , , , , , , .

комментариев 5 к статье “Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links”

  • Gaucho   27.06.2018

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

  • Серж   22.07.2018

    спасибо, просто и понятно

  • Виктор   25.02.2019

    Спасибо, помогло. Статья была очень большой-решил облегчить задачу своему читателю.

  • Максим   28.06.2020

    У меня не получается поставить ссылку на якорь в TinyMCE Advanced. Я поставил якорь. Как поставить ссылку на него? Я нажимаю кнопку «ссылка», но в открывающемся окне нет поля «Якорь», предлагается ввести только url.

  • Tod   28.06.2020

    Максим, вообще странно, конечно, в TinyMCE Advanced должно все отображаться — пробовал не раз так делать. Как вариант можно посмотреть в настройках модуля — там можно подключить другой механизм добавления ссылок от самого модуля. Возможно, у меня включена эта опция и показывается такое окно ссылки (как в статье). Либо всегда можно указать просто ссылку на якорь — #вашякорь и все.

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


Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

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

Поиск:
Последние посты
Лучшее в категории

Облако тегов
Скажи свое мнение!

В чем основные плюсы Wordpress?

Посмотреть результаты

Загрузка ... Загрузка ...
Друзья проекта
Последние новости