Wordpress и плагины        11 июня 2015        1818         128

Как очень просто сделать, самое лучшее содержание (меню) статьи блога на wordpress

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

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

Хочу вас обрадовать друзья! Такие решения я нашёл и сейчас вам их предоставлю.

Как можно вывести краткое содержание статьи с помощью плагинов WordPress

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

Сейчас я вкратце сделаю обзоры некоторых плагинов, но более подробно я расскажу о плагине Table of Contents Plus. На мой взгляд, именно благодаря этому плагину можно сделать самое простое и одновременно лучшее содержание (оглавление, навигацию) в статьях вашего сайта.

Плагин Simple TOC

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

И так, скачайте этот плагин здесь, или найдите его через поиск плагинов в админ панели.

Устанавливаем, активируем и переходим на редактирование статьи.

Здесь всё просто. В редакторе появится новая кнопка.  Так это выглядит:

Плагин simple toc

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

Настройки плагина simple toc

What to insert — в выпадающем меню выбираете метод вставки блока содержания. Советую выбрать пункт по умолчанию «auto toc heading»

Auto generate heading by tag — здесь можете прописать те теги, заголовки которых вы хотите, чтобы отображались в блоке оглавления.

То есть, если вы хотите, чтобы в содержании была навигация только на заголовки с тегами h2, то так и пишите — h2. Если желаете видеть навигацию на все заголовки, то так и пишите — h2, h3, h4, h5, h6  и так далее. В принципе, если вы выбрали в первом пункте auto toc heading, то блок меню будет автоматически опознавать теги h2 и h3.

Жмёте на кнопку «insert» и в статье появится такой шорткод:

шорткод плагина simple toc

Публикуем статью и любуемся на наше меню в статье. Так это будет выглядеть:

Оглавление статьи с помощью плагина simple tocЛично мне не очень нравится. Слишком простенько!

Плагин — Table of Contents Generator

Этот плагин аналогичный прошлому, только кнопка в редакторе будет выглядеть так:

Кнопка плагина Table of Contents Generator

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

На мой взгляд серьёзный недостаток этого плагина это то, что у него нет настроек и поэтому, он автоматически создает упорядоченный список содержания статьи, путем сканирования заголовков всех тегов, от h1 до h6. То есть, в отличие от плагина simple toc, вы не сможете выбрать желаемые теги, для оформления меню с определёнными заголовками.

Так что мне этот плагин не подходит.

Плагин Table of Contents Plus — лучший плагин для реализации содержания в статьях

А сейчас, начинается самое интересное.

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

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

Настройки плагина Table of Contents Plus

И так, скачиваем этот плагин здесь, или находим его через поиск плагинов в админке.

После его установки и активации, переходите в «Настройки» и там находите новый раздел «TOC+»

Переход к настройкам плагина Table of Contents Plus

И так, что мы видим:

Главные настройки плагина Table of Contents PlusНастройки Table of Contents PlusДополнительные настройки плагина Table of Contents Plus

* Position — В этом выпадающем меню вы должны выбрать функцию, которая определит в каком месте будет выводиться блог содержания. По умолчанию стоит «before first heading (default)», а это значит, что ваш блок будет выводиться сразу же перед первым подзаголовком. Это как раз то, что надо.

* Show when — Здесь вы должны выбрать число, которое определит количество подзаголовков в меню статьи. Лично я советую выбрать цифру 4 или 5, так как маленькое количество подзаголовков говорит о том, что статья не такая уж и длинная. А для коротких статей нет смысла делать содержание.

* Auto insert for the following content types — здесь вы решаете где будет отображаться блог содержания:

post — статья

page — страница

envira — страница с галереей (не обращайте внимание на это! У вас такого нет)

wpcf7_contact_form — страница обратной связи (выведенное с помощью плагина Contact Form 7) у вас может отличаться.

slides — слайды

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

* Heading text — Здесь вы должны решить, будет ли отображаться название меню. То есть, если вы поставите галочку в пункте «Show title on top of the table of contents» то под ним появится поле, в котором нужно прописать название меню. В моём случае я прописал «Содержание статьи», а вы можете его назвать по другому, например: «меню статьи» или «оглавление статьи» или «краткое содержание статьи».

Далее, если вы поставите галочку в пункте «Allow the user to toggle the visibility of the table of contents«, то под ним появятся два поля:

Show text — показать содержание

Hide text — скрыть содержание

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

Hide the table of contents initially — Если вы здесь поставите галочку, то ваше меню изначально будет скрыто. Как вы видите, я галочку не поставил, так как хочу, чтобы оно всегда было показано. Кто захочет, тот сам его закроет.

* Show hierarchy — Показывать иерархию в меню (древовидное оглавление)

* Number list items  Количество элементов списка. То есть, перед каждым пунктом в меню будет отображаться его номер. Это значит, что первый заголовок в статье станет номером 1, второй заголовок станет номером 2, а первый подзаголовок второго заголовка станет номером 2.1. Надеюсь, что понятно объяснил.

* Enable smooth scroll effect — Включить плавный эффект прокрутки до желаемого заголовка. На самом деле этот эффект не очень уж и эффективный smile Но вы можете поиграться с ним и определиться, нужен ли он вам, или нет.

* Appearance — Здесь вы можете определить место положение и размеры блока оглавления.

