Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links
Опубликовано: 22.04.2018
Для одной достаточно большой статьи блога про разные дизайнерские курсы фотошопа мне потребовалось создать в начале текста что-то вроде оглавления. Я использовал при этом классический механизм html якорей (anchor), которые размещаются в определенных местах текста, а потом на них легко можно ссылаться. В данной заметке я расскажу о том как создать html якорь, что он из себя представляет и как можно автоматизировать процесс с помощью модуля Better Anchor Links. Итак, поехали.
В чистом html для создания якоря в определенной части страницы вам нужно добавить в текст пустую ссылку с id, например:
<a id="first"></a> Обычный текст на странице. |
<a id="first"></a> Обычный текст на странице.
Затем в другом месте документа вы просто создаете линк с этим якорем:
урок 12: якорь в html
<a href="#first">ссылка на якорь</a> |
<a href="#first">ссылка на якорь</a>
При клике пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылки Читать далее добавляется якорь #more — при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.
Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант — для него потребуется плагин TinyMCE Advanced . В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.
После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.