Главная » Wordpress » Якорь на сайте: что это такое, зачем нужно и как сделать?
Якоря на сайте. как сделать

Якорь на сайте: что это такое, зачем нужно и как сделать?

Здравствуйте уважаемые читатели блога history-of-blog.ru. Немногим известно, что на страницу сайта можно поставить якоря, а тех, кто пользуется ими еще меньше. Однако использование якорей на сайте в некоторых случаях является очень удобной функцией – она помогает сразу находить нужную информацию и экономить время. Но давайте обо всем по порядку.Якоря на сайте. как сделать

Вот один из примеров использования якорей:

Позднее я опубликовал еще одну очень важную статью:

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

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

Что такое якорь на сайте.

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

Самый распространенный пример якоря на сайте – это тег more (читать далее), который используется практически в каждом шаблоне WordPress. Кликая по ссылке “читать далее” перед посетителем открывается статья не с самого начала, а на том моменте где он закончил чтение.

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

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

Например:
Посетителю стало интересно мнение Руслана Ахматьянова по поводу вопроса: “Что важнее для сайта? Посещаемость, пузомерки, траст или какой-либо другой параметр?”. Самым удобным вариантом ответить на этот вопрос является предоставить посетителю следующую ссылку. Согласитесь, предоставить человеку такую ссылку гораздо удобнее, ведь в таком случае ему не придется искать этот вопрос в интервью. Может быть это не самый лучший пример, но чтобы понять суть якорей вполне сгодится.

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

Практически ни одна страница FAQ (правила) уважающего себя сервиса не обходится без якорей. Зайдите в свой аккаунт GoGetLinks и посмотрите как устроена у них эта страница:

правила

Кликая по интересующему нас вопросу – сразу под ним “выезжает” ответ, а в строке браузера добавляется небольшая приписка к странице # и целое число:ответ

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

Как сделать якоря на странице с записью.

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

1. Делаем якорь на странице сайта:

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

Нет проблем! Открываем статью в Html-редакторе:html-редактор

и ищем заголовок H3 “Зачем нужны якоря и в каких случаях их использовать.“:заголовок h3

Затем в месте где открывается заголовок (<h3>) приписываем через пробел id=”2″, где вместо двойки можно использовать любое целое число или символы. Таким образом наша строчка в html будет выглядеть вот так:id2

Вместо заголовка h3 может использоваться любой тег: новый абзац (<p>), выделение жирным (<strong> или <b>) и так далее. Таким образом мы может “закинуть якорь” куда угодно.

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

Теперь подбираем анкор ссылки, который будет вести на якорь. В моем примере это элемент списка в начале статьи: “Зачем нужны якоря и в каких случаях их использовать”.

Так же открываем статью в HTML-редакторе и ищем эти строки:Элемент списка

Делаем из нашего анкора ссылку следующего вида:ссылка на якорьПеред анкором добавляем:

<a href="#2">

А после закрываем эту ссылку:

</a>
Обратите внимание на двойку – это число мы указывали в предыдущем шаге, оно должно совпадать.

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

Это самый простой метод вставки якорей на сайт без дополнительных “украшательств”. В заключении поста вот такая картинка в тему, которая отражает смысл данной статьи:Якоря и ссылки в этом посте