Width — Ширина блока. Советую вам выбрать как у меня «Auto(default)». В этом случае ваш блог будет оптимизирован под все мобильные устройства.

Wrapping — Здесь вы можете определить, будет ли ваш блок находиться слева или справа на странице. Если выбрать None(default) , то блок будет находиться по умолчанию слева, как у меня сейчас.

Font size — Размер шрифта. Лично я выбрал 95%. Советую вам тоже выбрать от 90% до 100%, так как именно этот процент оптимизирован для мобильных устройств.

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

Advanced (show) — Дополнительные настройки. Нажимаем на слово «show» в скобках и видим это:

Дополнительные настройки toc+Настройки toc+toc+

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

Единственный раздел, на который я хочу обратить ваше внимание, это:

Heading levels — Здесь вы должны поставить галочки в тех уровнях заголовков, которых хотите видеть в содержании вашего меню. Как вы можете видеть у меня обозначены заголовки уровней — h1, h2, h3. Это значит, что если в статье будут заголовки с тегами h4, h5, h6, то в содержание они не попадут.

После всех настроек, не забываем сохранить изменения и нажать на «Update option»

И ещё…

Если обратите внимание, то в самом верху есть возможность настроить карту сайта «Sitemap». Но в ней есть один недостаток! На странице с картой она не выводит все статьи, а только страницы и рубрики. Поэтому я решил довольствоваться картой сайта, ранее сгенерированным плагином Dagon Design Sitemap Generator.

Как не выводить автоматически содержание статей плагином Table of Contents Plus

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

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

Шорткод для отмены содержания с помощью плагина Table of Contents Plus

Вы спросите: «Почему я предоставил вам скриншот с шорткодом, а не написал его просто в статье?» Дело в том, что если бы я написал этот код в статье, то моё меню пропало бы smile

Некоторые недочёты плагина Table of Contents Plus

Как жаль, что я нашёл некоторые непредвиденные моменты при использовании этого замечательного плагина Table of Contents Plus. 

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

Обратите внимание на то, что в моём блоке отображается заголовок «Почитать другие похожие статьи». Он выводится из-за плагина WordPress Related Posts. Как раз об этом я и говорю. Но лесть в код плагина я не собираюсь, поэтому пусть будет так, как есть.

Вот и всё!

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

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

Этот раздел посвящается противникам плагинов smile

Я уже предвижу такие комментарии, типа:

1) Плагины грузят сайт

2) Плагины тормозят блог

3) Плагины опасны из-за взломов хакеров

И т.д и т.п. smile

Так что ребята, это информация именно для вас!

На просторах интернета я нашёл на мой взгляд лучшее решение создания красивого содержания статей без плагина. И это можно сделать благодаря разработанному скрипту гениального веб мастера Тимура, автора замечательного блога wp-kama.ru

Его скриптом уже пользуется такой популярный блогер как Пётр Александров, автор блога wpnew.ru, а это о чём-то говорит.

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

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

На этом я с вами прощаюсь и желаю удачи. Пока-пока.

С уважением, Игорь Черноморец

.

