HTML ссылка – или как «бросить якорь» в нужном месте…

html ссылкаHTML ссылка имеет два формата.  Первый – это перенаправление на нужный  пост. Этот  формат известен всем.

Второй формат – перенаправление в определенную  точку  страницы. Такая ссылка называется – якорной.

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

Содержание
Создание ссылки “вручную”
Перенаправление в рамках одного поста
Перенаправление посетителя в рамках блога
Видео
Создание ссылки с помощью плагина

Необходимость создания якорной ссылки

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

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

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

2. Отправка читателя  к определенному месту на другой странице.

Здесь совсем просто. Вам, например, необходимо отправить посетителя к конкретному месту прайс листа, который опубликован на другой странице. Нет ничего проще. Вы применяете ссылку  – идентификатор или, как ее еще называют – якорную.
Разобрались . Теперь давайте приступим к практике.

Создание ссылки “вручную”

Случай 1. Перенаправление  в рамках одного поста.

1.1  Заходим в редакцию поста  и находим нужную точку, то место куда должен попасть читатель.

1.2   Устанавливаем «якорь». Его  можно обозначить просто цифрой или буквами латиницы. Но вы должны понимать, что на блоге не могут быть два одинаковых идентификатора. Выглядеть   это  будет так:

<a name=”1”></a>

1.3   Теперь создаем ссылку в том месте, откуда будет направлен посетитель на идентификатор. Соответственно ищем текст для релевантного  анкора. И заключаем его в ссылку такого вида:

<a href=”#1”>АНКОР </a>

Теперь давайте проверим. Я создала такую ссылку на пункт 1 моей статьи.

Случай 2. Перенаправление  посетителя  в рамках блога.

2.1 Устанавливаем  «якорь».  Принцип тот же. Только не забудьте поменять идентификатор.

<a name=”2”></a>

2.2  Публикуем пост  с идентификатором и копируем ссылку на эту страницу.

2.3 Создаем ссылку. Выбираем релевантный  текст для анкора и заключаем его в ссылку следующего вида

<a href=”адрес_страницы#2”>АНКОР</a>

Вот  такую ссылку я сделала на страницу  «Правильно создаем анкор ссылки» п.1

А теперь давайте посмотрим короткое видео по этому вопросу

Создание якорной ссылки с помощью плагина

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

Сейчас не будем разбирать подробности этого плагина – настройки очень понятны. Нас, на данный момент, интересует настройка Якорной ссылки.

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

html ссылка 1

Сохраняем изменения. Теперь в редакторе и записей и страниц у нас появилась дополнительная опция – Якорная ссылка.

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

  1. Поднимаюсь в начало статьи, пишу слово “Содержание”

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

  2. Теперь начинаю работать с каждым из перечисленных пунктов в статье

    Выделяю заголовок и кликаю на “флажок”
    html ссылка 3Появляется всплывающее окно. Ввожу в него идентификатор. Он может быть любой. Самое главное, что бы не он больше не повторялся.html ссылка 4
    Кликаю “ok” и получаю рядом с заголовком значок, что якорь установился.html ссылка 5Проделываю эту процедуру со всем списком

  3. Объединяем якорную ссылку содержания с заголовком внутри статьи

    Для этого, выделяю соответствующую фразу в содержании  ажимаю на значок “ссылка”. То есть выполняю самое обычное действие – создаю ссылку.
    Вот только в поле ссылки пишу тот идентификатор, который у меня обозначен на соответствующем заголовке. В данном случае h1.
    НО! Перед ним обязательно надо поставить значок # “решетка”.
    Нажимаем клавишу – Enter. Все! Работа закончена.
    То же самое делаем с остальным содержанием статьи.html ссылка 6Все очень просто! только будьте внимательны! Не перепутайте идентификаторы!

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

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

Смирнова Ирина

Это тоже может быть вам интересно...

Комментарии 4

  • В очередной раз обратилась к этой статье. На эту тему не написал только ленивый, но здесь все четко и ясно! Еще раз благодарю:) Не сайт – а палочка-выручалочка!!!

  • В результате все оказалось не так и просто, так как нужно внимательно следить за количеством кавычек в теге. Но в итоге все получилось! Дополнительно важно не забыть сделать дополнительное действие, используя стандартную функцию редактора WP, чтобы ссылка открывалась в новом окне и посетитель имел возможность вернуться к исходному материалу. Благодарю, Ирина! Видео очень помогло!

  • Оказывается, так это просто! А вещь-то очень и очень полезная! Я точно буду пользоваться, так как это может очень облегчить “жизнь” читателю! Благодарю, Ирина!

Добавить комментарий