Как сделать содержание в статье блога или сайта — популярные способы

Рубрика: Блогинг
Как сделать содержание в статье блога или сайта
Автор:
Дата:

Всем привет! С вами Максим Бойко, отдыхающий в Питере. Не самое лучшее время года для отдыха в Северной Столице, тем не менее, не жалуюсь. Здесь всегда хорошо, есть на что посмотреть, где развлечься и погулять. В конце приложу несколько фотографий, сможете поглядеть.

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

Итак, в сегодняшнем посте я хочу рассказать о том, как создать симпатичное содержание в статье. Что же, приступим!

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

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

  1. Обозначить основные подтемы поста;
  2. Перебросить читателя на интересующую часть поста.

В общем, эти «штуковины» мгновенно перебрасывают пользователя на определённую часть страницы, которую (которые) вы сами определили. Зачем оно нужно пользователям и вам?

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

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

Читайте также:  Проверка внешних ссылок ведущих на сайт в сервисе Ahrefs

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

На самом деле, всё достаточно просто. Решением данной проблемы, стал плагин Table of Contents Plus, который автоматически выводит содержание в каждой статье блога (в зависимости от настроек, конечно).

Кому-то может не очень понравиться внешний вид содержания, т.к. некоторые дизайнерские решения очень похожи на те, что можно наблюдать в Wikipedia — всё достаточно просто.

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

добавить новый плагин для содержания
Затем, производим установку и заходим в «настройки», где можно наблюдать установленный TOC+

публикация в режиме текст - копия
Всё, мы находимся в меню настроек плагина, где нам потребуется установить следующее:

настраиваем плагин для содержания
Position — здесь мы выбираем функцию, которая определит, где наше содержание будет отображаться. В моём случае, оно отображается под первым подзаголовком.

Show When — количество подзаголовков, при котором необходимо создавать оглавление. Я решил поставить 3. Затем ставим галочку напротив Post и помечаем окошечко Show title on top of the table of contents, а в строку вставляем слово «Оглавление» или «Содержание». Ну и после, также ставим галочки, как на скриншоте.

остальные настройки плагина

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

Далее, нас интересуют подзаголовки, которые будут отображаться в нашем содержании. В своём оглавлении я использую только заголовки h3, но если в ваших статьях имеются и меньшие подзаголовки, тогда можете использовать и их.

выводим подзаголовки h3

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

Читайте также:  Основные ошибки начинающих блоггеров — часть 2

Кстати, стоит сказать и о некоторых недостатках плагина. Если на вашем сайте, где-либо помимо статьи, есть подзаголовки h3, или другие (которые вы решили использовать в содержании), тогда и они будут выводиться в оглавлении.

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

Вывод оглавления с помощью кода

Ребята, кроме плагинов, существуют и дургие способы — это работа с кодом. К сожалению, мне пришлось отказаться от работы с ним, т.к. уходило слишком много времени и возникали кое-какие трудности.

А вот и код:

  • <blockquote><a href="#a1"><li>Первый подзаголовок</a><br>
  • <a href="#a2"><li>Второй подзаголовок</a><br>
  • <a href="#a3"><li>Третий подзаголовок</a><br>
  • <a href="#a4"><li>Четвертый подзаголовок</a><br>
  • <a href="#a5"><li>Пятый подзаголовок</a><br></blockquote>

Здесь, заключаем в теги сами подзаголовки:

  • <a2 id="a1"><h3>Перебрасывает на первый подзаголовок</h3></a2>
  • <a2 id="a2"><h3>Перебрасывает на второй подзаголовок</h3></a2>
  • <a2 id="a3"><h3>Перебрасывает на третий подзаголовок</h3></a2>
  • <a2 id="a4"><h3>Перебрасывает на четвертый подзаголовок</h3></a2>
  • <a2 id="a5"><h3>Перебрасывает на пятый подзаголовок</h3></a2>

Ничего сложного. Только есть одно «но»! Работать с содержанием нужно в текстовом редакторе админки wordpress (когда добавляете статью). Да и потом, в случае необходимости отредактировать пост, делайте это в текстовом, а не визуальном, иначе, всё содержание накроется «медным тазом».

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

содержание с помощью кода

Как вы поняли, текст заключенный в эти теги:

1
<a href="#a1">Первый подзаголовок</a>

является «кнопкой», при нажатии на которую, вас перебрасывает на подзаголовок, который вы также заключаете в теги:

1
 

Перебрасывает на первый подзаголовок

Только ещё раз прошу, не забывайте опубликовывать статью в режиме «текст»:

публикация в режиме текст
Вот в принципе и всё.

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

Читайте также:  Продвижение в mail путём исправления выдачи поисковой системы

Ах да, обещал же фото с Питера! Вот несколько из них:

20160121_192203
Это я приехал поболеть за хоккейную команду СКА, 21-го января. К сожалению, Питер уступил команде Адмирал (Владивосток).

20150203_130815
Эрмитаж! Меня хватило на 3 часа и затем, я перебрался в ближайшее кафе, где весь вечер предавался размышлениям об искусстве, истории и бесподобном вкусе индейки в винном соусе.

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

