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


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

 

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

  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 у вас должно быть написано так:

http://www.novichkoff.ru/tak-byl-li-dzh-vashington-polkovodcem.html#a1

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

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

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

 как вставить якорь в статьюРис.5

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

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

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

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

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

 как вставить якорь в статьюРис.6

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

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

 как вставить якорь в статьюРис.7

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

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

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

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

Похожие записи по этой теме:

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

  1. Оксана

    Внутри статьи осилила, как и куда вставить анкор. А вот с одной статьи на другую пока зависла. Вроде все делаю, камк написано, а при переходе по этому анкору ошибка 404. Завтра продолжу. Если долго мучиться- что нибудь получится.

    Reply
  2. Ирина

    Добрый день! Помогите чайникам!!!

    Подскажите, как сделать якорь: переход с одной страницы на статью на другой странице. Делала по Вашей инструкции — не получается. Что я делаю не так?

    Мой сайт www.salonestel.ru.

    Я хочу с моей страницы «парикмахерская» при клике на слова «наращивание волос», чтобы клиент переходил на статью «наращивание волос» в рубрике «красивые волосы». Для этого перед первыми словами статьи «наращивание волос» в рубрике «красивые волосы» я прописала якорь

    . Затем на странице «парикмахерская» я сделала ссылку с указанием /parikmaxerskie-uslugi.html#a1. При проверке страница с указанной статьей не находится. Может это потому что в статье, на которую дается ссылка- фотография или это не влияет? Cпасибо за скорый ответ.

    Reply
    1. admin Post author

      Ирина, а зачем здесь якорь? Сделайте обычную ссылку на нужную страницу. А фотография на якорь не влияет.

      Reply
  3. Степан

    Добрый день.Написано подробно,как раз для чайников,тоже использую якоря.Ещё идёт плюсом к перелинковке страниц.Плагин не был такой установлен какой светуете Вы,установил, будем пробовать.У Вас небольшая опечатка в тексте,И еще 2 важны(й) совета:Спасибо удачи.Вёрстка сайта

    Reply
    1. admin Post author

      Степан, спасибо за подсказку. И Вам удачи!

      Reply
  4. Светлана

    Только что добавила на сайт 2 своих первых якоря. Статьи большие, они так и просились. Спасибо за такое подробное и понятное описание!

    Reply
    1. admin Post author

      Пожалуйста, Светлана. Желаю успехов!

      Reply
  5. dicson

    Замечательная статья!Ставлю 5+!

    У меня на сайте статьи по 1500—2500 слов, а ну найди нужный абзац — голову сломишь? А тут мышкой щелкнул по ссылке — и ты в нужном месте. Просто песня!

    А изложено как! Просто, доходчиво, все разложено по полочкам — ну прямо для таких как я («особо одаренных»). Уважаю таких учителей.

    Одним словом, спасибо, Сергей, за очень нужную статью.

    С уважением, Борис

    Reply
    1. admin Post author

      Борис, спасибо и Вам: после таких слов хочется писать больше и чаще.

      Reply
  6. Полина

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

    Извините, у вас здесь очепатка! небольшая -"якоря лучше вставить в текст не непосредственно перед началом Чекста- , а чуть...

    Reply

Оставить комментарий

Your email address will not be published. Required fields are marked *