WordPress: Создать ссылку Anchor

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

В своей статье про генерацию бесплатного сертификата SSL я не стал описывать процесс его установки на хостинг nic.ru, а вместо этого оставил ссылку на одну из ранних статей. Там были расписаны подробные шаги. Проблема в том, что эти шаги были описаны ближе к концу статьи. Чтобы читателям было удобнее попасть сразу на нужный раздел, я решил добавить ссылку-якорь (anchor link). Встроенные инструменты WordPress позволяют вставить обычную ссылку. В визуальном редакторе присутствует возможность выбрать созданную ранее страницу своего сайта, но мне нужен был раздел страницы. Сделаем это вручную.
1. Для примера создам ближе к концу этой заметки новый раздел «Тестовый раздел»

<h1>Тестовый раздел</h1>
Вообще нам не обязательно, чтобы это был раздел (заголовок), главное, чтобы это была ссылка!

 

2. Создав заголовок, сделаем его ссылкой (создавать ссылку придётся не в визуальном редакторе, а в текстовом), при этом в качестве ссылки указываем не href, а id:

<a id="anchor_header">

Окончательный код заголовка будет таким:

<h1><a id="anchor_header">Тестовый раздел</a></h1>

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

<h1 id="anchor_header">Тестовый раздел</h1>

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

<a href="https://dentnt.trmw.ru/18320-wordpress-anchor-link/#anchor_header">название ссылки на нужный раздел</a>

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

Тестовый раздел

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



Подписаться
Уведомление о
guest
0 Комментарий
Inline Feedbacks
View all comments