20150207_180115
Рассол. Правда это фото прошлого года. Честно сказать, никогда ранее, подобных напитков на прилавках магазинов, не наблюдал.

На этом всё. Всем пока. С Уважением, Максим!

На мою рассылку подписались 9000 человек! Скорей подпишись и получи от меня подарок.

Комментариев к статье: 21

  • Юрий

    Спасибо тебе Максим за такой развернутый ответ и за упоминание моей скромной личности.

    Но мне вот интересно — есть же другие визуальные редакторы типамTiny MCE. Неужели в них нет такой функции — сбора под заголовков в содержание, ну как в MS Word? То есть хочется автоматизации этого процесса.

    23.01.2016 в 19:24 Ответить
    • Максим Бойко

      Есть плагины, тот же Table of Contents Plus. Но я предпочитаю работать по-старинке.

      23.01.2016 в 20:07 Ответить
  • Елена Прекрасная

    Привет, Максим!

    классная статья, а я для содержания использую плагин, так удобнее))

    Классные фотки, так ты уже в Питер приехал! Отпуск?

    Странно, но я такие напитки тоже не встречала, наверно их только в Питере продают))

    23.01.2016 в 19:54 Ответить
    • Максим Бойко

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

      Да, решил отдохнуть месяцок здесь. Всё думаю, когда-нибудь перебраться сюда, на пмж.

      23.01.2016 в 20:05 Ответить
  • Александр Сергиенко

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

    24.01.2016 в 16:47 Ответить
  • Александр

    Кодом делать это конечно очень долго. А что же аналогов плагина wp-syntax нет? Если уж этот не хочет работать.

    25.01.2016 в 13:36 Ответить
    • Максим Бойко

      Есть и другие плагины. Дело в том, что я не хочу устанавливать лишний раз плагины, пока, даже для содержания. Возможно потом, со временем, когда захочу во всех статьях сделать содержание (штук 700 статей напишу 🙂 ), установлю плагин.

      25.01.2016 в 17:31 Ответить
      • Александр

        Так, а потом разве не придётся все статьи редактировать? Или плагин сам автоматически сделает содержание для всех статей на блоге?

        25.01.2016 в 17:53 Ответить
        • Максим Бойко

          Придётся каждую статью редактировать, а именно — содержание к ним. Дело в том, что я не хочу на данном этапе продвижения блога (он совсем молодой), загружать его плагинами (позиция у меня такая). Уже со временем, сяду и потрачу время на содержание к статьям.

          25.01.2016 в 17:59 Ответить
  • Ната Дегтярева

    Максим, вечер добрый. Я у вас впервые и как-то подрастерялась поначалу, блондинистая голова пошла кругом от терминов-плагинов-опций)) А читать начала — очень-таки доступно излагаете инфу, даже с пошаговыми инструкциями, моими любимыми))

    09.02.2016 в 23:40 Ответить
    • Максим Бойко

      Спасибо)

      10.02.2016 в 21:39 Ответить
  • Хребтов Александр

    Спасибо, Максим за информацию, Я наверное остановлюсь на плагине. Не дружу я с кодом 🙂

    10.02.2016 в 05:29 Ответить
    • Максим Бойко

      Я хоть и подружился, однако с кодом много времени уходит...

      10.02.2016 в 21:39 Ответить
  • Татьяна Сова

    Привет, Максим! Интересная штука — содержание. Я очень раньше и себе такое сделать, но что-то меня последнее время удерживает... Ну не знаю почему, кто-то говорит, что это плохо, кто-то наоборот... Может и поставлю. Если надумаю, то теперь знаю куда обратиться)

    Фотки классные. Никогда в своей жизни не была в Питере, но всегда хотела. Все время что-то срывалось... Вот теперь как детки подрастут — поедем)

    11.02.2016 в 20:53 Ответить
    • Максим Бойко

      Привет! Содержание — штука удобная. А в Питер, надо обязательно, желательно летом.

      11.02.2016 в 21:03 Ответить
  • Ольга

    Способов добавления содержания статьи много, каждый из нас выбирает удобный — кто-то плагин, скрипт или вручную добавляет. Главное, что сегодня это надо делать, так как форматирование статьи выходит на первый план вкупе с качеством контента. Спасибо, Максим, за инструкцию.

    14.02.2016 в 13:08 Ответить
    • Максим Бойко

      Не за что, Ольга 🙂

      14.02.2016 в 23:48 Ответить
  • Дмитрий Рычков

    О как! как раз понял что к вопросу оформления статей, да и всего блога в частности, подходил не правильно. Спасибо, будем внедрять!

    18.02.2016 в 23:46 Ответить
    • Максим Бойко

      Внедряй, Дмитрий 🙂

      19.02.2016 в 00:02 Ответить
  • Хребтов Александр

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

    22.02.2016 в 02:38 Ответить
    • Максим Бойко

      Хороший плагин, самого порадовал очень. Привыкните))) Хотя с помощью кода, тоже симпатичненько получается, только долго это всё.

      22.02.2016 в 03:18 Ответить

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

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