Как «легко» добавить якорные ссылки в WordPress (шаг за шагом)

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


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

В этом пошаговом руководстве мы объясним, что такое якорные ссылки, и покажем, как легко добавлять якорные ссылки в WordPress..

Добавление якорных ссылок в WordPress

Готов? Давайте начнем с живого примера якорных ссылок.

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

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

    Якорная ссылка – это тип ссылки на странице, которая приводит вас в определенное место на той же странице. Это позволяет пользователям переходить к разделу, который им наиболее интересен.

    Посмотрите на анимированный скриншот ниже:

    Предварительный просмотр ссылки

    Как вы можете видеть, щелкнув ссылку привязки, пользователь попадает в определенный раздел на той же странице..

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

    Почему и когда вы должны использовать якорные ссылки?

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

    Лучший способ сделать это – помочь им быстро увидеть информацию, которую они ищут.

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

    Якорные ссылки также отлично подходят для WordPress SEO. Google может отображать якорную ссылку в результатах поиска как «переход к ссылке».

    Перейти к ссылке в результатах поиска

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

    Многократный переход к ссылкам под результатом поиска

    Сказав это, давайте посмотрим, как легко добавить якорные ссылки в WordPress..

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

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

    По сути, вам нужно добавить две вещи, чтобы якорный текст работал так, как задумано.

    1. Создать ссылку привязки со знаком # перед текстом привязки.
    2. Добавьте атрибут id к тексту, куда вы хотите, чтобы пользователь был доставлен.

    Давайте начнем с части ссылки якоря.

    Шаг 1. Создание якорной ссылки

    Сначала вам нужно выбрать текст, который вы хотите связать, а затем нажмите кнопку вставки ссылки в редакторе WordPress Gutenberg..

    Добавить ссылку в WordPress

    Откроется всплывающее окно со вставленной ссылкой, где вы обычно добавляете URL-адрес или ищите сообщение или страницу для ссылки..

    Однако для привязки ссылки вы просто используете # в качестве префикса и вводите ключевые слова для раздела, к которому пользователь хочет перейти..

    Создание якорной ссылки

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

    Несколько полезных советов по выбору текста для использования в качестве ссылки #:

    • Используйте ключевые слова, связанные с разделом, на который вы ссылаетесь.
    • Не делайте свою якорную ссылку излишне длинной или сложной.
    • Используйте дефисы, чтобы разделить слова и сделать их более читабельными.
    • Вы можете использовать заглавные буквы в тексте привязки, чтобы сделать его более читабельным. Например: # Best-Coffee-Shops-Manhattan.

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

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

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

    Шаг 2. Добавьте атрибут ID в связанный раздел

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

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

    HTML Anchor

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

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

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

    В этом случае вам нужно нажать на трехточечное меню в настройках блока и выбрать «Редактировать как HTML»..

    Редактировать как HTML

    Это позволит вам редактировать HTML-код для этого конкретного блока. Вам нужно выбрать найти тег HTML для элемента, на который вы хотите указать. Например,

    если это параграф, или

    если это блок таблицы и т. д..

    Теперь вам нужно добавить свой якорь в качестве атрибута ID для этого тега, как в следующем коде:

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

    Конвертировать в HTML

    Как вручную добавить якорную ссылку в Classic Editor

    Если вы все еще используете более старый классический редактор для WordPress, то вот как вы можете добавить ссылку привязки.

    Шаг 1. Создайте якорную ссылку

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

    Добавление якорной ссылки в Classic Editor

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

    Шаг 2. Добавьте атрибут ID в связанный раздел

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

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

    Добавление идентификатора привязки в Classic Editor

    Теперь найдите HTML-тег, на который вы хотите настроить таргетинг. Например,

    ,

    ,

    , и так далее.

    Вам нужно добавить к нему атрибут ID с помощью slug вашей якорной ссылки без префикса #, например:

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

    Как вручную добавить якорные ссылки в HTML

    Если вы привыкли писать в текстовом режиме старого классического редактора в WordPress, то вот как вы можете вручную создать ссылку в HTML.

    Во-первых, вам нужно создать ссылку привязки с префиксом #, используя обычный тег, например:

    Лучшие кофейни в Манхэттене

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

    Обычно этот раздел является заголовком (h2, h3, h4 и т. Д.), Но это может быть любой другой элемент HTML или даже простой абзац

    тег.

    Вам нужно добавить атрибут ID в тэг HTML, а затем добавить блок ссылок привязки без префикса #.

    Лучшие кофейни в Манхэттене

    Теперь вы можете сохранить изменения и просмотреть свой веб-сайт, чтобы проверить привязку.

    Как автоматически добавлять заголовки как якорные ссылки в WordPress

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

    Первое, что вам нужно сделать, это установить и активировать плагин Easy. Для получения более подробной информации, смотрите наше пошаговое руководство по установке плагина WordPress..

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

    После активации просто перейдите на Настройки » страница для настройки параметров плагина.

    Простые настройки плагина

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

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

    Если вы хотите автоматически генерировать только для определенных статей, то вы можете оставить этот флажок.

    Затем прокрутите немного вниз, чтобы выбрать, где вы хотите отобразить и когда вы хотите, чтобы он был запущен.

    Выберите, где и когда отображать

    Вы можете просмотреть другие дополнительные параметры на странице и изменить их при необходимости..

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

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

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

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

    На экране редактирования записи прокрутите вниз до вкладки below ’под редактором..

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

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

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

    предварительный просмотр

    Для более подробных инструкций, смотрите нашу статью о том, как добавить в WordPress.

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map