Как сделать содержание для статьи на сайте

Искренне всех приветствую. Вчера сделал в этом посте содержание в виде ссылок на важные части поста, как буквально через несколько часов на почту получил 154 письма с вопросом КАК я это сделал. Мой саппорт не был к этому готов,  поэтому не смог всем ответить, и сегодня я принял решение не объяснять сто пятьдесят четыре раза, а написать один раз. Сделать содержание для статьи очень просто.

Зачем в статье делать содержание? — смотрите, вы написали большую (огромную статью-мануал), статью, которая имеет несколько логических частей и которая отвечает на несколько (десятков или сотен) разных вопросов, человек зашел на статью и сразу увидел о чем статья, увидел что он в ней найдет и какие он сможет получить ответы изучив статью. За секунду посетитель четко осознал о чем речь в статье. Он увидел план статьи!

Да, согласен, можно просто списком перечислить ключевые моменты, но для пользователя скролить вниз и выискивать нужный фрагмент текста иногда бывает неудобно. И читать портянку тоже не в радость. А ведь мы должны заботиться о наших посетителях, предоставлять им юзабилити на высшем уровне, поэтому будет просто замечательно, если каждый пункт в списке содержания будет ссылкой на нужный участок текста. Кроме этого, я краем уха слышал, что и поисковые системы любят такие структуры в тексте (ведь такие тексты определенно для людей. Но это утверждение останется загадкой.)

Уровень урока — легко. Только иногда лень это делать

[sc:adsense850 ]

Вся фишка заключается в создании так называемого якоря для ссылки в теле статьи и ссылкой на данный якорь. К примеру, к нужному заголовку мы прицепляем идентификатор (имя) (ID), а в начале статьи (в содержании) указываете ссылку на созданный идентификатор. Посетитель кликнул по нужному пункту в содержании и сразу увидел ту часть текста, которая ему интересна.

Инструкция

Содержание будем делать в самом конце перед публикацией поста. Сначала, как обычно, полностью пишем статью. Оформляем. Чтобы статья имела логику и структуру, используем теги H2-H6. После того, как написали статью, приступаем к созданию содержания.

Шаг первый

Для того чтобы каждый пункт в содержании был ссылкой на определенную часть статьи нужно переключить редактор в режим HTML и тегам заголовка (h2-h6) присвоить ID (идентификатор с именем. Имя может быть любое, но каждому следующему тегу уникальное). Т.е., например:

[php]

<h2 id="name1">Подзаголовок 1</h2>
<h3 id="name2">Подзаголовок 2</h3>

[/php]

где:

[php]

id="name1", id="name2" — это идентификаторы

[/php]

Шаг второй

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

[php]

<a href="#name1">Подзаголовок 1</a>
<a href="#name2">Подзаголовок 2</a>

[/php]

Вот так у меня выглядит содержание в предыдущем посте в WordPress редакторе в режиме HTML:

Вот так идентификаторы к частям текста:

[/toggle]

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

[php]

<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;">
<strong>Содержание статьи:</strong>
<ol>
<li><a href="…">…</a></li>
</ol>
</div>

[/php]

Если содержание нужно со вложенными пунктами (вложенным списком), то берите вот этот код:

[php]

<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;">
<strong>Содержание статьи:</strong>
<ol>
     <li><a href="…">…</a></li>
         <ul>
             <li><a href="…">…</a>
</ul>
</ol>
</div>

[/php]

Выглядит это так:

На сегодня все. Удачи!

P.S. Идентификаторы можете присваивать не только тегам H, но и любым другим! К примеру спискам (ul, ol) или просто нужному абзацу <p> Суть уловили?