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

soderzhanie

Сегодня на Zarabotokvseti.net мы научимся делать меню содержания статьи. Такое оглавление является очень удобным атрибутом, если ваш пост оказался непомерно большим по объёму. Часто, в поисках, какой либо информации в сети, мы попадаем на выданный поисковиком сайт и перед нами открывается длиннющая статья. Что обычно повергает нас в шок!

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

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

 

 

Быстро сделать содержание

Если мы часто пишем длинные статьи и в каждой из них нам придется делать оглавление, то нам непременно надо научиться делать это легко и быстро. Самый быстрый способ, это применение плагина. Обычно, скачиваешь плагин, устанавливаешь, настраиваешь, а дальше все делается в несколько кликов. Что мы и рассмотрим в следующей главе!

be first
3d white humans running with a red human
к оглавлению ↑

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

Для отображения меню краткого содержания статьи используется довольно много плагинов. Среди них: Simple TOC, Plagin Table of Contents Generator, Table of Contents Plus и другие..

Ну а мы рассмотрим самый популярный из этой серии: Table of Contents Plus. Установка этого плагина стандартная, так что перейдем сразу к настройке. Для этого нужно кликнуть по разделу TOC+, который у вас появится в меню админпанелиtoc menu

Попадаем в окно настроек и выставляем все по картинкам ниже, где нужно вставляем русский перевод слов.

nastroiki 1

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

nastroiki 2

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

nastroiki 3

В конце есть дополнительные настройки "Advanced (show)", я ничего там не менял. Не забываем в конце нажать на кнопку сохранения. Вот и всё! Теперь когда вы напишете очередную длинную статью, то оглавление появится прямо перед первым подзаголовком.

к оглавлению ↑

Плюсы и минусы Table of Contents Plus

Плюсы:

  1. После установки этого плагина вы забываете о том, что нужно делать "Содержание статьи", так как оно будет автоматом появляться в заданном месте при наличии четырёх или более подзаголовков h1 : h6.
  2. Для кого то, наверное это будет плюсом. Этот плагин содержит в себе вторую функцию, он выводит при желании карту сайта для посетителей. Просто у меня это реализовано с помощью другого плагина.

Минусы:

  1. Это как раз возможность выводить карту сайта. Которая отображает рубрики и страницы, когда для большинства блогеров предпочтительней вывод постов. А так как мне эта функция не нужна, то и лишний код на блоге тоже нежелателен.
к оглавлению ↑

Делаем содержание статьи вручную - без плагина

Для реализации нужно:

  1. Добавить в тексте к подзаголовкам якоря
  2. Составить содержание из ссылок на якоря
  3. И всё это делаем вручную

Так как это дело очень кропотливое и мучительно долгое, то я нашел метод, намного проще. для начала нужно скопировать следующий код и добавить его в самый конец functions.php. 

Далее добавляем стили, путем добавления следующего кода в style.css и тоже в самый конец.

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

Шот код

Я думаю, всем понятно, почему я не напечатал этот шот код здесь. Он сразу же сработает.

к оглавлению ↑

Как сделать плавную прокрутку в навигации статьи

Для этого вначале надо подключить ваш сайт к библиотеке jQuery. Это достигается путем вставки следующего кода в header.php перед закрывающим </head>.

После этого добавляем следующий код в footer.php перед закрывающим </body>.

Вот теперь у меня всё на сегодня! А как, вы реализовали подобный атрибут у себя на блоге?!

P.S. Пример содержания без плагина, реализован прямо в этой статье, правда без CSS.


 

1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (7 оценок, среднее: 5,00 из 5)
Загрузка...

\\\\\\\\\\\\\\\\ Самая выгодная банковская карточка│PAYEER® Platinum MasterCard
Сегодня на Zarabotokvseti.net поговорим о самой выгодной банковской карточке — платиновая Мастер Кард от Payeer. А так же, где и как можно её заказать. Все ...
\\\\\\\\\\\\\\\\ Как раскрутить группу вконтакте бесплатно. Bosslike
Добрый день коллеги и гости моего блога! Сегодня хочу рассказать, о том как раскрутить бесплатно группу или любой паблик в популярных социальных сетях, таких, как Вконтакте, ...
\\\\\\\\\\\\\\\\ Бесплатный FTP клиент — Notepad++
Добрый день коллеги и гости моего блога! Все мы знаем, что такое "Notepad++". Конечно! Ведь это лучший текстовый редактор! Но не все знают, что его, ...
\\\\\\\\\\\\\\\\ Как создать подписную страницу бесплатно
Добрый день коллеги и гости моего блога! Сегодня я хочу рассказать Вам о том, как создать подписную страницу на вордпресс с помощью замечательного плагина. Почему ...
\\\\\\\\\\\\\\\\ iSpring Free Cam — программа для записи видео с экрана
Добрый день коллеги и гости моего блога! Недавно я купил себе новый ноутбук и сразу же возник вопрос: "какой софт закачать для работы?". Дело в ...