Комментировать через ВКонтакте:
Отзывов к посту "Якорь на сайте: что это такое, зачем нужно и как сделать?" уже 56:
  • Вадим | 22.07.2012 в 12:57

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

    • admin | 22.07.2012 в 17:34

      Не так уж и много времени тратится – столько-ко же, сколько и сделать ссылку в посте (секунд 10-15). К тому же якоря имеет смысл применять если пост разбит на несколько подтем и из-за этого получается очень большим, а таких постов обычно мало

  • Евгений | 22.07.2012 в 17:28

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

  • Лариса | 22.07.2012 в 19:03

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

    Антон, спасибо большое за помощь в корректировке шаблона! :idea:

    • admin | 22.07.2012 в 21:59

      Ларис, да не за что. Можно еще там доработать что нужно – если что моя почта у тебя есть

  • Дмитрий | 22.07.2012 в 20:36

    Прямо угадал мои мысли, Антон!
    Как раз заморочился вчера на эту тему. Беру пост в ЕверНот – как мануал.
    Спасибо.

  • Я когда прочла тему, подумала о якорях тех, что в психологии, думаю как Вы это реализуете на сайте)
    У меня пока нет надобности, но на заметку беру, вдруг начну писать большие и интересные статьи)

  • Алёна Семёнова | 23.07.2012 в 21:20

    Я пишу маленькие посты и мне пока этот якорь не нужен, но кто знает…может и воспользуюсь :|

  • Николай | 24.07.2012 в 21:26

    Полезная вещь, со временем нужно будет озадачиться.

  • Денис Черников | 26.07.2012 в 12:57

    Давно, хотел кинуть пару якорей в своей гавани, но что-то лень было.
    Сейчас, прочитал Вашу статью и думаю, что всё таки нужно применять такие ссылки. Получается, та-же перелинковка!
    Благодарю! :razz:

  • Дима | 22.10.2012 в 22:19

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

  • Николай | 08.11.2012 в 4:26

    Большое спасибо! Начал искать как сделать эти самые якоря. Вначале попал на 2 статьи, в которых было не очень понятно описан процесс. В Вашей для меня всё понятно :) Сделал якоря у себя в длинной статье.

    • admin | 08.11.2012 в 11:53

      Очень рад что понятно объяснено, старался именно так и сделать :)

  • Timkin | 22.12.2012 в 0:30

    Молодец все написал просто и главное оформлено со вкусом ;-)

  • Степан. | 22.12.2012 в 18:20

    Добрый день.Можно якорями и поисковых роботов немного приучить,в конце статьи делаем Вывод:бросаем якорёк,в статье делаем пару ссылок на Вывод:зто работает для Яндекс-паука.

  • Лариса | 18.01.2013 в 14:15

    Антон, а если этот якорь нужен на другой странице, как прописать ссылку? Я после адреса страницы в кавычках так и эдак #1 ставлю – не получается.

    • admin | 18.01.2013 в 23:47

      так же и прописать, а ссылку просто на другой странице вставить. http://ссылка_на_статью/#1 – ведет на якорь где он прописан, и не важно где прописывать эту ссылку – в этой же статье или в другой, на другом сайте или просто в блокноте, главное чтобы в той статье был якорь

      • Лариса | 19.01.2013 в 12:28

        Все получилось, спасибо!!! :shock:

  • Лариса | 28.01.2013 в 14:32

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

    • admin | 28.01.2013 в 15:53

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

      • Лариса | 02.02.2013 в 23:12

        Ладно, я вернула мой поиск, встроенный. А то этот тип по две недели не бывает, чего ж он найдет-то :sad:

  • Сергей | 30.01.2013 в 17:17

    Скажите, а можно задать для якоря определенные позиции? Ну чтобы при нажатии якорь получал top и bottom?… Просто у меня ссылка на якорь и сам якорь в видимой части экрана, а мне надо чтобы якорь подымался под самый верх!

    • admin | 30.01.2013 в 17:51

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

  • Спасибо, Антон! Очень пригодилась твоя статья. Через поиск пришел… Смотрю, знакомый блог – вдвойне был рад ;-)

    • admin | 05.02.2013 в 13:14

      Хех)) Рад был полезен Влад :|

  • Елена Олейникова | 23.02.2013 в 9:56

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

  • Anna | 03.03.2013 в 20:15

    Мне как раз пригодится якорная ссылка, я о ней уже где-то читала, но в то время меня это как-то не особо интересовало. А сейчас понимаю, что на моем сайте такие ссылки будут очень даже полезными в своей удобности :smile:

    • admin | 03.03.2013 в 21:55

      Удобное применение им можно найти на любом сайте, особенно если какие-нибудь инструкции есть

  • Dzhuliann | 06.03.2013 в 8:19

    Отличная статья. Очень выручила!

  • Сергей | 04.04.2013 в 14:04

    Огромное спасибо за предельно простое объяснение! Очень помогло.

  • aleksmens | 11.04.2013 в 18:10

    Просто огромнейшее спасибо автору блога. Статья очень помогла, желаю удачи автору блога!! ;-)

  • Александр | 16.04.2013 в 13:33

    Существует ли плагин для вставки якорей на сайт разработанный на движке wordpress?

  • Елена | 07.05.2013 в 10:57

    Спасибо, Антон, за подробное и понятное объяснение. Благодаря Вашей статье, настроила у себя якоря внутри статей и между статьями. Очень удобно для посетителя. :razz:

  • Елена Олейникова | 08.05.2013 в 8:01

    Якоря мне очень нравятся, вот только вопрос – а как много их можно ставить на странице? Не получится ли так, что я набросаю этих якорей, а потом моё судно (блог) ко дну пойдет, как ПСы к этим якорям относятся?

    • admin | 08.05.2013 в 9:50

      Якорей можно создать сколько угодно. По-умолчанию в стандартной сборке wordpress уже есть например такие #more (читать далее) или #comment (перейти к комментариям) – и блоги на WordPress не идут ко дну, хотя может показаться, что создано уже 3 страницы с одинаковым контентом. Конечно, я не даю 100% гарантию, но и без всего поисковики определяют каноническую страницу (ту, которую следует включать в индекс, без дописок). Для перестраховки можно дополнительно указать канонический url (есть в All in one seo pack) – как точно работает в этом плагине данная функция не разбирался. + возможно сможет помочь файл robots.txt.
      Вообще глупости все это, множество сайтов используют якоря, имеют топовые позиции и большой трафик – это ли не доказательство. А если размышлять пойдет ли блог “ко дну” после какого-либо действия, то вообще заводить сайт страшно, ибо в каждом действии люди найдут “негативный” отклик.

  • Елена Олейникова | 08.05.2013 в 11:24

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

  • Анастасия | 22.05.2013 в 11:23

    Антон, подскажите, пожалуйста, в чем может быть ошибка? Вроде бы все сделала по указанному алгоритму.
    Вот страница, на которой необходимо сделать якоря http://www.n-west.ru/razvitie-maloy-aviatsii/

    • admin | 22.05.2013 в 12:37

      Там везде стоят двойные кавычки. Например h3 id=””02″”. Должно же быть вот так: h3 id=”02″ – и все будет работать. Просто уберите лишние и все будет отлично :|

  • Илья | 23.06.2013 в 23:21

    Здравствуйте!
    А как можно сделать с помощью якоря подобное как здесь peshkovmaksim.ru,
    чтоб в меню навигации при нажатии переходило на этой же странице на нужное место

    • admin | 24.06.2013 в 0:51

      Схема этих якорей точно такая же. Только меню закреплено наверху + думаю 2 js функции (в javascripte я не силен) – первая для того, чтобы меню не сразу прилипало кверху, а лишь после определенной прокрутки. Вторая небольшая функция для плавной прокрутки, принцип действия такой же как у кнопочки наверх. Все это работает при помощи библиотеки jquery. Думаю, процесс утроен именно так.

  • Илья | 24.06.2013 в 11:52

    Спасибо. Конечно лучше когда плавно, но для начала попробую сделать как у вас написано

    • Виктор | 09.01.2015 в 19:08

      Прикольная штука, интересно а тег море по такому же принципу работает?

      • admin | 10.01.2015 в 0:29

        И ссылка на количество комментариев (довольно часто используется) точно по такому же принципу

  • Antonina | 01.12.2013 в 16:40

    Спасибо большое! Сначала питалась установить якорь у себя в статье, пользуясь другой статьей, но у меня ничего не получилось. Пришлось искать альтернативу. Ею и стала Ваша статья. И здесь оказалось все легко и понятно. За 2 минуты сделала то, что было мне нужно.

  • Стас | 25.12.2013 в 23:21

    Добрый вечер.

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

  • Кирилл | 04.01.2014 в 6:30

    Большое спасибо! А то пищу большую стать на 5000 знаков и без якоря не обойтись. Т.к. половине вся информация нужна не всем пользователям а так пользователь быстро перейдёт на нужный обзац. :shock:

  • Pasagir | 20.01.2014 в 12:57

    Благодарю! Очень помогла статья!
    Оказалось все так просто.. :razz:

  • Прохор | 04.02.2014 в 21:06

    Спасибо. Полезная статья!

  • David | 23.02.2014 в 14:01

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

  • David | 23.02.2014 в 14:51

    Всё, разобрался :) Можно просто выше нужного заголовка вставить якорь:

  • Сергей | 03.12.2014 в 10:03

    Нашёл, прочитал, применю! Я сначала в поиске набирал “тег #” и “тег решётка” потому как знал как выглядит, а как называется долго не мог вспомнить.

  • Елена | 15.07.2016 в 16:19

    Спасибо! Никак не получалось раньше сделать, а тут с первого раза все заработало. Только как сделать якорь так, чтобы учитывалась высота липкого меню, которое как раз верхнюю часть текста закрывает?

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: