Создем 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 позволяет выводить оглавление не только в статье, а и в сайдбаре — это можно использовать интересным образом.
комментария 2 к статье “Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links”
Блог Wordpress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!
Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:
- Media Cleaner — для удаления неиспользуемых изображений WordPress
- VpsUP.ru — рейтинг VPS/VDS хостеров и помощь с выбором сервера
- OptiPic – оптимизация изображений для сайтов на WordPress и не только
- Как убрать Google Maps API на сайте с WordPress?
- Finteza Analytics — сервис для комплексного анализа трафика + бесплатный плагин
- WPShop — 4 функциональных премиум темы на любой вкус + плагин Clearfy Pro
- Duplicator — лучший плагин переноса WordPress, алгоритм клонирования сайта
- WooCommerce (30)
- Безопасность (10)
- Видео (6)
- Виджеты (24)
- Возможности (124)
- Вопрос-ответ (2)
- Начинающим (44)
- Новости (42)
- Оптимизация (20)
- Плагины (216)
- Сервисы (73)
- Хаки и секреты (79)
- Шаблоны (42)
- Записи и посты wordpress, оформление записи
(5,89 из 7, голосов - 46)
- Умный копирайт в footer.php для wordpress
(5,79 из 7, голосов - 29)
- Рубрики и категории wordpress, функция wp_list_categories
(6,00 из 7, голосов - 19)
- Плагин TinyMCE Advanced – wordpress текстовый редактор
(6,24 из 7, голосов - 17)
- Ссылка читать далее в WordPress (тег read more)
(5,00 из 7, голосов - 17)
- 17 полезных приемов и хаков для WordPress
(5,57 из 7, голосов - 14)
- Вывод текста в блоге только на главной
(6,82 из 7, голосов - 11)

- Дизайн Мания - о веб-дизайне и не только.
- Tod's Blog - все про заработок онлайн.
- Вебдванольные заметки - обзоры веб-сервисов.
- WordpressPlugins.ru
- Majordomo - выгодные цены на виртуальный хостинг
- Игра в казино Вулкан — сплошное удовольствие (обзор + турниры)
- Работаем с удаленным сотрудником
- Заголовки, как способ привлечения внимания
- Играем в Автоматы 777 — разновидности слотов и приятные бонусы
- Замена раковины в ванной комнате или на кухне
- Как быстро найти работу: 9 советов соискателю
- Продвижение в Инстаграм: как подготовить свой аккаунт к массфолловингу
спасибо, помогли!
спасибо, просто и понятно