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

Здравствуйте уважаемые посетители моего блога.

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

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

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

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

И так, больше не буду философствовать и размышлять, а приступлю сразу к делу.

[blok]В данном случае, мы будем создавать меню статьи в ручном режиме, прописывая разные коды и теги. Но если вы хотите упростить свою жизнь, то предлагаю почитать другую мою статью, в которой вы узнаете как сделать очень просто содержание статьи с помощью одного великолепного плагина.[/blok]

Кстати, вот один из примеров использования якорей.

И так поехали.

Что такое якорь

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

Например, обратите внимание на содержание этой статьи.

Первым пунктом в содержании, фигурирует предложение «Что такое якорь». Это предложение выглядит как ссылка, но она не ведёт на другую статью или сайт, а она ведёт на подзаголовок этой же статьи. Как я это сделал?

В подзаголовке я вставил якорь, то есть этот специальный HTML тег, а в предложении «Что такое якорь», который находится в содержании, я поставил ссылку на этот самый тег. И теперь, кликая на это предложение вы перенесётесь конкретно на подзаголовок статьи. Запутались? Ну не страшно. Читайте дальше и вам станет всё понятно!

Зачем нужны якоря и в каких случаях их нужно использовать

Так зачем же нужны эти якоря?

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

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

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

В каких случаях использовать якорь ссылку

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

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

Очень тяжело написать объёмную статью, в которой вся информация будет считаться качественной и уникальной.

Например, даже эта статья, которую вы читаете сейчас:

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

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

И так, хватит теории и прямо сейчас перейдём к практике.

Как установить якорь в статье с помощью HTML тегов

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

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

Для начала, нам нужно будет определиться в каком месте будет находиться наш якорь. В моём случае он будет находиться в подзаголовке «Что такое якорь».

Открываем нашу статью в текстовом редакторе и находим наш подзаголовок <h2> и через пробел вставляем наш этот тег – id=»1″ Получится так:

 h2 id="1" style="text-align: center;">Что такое якорь</h2>

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

Так это выглядит в визуальном редакторе:

А так это выглядит в текстовом редакторе:

[blok]Примечание: возможно вставить якорь только при наличие в тексте каких-либо тегов, например: <p> <li> <br> <strong> и так далее…

Если же вы хотите поставить якорь в слове, перед которым нет таких тегов, то вам в любом случае придется их добавить. Например, вы можете сделать это слово под наклоном (<em>) или жирным шрифтом (<strong>) и только тогда можете спокойно забрасывать свой якорь в него.[/blok]

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

Как установить ссылку на якорь с помощью HTML тегов

Для начала, нам нужно определить какое словосочетание будет ссылкой.  В моём случае ссылкой будет первый пункт в содержании статьи, то есть «Что такое якорь».

И опять же открываем нашу статью в текстовом редакторе и находим наш первый пункт в содержании статьи <em> и рядом с ним добавляем ссылку на якорь, то есть так:

a href="#1"

и в конце предложения не забываем закрыть этот тег </a>. Получится так:

a href="#1">Что такое якорь.</a></em>

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

Так это выглядит в визуальном редакторе:

А так это выглядит в текстовом редакторе:

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

Как установить якорь и ссылку на него в статье с помощью плагина TinyMCE Advanced

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

[blok]Плагин TinyMSE Advanced предназначен для расширения визуального и текстового редактора в админке wordpress. Тем самым он предоставляет дополнительные возможности работы с текстом при написании новых статей.[/blok]

Честно говоря, я и сам воспользовался возможностями этого плагина для вставки якорей в статьях.

Те, кто сейчас будут доказывать, что не стоит устанавливать плагины из-за нагрузки на сервер, я не буду с ними спорить, а просто пошлю их…на две гениальные статьи, которые написал Александр Каратаев. Первая статья, про скорость загрузки сайта, а вторая статья про плагины и коды. Так что спорте с ним Лично я с ним согласен.

Итак, сразу к делу.

Скачиваем плагин здесь или находим его прямо в поиске новых плагинов в админ панели WordPress. Устанавливаем, активируем. Заходим в левом столбце в «Настройки», потом в плагин «TinyMCE Advanced».

После этого мы увидим настройки плагина и его внешний вид.

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

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

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

Нажмём на ярлык «якорь», который мы перенесли в прошлом пункте и перед вами появится окошко, в котором вы должны вписать его название. Помните, в начале я писал об уникальном идентификаторе? Так и здесь, пишем в этот раз цифру 2 или любое другое слово и жмём на OK.

После этих действий вы увидите значок якоря перед подзаголовком. Так это выглядит:

Отлично! И так, мы закинули якорь, а сейчас нужно будет сделать ссылку на него.

Идём к предложению, которое должно быть ссылкой. В моём случае это второй пункт в содержании статьи. Обозначаем его также, как и при вставке простой анкорной ссылки и жмём на уже известный ярлык «Вставить ссылку». Только сейчас у нас откроется немного другое окошко. Так оно выглядит:

Здесь в выпадающем меню рядом с пунктом «якоря», нам нужно будет выбрать наш якорь. Помните, я назвал его цифрой 2. И после этого в строке URL появится ссылка, которая выглядит так — #2. Кстати, именно такое будет окончание на якорных ссылках в браузере. После этого жмём на OK. Так это выглядит:

Вот и всё! Согласитесь со мной, что этот способ намного легче, чем прописывать всякие теги вручную.  Хотя каждому своё, так что делайте так, как вам будет угодно.

Как установить якорь ссылку на другую статью блога

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

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

Как это делается? Очень просто!

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

Как поставить в нужном месте якорь, объяснять заново не нужно. Поэтому ставим его в тексте с обзором на блогера, например цифру 5 ( id=»5″), а в другой статье, там где должна стоять ссылка на этот якорь, прописываем такой тег:
<ahref="адрес">статья про блогера</а>
Я знаю, что это выглядит непонятно и закручено, поэтому без всяких стеснений и неудобств, задавайте мне любые вопросы в комментариях!

Как установить якорь ссылку на другую статью блога с помощью плагина TinyMCE Advanced

Здесь всё намного проще. После того как установили якорь, открываете статью, в которой должна стоять ссылка на него, обозначаете слово или предложение, которое станет ссылкой и нажимаете на ярлык «вставить ссылку». В окошке, которое увидите, в поле URL вписываете ссылку на статью и в самом конце дописываете вручную #5

На этом всё! Я хочу повторить вам ещё раз. Если вам что-то было не совсем понятно, то обязательно обращайтесь ко мне с любыми вопросами в комментариях. Ох, и загрузил же я вас скриншотами и разными иероглифами виде HTML кодов и т.п

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

С уважением, Игорь Черноморец