Главная » Все для WordPress » Как сделать содержание для статьи на сайте

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

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

Зачем делать содержание для материала в блоге

Содержание на странице не всегда оправданно и как правило применяется — в очень больших материалах для облегчения навигации. Пользователю сразу предоставляется краткое содержание материала и он с легкостью может перейти к необходимой части.

Ручной способ создать содержание для статьи блога

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

Пример кода ссылки (ссылаемся на якорную ссылку):

Пример абзаца на который мы ссылаемся (установка якоря):

Обратите внимание на атрибуты href=1 в ссылке и якоре — они одинаковые, соответственно если ссылка будет href=2 — якорь для нее будет name=2.

Пример кода содержание:

Для добавления кода придется перейти в режим редактора текста

Для добавления анкорных ссылок устанавливаем якорь рядышком с необходимым абзацем или тегом заголовка. После добавления якорной ссылки в визуальном редакторе она будет помечена следующим образом

При желании можно оформить наше содержание — например создать специальный <div> для него.

Добавляем оглавление с помощью плагина

Если возится с кодом не хочется — можно использовать специальный плагин — Table of  Contents Plus

содержание для сайта с помощью плагина

Послесловие

Способ максимально просто и удобен. Спасибо за прочтение, подписывайтесь на обновления — дальше будет интересней!

Видишь кнопочки сверху?

Если тебе понравился материал - поделись им с друзьями и коллегами, на форумах и в соц. сетях. Чтобы ничего не пропустить - подпишись на обновления. Спасибо ;)

Оставить комментарий

Ваш email нигде не будет показанОбязательные для заполнения поля помечены *

*