Что такое якорь на сайте. Как сделать быстрый переход к нужной строке сайта.







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

Что такое якорь на сайте. Как сделать быстрый переход к нужной строке сайта.

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

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

Вот как будет выглядеть содержание этой статьи с якорями:

 

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

Очень просто. В режиме html (в админке вордпресс этот режим называется – Текст) нужно выбрать строку, которая будет перенаправлять на якорь. И окружить её тегами.

Фраза «Ваш текст», окружена нужными тэгами:

<a href="#giv"> Ваш текст </a>

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

"#giv"

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

И словосочетание естественно напишите своё.

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

<a id="giv"> Ваш текст </a>

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

Если же вы не хотите, чтобы фраза (это наш якорь) на которую будет перебрасывать первая ссылка, не  выглядела как URL, то окружите её тегами, например <h2>Ваша фраза</h2> (эти теги создают заголовок из простого шрифта).

А если окружаете фразу этими тэгами, то можете  просто добавить в теги

id="giv"

вот как это будет выглядеть:

<h2 id="giv"> Ваш текст </h2>

Вместо тега — а для якоря, вы можете использовать теги —  div,p. А вместо id, слово — name. То есть

<div name=”giv”>Ваш текст </div>

или

<p name=”giv”>Ваш текст</p>

 

И ещё маленький секрет, когда посетитель переходит на якорь, то фраза-якорь убегает наверх монитора, да так, что её не видно. Ролик видно наполовину и картинку тоже.

Так вот, чтобы этого не происходило, вы можете схитрить. И написать код якоря вообще без текста, и разместить код немного выше фразы, ролика или картинки. Для этого есть 4 варианта написания:

  • <a name="якорь"></a>
  • <a id="якорь"></a>
  • <div id="якорь"></div>
  • <p id="якорь"></p>

 

Сделать якорь можно не только на фразу, но и на картинку и на видеоролик.  Для этого точно так же окружаем код картинки или видеоролика кодом

<a id="якорь"> код видео или изображения</a>

Или любым из 6-ти предыдущих кодов.
 

Как сделать якорь на другую страницу сайта.

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

Чтобы было понятнее, использую якорь, который писала до этого http://ccылка на статью/#giv

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

И лучше сделать так, чтобы она открывалась в новом окне.

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

Если вы хотите поделиться в соцсетях на статью с якорем, то формировать ссылку нужно так же, как написано выше. То есть поставить в конце ссылки /#якорь.

 

Как сделать якорь на сайте с помощью плагина wordpress.

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

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

Иначе, пока вы не запомните коды, вам придётся «скакать» и смотреть их.

Итак, установили и активировали плагин AddQuicktag, теперь на странице с плагинами,  нажимаем Настройки.

Как настроить плагин для вставки шроткодов AddQuicktag

 

И добавляем:

  • 1 – Название будущей кнопки (вы можете поставить любое)
  • 2 – Начало кода для начальной фразы, кликнув на которую посетитель перескакивает на якорь
  • 3 – Конец кода (хотя это делать не обязательно, потому что для закрытия тега, есть кнопка в вордпресс админке)
  • 4 – проставляем галочки, для того чтобы указать, где будет применяться этот код
  • 5 – жмём сохранить

 

Настройка плагина AddQuicktag

 

А теперь идём в админ панель, в раздел редактирования статей. Переходим там в режим HTML (Текст). И добавляем код для якоря.

  • Для этого ставим курсор в начало фразы — цифра 1 на скриншоте
  • Нажимаем на кнопку – цифра 2 ( у меня она называется Якорь 1).
  • Когда появится код, вставляем символы для якоря после знака #
  • Ставим курсор в конец фразы и нажимаем либо ещё раз на кнопку Якорь1,  либо на кнопку — Закрыть код (она есть на всех панелях вордпресс редактора статей по умолчанию)






Настройка плагина AddQuicktag

 

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

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

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

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

  • Первый способ получить ссылку с привязкой ко времени

Это можно сделать прямо на ЮТубе. Или на любом сайте, если там стоит ролик с видеохостинга YouTube.

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

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

После этого появится ссылка на привязанное ко времени видео. Копируйте URL и отправляйте, туда, куда хотели. Выглядеть ссылка будет примерно вот так http://youtu.be/EgjfrkEnFxA?t=11m56s

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

А если ролик идёт несколько часов, такое тоже бывает. А вы хотите, чтобы знакомый перешёл сразу же в видео на нужный момент через 2 часа, 30 минут и 23 секунды. Тогда вам после ссылки нужно разместить вот такой код  — t=02h30m23s

 

  • Второй способ как получить ссылку на ролик с привязкой ко времени

 

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

Спускаемся под видео. Жмём на слово – Поделиться. И как только видео дойдёт до нужного времени, сразу же ставим галочку рядом со словом – Начало. В окошечке рядом мы видим как меняется время. А выше всего этого вы можете скопировать ссылку, с привязкой ко времени.

 

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

А здесь ссылочка уже выглядит по-другому, вот так http://www.youtube.com/watch?v=EgjfrkEnFxA#t=721

В этому случае сервис показывает время в секундах.

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

Вы можете прочитать другие  статьи,
для этого воспользуйтесь Картой сайта.
А также получать новые статьи прямо на Ваш почтовый ящик.
Введите свой E-mаil:

 


С Уважением, Татьяна Чиронова   






  

Сохраните пост к себе на стенку в соцсети



 


А здесь можно публиковать анонсы постов по теме:  


 










На ту же тему
Обсуждение: 8 комментариев
  1. Андрей:

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

  2. На DLE не работает, пробовал много вариантов.

  3. С недавних пор озадачился «якорями». Наше более доходчивое обьяснение у вас. Спасибо. беру в закладки.

  4. Как всегда, сверх полезно и сверх понятно. Спасибо, Татьяна. Люблю узнавать из ваших статей любопытные фишечки. Успехов вам!

Поделитесь своим мнением
Для оформления сообщений Вы можете использовать следующие тэги:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Свежие записи
Как снизить нагрузку на CPU хостинга cайта вордпресс
Как снизить нагрузку на CPU хостинга cайта вордпресс
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Создание gif анимации онлайн без фотошопа. Фоторедактор PicMix.
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Как настроить YouTube для удобного просмотра видео и отключить рекламу. Плагин для хрома Magic Actions for YouTube™
Free Traffic Club — бесплатная реклама в Фейсбук
Free Traffic Club — бесплатная реклама в Фейсбук
Как правильно установить Savefrom net для Google Chrome
Как правильно установить Savefrom net для Google Chrome
≡ 

Дешевый хостинг

Внимание!

Скопируйте промокод 2d7124-10

со скидкой 10% и реф. бонусом 10%

Интернет технологии для вас © 2017 ·   Войти Наверх