ссылки указатели вордпресс

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

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

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

Якорь в HTMLЯкорь в редакторе Gutenberg 

Однако с плагинами проще управляться. Смотрите: если ваш сайт работает в нескольких версиях (для стационарных ПК, для мобильных устройств, с турбо-страницами…), то ссылки для каждой из них надо делать отдельно. Иначе получится смешение версий: человек жмет на якорь мобильной страницы и оказывается в подходящем (по смыслу) разделе — но на странице для ПК. Разделять версии вручную довольно трудоемко. А подходящий плагин, по идее, должен автоматически следить, чтобы ничего не смешивалось.

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

Якорная ссылка в HTML

Торопитесь? Вот скрин-шпаргалка:

как сделать содержание в вордпресс

***

Важно! Метод позволяет крепить якоря не только к подзаголовкам. Но и практически к любому месту на вашей станице. Поэтому раздел длинный — ниже подробности.

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

Примерно так:

  • <a href= «#1» >
  • <a href= «#секретная метка» >
  • <a href= «#отправляемся туда» >
  • <a href= «#ключ» >

*Хотя пробелы не нужны, а кавычки смело ставьте не елочками, а лапками; WP упорно правит 🙁

Закрывается этот тег как обычно, с косой чертой </a>. Между открытием и закрытием помещаем текст из «Содержания статьи», на который станут кликать пользователи. Сугубо технически этот текст не требуется, то есть конструкция <a href= «#1» ></a> тоже будет работать — но как люди поймут, куда здесь нажимать? Поэтому пишем так: <a href= «#1» >Глава первая</a>. С текстом.

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

  • <a href= «#1» >Глава первая</a>
  • <a href= «#2» >Глава вторая</a>
  • <a href= «#3» >Глава третья</a>

Теперь отметьте в статье то место, куда уводит ваша якорная ссылка. То есть точку, где окажется пользователь после клика. Ее нужно пометить тегом, содержащим id= «1» , id= «отправляемся туда» или что-то вроде этого. В кавычках вставлена изначальная уникальная метка, уже без решетки.

Важно: id — это не самостоятельный тег, а так называемый атрибут, который нужно прицепить к какому-нибудь тегу. К любому:

<a id= «1» >якорь разместится в некоей произвольной точке текста</a>

<strong id= «1» >якорь на слово в тексте, написанное жирным шрифтом</strong>

<em id= «1» >якорь на слово или фразу, выделенную курсивом</em>

<h2 id= «1» >якорь на подзаголовке второго уровня</h2>

Вот как они выглядят в опубликованной статье (картинка с разными вариантами):

***

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

***

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

Пример использования — и «красивый» результат поисковой выдачи

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

***

Короткая ссылка в выдаче

***

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

***

Польза от якорных ссылок (ищем подход к поисковым роботам)

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

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

Не забудьте красиво оформить содержание в начале статьи. Придумайте, как его выделить и выровнять. Пункты должны быть ясными, лучше — короткими. Ключи — повторюсь — использовать можно, но только когда они не кривые и органично вписываются. Чтобы гости вашего сайта наслаждались удобством.

Апдейт

Если вы пользуетесь технологией «Турбо-страницы» от Яндекса, то обратите внимание: якорные ссылки работают корректно, когда ведут на подзаголовок h1-h6. В прочих случаях могут уводить пользователя с турбо-страницы на ее же полную версию.

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

Апдейт 2

Обратите внимание! В новых версиях Вордпресс в редакторе Гутенберг появился соответствующий функционал. Можно ставить якоря мышкой. Однако и описанный «олдскульный» метод также остается работающим.

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

Смотрите дополнительные настройки подзаголовка
На втором скрине я переключилась в режим просмотра HTML. Видно, что действительно появился соответствующий атрибут
Теперь отправляемся в содержание (здесь оно сделано списком). Выделяем нужный пункт и ставим ссылку
Тот же самый атрибутный текст, но с решеткой — в качестве адреса

Готово 🙂 Работает только в редакторе Гутенберг.