Как добавить анкорные ссылки в WordPress

Как добавить анкорные ссылки WordPress Настройка WordPress

Вы когда-нибудь сталкивались с ситуацией, когда находили что-то на сайте, но приходилось очень долго прокручивать страницу вниз, чтобы найти нужный заголовок? Например, Google предложил раздел, поскольку он содержит информацию по запросу, но нужный фрагмент находится в самом конце. Я уверен, что вам не нравится читать всю статью только ради нескольких абзацев.

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

Если являетесь владельцем сайта, вы постараетесь избегать длинных текстов без оглавления. Иначе рискуете потерять часть посетителей. Конечно, это не самая лучшая перспектива.

В этой статье я расскажу об анкорных ссылках WordPress и о том, почему их лучше использовать на сайте. Кроме того, я предоставлю подробное руководство по их установке на веб-проект ВордПресс.

Что такое анкорная ссылка WordPress

Когда мы имеем дело с очень большими веб-страницами, прокрутка которых занимает много времени, чтобы прочитать весь контент, возникает необходимость быстро перемещаться по документу и переходить в нужное место.

Для этого понадобится нечто вроде интерактивного оглавления. Убедитесь, что при нажатии на конкретный раздел экран браузера сразу же фокусируется на нужном месте.

Анкорные ссылки WordPress

Это можно реализовать с помощью языка гипертекстовой разметки HTML, без использования каких-либо дополнительных скриптов. Для этой цели необходимо создать так называемую анкорную ссылку. Это линк, который перенаправляет пользователя не на другую веб-страницу, а на конкретную часть той, на которой он находится в данный момент.

Теперь, если в разделе много текста, и он не помещается в окне браузера, то при нажатии на любую ссылку пользователь будет перенаправлен в конкретный раздел без необходимости прокручивать страницу вниз.

Плюсы и минусы анкорных ссылок WordPress

Плюсы
Улучшение пользовательского опыта при просмотре сайта. Это особенно удобная функция для ресурсов, содержащих объемные статьи, такие как длинные материалы, подробные руководства и инструкции. Прокручивать всю страницу вниз может быть сложно и утомительно, в то время как анкорные ссылки помогут читателю.
Когда вы добавляете анкорные ссылки в заголовки сайта, сможете легко делиться ими в социальных сетях или через портал поддержки, если он есть. Более того, другие посетители смогут поделиться ссылкой на конкретный заголовок с друзьями, родственниками или коллегами.
Якорные линки помогут организовать контент на сайте.
Что касается поисковой оптимизации, анкорные ссылки очень актуальны для больших статей и повышают общий рейтинг страницы в результатах поиска. Поисковые роботы высоко оценивают страницу с анкорами, в отличие от длинного текста без надлежащего форматирования. Анкорная ссылка является одним из поведенческих факторов, поэтому сайт займет более высокую позицию в результатах поиска.
Минусы
Большинство возможных недостатков повлияют на поведенческие факторы сайта.
При наличии хорошего оглавления посетитель потенциально может проводить на сайте меньше времени. Вместо того чтобы тратить время на поиск конкретного заголовка, он перейдет к нему напрямую. В результате это повлияет на статистику сайта.
Ваши доходы от рекламы, возможно, снизятся. Переходя к определенному разделу, посетитель просто пропустит рекламные блоки. Если сайт в значительной степени зависит от рекламы, проведите A/B-тестирование, чтобы определить, как правильно использовать анкорные ссылки и оглавление.
Сервер не рассматривает анкорную ссылку как отдельную. Идентификатор фрагмента никогда не отправляется на сервер. В некоторых случаях это усложнит настройку 301-перенаправления.

Добавление анкорных ссылок WordPress вручную

Использование классического редактора

Если все еще используете классический редактор на сайте WP, единственный способ использовать анкорные ссылки — это применять HTML-конструктор. Несмотря на то, что это немного сложнее, чем с визуальным редактором, есть некоторые преимущества:

  • HTML-код получается более чистым, так как визуальный редактор часто добавляет много ненужного кода.
  • Вы можете использовать любой сторонний конструктор кода, такой как Visual Studio Code, Atom или Sublime Text. Это гораздо удобнее, чем встроенный редактор ВордПресс. Затем просто скопируйте и вставьте код.
  • Кастомный HTML-код позволит реализовать индивидуальный дизайн.

Итак, как создать анкорную ссылку вручную с помощью HTML-кода? Это можно сделать, используя режим HTML-кода в классическом редакторе. Чтобы переключиться в режим «Текст», просто нажмите кнопку в правом верхнем углу.

Переключение в режим текст

Предположим, у нас есть заголовок второго уровня «<h2>Что такое анкорная ссылка?</h2>», и для быстрого перехода к нему нужно разместить анкор в начале статьи. Для этого необходимо присвоить данному заголовку идентификатор (id). Как он будет выглядеть?

<h2>Что такое анкорная ссылка?</h2>

Здесь header1 — это идентификатор анкора (невидимый для вас), «Что такое анкорная ссылка?» — это текст заголовка (видимая часть). Затем в начале текста или в любом другом подходящем месте создайте ссылку на этот анкор. Как это будет выглядеть:

<a href="#header1">Что такое анкорная ссылка?</a>

Анкорная ссылка в HTML коде

Теперь, когда нажмете на эту ссылку, то сразу перейдете к этому заголовку. Теоретически можете добавить неограниченное количество линков на анкоры.

Однако будьте разумны. В некоторых случаях гораздо лучше разделить материал на несколько страниц, чем публиковать один огромный длинный текст.

В то же время, если предпочитаете визуальный редактор, можете сделать это в несколько кликов, используя Gutenberg. Давайте посмотрим, как это сделать.

Использование редактора Gutenberg

Это текстовый редактор по умолчанию в WP, начиная с версии 5. У него необычный интерфейс. Многие пользователи пока не могут комфортно им пользоваться. В любом случае, он отличный и предоставляет мощные возможности форматирования. Теперь давайте посмотрим, как можно добавить анкорную ссылку с помощью редактора Гутенберг.

Для начала откройте Gutenberg и выберите заголовок, который хотите использовать в качестве анкорной ссылки. Нажмите кнопку «Дополнительно» на правой панели и введите название этого раздела в поле «HTML-анкор». Это и будет целевой анкор.

Введите название анкора

Затем вернитесь в редактор Gutenberg. Создайте оглавление или краткое содержание разделов, на которые хотите добавить ссылки.

Создание содержания разделов

Затем выделяйте фрагменты один за другим. Нажимайте кнопку «Ссылка» в меню редактора и вставляйте имя анкора с символом # в начале. Например, #header. Не забудьте применить изменения.

Примените изменения к анкорам

А как насчет ссылки ВордПресс на анкор на другой странице? Это не проблема. Вам также нужно выделить фрагменты текста и добавить линк. Но вместо того, чтобы вставлять только ID анкора, добавьте полный адрес. Например, https://website.com#anchor.

Лучшие плагины добавления анкорных ссылок WordPress в 2026 году

Если не хотите работать с кодами и ручными настройками, есть выход. Прелесть WP в том, что у него так много плагинов (практически) на любой случай. Поэтому вы можете быстро настроить анкорную ссылку и оглавление. Давайте посмотрим на 4 самых популярных расширения.

WPBar


WPBar для меню на сайте

Расширение WPBar позволяет на сайте создавать удобные меню, как в мобильных приложениях. Это «бары», которые крепятся внизу или сверху экрана пользователя и могут включать в себя различные функциональные компоненты, в том числе и анкорные ссылки.

С WPBar в пару кликов легко добавляется простая якорная ссылка, которая позволит перейти к нужному элементу страницы. Также он позволяет задать более сложный элемент, который автоматически внутри страницы сможет формировать оглавление по указанным тегам заголовков. Рассмотрю оба варианта.

После установки WPBar вы заметите одноименный пункт меню в админке.

Добавление панели в WPBar

Здесь начните добавлять новую панель, чтобы определить для нее список элементов. Анкорные ссылки добавляются одним из следующих компонентов:

  • Ссылка. В элементе можно указать ссылку на любую страницу внутри сайта, на внешний сайт, либо через якорь (#) задать анкорный переход внутри страницы.

Простая якорная ссылка в меню

Важно:

Задавая таким образом ссылку, убедитесь, что она будет корректно работать на всех страницах, где выводится плавающее меню. При необходимости, создавайте в WPBar отдельные панели для разных страниц, что позволяет включать в них разные анкоры, либо вовсе их исключать.

  • Содержание. Более продвинутый способ, чем просто анкорный линк. Это автоматическое создание оглавления для конкретной страницы «на лету». В плагине нужно указать, при каком количестве заголовков выполнять действие, а также сами теги заголовков, которые войдут в содержание.

Настройки оглавления в WPBar

В отличие от элемента «Ссылка», пункт содержания в меню показывается только тогда, когда оно реально может быть создано. Если условия не выполнены, то данный элемент в панели просто будет отсутствовать.

WPBar имеет широкие опции кастомизации внешнего вида. В нем доступны несколько пресетов с популярными стилями дизайнов, а также есть возможность детально настроить внешний вид под свой сайт. Ниже пара примеров, как может выглядеть меню с открытым содержанием прямо на сайте.

Варианты меню на WPBar

Особенности:
Сам плагин изначально создавался под задачу вывода на сайте удобного мобильного меню. Включение содержания и добавление якорных ссылок — лишь одна из опций.
В отличие от модулей, которые встраивают содержания непосредственно в страницы, оглавление через WPBar постоянно следует за пользователя. Это повышает частоту взаимодействия с ним, улучшая поведенческие факторы.
Прокрутка к нужным элементам выполняется плавно.
Наиболее широкая настройка дизайна среди плагинов, представленных в подборке.
Полностью на русском языке, обладает понятным интерфейсом и документацией.
В модуле имеется виртуальный тур, который позволяет за пару минут ознакомиться с его основными опциями.

Рейтинг: 5 / 5.

Цена: 2900 рублей за 1 домен. Есть функция расширения на 3 домена или на неограниченное число сайтов.

WPBar со скидкой

TinyMCE Advanced

TinyMCE Advanced эффективный

TinyMCE Advanced — один из самых популярных плагинов WordPress для форматирования текста и создания анкорных ссылок. Он включает расширенные функции и множество дополнительных возможностей для TinyMCE, визуального редактора WP.

Плагин расширит стандартные возможности, доступные в конструкторе ВордПресс. Вы сможете добавлять, удалять или упорядочивать кнопки на панели инструментов. Доступно до 4 рядов кнопок.

Среди новых возможностей есть изменение семейства и размера шрифта, цвета текста и фона, добавление и редактирование таблиц.

Чтобы добавить анкор с помощью TinyMCE Advanced, для начала выберите текст или заголовок для ссылки. Нажмите кнопку «Вставить» на панели инструментов визуального редактора и создайте ID. Если сайт использует Gutenberg, добавьте «Классический абзац», чтобы иметь возможность применять TinyMCE Advanced.

TinyMCE функционирование

Затем в верхней части страницы или в любом удобном разделе создайте оглавление или краткое содержание разделов, на которые хотите добавить ссылки.

Выделяйте их по очереди, нажимайте кнопку «Ссылка» в меню редактора и вставляйте имя анкора, начинающееся с символа #. Например, #header. Не забудьте применить изменения.

Вставляйте название анкоров

Сам плагин состоит из 15 модулей, которые, в зависимости от выбранных кнопок, автоматически включаются или блокируются. Этот инструмент умеет добавлять некоторые параметры, сохранять теги абзацев в редакторе и импортировать CSS-классы в файл style.css.

Особенности:
С помощью плагина вы можете создавать и редактировать таблицы прямо в конструкторе.
Возможность вставлять различные типы списков.
Функция поиска и замены в редакторе.
Кастомная установка шрифтов, а также их размеров.

Рейтинг: 4,5 / 5.

Цена: Бесплатно.

Easy Table of Contents

Easy Table of Contents замечательный

Easy Table of Contents — удобный и простой в использовании плагин, позволяющий вставлять оглавление в сообщения, страницы и пользовательские типы сообщений в автоматическом режиме. Я настоятельно рекомендую его.

После установки расширение доступно для конфигурации. В настройках вы можете:

  • Автоматически создавать оглавления для публикаций, страниц и пользовательских типов постов, анализируя их содержимое на наличие заголовков.
  • Включить страницы и/или сообщения. Пользовательские типы постов поддерживаются, если их содержимое отображается с помощью шаблона тега the_content().
  • Автоматически добавлять содержание на страницы сайта, если конфигурировать это соответствующим образом.
Особенности:
Предоставляет множество удобных и понятных параметров, определяющих, когда и где вставлять оглавление.
Существует множество опций для кастомизации дизайна вставляемого содержания: различные темы, изменение размера шрифта и расположение оглавления. Можно создавать собственные темы, выбирая оттенки по своему усмотрению.
Несколько форматов маркеров списка: без маркеров, десятичные, римские и другие.
В настройках можно выбрать, отображать ли оглавление в виде иерархической древовидной структуры.
Можете отключить содержание для выбранных заголовков.
Плагин поддерживает плавную прокрутку.
Выборочно включайте или отключайте оглавление в сообщениях по почте.
Можете фильтровать типы заголовков (h1-h6), которые будут отображаться в содержании.

Таким образом, всего за несколько кликов у вас появятся ссылки там, где и как вы хотите. Кроме того, возможно кастомизировать дополнительные параметры, такие как метка заголовка, положение таблицы, тип переключения и многое другое.

Рейтинг: 4,5/5.

Цена: Бесплатно.

CM Table of Contents

CM Table of Contents адаптивный

CM Table of Contents — этот плагин WP позволяет создавать оглавление, которое можно добавить к любой странице или записи на сайте WordPress.

Расширение дает возможность разработать многоуровневое кастомное содержание, но только в платной версии. В бесплатном пакете персонализации ограничены и упрощены до минимума.

Этот плагин позволяет создавать оглавление автоматически.

В настройках вы можете:

  • Включить оглавление только в статьи и страницы, исключив архивы и главную сайта.
  • Изменить заголовок модуля содержания.
  • Установить теги, которые будут отображаться в оглавлении: h1-h6, а также задать их CSS-классы и уникальные ID.
  • Указать размер заголовков в содержании.

Рейтинг: 3,5/5.

Цена: Очень ограниченная бесплатная версия. $29 за 2 сайта, $59 за 5 проектов.

Заключение

Надеюсь, эта статья помогла вам понять, как добавить анкорные ссылки в ВордПресс. Существует несколько способов для этого. Можете попробовать как ручной метод, так и установить простые в использовании расширения. Мы также рассмотрели лучшие плагины добавления анкорных ссылок WordPress в 2026 году. Они помогут вам в данном процессе.

Александр

Делюсь с читателями многолетним опытом по созданию и развитию сайтов на WordPress. Работаю с CMS с 2007 года. Внимательно слежу за развитием движка, а также трендами в разработке и продвижении сайтов.

Оцените автора
Ускорение и оптимизация WP
Добавить комментарий

×
Пора обновить WordPress!

Премиум тема Bono с промокодом 15%

Взял — заплатил меньше!