Обсуждение: 128 комментариев
  1. Андрей Косолапов:

    Привет! Еще парочка таких статей и я вернусь обратно на вордпресс18 Вот честно, соскучился я по вордпрессу, вот идумаю каждый день а не вернуться ли обратно08

    1. Андрей, я пять минут назад опубликовал статью, а ты тут как тут! Все-таки приложение хрома дает о себе знать smile
      Давай Андрей, возвращай WordPress!Ведь душа твоя там, а не Джумле!

      1. Андрей Косолапов:

        Это точно, ладно посмотрим, может быть

  2. Андрей:

    Привет, Игорь. Ничего себе сколько плагинов разработано для вывода меню статьи. А я делаю при помощи обычных HTML ссылок.

    1. Привет Андрей!
      Так плагинов для создания содержания статьи намного больше! Изначально хотел написать статью только с обзором на плагин Table of Contents Plus, но подумал, что лучше добавить ещё пару вариантов плагинов для выбора и разнообразия.
      До недавнего времени я тоже у себя делал содержание с помощью якорей (html тегов), но как только наткнулся на этот бесподобный плагин, то сразу же не задумываясь отказался от ручной работы. 
      Так что советую

  3. Очень полезная для меня статья. Давно хотела ввести содержание, но не знала как это сделать.

    1. Людмила, я очень рад, что статья оказалась вам полезна!

      Будут вопросы по настройкам, спрашивайте! Постараюсь помочь

  4. Андрей Косолапов:

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

    1. Отлично Андрей! Ну конечно же зайду! Зашел бы даже если не устанавливал бы плагин. А вообще то конечно интересно, как он у тебя прижевется 08

      1. Андрей Косолапов:

        Это я понимаю что зайдешь, но когда? А так, ради интереса, прибежишь первый18

        1. Да ладно тебе 01
          Я почти всегда захожу к тебе один из первых, просто не всегда есть возможность оставить комментарий, а так…я же в этом смысле пионер 07

          1. Андрей Косолапов:

            Это который Павлик Морозов?08 Шучу конечно, но сам нарвался18

  5. Александр Каратаев:

    Игорь, спасибо за рассказ об очень полезном, на мой взгляд, плагие — Table of Contents Plus! Обязательно себе установлю… 16

  6. Александр Каратаев:

    Плагин установил, вроде всё нормально. А поскольку в статьях я использую (если использую!) заголовки H3 и H4, то указанной проблемы плагина не наблюдается…
    Ещё раз спасибо!

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

  7. orenkomp.ru:

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

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

  8. Установила плагин TOC+ по вашей инструкции, но содержание так и не появилось. Что я сделала не так, можете предположить? 

    1. Здравствуй Наталья!

      Единственное то, о чем я могу подумать это, в дополнительных настройках плагина вы не отметили на какие заголовки должно выводиться меню (h2,h3,h4) 

      Или же, заголовки в ваших постах просто обведены жирным цветом, а не (h2,h3,h4)

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

      Наталья, спасибо вам за визит и комментарий

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

        1. Здравствуй Дмитрий! Только что зашёл к вам на блог и через 10 секунд понял проблему, из-за которой у вас не выводится меню.

          Дело в том, что в некоторых ваших статьях присутствует не более 2-ух подзаголовков, а в настройках плагина вы скорей всего отметили как и у меня (вывод меню только в том случае, если будет 3 подзаголовка и больше) не так ли?

          Во всех ваших статьях, в которых присутствует более трёх подзаголовках, содержание статьи корректно отображается!!! Например ваша статья «Как писать статьи для сайтов«

          В ней есть меню! Вот смотрите: http://joxi.ru/p276YwoS0WzVvm

          1. Здравствуйте Игорь, Да действительно маловато в некоторых статьях заголовков. Я потом разобрался, в настройках поставил 2 заголовка и появились. Но потом опять поставил 4 пусть так будет.
            В маленьких статьях я думаю он и вправду не кчему, а будет статья по больше, будет и меню. 
            С праздником вас!

            1. Отлично, рад что разобрались!

              И вас поздравляю с праздником!22

  9. Игорь, спасибо! Установила наконец себе содержание! Давно собиралась, твоя статья помогла 45
    Установила себе третий 06
    А что это у тебя за желтая мордочка тигра в панели?

    1. Привет Лена! Я очень рад, что моя  статья оказалась тебе полезна! Я уже заглянул к тебе на блог и впечатлился новым содержанием. Отлично  выглядит!
      Скажи мне пожалуйста, у кого из нас галлюцинации? smile Лично я никакого тигра не вижу :)))) Вроде бы я сегодня не пил…

      1. Я тоже не пила, хоть и выходной, а тигра проверила — до сих пор там

        1. аааааааааааааааааааа…………Ты про этого тигра? Так ,это мой плагин кеширования WP Fastest Cache! Слышала о таком?

          1. Нет не слышала, у тебя есть на блоге для ознакомления?

            1. Нет Лена, на моем блоге нет, но завтра я скину ссылку на видео статью одного крутого мастера, у которого я узнал о плагине.
              Знаешь, о кеше уже столько написано в интернете, что я подумал, что эта тема уже слишком заезжена и не интересна. Хотя…именно про этот плагин никто не пишет (он не популярный) короче…завтра скину ссылку, хорошо?

            2. Лена, лови ссылку на обзор этого плагина WP Fastest Cache от интересного веб мастера и блогера Сергея Чункевича 

              http://sergeychunkevich.com/6-ehffektivnye-instrumenty-dlya-biznesa-v-internet/

            3. Спасибо, Игорь! почитаю45

            4. Кстати я про Турцию написала 40

            5. Да я знаю Лена! Получил уведомление по e-mailЯ же твой верный подписчик smile Сейчас не дома. Наверно только завтра смогу прочитать. Спасибо

  10. Спасибо, друг! Установила новую цацку на блоге по здоровью! Так горжусь собой — не передать! Давно хотела, но руки только сегодня дошли…

    1. Галя, я очень рад, что моя статья оказалась тебе полезна! И ты можешь гордиться собой независимо от того, сделала ли ты это меню или нет. Ведь кроме этого, ты делаешь очень много всего полезного как для себя, так и для других. 17

  11. У меня все еще этой фишки нет на блоге, поставить что ли? 

  12. Но вообще то эта фишка ведь нужна для больших постов, вот типа этого. Теперь поняла, почему у меня ее нет. У меня нет таких больших статей почти. Спасибо за труд, желаю удачи!

    1. Привет Надежда! Согласен с тобой, что содержание статьи может оказаться полезным в основном в объемных постах. В настройках плагина можно выставить такие определения, благодаря которым, меню (содержание) будет выводиться только в длинных статьях. Просто нужно обозначить те теги (H2-H6) при которых меню появится. Ведь в коротких статьях скорей всего не будет некоторых тегов, соответственно содержание не будет фигурировать в начале статьи. Поэтому я посоветовал бы тебе установить этот плагин в любом случае. 

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

  13. Добрый день, нужно или нет добавлять к ссылкам содержания статьи тег rel=»nofollow». Спасибо за ответ.

    1. Здравствуйте Александр.
      В интернете есть несколько мнений по этому поводу, но лично я уверен в том, что ссылки в содержании статьи не надо закрывать в «nofollow» 
      Дело в том, что меню не является ссылкой и поисковые системы это прекрасно понимают!
      И поэтому, они наоборот одобряют их, так как понимают, что автор хочет сделать удобную навигацию для посетителей. 

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

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

  14. Здравствуйте, Игорь. Установила я плагин Table of Contents Plus, но никакое оглавление автоматически у меня не выводится. Подскажите что сделать.

    1. Привет Наталья! Проблема заключается аналогична как у Дмитрия (несколько комментариев выше). Копирую текст, который написал ему. Проверь это дело..

       
      Дело в том, что в некоторых ваших статьях присутствует не более 2-ух подзаголовков, а в настройках плагина вы скорей всего отметили как и у меня (вывод меню только в том случае, если будет 3 подзаголовка и больше) не так ли?
      Во всех ваших статьях, в которых присутствует более трёх подзаголовках, содержание статьи корректно отображается

       

  15. Здравствуйте, Игорь! Установил я плагин Table of Contents Plus, Все работает прекрасно, спасибо. Но поскольку я в кодах пока не очень,а точнее не как, подскажите куда нужно вставлять шорткод. Заранее спасибо!

    1. Здравствуйте Александр! Шорткод нужно вставлять только в том случае, если вы не хотите выводить меню в определённой статье. А так меню выводится автоматически во всех статьях, в зависимости от настроек.

      Я заглянул к вам на блог и обратил внимание на то, что в статьях у вас почти нет подзаголовков. Скорей всего из-за этого в некоторых статьях у вас не выводится меню. Ведь вспомните мою статью, там я объяснил, что вывод меню зависит от настроек заголовков и подзаголовков (h2 и h3)

  16. Здравствуйте Игорь! Такой вопрос, установил плагин Table of Contents Plus, сделал все как у Вас написано, в одной статье показывает содержание, а в другой нет!
    Вот пример: здесь содержание не отображается building-hut.ru/derevaynnoe-domostroenie/estestvennaya-vlazhnost-drevesiny
    а здесь все в порядке: building-hut.ru/derevaynnoe-domostroenie/doma-ruchnoj-rubki
    И еще в содержание выводится «Поделится в соц. сетях»
    Помогите разобраться!

    1. Здравствуй Павел! С радостью тебе помогу разобраться 18

      Итак…

      В первой статье, где не вывелось меню, у тебя присутствует один заголовок с H2 и один подзаголовок с H3, все остальные подзаголовки выведены с H4!!! Если ты сделал настройки плагина также, как описано в моей статье, то подзаголовки H4 в меню не выводятся! Кроме того, скорей всего у тебя настроено так, что содержание статье выводиться только в том случае, если будут 3 и больше заголовков с H2 и H3. Я прав? Вот поэтому в этой статье содержания нет! Просто замени один из подзаголовков на H3 и сразу же увидишь меню smile

      По поводу того, что в содержании выводится «Поделится в соц. сетях»…

      Дело в том, что «Поделится в соц. сетях» у тебя тоже выводится с помощью H3 и оно находится прямо под статьёй, а это значит, что плагин распознаёт его как заголовок. Я упомянул это в статье! Если ты не хочешь, чтобы это выводилось в содержании, то замени его на H4.

      Надеюсь, что помог тебе разобраться!

  17. Роман Погромский:

    большое спс за пост. разобрался. давно искал. а здесь расписано все по полочкам.

    1. Здравствуй Роман! За пост пожалуйста. Буду рад видеть тебя частым гостем

  18. К сожаления в моем шаблоне после установки плагина Table of Contents Plus исчезла «карусель» и стал некорректно работать виджет «гл.меню»! Пришлось удалить. sad

    1. Здравствуй Юлия. Скажи, а что такое «Карусель»? 08

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

      Ну не страшно. А вы не пробовали использовать код оглавления статей, который я предложил в этой статье от Вебмастера Тимура? Может быть он не навредить вашей «Карусели»? 06

  19. Table of Contents Plus
    Как сделать в плагине, чтобы вместо нумерации были маркеры?
    Чтобы выводилось оглавление после тега море?

    1. Здравствуй Лалла. Я попробовал поиграться с настройками плагина Table of Contents Plus и так и не смог найти там опцию, благодаря которой вместо нумерации были маркеры. 

      Если вам очень нужны маркеры, то единственным вариантом вам подойдёт другой плагин, а именно Simple TOC. Обзор этому плагину я сделал в начале этой статьи. Данный плагин конечно же не такой крутой как Table of Contents Plus, но если маркеры вам настолько критичны, то этот вариант будет оптимальным.

      Есть ещё один вариант, но он потребует от вас определённых действий. Перейдите пожалуйста по этой ссылке

      Вас перебросит на мою статью, в которой я рассказываю как сделать меню статьи с помощью якорей. 

      Впечатлитесь и возможно вам понравится этот вариант.

      1. Спасибо за ответ! Сделала так: 
        1. Не стала париться с маркерами, раз это так критично.
        2. Добавила везде подзаголовки в том месте, где мне бы хотелось выводить меню.

        1. Ну и правильно smile
          У вас отлично выглядит меню статей, так что все нормально.

  20. Спасибо автору за статью!Давно искал как реализовать оглавление на сайте.

    1. Пожалуйста Сергей и спасибо за комментарий

  21. Table of Contents Plus Спасибо за плагин! Отличная штука, упростило процесс создания оглавления.

  22. Татьяна:

    Игорь, здравствуйте! Спасибо за материал, установила плагин Table of content plus. 18
    Возник вопрос: у меня в содержании последним пунктом идет «поделитесь в соцсетях», можно ли как-то убрать эту строчку?
    Кстати, может быть кому-то пригодится, сначала был только пустой прямоугольник, я замучилась в настройках лазить. А потом заметила, что он вовсе и не пустой, а прозрачныйsmile Зашла в произвольное оформление и добавила цвета в шрифт. Слова появились 03

    1. Здравствуйте Татьяна. Рад, что статья оказалась вам полезна.

      По поводу вашего вопроса…

      Я как раз упомянул об этом в статье. Дело в том, что плагин создает меню в зависимости от настроек заголовков (H2, H3, H4, H5, H6). Если вы отметили, чтобы в меню отображались эти заголовки, значит пункт «поделитесь в соцсетях» как раз и имеет один из H.

      Например, если в настройках вы отметили, что меню будет только из H2 и H3, а пункт «поделиться в соцсетях» у вас тоже H3, то как вариант, вы можете изменить пункт на H4 или сделать его просто жирным шрифтом.

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

  23. Татьяна:

    «как вариант, вы можете изменить пункт на H4 или сделать его просто жирным шрифтом.»
    А как это сделать, ведь сама надпись расположена в плагине, а при редактировании записи она в тексте отсутствует?

    Белый прямоугольник — да, границы содержания, без текста. Я сначала расстроилась, все, думаю, и этот не подходит( Читала комментарии у Вас, что не выводит текст, через час только случайно обнаружила какое-то «шевеление» еле заметное, когда мышь навелаsmile Оказалось, все выводит, только в прозрачном видеsmile

    1. По поводу прозрачной рамки…ну это логично, ведь у вас голубой фон для текста, а у меня и практически у всех он белый 07

      По поводу вывода пункта «Вам понравилась статья? Расскажите о ней друзьям». В этом то вся и проблема, что надпись выводится плагином и в его программировании эта надпись прописана H3. В принципе, если вы являетесь профи в CSS и разработке плагинов, то можно залезть в его функции и изменить H3 на H4 (например). Я лично таковым не являюсь, поэтому помочь не смогу.

      У меня была подобная проблема (я упомянул это в статье), короче не стал я заморачиваться и снёс свой плагин. Вместо него установил код. А вот в коде было уже намного проще поменять H3 нА H4

      Я вас случайно не запутал всеми этими терминами?  04 laugh

      1. Татьяна:

        Нет, не запутали09 Не нашла я в плагине Н3, наверное, просмотрела где-то, хотя в поиск вводила. Ну, пусть будет. Он мне нравитсяsmile Придумаю потом что-нибудь08
        Спасибо большое!

        1. Не за что Татьяна. Обращайтесь когда вам угодно, а я постараюсь помочь всем чем только смогу. 23

  24. Александр:

    Игорь, привет! Очередной раз Твой блог меня выручил. Я с этим содержанием статьи, как курица с яйцом. По всему интернету носился. Ни чего не мог подходящего найти… Может искал плохо, а может… не знаю. Однозначно, первый раз услышал о плагине Table of Contents Plus. Всё отлично, всё работает. Правда работы предстоит переделать, с заголовками не дружил, знал что нужны, а не дружил. Придётся исправлять.
    Ещё прочитал твой душевный, так сказать крик,08 на днях вот так же маковку причёсывал, но не потому, что всё надоело, а потому, что я вообще в блогинге делаю. Забрёл на на сайт http://texterra.ru/ завис часа на 4-5, что они пишут, и что я.  АААА… КВН. Детский сад, против Академии наук.
    А на последок, вам скажу… «Важно создать такой текст, после которого пользователь перестанет искать информацию на эту же тему». Это я у них спёр. Глубоко копают ребята. После твоего блога, изыскания по теме закончены. Значит, не всё так уж и плохо.
    Кстати, если вспомнишь. Я у тебя на коммент напросился, я наконец ответил. Правда через два месяца. Сории. Я не виноватая. Ещё раз спс за нужный мне на данный момент плагин.

    1. Галина Нагорная:

      Отличная цитата — вот это всё, что и надо сделать при написании статьи — исчерпывающий ответ на то, что ищет человек!

      1. Александр:

        Да…Кратко и в цель. ещё прочитал интересную статью на тему уникальности текстов. «Уникальность контента: развенчание главного SEO-мифа» если интересно… я лично подзадумался и последний пост у себя выложил с уникальностью 78% хотя раньше столько времени тратил добиваясь 95-98% а надо ли это? Я не рекламирую их проект, не подумайте, просто зацепили они меня

        1. Привет Алесандр. Рад, что именно мой блог тебя выручил. Твой комментарий дает мне много сил. Спасибо.
          Ребята из текстэры очень крутые. Я читаю их блог уже более месяца и могу с полной уверенностью сказать, что их сайт лучший в своем роде (контент маркетинг). Но мне до них уххх как далеко sad
          Кстати, одной из причин моего крика души был из-за этого сайта. Я понимал, что не смогу конкурировать с такими монстрами.

          1. Александр:

            Вот и я про тоже… Знаешь когда то давно, читал книгу, даже название перевру наверно. Типа » Почему Россия, а не Америка» не помню врать не буду, маниторить лень. Паршев или Паршин автор, экономист. Она тогда здорово изменила моё восприятие действительности. Я это к чему, ближе к нашей теме, как он писал, дело не в товаре, не в его качестве, в своё время, ведь и запорожцы не плохо продавались, даже на экспорт шли… короче, у всего, есть свой покупатель или своя аудитория. Да, ребята вы крутые, кучу сайтов подняли, но это ваша работа. А у нас хобби. Ну не хочется мне марки собирать… Я бы хотел чего попроще, зачем мне эти коды, CSS и тому подобное, я и к новому году не разберусь. В конце концов, я хочу быть блогером, а верстальщиком. Вот нашёл плагин, описание куда галочку поставить и рад безмерно. Всё в порядке, всё работает. А их почитаю конечно, для общего развития…  Сам запутался, ну как-то так… laugh  

        2. Если сайт молодой — при выходе статьи в топ уникальность играет огромную роль — заматереете — можете писать не ниже 80%. Это то, что я знаю.

  25. Давно хотела сделать такую функцию, вот пошла в Гугл и нашла вашу статью. Спасибо за подробное объяснение. Все получилось с первого раза. Здорово, что плагин позволяет сделать вывод содержания с нужным дизайном. Минут за двадцать все настроила. И еще хорошо. что если в статье нет подзаголовков, то и содержание не выводится. Еще раз спасибо за урок. Пойду еще по Вашему блогу погуляю, может еще что полезное подсмотрюsmile

    1. Здравствуйте Ирина. Я очень рад что моя статья оказалась для вас полезной и все у вас получилось с первого раза. Надеюсь, что на моем блоге найдете еще какую нибудь полезную информации.
      Огромное спасибо вам за комментарий и за добрые слова 17

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

  27. Только он почему -товписывает в содержание «читать также», запись от плагина похожих статей.. как бы убрать?

    1. Здравствуй Леди. Я как раз упомянул этот момент в статье (обрати внимание). Дело в том, что плагин похожих записей выводит заголовок в теге h2  или h3, а плагин Table of Contents Plus реализует меню как раз по этим же тегам. Единственный вариант исправить проблему, это — лезть в код плагина похожих записей и поменять тег заголовка «Читать также» на тег h4 или h5 или просто сделать его жирным. Другой вариант, это — отказаться от плагина и реализовать вывод похожих статей с помощью кодов. Это то, что я и сделал. А есть ещё один вариант и это — смериться smile

  28. Спасибо ) Больше всего мне нравится вариант — смирится  laugh  Лишь бы это не вредно было для сайта)

    1. 12 Ну и отлично. Спасибо за комментарий! 17

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

  30. :-)Посмотрела статью Тимура- да, не получится обойтись без плагина…

    1. Лидия, не мучайтесь! Установите плагин Table of Contents Plus и будет вам счастье 18
      По поводу нагрузки на сайт, можете не волноваться. Этот плагин практически не грузит блог и я в этом убедился! Пользуйтесь на здоровье.

      1. Спасибо, Игорь. Поставила плагин. Но мне не нравилось, когда в содержании выводились заголовки , как: 1.1.1, 1.1.2, и так далее. Тогда я убрала галочку с пункта Show hierachy , теперь все замечательно.  Спасибо !

  31. Спасибочки большущее тебе, Игорь за твою статью и рекомендацию этого чудо-плагина! Активировала его вчера вечером у себя на одном из моих сайтов (на deklife.ru). Так он родной, мне столько косяков выдал в моих «тайтлах». До трех часов ночи сидела исправляла свои ошибки в текстах по тайтлам. Вот молодец какой! А какое «Содержание этой статьи» он теперь выводит в моих длиннющих статьях-мануалах, это просто мечта!!! Короче, я в восторге от работы этого плагина. Прописывать содержание кодами мне лень, да и не получится так красиво, как это делает Table of Contents Plus!  good 

    1. Не за что Елена. Я очень рад, что информация в статье оказалась тебе настолько полезной.
      Тебе и правда этот плагин был просто необходим, ведь статьи у тебя как мини книги smile Без содержания тяжело обходиться.

      1. Сначала я поставила себе блок с Содержанием с БЕЛЫМ ФОНОМ — не понравился. Сделала с нежно-голубым, он вписался в дизайн шаблона моего сайта, как родной. Так и оставила.
        Теперь у меня гора с плеч спала. Все мои посты теперь систематизированы и удобны для прочтения. Не нужно скроливать далеко вниз, чтобы найти ответ на свой вопрос. Отличный плагин!

  32. Оказалась так просто реализовать, думал мудрить придется. Плагин всем хорош, только есть 1 большой недостаток (ну для меня по крайней мере) — если исключить вывод h1, h2, h3 и т.д. тоже не выводятся, по иерархии. Если кто знает способ как исправить, т.е. выводить только начиная с h2 — поделитесь пожалуйста!

    1. Здравствуй путешествующий.
      Не совсем понял про недостаток плагина. В настройках нужно отметить те заголовки, которые хочешь чтобы выводились (H2, H3, H4, H5, H6). Если не отметишь заголовок H1, значит содержание будет выводиться начиная с H2. Это также, как и выводится мое содержание на этом блоге.

  33. Яна:

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

    1. Здравствуйте Яна. Я упоминал эту проблему в статье, а также в комментариях не раз спрашивали подобный вопрос.
      Дело в том, что в настройках плагина вы можете решить, какие теги H1-H6 будут выводиться в содержании. Чаще всего отмечаются теги H2-H3, иногда H4. Проблема в том, что ваши заголовки: Поделиться, Похожие статьи и Понравилось, выводятся с помощью тегов H3 и если в настройках плагина у вас отмечена опция вывода ссылок с тегом H3, то соответственно все заголовки с таким тегом появятся в содержании статьи.
      Как это можно решить? Есть два варианта:
      1)  В настройках отменить пункт H3, но тогда в меню будут выводится ссылки только на заголовки H2. На мой взгляд это глупо! 
      2) Второй вариант и по моему единственный правильный, это — изменить тег H3 заголовков: Поделиться, Похожие статьи и Понравилось, на H4 или на H5 или же сделать их совсем без тега, а просто отметить жирным шрифтом.
      Надеюсь, что не запутал вас )))

      1. Яна:

        Спасибо, но не помогло. Заголовки в статье под тегом h1и h2. В настройках убрала тег h3. Меню вообще не выводится. Я уже ставила разные теги и в настройках галочки снимала. Дело в том, что кнопки Поделиться и Похожие выводятся плагином JetPack

        1. Яна, я только что проверил несколько ваших статей и заметил, что почти во всех нет подзаголовков, кроме одного главного H1. В таком случае конечно не будет выводиться меню. Я советую вам оставить галочку в настройках только на тег H2. Почистите кеш и проверьте. Я уверен в том, что все статьи в которых присутствуют заголоваи H2, появятся в меню, а все остальное: подписаться, нравится и т.п. пропадет.
          Уведомите меня, когда сделаете это, хорошо?

          1. Яна:

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

            1. Яна, ну как там дела? Получилось?

            2. Яна:

              Позже ещё поковыряюсь, сейчас нет времени

      2. Татьяна:

        Здравствуйте, Игорь! Я Вам уже писала выше по такому же поводу. Так и не нашла в плагине Н3, Убрала нафиг эту надпись «поделиться в соцсетях» в настройках совсем и нормально smile  Уже ведь каждый знает, что нужно поделиться или похожие статьи посмотреть, зачем тогда эти надписи. Вот такой выход нашла. Теперь и кнопки поделиться есть, и содержание в норме 🙂 

  34. Здравствуйте. Есть такой момент у плагина Table of Contents Plus — он ссылки изменяет из-за якорей добавляя к ним такую беду #i-4. Подскажите как это исправить? А еще подцепляет значки цитаты, а они там совсем не нужны. gyazo.com/f80836211a295911fb738f68d737c190
    Может и с этим поможете?

    1. Здравствуйте Алексей. По поводу якорей #1-4….не совсем понял! Можете дать ссылочку на статью, в которой фигурирует данная проблема?
      По поводу значков цитат…
      Вот это я вообще слышу впервые smile
      На скриншоте которые вы дали, я вижу квадратики, а не значки цитат.

  35. Здравствуйте, Игорь. Для примера например вот ссылка medicynanaroda.ru/vospalenie-golosovyh-svyazok.html После нажатия на любой элемент содержания к ссылке приписывается приставка от якоря. Попробуйте и увидите. Я у многих такое наблюдаю, но у еще более многих такого нет.
    А насчет квадратиков, то в моей теме Yelly эти квадратики и есть значки цитат. И как от них избавиться я не знаю. Надеюсь на вашу помощь.

    1. Здравствуй Алексей. Извиняюсь за поздний ответ — забыл про ваш вопрос 11

      По поводу добавки #i-2 в конце ссылки…

      Можете не волноваться по этому поводу! Когда после ссылки стоит решётка #, то поисковые системы прекрасно понимают, что в данном случае речь идёт о якоре, то есть «Содержание статьи» «Меню статьи». Мало того, это приветствуется поисковиками, так как они понимают, что автор пытается облегчить жизнь читателям и тем самым заботиться о них 07 Мало того, такие ссылки не считаются дублями и не индексируются! 

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

      По поводу квадратиков…

      Я прошёл по ссылке, которую вы предоставили и обратил внимание на то, что в меню не фигурируют квадратики. То есть меню выглядит корректно. О чём это говорит? Вы поменяли шаблон или что-то изменили? 

      1. Кстати, Алексей, обратите внимание на то, что при нажатие на раздел «Контакты» под шапкой блога, меня перебрасывает на рубрику «Народные рецепты» Проверь это дело! 

  36. Добрый день, Игорь. Спасибо, что ответили. С якорями теперь все понятно. А тот сайт, который я скинул в комментарии выше не мой — я его взял для примера, можете удалить ссылку из коммента. Мой сайт только в разработке. Квадратики все еще подцепляются, но я сумел их в сторону передвинуть. Блок оглавления немного увеличился из-за этого в размерах, но по другому никак.

    1. А, спасибо, что уведомили по поводу этого сайта. Ссылку удалю. А вот вы меня заинтриговали прямо по поводу этих квадратиков 08 Как бы мне посмотреть на это дело изнутри? Неужели никак нельзя убрать их из меню? 

      1. Может и можно, но я не программист и не знаю как это сделать. Вот мой новый сайт dar-zdorovya.ru Скриншот как было раньше, я вам скидывал выше. Теперь вот так: без рамки, широко, но хотя бы не мешают.

  37. Вероника:

    Здравствуйте!
    А я столкнулась с неожиданной и неприятной ситуацией. Последний плагин стоял на сайте и успешно справлялся с работой, пока случайно не заметила, что Яндекс стал индексировать статьи с описанием не из описания, а из содержания этого плагина. Они берут содержание статьи и кидают в описание выдачи. Позиции поплыли вниз. Плагин снесла, восстанавливаю позиции. Как быть? Как решить вопрос содержания статьи, чтобы оно (содержание) не попадало в выдачу? Спасибо

  38.  Установила первый плагин, хотела, как проще, а он совсем не работает.

    1. Ксенья, а так всегда, хочешь как проще а получается как всегда  laugh Так попробуйте другой плагин. 

  39. Игорь:

    Как поменять расположение содержания сразу после первого абзаца в TOC+ 🙁 

    1. Привет Игорь.

      В настройках плагина в ярлыке «main» есть опция «position» там можешь выбрать расположение содержанищ в статьях.

  40. Закир:

    Отличная статья, огромное спасибо автору, по больше бы таких людей!

  41. Игорь, привет. С плагином содержание статьи сделать конечно намного проще, но я хочу сделать без плагина.  cool 

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

      1. Игорь, привет. Те причины, которые ты назвал тоже играют в этом роль. Но если хорошенько разобраться, то любой плагин — это и есть код, просто с расширенным функционалом и со скриптом на разработчика для обновы. И я не думаю, что плагины особо блог грузят. Большей степенью в этом играет роль — моя принципиальность, просто хочу без плагина и всё. Вообщем я уже разобрался в теме и нашёл подходящий код для этого. Сначала одним пробовал делать, но он почему-то делал всю статью как список. Потом второй код нарыл, пока всё получается.
        Кстати, С наступающим Новым годом! Желаю счастья, удачи, здоровья тебе и твоим близким.

        1. Я как раз хотел это и сказать «любой плагин — это и есть код, просто с расширенным функционалом» Прости был уверен в том, что ты начнёш сейчас наезжать на плагины и т.д  😀 

          Спасибо за поздравление и желание на Новый год! Желаю тебе как минимум того, что ты пожелал мне 

  42.  Спасибо за ссылку, как сделать содержание без плагина. Может быть вы подскажете, как вы сократили ярлык вашего длинного заголовка?
    С новым годом вас, с новым счастьем! 🙂 

    1. Андрей Косолапов:

      Ярлык доменного имени, а разве это делается не здесь? 

      1. Андрей Косолапов:

        Вернее длинного заголовка, а не доменного имени, это я думал не про то, простите.04 А сократить легко, даже просто. Если не понятно, напишите мне, сделаю статью про это с видео. И С Наступающим Вас!

  43. Привет Андрей. Благодарю за желание помочь.

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

    1. Андрей Косолапов:

      Привет! Не вопрос, после Нового Года сделаю. А тебя С Наступающим!

  44. Яна:

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

    1. Здравствуй Татьяна. В жизни блогера самое главно это настроить меню, а остальное (просрочить оплату, потерять все файлы, купить платный шаблон и заново сайт с нуля делать) это так…неважное  😀  blum  rofl 

  45. Татьяна:

    Игорь, огромное спасибо вам за ваши статьи, за то, что всегда на связи, отвечаете, помогаете! Успехов и процветания вам в новом году, всего самого наилучшего! 🙂 

    1. Здравствуй Татьяна. На самом деле меня уже давно не за что благодарить, ведь я уже более поугода не отвечаю на комментарии, не помогаю, не пишу новые статьи и вообще не проявляю активность в блогосфере. Так что извините мень Татьяна и все посетители блога  sorry 
      А за пожелание на новый год спасибо — принимаю! И вам желаю такого же 22

  46. Спасибо за no_toc! долго искала как исключить показ содержания на странице, думала еще куда вставить этот шорткод, поставила просто в конце текста и все получилось! Не везде нужен этот вывод содержания.

  47. Раньше тоже делал содержание статьи при помощи плагина, а сейчас всё делаю руками с помощью кода. Против плагинов ничего не имеют, просто кодом мне как-то удобнее. 29

  48. Спасибо за детальную статью. Сделал меню плагином Table of Contents Generator. Но в моей теме Yelly в меню статей появились синие квадратики. Наверное с моей темой плагин не совсем совместим. 

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

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

Следите за новостями блога

Получайте новые статьи блога на ваш email

email рассылки Конфиденциальность гарантирована
Реклама
Последние комментарии
  • Alex { Спасибо! }
  • Игорь Черноморец { Здравствуй Олег. Рад, что статья оказалась полезной. Хотя...уже несколько лет не пользовался сервисом и не... }
  • Олег { Спасибо за статью. Все очень хорошо написано. Вы подтвердили мои сомнения. }
  • Dima { С Instagram к сожалению эта фишка не работает. 🙂 (:sorry:) }
  • Назар { Оптимизация картинок онлайн это действительно важно! Сам недавно сделал свой сайт и начал осваивать SEO,... }