Коротко: якорь в WordPress — это обычный HTML-атрибут id на заголовке или блоке. Ссылка вида #id перебрасывает читателя к нужному месту страницы. В блочном редакторе (Gutenberg) у каждого блока есть поле «HTML-якорь». Разберём все способы: от ручного id до оглавления и плавной прокрутки.
Что такое якорь на самом деле
Браузер ищет на странице элемент с id, совпадающим с частью ссылки после решётки. Например ссылка #faq прокручивает к элементу id="faq". Никакой магии: это чистый HTML, WordPress лишь даёт удобные поля.
Вкладки: 4 способа поставить якорь
- Выделите блок (обычно «Заголовок»).
- Откройте боковую панель настроек блока.
- В разделе «Дополнительно» найдите «HTML-якорь».
- Впишите короткий латиницей идентификатор, например
faq.
После публикации ссылка https://site.ru/statya/#faq будет вести к этому блоку.
<h2 id="faq">Вопросы и ответы</h2>
<a href="#faq">Перейти к вопросам</a>Универсально для любого редактора. Работает даже если тема не поддерживает блочные поля.
- «Внешний вид» → «Меню».
- Добавьте «Произвольную ссылку».
- В URL укажите
#faq(для текущей страницы) или полный адрес с якорем. - Подпишите пункт, например «FAQ».
Удобно, когда якоря нужны в шапке сайта как отдельные пункты меню.
Плагины оглавления (Table of Contents) сами собирают все заголовки H2/H3, присваивают им id и строят блок «Содержание» со ссылками. Плюс: якоря ставятся автоматически. Минус: лишний код и стили — проверяйте, что вёрстка не «поехала».
id должен быть уникальным на странице и не содержать пробелов и кириллицы. Правильно: kak-nastroit, неправильно: Как настроить. Регистр тоже учитывается: #FAQ и #faq — разные.Плавная прокрутка к якорю
По умолчанию переход мгновенный. Чтобы прокрутка была плавной, добавьте в CSS одну строку:
html { scroll-behavior: smooth; }Плюс полезно учесть «липкую» шапку, иначе заголовок спрячется под ней:
:target { scroll-margin-top: 90px; }scroll-margin-top задаёт отступ от верха окна при переходе. Подставьте высоту вашей шапки.
Практика: делаем оглавление вручную
- Присвойте каждому H2 свой id:
vvedenie,nastroika,faq. - Сверху статьи добавьте список ссылок с этими id.
- Добавьте
scroll-behavior: smoothиscroll-margin-top. - Проверьте: клик по пункту прокручивает к разделу, адрес меняется на
...#nastroika.
<nav class="toc">
<a href="#vvedenie">Введение</a>
<a href="#nastroika">Настройка</a>
<a href="#faq">FAQ</a>
</nav>Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Ссылка не ведёт к блоку | id не совпадает с частью после # | сверить написание символов |
| Переход есть, но мгновенный | нет scroll-behavior |
добавить smooth в CSS |
| Заголовок под шапкой | шапка «липкая» | scroll-margin-top |
| Работает только первый якорь | одинаковые id | сделать id уникальными |
Проверьте себя
scroll-margin-top?
Вопросы и ответы
Да. В Gutenberg выделите абзац и задайте ему HTML-якорь — так же, как заголовку.
Укажите полный адрес с якорем: https://site.ru/page/#faq. Браузер загрузит страницу и сразу прокрутит к нужному месту.
Нет, наоборот: они улучшают навигацию и дают поисковикам понять структуру. В выдаче могут появляться так называемые «ссылки на разделы».
Скорее всего новая тема сама генерирует id для заголовков и переписала ваши. Отключите авто-id в настройках темы или переименуйте якоря.
Итоги
- Якорь = атрибут
id, ссылка на него =#id. - В Gutenberg якорь задаётся в панели блока → «Дополнительно».
- Плавность —
scroll-behavior: smooth, отступ от шапки —scroll-margin-top. - id всегда уникальны, латиницей, без пробелов.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.