Вы здесь: Главная > Создание сайта > Как сделать содержание (оглавление, меню) для статьи на сайте?

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

Опубликовано автором Просмотры: 236

Краткое содержание (оглавление) в статье с кликабельными ссылками-якорями – очень полезная плюшка, как для читателей, так и для владельца блога.

    Содержание

  1. Преимущества краткого содержания в статье
  2. Как сделать содержание статьи в блоге: код оглавления
  3. Как сделать красивое содержание статьи: прописываем стили

 

Такое меню в статьях вы, наверное, уже неоднократно встречали у меня на SEO Блоге Лентяйки и на других сайтах. Сложно ли сделать такую фишку? Очень просто!

Преимущества краткого содержания в статье

Содержание статьи решает сразу несколько задач.

  • Читатель с первого взгляда может понять, о чем статья, и решит ли она его проблему.
  • Читателю удобно перемещаться по смысловым блокам текста.
  • Внимание посетителя может зацепить какой-нибудь пункт меню в оглавлении, и он задержится на странице.
  • В содержании статьи можно использовать ключевые фразы, под которыми продвигается статья. Нередко фрагмент краткого содержания попадает в сниппет поисковой выдачи. И смотрится он там очень эффектно!

Как сделать содержание статьи в блоге: код оглавления

Все очень просто. У меня на рабочем столе компьютера хранится текстовый файл с кодами, которыми я часто пользуюсь.

Там хранится код для вывода содержания статьи. Вот он.

<ol id="sod">Содержание
       <li><a href="#1"> Пункт меню 1</a></li>
       <li><a href="#2"> Пункт меню 2</a></li>
       <li><a href="#3"> Пункт меню 3</a></li>
       <li><a href="#4"> Пункт меню 4</a></li>
       <li><a href="#5"> Пункт меню 5</a></li>
       <li><a href="#6"> Пункт меню 6</a></li>
       <li><a href="#7"> Пункт меню 7</a></li>
</ol>

Я его просто вставляю в начале статьи в редакторе WordPress в режиме HTML. При переключении между визуальным редактором и HTML редактором он никуда не пропадает.

Вместо «пункт меню 1» и «пункт меню 2» я просто пишу подзаголовки статьи. Если нужно, то удаляю лишние пункты оглавления или добавляю новые.

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

Код якоря рядом с подзаголовком такой:

<a name="1"></a>

Просто вставляю этот код якоря перед той строчкой, к которой хочу перенести читателя моего повествования.

Из чего состоит этот код содержания статьи? Он представляет собой HTML запись, служащую для вывода списка с цифрами.

Стандартный нумерованный список выводят так:

<ol>список с цифрами
       <li> пункт 1</li>
       <li> пункт 2</li>
       <li> пункт 3</li>
       <li> пункт 4</li>
       <li> пункт 5</li>
</ol>

Для списка оглавления задан конкретный стиль с помощью идентификатора:

<ol id="sod">

Это значит, что в файл style.css нужно добавить конкретное правило отображения блока с оглавлением статьи. Тогда у сдержания статьи появится приятный фон и любые финтифлюшки, какие вы захотите. Чуть ниже, я объясню, как это сделать.

В каждом конкретном пункте меню содержится ссылка на ярлык:

<a href="#1"> </a>

Каждой ссылке на ярлык соответствует конкретный ярлык в тексте:

<a name="1"></a>

Резюме:

В режиме HTML редактора вы вставляете код для вывода содержания статьи, а потом по тексту в этом же режиме разбрасываете ярлыки.

Вроде все просто объяснила. Если есть вопросы – задавайте в комментариях.

Если все понятно, то нам осталось только настроить стиль содержания статьи.

Как сделать красивое содержание статьи: прописываем стили

Открываете в админке WordPress «Внешний вид» – «Редактор».

Листаете файл style.css.

Там, где описываются стили нумерованных и маркированных  списков, вставляете код, описывающий правила стиля оглавления статьи.

У меня на блоге такие правила:

ol#sod{
padding: 0px 20px 10px 51px;
margin: 0.5em 0 0em 1em;
color: #2E2E2E;
list-style-type: none;
background: #CCFFFF;
border-left: #66FFCC 4px solid;
display: inline-block;
}
ol#sod li{}
ol#sod li:before{
font-weight:normal !important
}

Для вашего дизайна вы можете прописать другие правила: изменить цвет, отступы, шрифты, – все, что захотите.

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

Если вы совсем ничего не понимаете в style.css, то просто вставьте код стиля меню статьи в конец файла. Он все равно будет работать.

В общем, вы сохранили файл style.css, отредактировали статью и обновили страницу на сайте. Получилось у вас красивое содержание статьи? Расскажите мне в комментариях! Мне будет приятно, что я кому-то помогла сделать краткое оглавление статьи в блоге.

Ну, а если вам понравилось наводить красоту у себя на сайте, то вы еще можете поколдовать с дизайном:

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