Навигация по странице сайта. Якоря и их применение в WordPress

09.04.2021

247 2 minutes read

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

Что такое ссылка якорь и как сделать html

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

Якоря внедряются для того, что бы читатель сумел найти нужный ему участок текста в статье, не перечитывая все содержание. То-есть, навигация по странице сайта создаеться с помощью ссылки якоря, это в разы уменьшает время потраченное посетителем на прокрутку и поиск информации.

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

Как работает якорь на странице сайта

Якорь работает следующим образом:

В одном месте мы выделяем нужный нам фрагмент текста, делаем его ссылкой на нужный нам участок страницы.

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

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

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

Навигация по странице сайта, как сделать якорь в тексте

Для того что бы сделать якорь на странице нужно выбрать два фрагмента текста:

Место которое будет ссылаться на нужный нам текст. Для того что бы создать ссылку-якорь нужно заключить слово или фразу в тег <a> и назначить ему идентификатор. Выглядит это так: <a href= «#1» >текст ссылки </a>;
текст на который мы будем ссылаться при помощи ссылки созданной ранее. В тег текста («a», «p», «h», «span» и т .д.) нужно поставить нужный нам id. Выглядит это так: <a id= «1»>нужный нам текст</a>.

Давайте попробуем сделать якорь на практике.

К примеру данная ссылка <a href= «#test » > «здесь ссылка» </a> ссылается на фрагмент текста <a id= «test» > </a> «Начало статьи», который находиться сверху статьи. Теперь при нажатии на ссылку, мы увидим начало статьи. Все довольно просто. Ставить якорь нужно не на определенное слово, а именно на позицию слова, то-есть возле нужного слова, тогда проблем не должно возникнуть.

Форматирование и создание якоря нужно проводить только в html редакторе, для WordPress это вкладка «текст» редакторе статьи, для обычного html файла это может быть просто блокнот.

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

Рекомендую почитать: