Оглавление статьи на сайте

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

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

Мысль эта давно проскальзывала в моей голове. Особенно когда я видела статьи в интернете с содержанием, в котором каждый из пунктов кликабелен: нажимаешь на него и попадаешь именно в ту часть статьи, которая тебя интересует больше всего. Задумывалась о том, что неплохо было бы реализовать это и на своём сайте, и вот сейчас решила уже, наконец, заняться вплотную этим вопросом.

СОДЕРЖАНИЕ

Зачем нужно делать оглавление статей на сайте

Какие существуют способы сделать оглавление статьи

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

Заключение

Зачем нужно делать оглавление статей на сайте

По большому счёту, оглавление делается для удобства читателей и, как следствие, для улучшения поведенческих факторов на сайте. Кроме того, статья с оглавлением смотрится намного аккуратнее и привлекательнее для читателя.

Экономится время человека, попавшего на сайт. Допустим, ему не нужно читать всю статью (особенно длинную), он хочет найти ответ только на один вопрос, освещенный в ней.  Если в статье размещено её содержание, то у читателя появляется возможность не пролистывать статью от начала до конца в поисках нужной информации, а, взглянув на содержание, выбрать тот пункт, который его интересует, и сразу перейти к нужному материалу, кликнув по этому пункту.

А возможна такая ситуация, когда в статье вообще нет того, что ищет читатель. Так зачем же ему тратить время и скроллить всю статью? Содержание сразу покажет, есть ли в статье та информация, в которой хочет разобраться посетитель сайта. Наличие содержания – это, если можно так выразиться, “гуманная мера”, “дань уважения” по отношению к своим читателям.

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

Почему чем больше заинтересованных посетителей на сайте, тем лучше? Потому что рано или поздно это позволит зарабатывать на своём блоге. О том, как это можно делать, я писала статье “Как зарабатывать на блогах в интернете”.

Какие существуют способы сделать оглавление статьи

Здесь я кратко остановлюсь на том, что я узнала по поводу способов включения в состав статьи кликабельного оглавления, а затем расскажу о том, как я решила этот вопрос для статей на своём блоге.

  1. Способ №1. Установка специального плагина на сайт. Узнала, что существует плагин Table of Contents, да не один, а много разновидностей. Чтобы понять, какой именно устанавливать, нужно прочитать много информации, проанализировать, будет ли этот плагин совместим с текущей версией WordPress. А так как я знаю, что плагины “утяжеляют” сайт, в некоторых случаях делают его менее быстродейственным, то решила отказаться от установки плагина, по крайней мере, на текущем этапе развития своего блога.
  2. Способ №2. Работа с HTML-кодами. Прописываются разные стили CSS, добавляются атрибуты style – в общем, код неким образом изменяется. Скажу честно: для меня это тёмный лес, в кодах я абсолютно не сильна. Мой сайт работает на движке WordPress, который не требует знания кода.
    Кроме того, в бесплатной школе “Я-блогер”, в результате прохождения которой создан мой сайт, нас учили не работе с кодами, а алгоритму построения сайта с нуля, с которым справится даже новичок.
    Поэтому я отвергла этот способ, который напугал меня своей сложностью (для кого-то это, возможно, будет очень даже легко:-)).
  3. Способ №3, на котором я и остановилась. Связан с незначительными дополнениями в статье на этапе её редактирования. Я попробовала на одной из статей, у меня получилось, и я решила постепенно внести содержание во все статьи своего блога. Алгоритм действий опишу ниже. Возможно, кому-то понравится, и он захочет сделать так же:-)

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

Чтобы сделать оглавление (содержание) в этой статье, я выполнила следующие действия.

  • В режиме редактирования статьи вверху, после вводных предложений, написала “СОДЕРЖАНИЕ”, а под ним – список подзаголовков моей статьи:

Как написать содержание в статье

  • Выделила правой кнопкой мыши первый подзаголовок в этом списке (1 на скриншоте ниже), нажала значок вставки ссылки (2 на скриншоте), ввела в открывшееся поле символы #1 (3 на скриншоте) и кликнула по синей кнопке со стрелочкой справа (4 на скриншоте):

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

Чтобы Вы не искали долго, напишу, как ставится решётка: на латинской раскладке нажимаете Shift+3.

  • Со следующими подзаголовками в списке сделала то же самое, только в поле ссылки ввела не #1, а #2 (для второго пункта содержания) и #3 (для третьего пункта). Если у Вас пунктов много, то все их в списке содержания нужно “пронумеровать” таким своеобразным способом.
  • Перешла во вкладку “Текст”:

Как отразить оглавление на блоге

  • Нашла все подзаголовки своей статьи. Для этого во вкладке “Текст” набрала сочетание клавиш Ctrl+F, ввела в открывшемся наверху справа окне символы h2. Это означает, что я ищу все подзаголовки 2.

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

Подзаголовки 2 оказались между подсвеченными буквами h2:

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

  • Перед каждым подзаголовком (точнее, перед символами <h2>) я прописала следующую комбинацию (подчёркнуто красным на скрине ниже):
    <a id=”1″></a> для первого подзаголовка;
    <a id=”2″></a>  для второго подзаголовка;
    <a id=”3″></a> для третьего.
    Если у Вам больше пунктов в содержании, то действуйте аналогичным образом, прописывая цифры по возрастанию.

Оглавление статьи на сайте

Внимание! Все подзаголовки должны быть предварительно правильно отформатированы во вкладке “визуально”, в которой Вы набираете статью (как “Заголовок 2” в окошке “Абзац”).
Если Вы используете подзаголовки другого вида (“Подзаголовок 3”, например), то, выполняя предыдущий пункт алгоритма, ищите не h2, а h3.

Заключение

Вот такой не очень сложный способ я использовала для этой и парочки других статей на своём блоге. Со временем обеспечу содержанием всё, что у меня написано:-).

Небольшой совет: вносите изменения во вкладку “Текст” (<a id=”1″></a> и т.д.) в последнюю очередь, когда статья полностью написана и отредактирована, а после этого публикуйте (или нажимайте “обновить”). Не знаю, как с вашими шаблонами, но с моим, если не опубликовать статью (или не обновить) после внесённых изменений и уйти со вкладки “Текст”, изменения эти не сохраняются или сохраняются не в полном объёме. Нужно вставлять всё заново.

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

С уважением, Юлия.

Спасибо, что поделились статьёй в социальных сетях!



 

15 комментариев

  1. Спасибо Юлия за ценный совет. Как то не задумывался об этом, веду блог по строительной тематике, а это по содержанию в нем ориентироваться действительно удобнее. Обязательно воспользуюсь.

  2. Юля, спасибо за статью! У меня нет оглавления. Это конечно же “минус”. Нет из-за того, что не умел его делать и не сильно озадачивался этой проблемой. Текст бы написать. Но с оглавлением статья значительно выигрывает! С поведенческим фактором – 50/50. Если посетитель увидел, что ошибся и быстро ушел, то поведенческий фактор только ухудшится.
    И все же, теперь я знаю у кого смотреть рецепт оглавления. 😉

    1. Да, Андрей, Вы правы насчёт поведенческого фактора. Могут и уйти. Но зато это честнее по отношению к читателю: чего его “гонять” по статье, если в ней нет того, что он ищет…

  3. Привет, Юля! Недавно видел у кого-то на блоге содержание, как раз подумал, что было бы неплохо себе сделать. Правда не успел поразмышлять над этой темой.
    А тут как раз статья по этой теме, да еще подробно все расписано! Просто читай, смотри и повторяй 🙂 Как всегда на отлично!

  4. Я правда плагином сделала содержание, не знала, что есть и третий способ. Но с содержанием мне тоже больше нравится, я сама им пользуюсь на других сайтах, когда ищу нужную мне информацию. Забрала статью в закладки, надо будет повнимательней изучить ваш способ, спасибо, Юля. Если получится, может и откажусь от плагина.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *