Как создать привязку ссылок в WordPress (3 простых метода)

By cuongbv.com Updated: 28 Sep, 2018

Якорные ссылки - это не тема, которая обсуждается много, но у нас были отличные результаты с ними! Сегодня мы будем погружаться в создание якорных ссылок в WordPress и исследовать, почему вы можете начать их использовать. По нашему опыту, привязные ссылки могут помочь улучшить пользовательский интерфейс, сделать навигацию по длинному формату намного проще и даже дать вам небольшое преимущество в Google. Кто не хочет получить бесплатное преимущество в Google? 😉



Пример привязки привязки


Если вы все еще немного запутались в каких якорных ссылках, не беспокойтесь. См. Пример изображения ниже. Мы используем привязные ссылки для каждого из этих элементов маркированного списка. Когда вы нажимаете на них, он берет вас непосредственно вниз, чтобы заголовок H2, содержащий этот контент. Вы можете проверить их для себя дальше в сообщении. Якорные ссылки могут использоваться на любых объектах, таких как текст, изображения и заголовки H1-H6.


Якорные ссылки

Якорные ссылки


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


Якорные ссылки на длинную форму

Якорные ссылки на длинную форму


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


Плюсы и минусы привязки ссылок


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


Pros



  • Одним из самых больших преимуществ привязанных ссылок является создание лучшего пользовательского интерфейса при просмотре вашего сайта. Это особенно актуально, когда речь идет о статьях длинной формы. Мы публикуем много подробного контента (4000 слов), а прокрутка может стать болью. Использование привязных ссылок позволяет пользователю мгновенно перейти к интересующей секции. Пусть ваши пользователи быстрее найдут, что им нужно.

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

  • Когда дело доходит до страниц результатов поиска (SERP), результаты всегда могут меняться в зависимости от того, что появляется. Однако мы снова и снова видели, что привязка (меню перехода) отображается в нашем списке результатов поиска, потому что мы использовали их в наших статьях. Это потрясающе, потому что они по существу дать вам еще одну строку текста для вашего органического списка, Они также могут помочь увеличить CTR поскольку пользователь может видеть что-то, связанное с их запросом, которое вы не передали в мета-описании или заголовке.

    Якорные ссылки в примере Google

    Якорные ссылки в примере Google


  • Якорные ссылки также могут использоваться для других вещей, таких как ссылка «вернуться к вершине», которую использует Википедия вместе со своими цитатами ^ или сносками. [1]


Cons


Хотя мы думаем, что профессионалы, безусловно, перевешивают минусы, вот несколько неудач, которые вы, возможно, захотите рассмотреть.



  • Якорные ссылки или оглавление может уменьшить среднее время на месте за посетителя. Зачем? Потому что они пропускают прямо к содержимому, которое они хотят, вместо того, чтобы читать всю вашу статью. Однако, если вы сделаете своего посетителя счастливым с самого начала, это может привести к тому, что они подписываются на ваш бюллетень или больше изучают то, что вы продаете. Таким образом, это можно рассматривать как про или con.

  • Непосредственно связанные с проблемой выше, якорные ссылки могут повлиять на доход от рекламы. Посетители, пропущенные прямо в определенном разделе, могут уменьшить количество показов и кликов. Сайты, которые в значительной степени полагаются на рекламу, могут захотеть провести тест A / B с использованием привязных ссылок и оглавления.


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



  • Как вручную создавать привязки ссылок в WordPress

  • Как создать привязку ссылок в WordPress с помощью плагина

  • Как создать привязку ссылок в WordPress с Gutenberg



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


Шаг 1


Создайте текст для своей ссылки и добавьте гиперссылку на нее, как обычно для любой другой ссылки.


Создание привязки с HTML

Создать привязку с HTML


Шаг 2


Вместо того, чтобы связывать его с URL-адресом, почтой или страницей; вы присвоите ему имя привязки. URI, которые обозначают якоря содержат символ «#» а затем имя привязки. Вы можете назвать это все, что хотите, хотя мы обычно рекомендуем сохранять их короткими и относиться к фактическому имени заголовка.


Если вы посмотрите на текстовое представление (HTML), это выглядит так:


Как вручную создавать привязки ссылок в WordPress

Вот пример всех привязанных ссылок, которые мы используем в этом сообщении:



Шаг 3


Затем вам нужно добавить идентификатор в заголовок, на который вы хотите перейти к якорной ссылке. Для этого вам нужно переключиться на текстовое представление (HTML) в редакторе WordPress. В заголовке, в данном случае заголовке H2, добавьте идентификатор вместе с именем привязки, которое вы выбрали на шаге 2. Атрибут имени и идентификатора привязки должен быть точно таким же, как для ссылки для работы.


ID = "вручную создать якорь-ссылки-WordPress"> Как создать ссылку на якорь в WordPress



Не хотите каждый раз беспокоиться о HTML-коде? Не стоит беспокоиться, есть некоторые потрясающие бесплатные плагины WordPress, которые вы можете использовать, чтобы легко добавлять ссылки на якорь и даже оглавление каждого сообщения.


Добавить привязку привязки с плагином


Одним из самых простых способов добавления привязки является бесплатный плагин TinyMCE Advanced. Этот плагин в основном добавляет дополнительные функции в редактор с быстрыми кнопками быстрого доступа. Начиная с написания этого, плагин имеет более 2 миллионов активных установок с 4,5 из 5-звездочного рейтинга.


Плагин TinyMCE Advanced WordPress

Плагин TinyMCE Advanced WordPress


Шаг 1


После того, как вы установили и активировали плагин, зайдите в свой пост и создайте гиперссылку на свой якорный текст. Вместо того, чтобы связывать его с URL-адресом, почтой или страницей; вы присвоите ему имя привязки с # перед ним.


Добавить имя привязки

Добавить имя привязки


Шаг 2


Выделите заголовок, который вы хотите связать. Затем нажмите «Вставить» из кнопки вверху и выберите «Якорь». Эта кнопка отображается в редакторе из-за плагина TinyMCE Advanced.


Добавить якорь

Добавить якорь


Шаг 3


Введите имя привязки, которое вы дали ему на шаге 1, и нажмите «ОК». Этот плагин экономит ваше время, потому что вам никогда не придется покидать визуальный редактор. Если вы делаете это вручную с помощью HTML, вы должны отскакивать как от визуального редактора, так и от текстового редактора (HTML).


Идентификатор привязки

Идентификатор привязки


Добавить оглавление с плагином


Возможно, вы хотите ускорить этот процесс еще больше. 😄 Если вы пишете много подробного контента и всегда хотите включить в свои сообщения оглавление (списки привязки ссылок / меню перехода), вы должны воспользоваться плагином оглавления.



Один из лучших бесплатных плагинов - это просто оглавление. Этот плагин автоматически создает якорные ссылки для ваших заголовков и позволяет вам вставлять оглавление в любом месте вашего сообщения с помощью простого короткого кода. Начиная с написания этого, плагин имеет более 30 000 активных установок с 4,5 из 5-звездочного рейтинга.


Легкий оглавление Плагин WordPress

Легкий оглавление Плагин WordPress


Шаг 1


После того, как вы установили и активировали плагин, есть несколько настроек, которые вы, вероятно, захотите изменить. Их можно найти в разделе «Настройки → Содержание».



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

  • Затем вы можете выбрать, хотите ли вы автоматически вставлять оглавление или если вы хотите вставить его вручную. Мы, вероятно, рекомендуем делать ручную, если ваши сообщения немного меняются.

  • Опция «Показывать когда» позволяет определить, сколько заголовков должно быть опубликовано до появления оглавления. Например, вы, вероятно, не хотите, чтобы оглавление отображалось в коротком сообщении в блоге, поэтому, пожалуй, лучше всего использовать четыре или более заголовков.


Легкие настройки содержания

Легкие настройки содержания


Шаг 2


Чтобы вставить оглавление вручную, просто вставьте [ez-toc] shortcode, где вы хотите, чтобы он появился в сообщении.


EZ-TOC shortcode

EZ-TOC shortcode


Оглавление автоматически создается для всех заголовков сообщения. Как это здорово?


Содержание WordPress

Содержание WordPress


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


Другой плагин оглавления, который вы, возможно, захотите проверить, - это Shortcode Table of Contents. Это новый плагин на рынке, но он разработан Джеймсом Кемпом, которого мы с удовольствием проводили интервью.


Добавление ссылок на якорь на заголовках автоматически с помощью плагина


Хотите просто добавить привязные ссылки на все ваши заголовки автоматически? Затем вы должны проверить бесплатный плагин WP Anchor Header. Это добавит привязки для всех ваших заголовков H1-H6.


Плагин WP Anchor Header

Плагин WP Anchor Header


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


Автоматические привязные ссылки на заголовках

Автоматические привязные ссылки на заголовках



Новый редактор Gutenberg не за горами и, по прогнозам, будет поставляться с WordPress 5.0. Благодаря этому улучшена и встроенная поддержка для добавления идентификаторов привязки в заголовки.


Шаг 1


Выделите заголовок блока Gutenberg и нажмите «Дополнительно» справа. Затем вы увидите возможность добавления HTML-якоря.


Добавить HTML-якорь в редакторе Gutenberg

Добавить HTML-якорь в редакторе Gutenberg


Шаг 2


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


Добавить якорь в Гутенберге

Добавить якорь в Гутенберге


Резюме


Как вы можете видеть, есть много творческих способов добавления якорных ссылок в WordPress. Некоторые из них легче других. Если вы публикуете много более длинного контента, это поможет вашим посетителям сразу перейти к содержимому, которое они хотят. Мы также видели, что привязчивые ссылки помогают получить «прыжок в меню» в результатах поиска, что помогает увеличить CTR на вашем органическом листинге.


Вы используете ссылки привязки еще на своем сайте WordPress? Если это так, мы будем рады услышать ваш опыт или мысли.


Сообщение «Как создать якорные ссылки в WordPress» (3 простых метода) появилось впервые на Kinsta Managed WordPress Hosting.