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

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

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

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

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

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

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

Инструкция

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

Шаг первый

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


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

где:


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

Шаг второй

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


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

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

Смотреть

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

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

Как сделать оглавление для статьи

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


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

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


<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>

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

Kak sdelat' soderjanie dlya stat'i na saite

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

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

    ADD YOUR COMMENT