Как сделать удобную навигацию по статье с помощью якорей? |

Время чтения: 5 мин.

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

 

В статье мы рассмотрим следующие вопросы:

1. Что такое якорь (html якорь)?
2. Установка якоря внутри статьи
3. Установка якоря в другой статье
4. Установка якоря в статье на другом сайте
5. Упрощаем работу по установке якорей с помощью шорткодов

1. Что такое якорь (html якорь)?

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

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

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

2. Установка якоря внутри статьи

Итак, прежде всего нам необходимо как-то отметить то место, КУДА будут переходить читатели. В этом месте нам сделать метку, т.е. установить якорь. Открываем вкладку HTML в визуальном редакторе и в нужном месте пишем такой код:

<a name=«ЯКОРЬ»>текст</a>

Вместо слова ЯКОРЬ вы указываете какое-то имя. Оно может быть связано с темой статьи (или фрагмента статьи) или быть произвольным, например, а1. Лучше писать тематический якорь – при возможном будущем редактировании статьи вам самим потом будет намного легче разбираться с ее структурой.

Вместо слова «текст» можете что-то указать, а можете не указывать, тогда ваш якорь будет писаться таким образом:

<a name=”ЯКОРЬ”></a>

Понятно, что этот якорь для посетителей будет не виден, в отличие от первого варианта написания.

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

Кстати, и это важно: когда пишите кавычки в коде указывайте их в латинской раскладке клавиатуры, а не русской, т.е. надо так – “ ”, а не так –«». Иначе WordPress сам добавит еще дополнительные кавычки.

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

Делаем весь пункт плана ссылкой: выделяем его мышью и жмем на кнопку визуального редактора «Вставить/редактировать ссылку». Появляется окно, где надо заполнить графы.

 Рис.1 (Все скриншоты кликабельны)

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

Итак, нам надо указать адрес ссылки (графа URL). Сначала пишется знак решетки — #, а потом пишется якорь. Я написал #1razdel. Потом, по желанию, пишите заголовок ссылки и нажимаете кнопку «Добавить ссылку».

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

3. Установка якоря в другой статье

Сразу же – предупреждение: сейчас я буду говорить об установке якоря в другой статье в пределах одного сайта.

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

Потом открываете ту статью, с которой будет идти ссылка, и оформляете ссылку обычным порядком. Единственное отличие – в адресе (URL) ссылки:

 Рис.2

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

Чуть выше визуального редактора расположена строчка «Постоянная ссылка». Чтобы увидеть ее полностью, кликнем по кнопке «Редактировать»:

 Рис.3

Все, что написано в окошке и есть относительный адрес нашей страницы. Копируем текст из окошка и вставляем в графу всплывающего окна «Добавить/ редактировать ссылку»:

 Рис.4

Нам надо кое-что дописать:

• Поставить слэш (косую черту) перед названием статьи, этим мы укажем, что это относительный путь, т.е. в пределах сайта;
• Завершить написание адреса, указав расширение — .html ;
• Написать наш якорь — #ИмяЯкоря (у меня а1).

Должно получиться так:

/tak-byl-li-dzh-vashington-polkovodcem.html#a1

Нажимаем кнопку «Добавить ссылку». Переходим на сайт, проверяем.

4. Установка якоря в статье на другом сайте

Для установки якоря на другом сайте в любой статье делаем все точно так же, как написано выше, только в URL ссылки указываем абсолютный адрес, начиная с http://.

В окне для добавления ссылки в графе URL у вас должно быть написано так:

Так был ли Дж.Вашингтон полководцем? |

5. Упрощаем работу по установке якорей с помощью шорткодов

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

Заходим на страницу настроек плагина:

 Рис.5

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

Строка «Якорь»: начало тега — <a name=””> , конец тега — </a>.

Строка «Якорь-ссылка»: начало тега — <a href=»/.html#»>, конец тега — </a>.

Немного поясню. Строка «Якорь-ссылка»: написано все, что раньше вам надо было писать руками. Осталось только вставить URL страницы (после слеша) и якорь (после решетки).

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

 Рис.6

Устанавливаем курсор в нужном месте (у меня – после слова «победы») и кликаем по кнопке «Якорь». У нас сразу станет такая же картина , как на рис 6: кнопка «Якорь» обзавелась слешем, а в тексте появилась первая часть нашего кода. Вписываем между кавычками сам якорь. Потом нажимаем на кнопку «/Якорь» — тег закроется.

Теперь устанавливаем ссылку на наш якорь. Открывает статью в нужном месте, выделяем — как при копировании — любое слово или фразу и нажимаем кнопку «Якорь-ссылка»:

 Рис.7

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

Мне кажется, что с шоркодами работать гораздо удобнее. А Вам?
И еще 2 важных совета:

1. вы не сможете проверить работу якорей, если только сохраните статью, а не опубликуете ее на сайте;
2. якоря лучше вставить в текст не непосредственно перед началом текста, а чуть выше — читать станет удобнее. Где именно стоит якорь видно по маленькой иконке с якорем в визуальном редакторе.

P.S. Доставка цветов – это невероятно удобно. Представьте, завтра 8 Марта, или день рождения, или годовщина свадьбы, а вы в командировке. Как поздравить любимую женщину? Звонок – это само собой. А если утром — цветы?