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

Опубликовано: 22.04.2018

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

Плавная прокрутка. Якоря

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

IRC (Internet Relay Chat)
rss