Комментарии 29

  • А где собственно сама настройка тоyes

    • Виталий, ты немного раньше времени зашел ко мне! Шутка! Я видимо опубликовал ещё не готовую статью, поэтому ты не смог увидеть самой настройки.

  • Понятноcool. А то я уж подумал не весть что. А с чем связан возврат к старой теме если не секрет?

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

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

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

    • Константин, привет! Тут дело не только в моде, но ведь наличие содержания — это один из элементов внутренней перелинковки. Думаю это благотворно влияет с точки зрения SEO…

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

        • поисковики уже давно не идексируют ссылки из содержания

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

          • Думаю автор будет не против ссылок.

            Яша: https://yandex.ru/blog/webmaster/13754

            Гугл: https://support.google.com/webmasters/answer/174993?hl=ru

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

          • Вы привели ссылку на статью 2012 года… Вот новая статья Яндекс со слов разработчика в комментах:

            Эта статья 2012 года, а вот свежая, про JS: http://webmaster.ya.ru/replies.xml?item_no=21369

            Да и потом, все Ваши ссылки на описание именно AJAX-сайтов. Но при чём тут это? Да, WordPress имеет обработчик AJAX-запросов, но это не означает, что он AJAX-сайт. И мы говорим сейчас об обычных анкорах, при чём тут AJAX и JS вообще? Не надо путать понятия.

            Всё нормально индексируется.

        • Учитываются. Гугл еще и в сниппете их выводит.

          Заголовок title и h1. Как правильно заполнять

          Ссылка в сниппете как раз из содержания

  • День добрый! А я всё-таки пользуюсь Table of contents. Понравился плагин, хотя и приверженец того, чтобы на блоге было меньше всяких плагинов. Потихоньку буду отказываться от некоторых…

    • Здравствуйте Максим! Не всегда получается плагин заменить просто кодом, по причине особенностей шаблона или не соответствия общему дизайну. А после недавних мучений с оптимизацией по рекомендации Гугла, я понял, что иногда лучше воспользоваться плагином.

  • Максад, здравствуйте! Я использую ТОС, очень удобно. Раз настроил и забыл. Плагин лёгкий, ресурсов много не потребляет. Пусть работает.

    Думаю, что наличие содержания — это, ко всему, ещё и дополнительное удобство для посетителей. Особенно, если кто-то решит перечитать статью, то сразу может перейти к интересующему разделу, а не искать по всему материалу…

    С другой стороны, Константин, конечно, прав — это своеобразная дань моде. Но в этом конкретном случае, думаю, что такая мода только на пользу…

    • Приветствую вас Александр! И вы правы! Мы ведь стараемся для кого?! Для посетителя в первую очередь! А мода, это временно!

    • Так то вроде ТОС давно не обновлялся, ничего страшного? Думаю, что все таки содержание надо, но не реализовала на своем блоге, надо сделать

      • Добрый день Надежда! Тот плагин, о котором говорится в статье, обновлялся 12 месяцев назад. Работает исправно! Обновления делают, только если плагин начинает не корректно работать. Так что, я думаю ничего страшного не произойдет! Тем более, что его всегда можно удалить!

  • Давно собираюсь сделать в статьях своих блогов подобные настройки.

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

    Одно время пытался разобраться в коде, найденном в интернете. Но тот код оказался мне (или теме моего блога) не по зубам.

    Думаю, что с помощью Вашей статьи, Максад, у меня сейчас это получится. 
    Пока всё по описанию понятно. Приступаю к действию. Спасибо!

    • Добрый день Виталий! У меня примерно тоже самое! Вначале понял, как писать статьи правильно и со всеми атрибутами. А потом стал это воплощать.

  • Вручную все делать не вижу смысла если есть плагин на вордпрессе, да тоже тос+ использую удобно когда контента много. Хотел узнать почему у вас превьюшки постов такие плохие и с вотемарком программы вроде. Можно и без них делать. И гирлянды конечно хорошо праздник и все такое но мне они мешают как то, можно по бокам убрать и в топе только оставить?

    • У меня тема дочерняя, поэтому мне можно делать все вручную. А превьюшки наверное пережимаю, чтобы меньше весили. Ну а гирлянды, это временно! И в коде плагина ковыряться совсем неохота!

  • Доброго времени суток, Максад! А я только подошла к тому, что нужно делать содержание статьи. И даже, в порядке эксперимента, в крайней статье сделала всё ручками. Но, думаю, что не совсем правильно. Вовремя мне на глаза попала Ваша статья. Спасибо! Сейчас поставлю плагин и переделаю заметку.

  • Содержание в статье это не только дань моде и удобство. Это еще и довольно неплохой инструмент повышения посещаемость и улучшение публикации в плане seo. 

  • Удобная вещь — содержание. Мне не хочется стиль менять, пока, поэтому я еще у себя такого не делаю. Но, возможно, еще передумаю. А содержание со ссылками — вообще хорошо. И, думаю, лучше делать все это без плагина.

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

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