Якорные ссылки или ссылки внутри статьи в wordpress

Здравствуйте, сегодня будем создавать с помощью HTML кода ссылки внутри записи wordpress.
Всё достаточно легко – для этого достаточно прописывать id для ссылки внутри записи и ссылаться на него.

Скачать исходники для статьи можно ниже

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

Будем создавать следующую запись/страницу:

—————————–
Меню:
1. Лучшие сайты о WordPress.
2. Лучшие сайты о HTML.
3. Лучшие сайты о PHP.

1. Лучшие сайты о WordPress.

Что такое WordPress ? | NassyCompit.online | Яндекс Дзен
Яндекс.Дзен
Wordpress WordPress — это самая популярная система управления контентом на планете. Более чем 35,2% веб-сайтов, работают на этой платформе. Да-более одного из четырех веб-сайтов, которые вы посещаете, вероятно, работает на WP. На данной платформе веб-сайты со всего мира работают с большей мощностью и производительностью, чем традиционные веб-сайты или большинство других систем CMS.

Вот рейтинг сайтов о WordPress:

Сайт 1
Сайт 2
Сайт 3
…

2. Лучшие сайты о HTML.

HTML (HyperText Markup Language) – язык разметки гипертекста – предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
…

3. Лучшие сайты о PHP.

PHP — один из лидирующих языков современной веб-разработки. Его отцом считается датский программист Расмус Лердорф, который в 1994 году создал набор скриптов на Perl — ту самую «персональную домашнюю страницу», которая легла в основу PHP. Со временем к работе над ним подключились разработчики со всего мира.

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
…

—————————–

Приступим к созданию данной странички/записи.

Из пунктов меню нужно создать ссылки с индивидуальным идентификатор (id), например вот так:

Меню:
<a href="#wordpress">1. Лучшие сайты о WordPress.</a>
<a href="#html">2. Лучшие сайты о HTML.</a>
<a href="#php">3. Лучшие сайты о PHP.</a>

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

Для этого, к нужному разделу необходимо добавить пустую ссылку-якорь с соответствующим идентификатором (id):

Запись будет выглядеть следующим образом:

Меню:
<a href="#wordpress">1. Лучшие сайты о WordPress.</a>
<a href="#html">2. Лучшие сайты о HTML.</a>
<a href="#php">3. Лучшие сайты о PHP.</a>

<a id="wordpress"></a>
1. Лучшие сайты о WordPress.

Вот рейтинг сайтов о WordPress:

Сайт 1
Сайт 2
Сайт 3
...

<a id="html"></a>
2. Лучшие сайты о HTML.

HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
...

<a id="php"></a>
3. Лучшие сайты о PHP.

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
...

Всё готово!

Но можно улучшить страницу, добавив ссылку на возврат к основному меню, отступы перед разделами (с помощью тега “nbsp;”, а также выравнивание по центру.

Тогда готовый вариант будет выглядеть следующим образом:

<a id="topmenu"></a>
&nbsp;
&nbsp;

Меню:
<a href="#wordpress">1. Лучшие сайты о WordPress.</a>
<a href="#html">2. Лучшие сайты о HTML.</a>
<a href="#php">3. Лучшие сайты о PHP.</a>

<a id="wordpress"></a>
&nbsp;
&nbsp;
&nbsp;
<p style="text-align: center;"><strong>1. Лучшие сайты о WordPress.</strong></p>

<a href="#topmenu"><p style="text-align: center;"><strong>Вернуться к меню.</strong></p></a>

Что такое WordPress ? | NassyCompit.online | Яндекс Дзен
Яндекс.Дзен
Wordpress WordPress — это самая популярная система управления контентом на планете. Более чем 35,2% веб-сайтов, работают на этой платформе. Да-более одного из четырех веб-сайтов, которые вы посещаете, вероятно, работает на WP. На данной платформе веб-сайты со всего мира работают с большей мощностью и производительностью, чем традиционные веб-сайты или большинство других систем CMS.

Вот рейтинг сайтов о WordPress:

Сайт 1
Сайт 2
Сайт 3
...

<a id="html"></a>
&nbsp;
&nbsp;
&nbsp;
<p style="text-align: center;"><strong>2. Лучшие сайты о HTML.</strong></p>

<a href="#topmenu"><p style="text-align: center;"><strong>Вернуться к меню.</strong></p></a>

HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц. Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками. HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
...


<a id="php"></a>
&nbsp;
&nbsp;
&nbsp;
<p style="text-align: center;"><strong>3. Лучшие сайты о PHP.</strong></p>

<a href="#topmenu"><p style="text-align: center;"><strong>Вернуться к меню.</strong></p></a>

PHP — один из лидирующих языков современной веб-разработки. Его отцом считается датский программист Расмус Лердорф, который в 1994 году создал набор скриптов на Perl — ту самую «персональную домашнюю страницу», которая легла в основу PHP. Со временем к работе над ним подключились разработчики со всего мира.

Вот рейтинг сайтов о HTML:

Сайт 1
Сайт 2
Сайт 3
...

Копируем вышеуказанный код. Заходим в админку wordpress. Создем новую запись/страничку (пункт “Записи”, подпункт “Добавить новую”), выбираем закладку “Текст” и вставляем скопированный код: