Якорная ссылка в WordPress: пошаговая инструкция
Якорные ссылки — это удобный элемент навигации на странице сайта, который часто практикуется вебмастерами. Такие ссылки упрощают пользователям поиск нужного им материала, и поэтому рекомендуется использовать их для того, чтобы улучшить юзабилити сайта и поведенческие факторы. В этой статье рассмотрим, что такое якорная ссылка в WordPress, как её создать и для чего такой элемент можно использовать.
- 1 Что такое якорная ссылка
- 2 Как сделать якорную ссылку в WordPress
- 3 Когда можно использовать якорные ссылки
Что такое якорная ссылка
Что такое обычная ссылка, наверняка, все знают. Это когда вы кликаете по ссылке и переходите на другую страницу. Якорная ссылка — это похожий, но более совершенный элемент. Когда вы кликаете на якорную ссылку, вы не просто переходите на другую страницу, а переходите сразу на нужную часть страницы, то есть после перехода она прокручивается до нужного места. Кроме того, якорные ссылки могут переводить не только на другие страницы, но и другие места текущей страницы, той, на которой эта ссылка установлена.
Таким образом, если вы переводите с помощью якорной ссылки сразу на нужный фрагмент страницы, то пользователю, который по ней кликнул, не понадобится искать нужный материал. Он сразу окажется в правильном месте. Это удобно.
Как сделать якорную ссылку в WordPress
Якорная ссылка создаётся очень просто. Процесс состоит из двух этапов: создания якоря, который устанавливается в том месте, куда надо переводить, и создание ссылки — то место, откуда надо переводить.
Установить якорь в WordPress можно на любой элемент — на абзац, заголовок, цитату, изображение и всё остальное. Чтобы это сделать, кликните в редакторе на элемент, а потом посмотрите на колонку справа, во вкладку «Блок». Здесь настройки блока. Прокутите опции в самый конец и разверните секцию «Дополнительно». Здесь заполните поле «HTML-якорь». Сам якорь может состоять только из латинских букв, цифр, символов дефиса или подчёркивания. Рекомендуется сразу давать имя якорю такое, которое вам будет понятно. Также текст самого якоря будет виден и посетителям. Поэтому он должен быть ещё и человеко-понятным. Например, если вы делаете якорь на заголовок, то назовите его, например, «сhto_takoe_jakornaja_ssylka», а не, допустим «part_1». Так сразу понятно, что скрывается под этим якорем.
Теперь надо сделать саму якорную ссылку — текст, клик по которому переведёт на установленный якорь. Для этого выделите текст, который станет анкором, кликабельной частью. И нажмите на кнопку в виде звена цепи.
Появится поле для добавления ссылки. Если анкор якорной ссылки находится на той же странице, на которой находится якорь, то в поле надо добавить заданный якорь с символом решётки впереди, например, #сhto_takoe_jakornaja_ssylka.
Если анкор находится на другой странице, не на той, на которой расположен якорь, то добавить надо ссылку на страницу с якорем, затем поставить символ решётки, а после этого написать заданный элементу якорь. Например, exmple.com/page#сhto_takoe_jakornaja_ssylka. Якорная ссылка в WordPress может вести на другую страницу не только текущего, но и другого сайта, то есть быть внешней. В таком случае сам якорь устанавливается в нужном месте на другом сайте.
Когда можно использовать якорные ссылки
Якорные ссылки в WordPrеss пригодны во многих случаях. Приведём пару примеров, когда их можно использовать с положительным эффектом для улучшения удобства сайта.
Представьте, у вас есть две статьи. Первая о том, как клеить обои, вторая о том, как устроить дизайн интерьера спальни. В первой статье у вас есть раздел о том, как выбирать обои. Вы кратко рассказываете о правилах выбора обоев, а также делаете из этого раздела якорную ссылку на статью о дизайне интерьера спальни, и устанавливаете якорь именно на том разделе этой статьи, на котором рассказываете о выборе обоев для спальни. Это удобней, чем, если вы бы сослались сразу на всю страницу. В этом случае посетителю пришлось бы среди всей статьи об интерьере спальни самому искать нужный раздел про выбор обоев.
Второй пример использования якорных ссылок в WordPress — это на лендингах. Наверняка многие видели на лендингах меню, клик по элементам которого прокручивает этот лендинг до нужного места. Например, в меню есть элемент «Цены». И если по нему кликнуть, то лендинг прокрутится до того места, где рассказывается о ценах. Это удобно, поэтому, глядя в меню, человек может представить себе, какая именно информацию имеется на данной странице, и легко перейти в нужное место.
Якорные ссылки при правильном использовании положительно влияют на удобство, юзабилити сайта, то есть проект больше нравится посетителям. Это в свою очередь виляет на поведенческие факторы, которые учитываются поисковиками и участвуют в формировании ранжирования.
Насколько публикация полезна?
Нажмите на звезду, чтобы оценить!
Средняя оценка 3.7 / 5. Количество оценок: 3
Оценок пока нет. Поставьте оценку первым.
Как сделать якорь в wordpress?
Чтобы создать якорь на странице WordPress, следуйте этим простым шагам:
- В режиме редактирования страницы выберите место на странице, где вы хотите разместить якорь.
- Вставьте HTML-код якоря, используя следующий синтаксис:
phpa name="название-якоря"> a>
Замените «название-якоря» на любое уникальное имя, которое вы хотите использовать для якоря. 3. Добавьте ссылку на якорь, указав название якоря в атрибуте href. Например:
phpa href="#название-якоря">Перейти к якорю a>
При нажатии на эту ссылку пользователь будет перемещен к якорю на странице.
- Сохраните изменения страницы.
Примечание: Если вы используете редактор Gutenberg в WordPress, вы можете добавить якорь, используя блок «HTML». Вставьте код якоря в блок «HTML» и сохраните изменения. Затем вы можете создать ссылку на якорь, выбрав текст и выбрав опцию «Добавить ссылку». Введите «#» и название якоря в поле URL ссылки.
wordpress якорь на другую страницу
но wp искажает ссылку, превращая ее в site.ru/page/#block1
т.е. добавляет слеш.
как это исправить?
На сайте с 03.11.2008
8 ноября 2020, 09:59
Linblack : делаю .
но wp искажает ссылку, превращая ее в site.ru/page/#block1
т.е. добавляет слеш.
Делаю хорошие сайты хорошим людям. Предпочтение коммерческим направлениям. Связь со мной через http://wp.me/P3YHjQ-3.
На сайте с 01.02.2011
8 ноября 2020, 12:44
SeVlad #:
Где?
перед хештегом
На сайте с 03.11.2008
8 ноября 2020, 13:40
Linblack #:
перед хештегом
Мля.. Где ТЫ в ВП «делаешь», где именно ВП «искажает»?
На сайте с 01.02.2011
8 ноября 2020, 15:12
не совсем понимаю вопрос. ну в любой записи блога и внутренней странице (главная не в счет, она вне движка).
приписанный хэштег и идущий за ним идентефикатор на краю url он редиректит на эту же страницу со слешем перед хэштегом по типу:
site.ru/page#tag на site.ru/page/#tag
плагинов не ставил, базовые настройки движка не менял
На сайте с 21.04.2009
8 ноября 2020, 15:34
Linblack #:
не совсем понимаю вопрос. ну в любой записи блога и внутренней странице (главная не в счет, она вне движка).
приписанный хэштег и идущий за ним идентефикатор на краю url он редиректит на эту же страницу со слешем перед хэштегом по типу:
site.ru/page#tag на site.ru/page/#tag
плагинов не ставил, базовые настройки движка не менял
УРЛы на сайте со слешем на конце? Если да, то о каком «поведении» WP вы мечтаете?
На сайте с 03.11.2008
8 ноября 2020, 15:38
dma84 #:
УРЛы на сайте со слешем на конце? Если да, то о каком «поведении» WP вы мечтаете?
Слеш добавляет сам ВП. В настройках его даже не укажешь. Да, я только что попробовал (пока понял что и как надо сделать чтобы воспроизвести ситуацию..) — косяк имеет место быть. АПД. а не, не косяк. Так и должно быть.
Как легко добавить якорные ссылки в WordPress
Приветствуем вас! Время от времени мы используем ссылки привязки в наших длинных постах, чтобы помочь пользователям быстро перейти к разделу, который они хотят прочитать. Якорные ссылки часто используются в разделах таблицы содержимого, поскольку они помогают пользователям перемещаться вверх и вниз по более длинной статье без перезагрузки страницы.
Это также может помочь с SEO оптимизацией, так как Google может показывать их под вашими поисковыми списками для удобства навигации. В этом пошаговом руководстве мы объясним, что такое якорные ссылки, и покажем, как легко добавлять якорные ссылки в WordPress.
Добавление якорных ссылок в WordPress
Что такое якорная ссылка? Простым языком, якорная ссылка — это тип ссылки на странице, которая приводит вас в определенное место на той же странице. Это позволяет вам переходить к разделу, который вас больше всего интересует.
Якорные ссылки обычно используются в длинных статьях в виде оглавления, которое позволяет быстро переходить к разделам, которые вы хотите прочесть.
Почему и когда вы должны использовать якорные ссылки?
Обычно пользователь тратит меньше несколько секунд, прежде чем решит, хочет ли он остаться или покинуть ваш сайт. У вас есть только эти несколько секунд, чтобы убедить его остаться.
Лучший способ заинтересовать пользователя — это помочь ему увидеть ту информацию, которую он ищет.
Якорные ссылки облегчают эту задачу, позволяя пользователям пропускать остальную часть контента и переходить непосредственно к интересующей его части. Это улучшает пользовательский опыт и помогает вам заполучить новых клиентов / читателей.
Якорные ссылки также отлично подходят для SEO WordPress. Google может отображать якорную ссылку в результатах поиска как «переход к ссылке» .
Иногда поисковик может отображать несколько ссылок с этой страницы в виде переходов по ссылкам, и это, как доказано, повышает рейтинг кликов в результатах поиска. Другими словами, вы получаете больше трафика на ваш сайт.
Теперь, давайте посмотрим, как легко добавить якорные ссылки в WordPress.
Как вручную добавить якорные ссылки в WordPress
Если вы просто хотите добавить несколько якорных ссылок в вашу статью, вы можете легко сделать это вручную. По сути, вам нужно добавить две вещи, чтобы якорный текст работал так, как задумано.
- Создайте ссылку привязки со знаком # перед текстом привязки.
- Добавьте id атрибут к тексту, где вы хотите, чтобы пользователь был взят.
Давайте начнем с части ссылки якоря.
Шаг 1. Создание якорной ссылки
Сначала вам нужно выбрать текст, который вы хотите связать, а затем нажмите кнопку вставки ссылки в редакторе WordPress Gutenberg.
Откроется всплывающее окно со вставленной ссылкой, где вы обычно добавляете URL-адрес. Однако для привязки ссылки вы просто используете # в качестве префикса и вводите ключевые слова для раздела, к которому пользователь хочет перейти.
После этого нажмите на кнопку ввода, чтобы создать ссылку. Несколько полезных советов по выбору текста для использования в качестве ссылки # :
- Используйте ключевые слова, связанные с разделом, на который вы ссылаетесь.
- Не делайте свою якорную ссылку излишне длинной или сложной.
- Используйте дефисы, чтобы разделить слова и сделать их более читабельными.
- Вы можете использовать заглавные буквы в тексте привязки, чтобы сделать его более читабельным.
#Лучшие кафе Москвы.
Добавив ссылку, вы сможете увидеть ее в редакторе. Однако нажатие на ссылку ничего не дает. Это потому, что браузеры не могут найти ссылку привязки в качестве идентификатора.
Давайте исправим это, указав браузерам область, раздел или текст, который вы хотите показать, когда пользователи нажимают на ссылку привязки.
Шаг 2. Добавьте атрибут ID в связанный раздел
В редакторе содержимого прокрутите вниз до раздела, к которому вы хотите перейти. Обычно это заголовок нового раздела.
Далее нажмите, чтобы выбрать блок, а затем в настройках блока нажмите на вкладку «Дополнительно» , чтобы развернуть его или нажмите на вкладку «Дополнительно» под настройками блока заголовка.
После этого вам нужно добавить тот же текст, который вы добавили в качестве ссылки привязки в поле «HTML-привязка» . Убедитесь, что вы добавили текст без префикса # .
Теперь вы можете сохранить свое сообщение и увидеть свою якорную ссылку в действии, нажав на вкладку предварительного просмотра.
Но, что если раздел, который вы хотите показать, не является заголовком, а представляет собой обычный абзац или какой-либо другой блок? В этом случае вам нужно нажать на трехточечное меню в настройках блока и выбрать «Редактировать как HTML» .
Это действие позволит вам редактировать HTML-код для этого конкретного блока.
Теперь вам нужно добавить свой якорь в качестве атрибута ID для этого тега, как показано в следующем коде:
Теперь вы увидите уведомление о том, что этот блок содержит неожиданное или недействительное содержимое. Вам нужно нажать на конвертировать в HTML, чтобы сохранить сделанные вами изменения.
Как вручную добавить якорную ссылку в Classic Editor
Если вы все еще используете старый классический редактор для WordPress, то вот как вы можете добавить ссылку привязки.
Шаг 1. Создаем якорную ссылку
Сначала выберите текст, который вы хотите изменить в привязке ссылки, а затем нажмите кнопку «Вставить ссылку» .
После этого вам нужно добавить свою якорную ссылку с префиксом # sign, а затем слаг, который вы хотите использовать для ссылки.
Шаг 2. Добавьте атрибут ID в связанный раздел
Следующим шагом является указание браузерам того раздела, который вы хотите показать, когда пользователи нажимают на ссылку привязки.
Для этого вам нужно переключиться в режим «Текст» в классическом редакторе. После этого прокрутите вниз до раздела, который вы хотите показать.
Теперь найдите HTML-тег, на который вы хотите настроить таргетинг. Например, , ,
и так далее.
Вам нужно добавить к нему атрибут ID с помощью slug вашей якорной ссылки без префикса #, например:
Теперь вы можете сохранить ваши изменения и нажать на кнопку предварительного просмотра, чтобы увидеть вашу ссылку привязки в действии.
Как вручную добавить якорные ссылки в HTML
Если вы привыкли писать в текстовом режиме старого классического редактора в WordPress, то вот как вы можете вручную создать ссылку в HTML.
Далее вам нужно прокрутить вниз до раздела, который вы хотите показать, когда пользователи нажимают на ссылку.
Обычно этот раздел является заголовком (h2, h3, h4 и т. д.). Но, это может быть любой другой элемент HTML или даже простой тег
абзаца.
Вам необходимо добавить атрибут ID в тег HTML, а затем добавить ссылку на ссылку привязки без префикса # .
Лучшие кафе Москвы
Теперь вы можете сохранить свои изменения и просмотреть ссылку в действии.
Как автоматически добавлять заголовки как якорные ссылки в WordPress
Этот метод подходит для пользователей, которые регулярно публикуют длинные статьи и нуждаются в создании оглавления с якорными ссылками. Первое, что вам нужно сделать, это установить и активировать плагин Easy Table of Contents .
Этот плагин позволяет автоматически генерировать оглавление с якорными ссылками. Вы можете полностью настроить его в соответствии со своими потребностями. После активации просто перейдите на страницу «Настройки» — «Содержание» , чтобы настроить параметры плагина.
Во-первых, вам нужно включить его для типов записей, в которые вы хотите добавить оглавление. По умолчанию плагин включен для страниц, но вы также можете включить его для своих сообщений.
Вы также можете включить опцию автоматической вставки. Это позволяет плагину автоматически генерировать оглавление для всех статей, включая старые статьи, которые соответствуют критериям.
Если вы хотите автоматически генерировать оглавление для конкретных статей, то вы можете оставить этот параметр без отметки. Затем, прокрутите немного вниз, чтобы выбрать, где вы хотите отобразить оглавление и когда вы хотите, чтобы он был запущен.
Вы можете просмотреть другие дополнительные параметры на странице и изменить их при необходимости.
Не забудьте нажать кнопку «Сохранить изменения» , чтобы сохранить настройки. Если вы включили опцию автоматической вставки, то теперь вы можете просмотреть существующую статью с указанным количеством заголовков.
Вы заметите, что плагин будет автоматически отображать оглавление перед первым заголовком в статье. Если вы хотите вручную создать оглавление для конкретных статей, вам нужно отредактировать статью, в которой вы хотите отобразить оглавление с якорными ссылками.
На экране редактирования записи прокрутите вниз до вкладки «Расширенные» под редактором.
Отсюда вы можете выбрать опцию «Вставить оглавление» и выбрать заголовки, которые вы хотите включить в качестве якорных ссылок. Теперь вы можете сохранить свои изменения и просмотреть свою статью. Плагин автоматически отобразит список якорных ссылок в качестве оглавления.
Мы надеемся, что эта статья помогла вам узнать, как легко добавлять якорные ссылки в WordPress. А у нас на этом все. Всем пока!
С уважением Вячеслав и Валерия!