Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка

Добрый день, уважаемые читатели!

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

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

содержание

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

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

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

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

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

А вот и обещанный текстовый вариант со всеми исходными данными, который показывал выше.

Реализация данной функции проста до невозможности. Нам потребуется 2 ссылки:

  1. Первая для самой ссылки;
  2. Вторая для якоря, который будет определять место, куда нужно переместиться при нажатии на первую.

Теперь стало понятно, что первую ссылку мы ставим на ту фразу, при нажатии на которую будет происходить перемещение в нужное место статьи. А вторую - в место, куда нужно переместиться.

Ниже даю вам 2 ссылки, которые необходимо прописывать в HTML режиме.

В обеих ссылках имеется идентификатор, который связывает оба линка между собой. Если на одной странице нужно использовать не одну ссылку-якорь, то значения необходимо ставить новое для каждой связки. В примере выше значение стоит 1. Если мне необходимо сделать вторую ссылку, то можно поставить новое значение, например 2.

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

номера ссылок-якорей в содержании

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

Замечу, что во второй ссылке между тегами не обязательно прописывать какой-то текст. Я его не вписываю. Мне нужен просто якорь. Если же пропишите текст, то якорь будет отображаться ссылкой с текстом, который вы туда впишите.

Что касается движка WordPress, то необязательно проставлять первую ссылку в текстовом (html) редакторе. Я делаю проще.

  • Сначала пишу все пункты содержания;
  • Затем делаю их нумерованным списком;

нумерованный список

  • Далее просто делаю каждый пункт ссылкой стандартным функционалом и URL указываю в виде идентификаторов #1, #2, #3 и так далее;

поставить ссылку в редакторе WordPress

параметры ссылки

  • Потом перехожу в текстовый редактор и в нужные места вставляю якоря с соответствующими номерами ссылок.

якорь в тексте статьи

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

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

вернуться к содержанию

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

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

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

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

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

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

До скорой!

С уважением, Константин Хмелев!


Источник: http://kostyakhmelev.ru/poleznoe/ssyilka-yakor-kak-sdelat.html


Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка

Как сделать якорь ссылка