Как создать якорные ссылки: сегодня мы будем погружаться в то, как создавать якорные ссылки в WordPress и зачем их использовать. Якорные ссылки могут помочь улучшить пользовательский интерфейс, сделать навигацию по контенту длинной формы намного проще и даже дать вам небольшое преимущество в Google.
Что такое якорные ссылки?
Якорные ссылки, также называемые ссылками меню перехода или оглавлением. Ссылки которые мгновенно переносят вас на определенную часть страницы (или внешнюю страницу). Назначение привязки обычно задается с помощью элемента A (называя его с атрибутом name), или любым другим элементом (называя с атрибутом ID).
Пример якорной ссылки
Если вы все еще немного путаетесь в том, что такое якорные ссылки, не волнуйтесь. Ниже на изображении приведен пример. На каждом названии из списка используются якорные ссылки. Когда вы нажимаете на них, Вас приводит непосредственно к заголовку H2, который содержит это содержимое. Вы можете проверить как это работает чуть выше в списке оглавления. Якорные ссылки могут быть использованы для чего угодно, например для текста, изображений и заголовков H1-H6.
Якорные ссылки
На многих сайтах якорные ссылки просто используются для создания оглавления в начале длинных постов или в качестве меню на одностраничных сайтах. Если вы знаете немного CSS, вы можете проявить творческий подход и сделать их более стильными.
Плюсы и минусы якорных ссылок
То, что кто-то делает, не всегда означает, что ты должен это делать. Вот несколько плюсов и минусов, которые следует учитывать при использовании якорных ссылок на вашем WordPress сайте.
Плюсы
- Одним из самых больших преимуществ якорных ссылок является создание удобного просмотра контента вашего сайта. Особенно когда речь заходит о длинных статьях. Использование якорных ссылок позволяет пользователю мгновенно перейти к интересующему его разделу. Пусть ваши пользователи быстрее найдут то, что им нужно.
- Использование якорных ссылок в заголовках позволяет совместно использовать прямые ссылки на различные разделы статьи. Это потрясающе для социальных сетей.
- Когда речь заходит о страницах результатов поиска (SERPs), результаты всегда могут отличаться в зависимости от того, что отображается. По существу якорные ссылки дают вам еще одну строку текста для вашего органического списка. Ссылки могут помочь увеличить CTR, поскольку пользователь может увидеть что-то, связанное с его запросом, что вы не передали в мета-описании или заголовке.
- Якорные ссылки могут также использоваться для других вещей, таких как ссылка “вернуться наверх”.
Минусы
Хотя мы считаем, что плюсы определенно перевешивают минусы, вот несколько минусов:
- Якорные ссылки или оглавление могут уменьшить среднее время пребывания на сайте на одного посетителя. Почему? Потому что они переходят прямо к контенту, который они хотят, а не читают всю вашу статью. Однако, если вы оставите своего посетителя счастливым, это приведет к тому, что они подпишутся на ваш информационный сайт или просмотрят больше контента. Так что это можно рассматривать как минус или плюс.
- Якорные ссылки могут повлиять на ваш доход от рекламы. Посетители, переходящие прямо в определенный раздел, могут уменьшить количество показов и кликов.
- Если вы меняете домены или вам нужно добавить 301 перенаправление, важно отметить, что идентификатор фрагмента (#) никогда не отправляется на сервер.
Переход якороных ссылок
По умолчанию якорные ссылки будут внезапно переходить к идентификатору ниже по странице. Для некоторых это будет неприятно. Вы можете сделать плавный переход прокрутки. Вы можете использовать бесплатный плагин, такой как прокрутка страницы до id или добавить некоторые стили CSS на свой сайт, например scroll-behavior: smooth;.
В WordPress есть несколько различных способов добавления якорных ссылок.
Как вручную создать якорные ссылки в WordPress
Первый способ создать якорные ссылки в WordPress — сделать это вручную с помощью HTML в каждом из ваших сообщений. Давайте создадим один, чтобы вы могли увидеть, как они работают.
Шаг 1
Создайте текст для своей ссылки и добавьте на него гиперссылку, как обычно для любой другой ссылки.
После добавления ссылки мы можем посмотреть как изменился наш блок в режиме просмотра кода html, выделенной области присвоилась ссылка.
Шаг 2
В первом шаге мы присвоили тексту сослаться на ссылку с символом # это и есть наш якорь, что после # — имя якоря.
Затем вам нужно добавить идентификатор в заголовок, к которому вы хотите перейти по якорной ссылке. Для этого вам нужно переключиться на просмотр текста (HTML) в редакторе WordPress.
Имя привязки и атрибут идентификатора должны быть точно такими же, чтобы ссылка работала. Ниже приведен пример, именно атрибут id=1 и является нашим идентификатором.
<h2 <a id="1">Как вручную создать якорные ссылки в WordPress</a></h2>
Создание якорных ссылок в WordPress с помощью плагина
Не хотите возиться с HTML-кодом каждый раз? Не беспокойтесь, есть бесплатные плагины WordPress, которые вы можете использовать, для добавления якорных ссылок и даже оглавления к каждому посту.
Добавить якорную ссылку с помощью плагина
Один из самых простых способов добавить якорную ссылку — это бесплатный плагин TinyMCE Advanced. Этот плагин в основном добавляет дополнительную функциональность в редактор с помощью быстрых кнопок быстрого доступа.
Шаг 1
После установки и активации плагина перейдите в свой пост и создайте гиперссылку на свой якорный текст как описывалось выше.
Шаг 2
Выделите заголовок, к которому вы хотите добавить идентификатор. Затем нажмите на кнопку «Вставить “в верхней части и выберите» якорь.»Эта кнопка отображается в редакторе из-за расширенного плагина TinyMCE.
Шаг 3
Введите имя якоря, которое вы дали ему на первом шаге, и нажмите кнопку » OK.» Этот плагин экономит ваше время, т.к. вам не придется покидать вид визуального редактора.
Добавить оглавление с помощью плагина
Возможно, вы хотите еще больше ускорить этот процесс. Если вы пишете много подробного контента и всегда хотите включить оглавление, то вы можете воспользоваться плагином оглавления.
Одним из лучших бесплатных плагинов является Easy Table of Contents. Этот плагин автоматически генерирует якорные ссылки для ваших заголовков и позволяет вставить оглавление в любом месте вашего поста с помощью простого шорт-кода.
Шаг 1
После того, как вы установили и активировали плагин, есть несколько настроек, которые вы, вероятно, захотите изменить. Их можно найти в разделе Настройки → Оглавление.
- Опция «включить поддержку» позволяет выбрать типы записей, для которых вы хотите использовать оглавление.
- Затем вы можете выбрать, хотите ли вы, чтобы оглавление вставлялось автоматически или вы хотите вставить его вручную. .
- Опция «показать когда» позволяет определить сколько заголовков должна иметь запись, прежде чем появится оглавление. Например: Вы вероятно не хотите чтобы оглавление отображалось в короткой записи, поэтому лучше всего использовать по крайней мере четыре заголовка.
Шаг 2
Чтобы вставить оглавление вручную, просто вставьте шорт-код, где вы хотите, чтобы он появился в сообщении.
Вот какое оглавление вы получите на примере этой статьи.
Вы также можете внести дополнительные изменения в настройках. Что должно отображаться, исключения, внешний вид и т.д.
Автоматическое добавление якорных ссылок на заголовки с помощью плагина
Хотите просто добавить якорные ссылки на все ваши заголовки автоматически? Скачиваем бесплатный плагин WP Anchor Header. Это добавит якорные ссылки на все ваши заголовки H1-H6.
Это очень простой плагин, и в нем нет никаких настроек. Просто установите его и активируйте. Каждый заголовок автоматически получает имя якоря (производное от имени заголовка), они даже получают прозрачный маленький значок якоря, который появляется при наведении указателя мыши на заголовок. Это позволяет посетителям легко видеть, что там есть ссылка, которую они могут скопировать.
Как создать якорные ссылки в WordPress с помощью Gutenberg
Довольно удобный и хороший редактор WordPress.
Шаг 1
Выделите заголовок в блоке Гутенберга и нажмите на кнопку “Дополнительно” справа. Затем вы увидите возможность добавить привязку HTML.
Шаг 2
Если вы хотите создать ссылку на него, просто создайте гиперссылку на свой якорный текст. Вместо того, чтобы связать его с URL, указываем на якорь # и его имя.
Создание якорных ссылок в WordPress с расширением Chrome
Не хотите создавать якорные ссылки с HTML или устанавливать плагин? Есть бесплатное расширение Anchor Links Chrome.
Вывод
Как вы поняли, есть много способов добавить якорные ссылки в WordPress. Некоторые из них легче, чем другие. Если вы публикуете много более длинного контента, это помогает вашим посетителям сразу же получить контент, который они хотят.
Больше о WordPress здесь.