4

Как быстро сделать содержание (оглавление) статьи на блоге.

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

Что такое содержание (оглавление) статьи и для чего оно используется?

Содержание или как его еще называют оглавление, не что иное, как структурированный список разделов статьи, который дает ясное понимание о чем статья и где, что искать. Вы спросите, а зачем это надо? Просто читай статью от начала до конца.

Я тоже задавался этим вопросом, когда начал посещать блоги и изучать интернет технологии. Часто бывают такие ситуации, когда поисковая система выдает статью не совсем соответствующую запросу. Вот в этом случае, достаточно первого взгляда на содержание, чтобы понять о чем статья и стоит ли ее читать.

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

Поэтому в статьях объемом более 5000-6000 знаков, желательно делать разбивку по разделам и устанавливать блок с содержанием. Ну что, убедил? Это такая же нужная опция, как и “хлебные крошки”,  постраничная навигация и другие. Совместно, все эти фишки, улучшают юзабилити сайта и способствуют продвижению в поисковой выдаче.

Простой способ создания содержания в статье.

Это простой способ создания оглавления. Для этого вам потребуется следующий код.

 

Давайте разберемся что здесь и зачем. Посмотрите на первый пункт содержания к этой статье (Что такое содержание (оглавление) статьи и для чего оно используется?) Чтобы сделать его ссылкой на соответствующий раздел текста необходимо, в текстовом редакторе блога, переключиться в режим «Текст». Для этого перейдите по  по соответствующей вкладке.

как-сделать-содержание-статьи-1

Заключаем оглавление раздела статьи  “Что такое содержание (оглавление) статьи и для чего оно используется?” в теги ссылки. Должно получится следующее.

Таким образом мы сделали анкорную ссылку. Теперь, чтобы сделать переход по этой ссылке на определенное место статьи, необходимо выделить нужный участок текста и заключить его в следующие теги. Таким образом вы создадите анкор (место куда ведет ссылка) .

Все готово, вам остается только опубликовать статью нажав кнопку «Опубликовать».

Внимание; Не забудьте создание ссылки и места перехода (анкора) и дальнейшая публикация статьи обязательно должны  производиться в режиме «Текст» визуального редактора сайта. Иначе у вас ничего не получится.

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

Вы думаете я на этом успокоился? Конечно нет! Хотелось максимально автоматизировать процесс, чтобы содержание формировалось автоматически, было привязано к оглавлениям абзацев (Н1-Н6) и  при этом, была возможность быстро и легко разместить содержание в нужном мне месте поста. Вот такое “По щучьему велению, по моему хотению…!”

Решение было найдено на отличном сайте wp-kama.ru, автора Тимура Камаева.  Где предложено оригинальное решение данной задачи.

 

Автоматическое создание содержания статьи.

Для начала копируйте нижеприведенный код.

Теперь надо вставить данный код в файл function.php вашего шаблона сайта. Можете это сделать используя  FTP соединение или при помощи админ панели управления вашего сайта. Для этого заходите в панель, переходите по вкладкам «Консоль» => « Внешний вид» (1) => «Редактор» (2) => «function.php» (3).

Как-быстро-создать-оглавление-(содержание)-для-больших-постов-в-WordPress

В самом конце файла, вставляете скопированный код и не забываете нажать кнопку «Обновить файл».

Как-сделать-содержание-статьи-2

Далее копируете код стилей оформления.

Опять переходите в панель управления сайта «Консоль» => « Внешний вид» => «Редактор» => «style.css». В самом конце файла style.css вставляете скопированный код и не забываете нажать кнопку «Обновить файл».

Основная задача выполнена. Далее от вас требуется, при написании постов, грамотно разбивать их на абзацы и проставлять заголовки ( h1-h4). Как правильно использовать теги заголовков h1-h6, можно прочитать здесь.

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

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

Оформление блока вы можете изменить в файле стилей. Я выделил содержание отдельным блоком с синим фоном. Так лучше привлекает внимание и подходит под общий стиль оформления. Вы можете самостоятельно поэксперементировать со стилями для создания индивидуального дизайна.

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

Плагины для создания содержания (оглавления) статей.

Для тех кто боится лезть в код, можно воспользоваться специальными плагинами для создания содержания.

  • Table of Contents Plus– простой и удобный плагин, который создает кнопку в редакторе для создания блока содержания.
  • Simple TOC– гибкий плагин с широкими возможностями настроек и созданием кнопки в визуальном редакторе.

Основной недостаток данных плагинов, автоматическое создание оглавления в статьях, когда оно там не требуется. Я стараюсь не использовать в большом количестве плагины на своем сайте и решать вопросы при помощи кода. Как не крути, плагины тормозят скорость загрузки сайта, и не редко конфликтуют между собой и с кодом шаблона блога.

На этом пожалуй все. Улучшайте внешний вид своего ресурса, пишите отзывы и пожелания. Всем удачи!

комментария 4
  1. admin
    14.11.2017 в 18:02

    Пожалуйста, рад был помочь. Удачи!

  2. Елена
    13.11.2017 в 17:32

    Большое спасибо, установила себе на сайт, все работает отлично. Всего доброго.

  3. admin
    24.02.2017 в 16:15

    Андрей, пожалуйста. Применяйте. Удачи!

  4. Андрей
    24.02.2017 в 13:58

    Сергей ваша статья как под заказ! Я совсем недавно мучился с этим вопросом, перелопатив кучу информации я ничего путного кроме как решить проблему с помощью плагинов не нашел! Я не сторонник плагинов и поэтому ваш вариант считаю идеальным!Вариант Тимура Камаева меня пугает! Так что лучше сделаю сам ручками по вашему варианту, как по мне так надежней! Спасибо за очень интересное и простое решение проблемы! С уважением к вам и вашему блогу Андрей!

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