Ноя

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

Для одной достаточно большой статьи блога про разные дизайнерские курсы фотошопа мне потребовалось создать в начале текста что-то вроде оглавления. Я использовал при этом классический механизм 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 в панель редактора.

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

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

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

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

Better Anchor Links

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

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

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

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

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

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