WordPress якорные ссылки – Зачем нужны якорные ссылки, якорь на странице, как перейти в конец страницы, как перейти в начало страницы, как сделать якорь html

Якорь wordpress способы его установки на страницах блога

302

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

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

Как сделать якорь wordpress и какие для этого есть инструменты.

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

Есть 3 наиболее простых и доступных варианта для решения данной задачи.

Поставить якорь в wordpress с помощью html-кода.

Конечно есть и другие возможности (php, framework, javascript), но это можно оставить любителям тестировать и программировать.

Проверить работу таких якорей можно покликав по каждой ссылке в начале поста.
А теперь по порядку.

Как поставить якорь в wordpress с помощью html-кода.

Делается это в режиме html-кода любого редактора которым вы пользуетесь в своем движке wordpress. Допустим что у меня есть заголовок третьего уровня <h4>Заголовок третьего уровня</h4> и для быстрого доступа к этому заголовку, мне необходимо поставить якорь вначале статьи.

Для этого, к данному заголовку нужно добавить пустую ссылку-якорь и придумать для нее идентификатор (id).
Например <a id=»integer»></a>, и этот id необходимо подставить в начале заголовка <h4><a id=»integer»></a>Заголовок третьего уровня</h4>

Следующий шаг — это создать ссылку на это самый id. В моем примере,

Якорь wordpress можно поставить в любом месте страницы и навигацию по этим якорям можно сделать с прокруткой в любое место статьи.

Как поставить якорь в wordpress с помощью плагина Better Anchor Links

Плюсы и минусы этого варианта.

+ автоматическое создание якоря в тегах h2-h6 и содержания в начале страницы
+ базовые и собственные css-стили якорей
+ собственный виджет
+ создание собственного заголовка
+ «вернуться к содержанию» рядом с заголовком (ссылка при необходимости).

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

— давно не обновляется

Скачать плагин можно на сайте wordpress Better Anchor Links

Якорь wordpress с помощью визуального редактора TinyMCE Advanced

И третий, на мой взгляд, самый практичный — это установить редактор TinyMCE Advanced, который способен решить множество задач не только с контентом и его форматированием, но и с якорями в том числе.

Вопрос установки пропустим и сразу взглянем на внешний вид настроек данного редактора.

Главные особенности редактора

Во-первых, сам редактор с более широким функционалом (15 дополнительных кнопок) чем редактор установленный по умолчанию в wordpress.
Во-вторых, настройка функционала происходит путем перетаскивания нужных кнопок в рабочую поверхность.
В-третьих, всегда актуальная версия

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

Якорь wordpress создается путем перетаскивания кнопки-якоря в нужное место на странице, а затем просто делается ссылка на этот якорь с указанием id. Название id можно придумывать какое угодно.

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

Важно чтобы для каждого якоря должен быть разный id.

Для лучшей наглядности я записал видео по работе с анкорными ссылками wordpress.

Навигация по статье: Якорные ссылки в WordPress

Привет, дорогие друзья! В предыдущем посте я показал разные способы создания удобной навигации в статье для посетителей вашего сайта. Но, так как, есть ещё один способ, я с вашего разрешения продолжу — Навигация по статье. Как создать якорные ссылки в WordPress? Сегодня я расскажу вам: как сделать якорь ссылку и как сделать ссылку на якорь с помощью плагина TinyMCE Advanced.

Содержание статьи WordPress

Кто не в курсе для чего нужен данный плагин читайте пожалуйста, здесь. Я повторю на всякий случай, что плагин TinyMCE Advanced позволит вам добавить, удалить и упорядочить кнопки, которые отображаются на панели инструментов визуального редактора WordPress. Одним словом, нам нужна кнопка Якорь в редакторе сообщений.

Навигация по статье

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

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

Плагин TinyMCE Advanced

Установите и активируйте модуль, через загрузчик в админпанели, а затем перейдите: Настройки — TinyMCE Advanced. Здесь, нам нужно всего лишь добавить кнопку Якорь в наш редактор, делается это путём перетаскивания, с помощью мышки, нажал и переместил на панель инструментов. Раз и два, готово. Кнопка Якорь пришвартовалась:

Кнопка Якорь

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

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

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

Установить курсор и нажать кнопку Якорь

Откроется окошко, где нам нужно присвоить якорю уникальный id (идентификатор), можно использовать цифры или буквы, а можно то и другое вместе:

Идентификатор для якоря

Нажимаем, ок и у нас перед заголовком появится иконка с настоящим якорем:

Иконка якоря перед заголовком

А если мы перейдем во вкладку Текст, то мы увидим наш заголовок с присвоенным идентификатором b1:

Якорь закинут

Хорошо, якорь мы забросили, следующий шаг, это создать ссылку на него.

Навигация в статье. Как сделать ссылку на якорь

Сделать это можно следующим способом, составьте меню к статье, то есть, содержание (обычно в самом начале сообщения), текст может быть любой. Например:

Содержание статьи

Выделите нужный текст мышкой и нажмите на кнопку Вставить/изменить ссылку (как обычно делаете при вставке ссылки) и в поле URL вставляете знак решётки # и наш id якоря  — b1. Получится ссылка на установленный якорь:

Делаем ссылку на якорь

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

В заключение

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

Очень надеюсь, что мой пост вам пригодится. Удачи и до новых встреч, дамы и господа.

Создем html якорь (оглавление) в WordPress, плагин Better Anchor Links

<a></a> Обычный текст на странице.

<a></a> Обычный текст на странице.

Затем в другом месте документа вы просто создаете линк с этим якорем:

<a href="#first">ссылка на якорь</a>

<a href=»#first»>ссылка на якорь</a>

При клике пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылки Читать далее добавляется якорь #more — при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.

Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант — для него потребуется плагин TinyMCE Advanced. В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.

После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.

После создания увидите соответствующую картинку перед текстом — значит, html якорь создан. Дальше вам нужно создать ссылку на якорь (похоже на работу с картинками но проще).

В текстовом редакторе TinyMCE Advanced при добавлении линка вы увидите всплывающее окно, где в пункте Anchors в выпадающем списке можете выбрать один из якорей. После этого его название (#yakor) будет поставлено в поле URL.

Что там и как работает в базовом редакторе, к сожалению, уже не помню — ориентируйтесь на теорию относительно html якорей, что я изложил в начале статьи.  А еще лучше поставьте себе TinyMCE Advanced:)

Better Anchor Links

Напоследок хотелось бы рассказать еще об одном плагине — Better Anchor Links. Основная его задача — это создание якорей из заголовков страницы и автоматическое их расположение в начале статьи или других местах. По сути, это инструмент для создания оглавления, похожий на тот, что есть в word. Вот как это приблизительно выглядит на сайте.

У Better Anchor Links есть несколько полезных настроек. Тут можно найти заголовок для оглавления,  автоопределение оглавления по H тегам, подключение своих CSS стилей и многое другое.

Список основных функций Better Anchor Links:

• Автоматическое создание якорей из H тегов в тексте статьи.
• Возможно отключить базовые CSS стили плагина для задания своих.
• Имеется специальный виджет.
• Можно указать свой заголовок для оглавления.
• Можно выбрать список ссылок с цифрами или без.
• Поддержка локализации qTranslate/mqTranslate.
• Если требуется, есть ссылка возвращения к оглавлению.

В официальном репозитории вордпресс на странице FAQ описания плагина имеется парочка советов (кодов) как выводить оглавление не в тексте статьи. То есть вы, например, можете разместить список ссылок на якоря в сайдбаре (с помощью виджета или PHP).

Нужно ли использовать Better Anchor Links? Это вопрос из области «излишней функциональности» — если у вас из 100 записей на сайте только 1-2 требуют оглавления, то, конечно, все это проще сделать вручную. Если же оглавления для постов блога/сайта создаются часто и весьма органично смотрятся в дизайне блога, то модуль пригодится. К тому же Better Anchor Links позволяет выводить оглавление не только в статье, а и в сайдбаре — это можно использовать интересным образом.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Место которое будет ссылаться на нужный нам текст. Для того что бы создать ссылку-якорь нужно заключить слово или фразу в тег <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 файла это может быть просто блокнот.

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

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

Как сделать содержание с якорными ссылками в статье 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>

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

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

***

***

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

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

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

***

***

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

***

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

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

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

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

Апдейт

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

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

Апдейт 2

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

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

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

Как сделать html якорь в WordPress, плагин Better Anchor Links « Темы для WordPress

Для одной достаточно большой статьи блога про разные дизайнерские курсы фотошопа мне потребовалось создать в начале текста что-то вроде оглавления. Я использовал при этом классический механизм html якорей (anchor), которые размещаются в определенных местах текста, а потом на них легко можно ссылаться. В данной заметке я расскажу о том как создать html якорь, что он из себя представляет и как можно автоматизировать процесс с помощью модуля Better Anchor Links. Итак, поехали.

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

 Обычный текст на странице.

Затем в другом месте документа вы просто создаете линк с этим якорем:

ссылка на якорь

При клике на такую ссылку пользователь будет перемещен на созданный вами якорь. Кстати, в системе WordPress по умолчанию в ссылкиЧитать далее добавляется якорь #more – при клике по ним вы попадаете на страницу с постом не в начало, а в место после якоря #more.

Исходя из вышесказанного вы наверняка поняли, что для создания html якоря в WordPress вам нужно будет перейти в HTML редактор текста. Однако я предлагаю куда более наглядный вариант – для него потребуется плагин TinyMCE Advanced. В настройках модуля первым делом добавляем кнопочку инструмента Anchor в панель редактора.

После этого при написании нового поста в блоге у вас появится кнопка создания html якоря. Вы просто размещаете курсор в том месте текста, где нужно добавить якорь и кликаете по ней. Во всплывающем окне указываете название (id) анкора. Лучше, думаю, указать имя английскими буквами.

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

В текстовом редакторе TinyMCE Advanced при добавлении линка вы увидите всплывающее окно, где в пункте Anchors в выпадающем списке можете выбрать один из якорей. После этого его название (#yakor) будет поставлено в поле URL.

Что там и как работает в базовом редакторе, к сожалению, уже не помню – ориентируйтесь на теорию относительно html якорей, что я изложил в начале статьи.  А еще лучше поставьте себе TinyMCE Advanced:)

Better Anchor Links

Напоследок хотелось бы рассказать еще об одном плагине – Better Anchor Links. Основная его задача – это создание якорей из заголовков страницы и автоматическое их расположение в начале статьи или других местах. По сути, это инструмент для создания оглавления, похожий на тот, что есть в word. Вот как это приблизительно выглядит на сайте.

У Better Anchor Links есть несколько полезных настроек. Тут можно найти заголовок для оглавления,  автоопределение оглавления по H тегам, подключение своих CSS стилей и многое другое.

Список основных функций Better Anchor Links:

• Автоматическое создание якорей из H тегов в тексте статьи.
• Возможно отключить базовые CSS стили плагина для задания своих.
• Имеется специальный виджет.
• Можно указать свой заголовок для оглавления.
• Можно выбрать список ссылок с цифрами или без.
• Поддержка локализации qTranslate/mqTranslate.
• Если требуется, есть ссылка возвращения к оглавлению.

В официальном репозитории вордпресс на странице FAQ описания плагина имеется парочка советов (кодов) как выводить оглавление не в тексте статьи. То есть вы, например, можете разместить список ссылок на якоря в сайдбаре (с помощью виджета или PHP).

Нужно ли использовать Better Anchor Links? Это вопрос из области «излишней функциональности» – если у вас из 100 записей на сайте только 1-2 требуют оглавления, то, конечно, все это проще сделать вручную. Если же оглавления для постов блога/сайта создаются часто и весьма органично смотрятся в дизайне блога, то модуль пригодится. К тому же Better Anchor Links позволяет выводить оглавление не только в статье, а и в сайдбаре – это можно использовать интересным образом.

Как сделать ссылку якорь   Блог Игоря Черноморца

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

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

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

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

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

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

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

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

Содержание статьи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 h3>Что такое якорь</h3>

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

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

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

Примечание: возможно вставить якорь только при наличие в тексте каких-либо тегов, например: и так далее…

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

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

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

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

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

a href="#1"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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