Как сделать содержание статьи вордпресс по заголовкам – Как писать статьи в WordPress — визуальный и Html редакторы, заголовки и выделение ключевых слов

Хоть я и не сторонник этого подхода, но хотя бы упомянуть о нем я обязан. Есть такой плагин Table of Contents Plus.

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

В качестве его недостатков хочу отметить следующее:

1. Он будет выводить оглавление каждый раз, когда достигнуто минимальное количество заголовков. Меня это не устраивает. По-моему содержание не всегда уместно
2. Внешний вид может не подойти под конкретный дизайн блога
3. Возможен конфликт со стилями темы

Без плагина

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

1. Создаю нумерованный список из всех заголовков в начале статьи. Место можете выбрать абсолютно любое
2. Вставляю ссылки в каждый пункт. Для первого пункта – ссылка #1, для второго — #2, для третьего — #3 и так далее.
   
3. Перехожу в режим «текст». Перед первым заголовком вставляю код <a name = “1”></a>. Для следующих заголовков меняется только цифра.
   

Чтобы быстрее находить заголовки в коде, я пользуюсь поиском. Нажимаю Ctrl+F и в строке поиска ввожу h3. У меня, как правило, заголовки находятся в теге h3.

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

Кстати для тех, кто понимает хоть немножко в коде, показываю, как выглядит оглавление в режиме «текст»:

<strong>Оглавление:</strong>
<ol>
<li><a href="#1">Шрифт</a></li>
<li><a href="#2">Абзацы и подзаголовки</a></li>
<li><a href="#3">Списки и цитаты</a></li>
<li><a href="#4">Картинки и видео</a></li>
<li><a href="#5">Как оживить статью</a></li>
<li><a href="#6">Требования поисковых систем</a></li>
<li><a href="#7">Уникальность</a></li>
<li><a href="#8">Тошнота</a></li>
<li><a href="#9">Правописание</a></li>
<li><a href="#10">Советы для оптимизации</a></li>
</ol>

<strong>Оглавление:</strong> <ol> <li><a href=»#1″>Шрифт</a></li> <li><a href=»#2″>Абзацы и подзаголовки</a></li> <li><a href=»#3″>Списки и цитаты</a></li> <li><a href=»#4″>Картинки и видео</a></li> <li><a href=»#5″>Как оживить статью</a></li> <li><a href=»#6″>Требования поисковых систем</a></li> <li><a href=»#7″>Уникальность</a></li> <li><a href=»#8″>Тошнота</a></li> <li><a href=»#9″>Правописание</a></li> <li><a href=»#10″>Советы для оптимизации</a></li> </ol>

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

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

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

Видео по теме:

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

Надеюсь, информация вам понравилась, оставляйте комментарии, не держите всё в себе

Поделитесь со своими друзьями в социальных сетях и подписывайтесь на обновления.

До скорых встреч! Пока!

С уважением! Абдуллин Руслан

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

Как сделать содержание (оглавление) статьи на сайте WordPress простым способом без плагина?

Приветствую вас, посетители блога lubovzubareva.ru!

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

Посмотрела в настройках записи  Wordpress на своем блоге, но так и не нашла заветной функции.

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

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

Содержание:

1. Зачем нужно делать оглавление (содержание) статьи?
2. Как сделать содержание статьи на сайте WordPress простым способом без плагина?

Зачем нужно делать оглавление (содержание) статьи?

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

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

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

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

Как сделать содержание статьи на сайте WordPress простым способом без плагина?

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

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

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

Итак, все по порядку:

• заходите на свой сайт, переходите в режим редактирования записи, в которую вы хотите добавите оглавление.
• вручную пишите слова СОДЕРЖАНИЕ (или ОГЛАВЛЕНИЕ, или что-то подобное)
• далее копируете заголовки из поста и вставляете их списком под фразой «содержание» (на скриншоте смотрите, я выделила этот блок желтым)
• выделяете название первого пункта содержания (1) и нажимаете на скрепку, чтобы вставить ссылку (2)

• далее в строку URL нужно написать #1 и нажать ДОБАВИТЬ ССЫЛКУ

• аналогично, выделяете второй пункт из вашего оглавления, и вставляете #2, далее #3, и так далее, зависит от того, сколько у вас будет в статье заголовков

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

Здесь вам нужно найти ваши заголовки, и перед ними прописать текст такого вида перед первым заголовком: 

Перед вторым заголовком, перед третьим, все тоже самое, только меняете цифру на 2, 3 и далее аналогично, в зависимости от количества тем в вашем списке оглавлений.

Подсказка! Чтобы быстро найти среди тегов заголовок, можно нажать на клавиатуре комбинацию Ctrl+F и в выпавшее в правом верхнем углу поисковое окно ввести h3 — это означает заголовок 2 в вашей статье. Так вы быстро найдете все свои заголовки.

Если вы использовали другой стиль заголовка, можно аналогично использовать поисковую фразу среди текста, например, для заголовка 1 — h2 и так далее.

После проделанной работы нажмите в настройках  записи ОБНОВИТЬ (если статья уже была размещена на сайте). Или же Сохранить и ОПУБЛИКОВАТЬ (если вы ее только что написали).

Все готово! Теперь обязательно перейдите на блог и проверьте ваше оглавление в работе.

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

На сегодня, это все.

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

Очень интересно мнение простых пользователей, а также тех, у кого есть свои сайты: используете ли вы этот метод?

Если вы еще не успели, не забудьте подписаться на обновления блога. 

С уважением, Любовь Зубарева

Уважаемые читатели! Если вам понравилась статья, нажмите на любую из кнопок социальных сетей. Это лучшее «спасибо» за информацию. Понравилась статья? Поделись с другими!

Вы можете пропустить чтение записи и оставить комментарий. Размещение ссылок запрещено.

Как сделать содержание в статье блога на wordpress без плагинов – Блог Виталия Лебах

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

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

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

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

Быстрая навигация по статье

Делаем содержание в статье сайта на Вордпресс

Для общего представления: Каждому заголовку  статьи на который хотим отправлять читателей с блока «Содержание» присваивается своя ссылка, так называемый якорь. В самом содержании также, за каждым соответствующим заголовку предложением закрепляется нужная ссылка.

Затем всё можно оформить в рамку, выделенную подходящим цветом.

Как сделать якорь

В текстовом редакторе WordPress выделяем нужный заголовок, находим на панели значок «Якорь» (смотрите скрины) — жмём на него. В новом, появившемся окне произвольно прописываем название якоря, это и будет наша ссылка, обязательно копируем её иначе потом придётся переходить в HTML  редактор «Текст» и находить её там.

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

Итак, якорь для одного из разделов статьи готов, теперь его нужно привязать к соответствующей фразе в блоке «Содержание»

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

В принципе здесь всё просто — Выделяем нужную фразу «Содержания» и вставляем как обычную ссылку содержимое из буфера обмена (Ctrl+V)  Есть лишь один важный момент — Перед ссылкой нужно прописать символ решётки  (Shift+3) при английской раскладке.

Подобным образом делаем с остальными нужными нам частями содержания. Не забываем сохранить. После этого мы увидим, что фразы «Содержания» стали активными ссылками ведущими к нужному абзацу статьи.

Вот и всё, уже это будет отлично работать, можно оставить так. Желательно лишь выделить содержание от остального текста инструментами редактора.

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

Изменяем дизайн блока «Содержание»

Для этого нам понадобится перейти из визуального в HTML  редактор нажав кнопку «Текст». Здесь нужно найти созданное меню.

Теперь понадобится вот такой, уже готовый HTML код. Я узнал его от Дениса Повага о котором немного рассказывал на вот этой странице.  Этот код выделит наше «Содержание» рамкой  с жёлтым фоном. Просто скопируйте его и применяйте.

<div style=»background: #ffffa0; border: 1px solid #e5e597; padding: 8px 10px; font-size: 16px;»>здесь пункты содержания</div>    (ВНИМАНИЕ! ВАЖНО! Заметил, что в двух местах, кавычки в коде, после публикации статьи, сами подменяются на треугольные скобки. Если будете пользоваться предложенным кодом то нужно внести правку. Должно быть так, перед «background …….. и после 16px;» треугольные скобки которые вы видите, нужно исправить на кавычки. Смотрите следующее изображение, там всё верно! (Нужно просто заменить скобки на кавычки!)

Итак: нужно скопировать этот код, вставить его в свою запись, внести правку, а текст вашего содержания, вместе со всеми относящимися к нему атрибутами кодов, поместить перед закрывающимся тегом  </div> в этом коде.

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

Можно ли изменить цвет фона, толщину бордюра, размер? Легко! Давайте обратим внимание на информацию в коде, изменив которую можем корректировать дизайн по своему желанию.

Как изменить фон и размеры

(A)- background: #ffffa0; — Это цвет фона изменив значение #ffffa0 мы изменяем цвет. Существуют сайты для визуального подбора кода палитры цвета. Например вот этот   Выбираем нужный цвет, копируем полученный код и вставляем его вместо значения  #ffffa0 ( Важно соблюдать все  пробелы, точки с запятой и т.д.) Подменяем только значение цвета —   Обновляем страницу и любуемся новой палитрой меню.

Подобным образом подменяем значения в других пунктах. Они означают: Б  — заменив 1 на большее значение мы увеличим ширину бордюра.  В  — Код Цвета бордюра  Г и Д — Влияют на  расстояние от края рамки до текста и  размеры.

Например можно сделать вот так:

Но мне так конечно не нужно, это лишь для примера.

Вот таким образом можно создать  «Содержание» статьи и изменить его по своему усмотрению, без применения плагинов. Описывал долго и от этого может показаться слишком сложным это дело, но на самом деле всё просто. Один раз попробовать и всё легко уяснится.

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

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

Введение

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

Ранее я как-то не придавал этому особого внимания. А зря.

Сейчас объясню почему.

Почему важно наличие содержания статьи в WordPress?

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

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

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

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

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

Пришло время приступить непосредственно к рассмотрению самой последовательности действий по реализации поставленной задачи.

Как сделать содержание статьи в WordPress?

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

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

Переходим к технической части.

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

В данной статье для примера мы будем прописывать идентификаторы для заголовков h3-h6 (ведь h2 по идее должен быть заголовком самой статьи). Использовать все уровни заголовков в статье или только некоторые из них – решать вам, на суть метода это никак не влияет.

Главное, чтобы у каждого заголовка, который мы хотим отображать в содержании, был свой уникальный идентификатор. Вот пример прописывания идентификатора заголовку h3:

<h3>заголовок 1</h3>

<h3>заголовок 1</h3>

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

На самом деле в данной статье мы рассматриваем частный случай, и прописывать идентификаторы можно не только для заголовков, но и для некоторых других тегов (ol, ul, p).

Идем далее. После присваивания заголовкам идентификаторов нам необходимо оформить само содержание статьи.

Если совсем кратко, то вызвать список выбранных разделов статьи нам поможет код:

1
2
3
4
5
6

<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<li><a href="#идентификатор 2">заголовок 2</a></li>
...
<li><a href="#идентификатор n">заголовок n</a></li>
</ol>

<ol> <li><a href=»#идентификатор 1″>заголовок 1</a></li> <li><a href=»#идентификатор 2″>заголовок 2</a></li> … <li><a href=»#идентификатор n»>заголовок n</a></li> </ol>

Если же нужно оформить содержание, в котором помимо пунктов фигурируют также подпункты, то в данном случае нам нужен несколько другой код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<ul>
<li><a href="#идентификатор 1`">подзаголовок 1</a>
</ul>
<li><a href="#идентификатор 2">заголовок 2</a></li>
<ul>
<li><a href="#идентификатор 2`">подзаголовок 2</a>
</ul>
...
<li><a href="#идентификатор n">заголовок n</a></li>
<ul>
<li><a href="#идентификатор n`">подзаголовок n</a>
</ul>
</ol>

<ol> <li><a href=»#идентификатор 1″>заголовок 1</a></li> <ul> <li><a href=»#идентификатор 1`»>подзаголовок 1</a> </ul> <li><a href=»#идентификатор 2″>заголовок 2</a></li> <ul> <li><a href=»#идентификатор 2`»>подзаголовок 2</a> </ul> … <li><a href=»#идентификатор n»>заголовок n</a></li> <ul> <li><a href=»#идентификатор n`»>подзаголовок n</a> </ul> </ol>

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

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

Код для содержания, не содержащего подпункты:

1
2
3
4
5
6
7
8
9

<div>
<strong>Содержание статьи:</strong>
<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<li><a href="#идентификатор 2">заголовок 2</a></li>
...
<li><a href="#идентификатор n">заголовок n</a></li>
</ol>
</div>

<div> <strong>Содержание статьи:</strong> <ol> <li><a href=»#идентификатор 1″>заголовок 1</a></li> <li><a href=»#идентификатор 2″>заголовок 2</a></li> … <li><a href=»#идентификатор n»>заголовок n</a></li> </ol> </div>

Код для содержания, содержащего подпункты:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div>
<strong>Содержание статьи:</strong>
<ol>
<li><a href="#идентификатор 1">заголовок 1</a></li>
<ul>
<li><a href="#идентификатор 1`">подзаголовок 1</a>
</ul>
<li><a href="#идентификатор 2">заголовок 2</a></li>
<ul>
<li><a href="#идентификатор 2`">подзаголовок 2</a>
</ul>
...
<li><a href="#идентификатор n">заголовок n</a></li>
<ul>
<li><a href="#идентификатор n`">подзаголовок n</a>
</ul>
</ol>
</div>

<div> <strong>Содержание статьи:</strong> <ol> <li><a href=»#идентификатор 1″>заголовок 1</a></li> <ul> <li><a href=»#идентификатор 1`»>подзаголовок 1</a> </ul> <li><a href=»#идентификатор 2″>заголовок 2</a></li> <ul> <li><a href=»#идентификатор 2`»>подзаголовок 2</a> </ul> … <li><a href=»#идентификатор n»>заголовок n</a></li> <ul> <li><a href=»#идентификатор n`»>подзаголовок n</a> </ul> </ol> </div>

Заключение

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

На этом все, удачи вам!

Table of Contents Plus плагин содержания статьи в WordPress + решение без плагина

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

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

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

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

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

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

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

Способ 1. Плагин Вы устанавливаете один из модулей (например, Table of Contents Plus) формирования оглавлений и настраиваете его под свои нужды.

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

Способ 2. HTML код В этом случае придется самостоятельно прописывать название подзаголовков в меню, расставлять ссылки-якоря, задавать стили для таблицы.

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

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

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

Как пользоваться Table of Contents Plus, настройка

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

С его помощью и будем выводить на сайтах меню с подзаголовками как в Википедии.

Первым делом надо скачать сам плагин для чего переходим из административной панели WordPress в раздел «Плагины» далее «Добавить новый» и в поиске вводим название модуля Table of Contents Plus.

Далее загружаем и активируем плагин на сайте.

Теперь перейдя в «Настройки» вордпресс вы можете видеть новый раздел «TOC+» это и есть панель с настройками создаваемой структуры (оглавления) записей.

Остается кратко рассмотреть основные настройки Table of Contents Plus.

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

Position. Здесь надо выбрать в каком месте выводить содержание (перед первым подзаголовком или после него, вверху, внизу).

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

Show when. В каком случае будет отображено меню. Надо выбрать какое должно быть минимально количество подзаголовков в статье (2, 3, 4, 5, 6 и т.д.).

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

Auto insert for the following content types. Указываете галочкой, где будет выводиться блок-содержание (статья, страница, страница с обратной связью).

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

Если настроено автоматическое размещение меню, но в какой-то статье не нужен этот блок, тогда вставьте шорткод [no_toc].

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. Опция отвечает за отображение иерархии в блоке. То есть если в статье используются теги h3, h4, h5 тогда оглавление будет древовидным.

Number list items. Этот пункт позволит включить отображение нумерации в содержании, прям как в Википедии.

Enable smooth scroll effect. Как перенаправлять пользователя к выбранному заголовку (плавная прокрутка или быстрая).

Width. Ширина блока, здесь придется вам поэкспериментировать, так как у всех разные шаблоны.

Wrapping. Обтекание блока текстом. Можно выбрать без обтекания, слева или справа .

Font size. Указываем размер шрифта. Экспериментируйте.

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

Advanced. Дополнительные настройки, которые мало кому пригодятся, поэтому их нет смысла описывать.

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

Если какие-то есть вопросы по настройкам плагина Table of Contents Plus смотрите раздел справки «Help» там все подробно расписано.

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

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

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

Поэтому на seoslim.ru было решено выводить содержание в постах с помощью html кода.

Для чего в требуемом посте первым делом создаем таблицу ссылок.

<a href="#posts-1">Название ссылки 1</a>
<a href="#posts-2">Название ссылки 2</a>
<a href="#posts-3">Название ссылки 3</a>

<a href=»#posts-1″>Название ссылки 1</a> <a href=»#posts-2″>Название ссылки 2</a> <a href=»#posts-3″>Название ссылки 3</a>

Для каждой ссылки прописывается название подзаголовка, а сама ссылка должна содержать «якорь».

«Якорь» — это то место куда будет перенаправлен посетитель.

В моем случае якорем является posts-1, posts-2, posts-3.

Далее надо в статье расставить «якоря» именно в те места куда решите перенаправлять читателя.

Как видите на скрине для первого подзаголовка я указал такой «якорь»

И разместил его перед тегом h3 той части текста к которой он относится.

Тоже самое делаем для всех ссылок из содержания.

Для того чтобы оглавление в статье получилось красивым и сочеталось с шаблоном добавляем к таблице стили.

#sod {
    display: inline-block;
    padding: 18px 23px 13px;
    margin: 0 0 18px;
    background: #dfeef6;
    border-bottom: 2px solid #c0d0d9;
    border-radius: 7px;
}

#sod { display: inline-block; padding: 18px 23px 13px; margin: 0 0 18px; background: #dfeef6; border-bottom: 2px solid #c0d0d9; border-radius: 7px; }

Вот мой пример, где был создан атрибут <div></div> в который и помещаем содержание статьи.

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

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

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

Как сделать содержание статьи, страницы или записи, на сайте

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

Что такое содержание страниц и зачем оно нужно?

Ну, собственно, вы можете его наблюдать справа вверху, в этой статье. Это якорная ссылка, которая переводит не на другую страницу, а на нужное место в записи. Как правило, это заголовки (h3, h4, h5 и т.д.).

Зачем оно нужно?

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

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

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

Правильная структура (иерархия) заголовков.

Необходимо правильно располагать заголовки в статье. Первым должен идти заголовок h2 — ваше название поста. Чаще, h2 не участвует в оглавлении, а начинается все с h3. Далее располагаются заголовки h4, h5 и т.д. в порядке уменьшения.

Создаем содержание страницы (записи).

Чтобы код, представленный ниже заработал, его необходимо прописывать в текстовом режиме, редактора WordPress:

Стандартно заголовки выглядят так: <h3>Заголовок</h3>. Для того чтобы создать якорный заголовок, за который мы потом зацепимся, необходимо присвоить ему ID:

<h3>Заголовок</h3> 
<h4>Заголовок</h4> 
<h4>Заголовок</h4>

В поле id=«любой текст», для примера я использовал цифры.

Простое

После решетки (#) добавляем id нужного заголовка.

<div>
  <p>Содержание:</p>
  <ul>
    <li><a href="#1">Заголовок</a>
    <li><a href="#2">Заголовок</a>
    <li><a href="#3">Заголовок</a>
  </ul>
</div>

Результат:

Нумерованное

Тот же самый код, только вместо <ul></ul>, ставим <ol></ol>.

<div>
  <p>Содержание:</p>
  <ol>
    <li><a href="#1">Заголовок</a>
    <li><a href="#2">Заголовок</a>
    <li><a href="#3">Заголовок</a>
  </ol>

Результат:

Многоуровневое нумерованное

<div>
  <p>Содержание:</p>
  <ol>
    <li><a href="#1">Заголовок</a>
      <ol>
        <li><a href="#2">Заголовок</a>
        <li><a href="#3">Заголовок</a>
      </ol>
    <li><a href="#4">Заголовок</a>
      <ol>
        <li><a href="#5">Заголовок</a>
        <li><a href="#6">Заголовок</a>
        <li><a href="#7">Заголовок</a>
      </ol>
</div>

Также, для правильного построения цифровой иерархии, нужно добавить в style.css код (путь обычно такой: Ваш-домен/wp-content/themes/тема/style.css):

.toc > ol {counter-reset: li;}
.toc > ol > li {counter-increment: li;}
.toc ol ol {counter-reset: lili;}
.toc ol ol li {position: relative;list-style: none;}
.toc ol ol li:before {content: counter(li) "." counter(lili) ".";counter-increment: lili;position: absolute;left: -2em;}

Результат:

Оглавление в анонсах на главной странице.

Часто, на главной странице выводятся анонсы статей (по принципу блога) и в нем часть текста из статьи. Если Вы разместите содержание в верхней части страницы, то оно также будет отображаться на главной. Но переход по ссылке не будет переводить к заголовку. Потому что на главной странице их не будет. Чтобы перейти к заголовку с главной страницы, необходимо прописывать полный путь ссылки + #id заголовка, пример:

<div>
  <p>Содержание:</p>
  <ol>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#1">Лучшие сайты по заработку на кликах</a></li>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#2">Эффективные методы заработка на кликах</a></li>
    <li><a href="http://blogforest.ru/zarabotok-na-klikah.html#3">Другие способы заработка на кликах</a></li>
  </ol>
</div>

Оформление таблицы содержания.

Необходимо добавить код в style.css, он подойдет для любого выбранного кода, выше:

.toc {float:right;border: 1px dotted #0582ef;padding:4px 6px 0 6px;margin:4px;background: #f0f8ff;}
.toc p {color: #000000;margin-bottom: -10px;}
.toc a {color: #4db2ec;}

                            Подробнее о стилях:                                                                                                                                                                                           Результат:

• .toc {float: right; — выравнивание по правому краю (обтекает текстом слева).
• border: 1px dotted #0582ef; — обрамление, вместо dotted, можно использовать solid и dashed, ну и конечно менять цвет.
• padding: 4px 6px 0 6px; — внутренние отступы, можно поиграть с цифрами.
• margin: 4px — внешний отступ.
• background: #f0f8ff; — цвет фона таблицы.}
• .toc p {color: #000000 — цвет названия таблицы.
•  margin-bottom: -10px; — расстояние от заголовков, до названия.}
• .toc a {color: #4db2ec; — цвет заголовков}

Можно изменить все цвета под стиль своего сайта, изменить шрифты, фон и т.д., все зависит от Вашей фантазии. Или использовать как есть — вполне рабочий вариант, без излишеств.

Как сделать отступ для плавающего меню?

Если в Вашем шаблоне, главное верхнее меню ездит за экраном, оно может закрывать часть заголовка при переходе на него. Чтобы добавить отступ от меню, нужно добавить в style.css, код:

h3:target:before {content: "";display: block;height: 3em;margin-top: -3em; visibility: hidden;}
h4:target:before {content: "";display: block;height: 4em;margin-top: -4em; visibility: hidden;}

Данный код, для двух заголовков <h3> и <h4>, если необходимы другие, добавьте их по аналогии. Отступы настроены, для моего меню. Ваше меню, может быть, больше или меньше, поэтому меняйте параметры: height: 3em;margin-top: -3em;. Единственный нюанс, оставляете их симметричными. То есть, если меняете height: 5em, тоже самое значение, только с минусом, ставим для margin-top: -5em.

Создаем содержание веб-страницы, с помощью плагина.

Этот вариант используется на моем блоге. Совершенно не нагружает сайт, по сравнению с другими плагинами, которые я использую. Поэтому смело его рекомендую. Речь идет о плагине Table of contents plus или просто TOC.

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

Position — где будет размещено меню содержания на странице:

• Before first heading (default) — перед первым заголовком.
• After first heading — после первого заголовка.
• top — в самом верху в области контента.
• Bottom — в самом низу в области контента.

Show when — отображать меню, если в тексте присутствует указанное количество заголовков.

Auto insert for the following content types — автоматическая вставка содержания во все страницы, записи, в другие места (в зависимости от вашего шаблона темы).

Heading text:

• Show title on top of the table of contents — включение и отключение, отображения названия меню и ввод самого названия.
• Allow the user to toggle the visibility of the table of contents — включение опции показать/скрыть содержание.
• Hide the table of contents initially — скрыть оглавление по умолчанию.

Show hierarchy — отображать иерархию.

Number list items — нумерация оглавления.

Enable smooth scroll effect — плавный переход, к заголовку.

Appearance:

• Width — максимальная ширина, можно задать: автоматически или точный размер.
• Wrapping — выравнивание оглавления, по левому или правому краю.
• Font size — размер отступа, от названия таблицы, до самих заголовков.
• Presentation — выбор готового присета (у меня стоит «Light blue»). Можно настроить свою версию в разделе «Custom»

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

Чтобы открыть дополнительные настройки, нажмите кнопку Advanced «show«, внизу.

Первых два пункта: Lowercase и Hyphenate, можно пропустить,  т.к. они скорее всего не работают. Возможно у Вас работают? Первый должен сделать заголовки содержания с строчных букв (с маленьких). Второй, вместо подчеркивания, должен добавлять дефисы. Вообщем, не велика потеря, пункты не особо нужные.

Include homepage — разрешить отображать менюшку оглавления, на на главной странице (если оно там используется). Тут есть нюанс: если у Вас главная страница реализована по принципу блога (с анонсами), то оглавление также там будет (если включить). Но, оно не будет работать, т.к. toc ищет заголовки на текущей странице и не осуществляет переход на новую.

Exclude CSS file — запретить плагину, загружать свои css стили. Это может понадобиться, если Вы хотите использовать собственное оформление для вывода оглавления.

Preserve theme bullets — если в Вашей теме используются фоновые изображения для  <ul></ul> списка, включение данной опции отобразит их. Стандартно это черные точки, если они отображаются у Вас при включении пункта, значит особенных изображений нет.

Heading levels — выбор заголовков, которые должны участвовать в оглавлении страницы.

Exclude headings — добавить заголовки в исключение (используя символы: * и |), например:

• Фрукты* — исключить заголовки, которые начинаются со слова «фрукты».
• *Бананы* — исключить заголовок, если в нем встречается слово «бананы».
• Заголовок №1|Заголовок №2|Заголовок №3 — исключить заголовки по точному соответствию.

Smooth scroll top offset — если у Вас в теме используется плавающее главное верхнее меню, можно задать отступ в px.

Restrict path — запретить использование оглавление на определенных страницах, например:

Имеем страницу где не хотим показывать оглавление: https://blogforest.ru/zarabotok-na-klikah.html

Правильной код который нужно вставить будет выглядеть так: /zarabotok-na-klikah.html/

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

Default anchor prefix — изменение префикса url. При переходе к заголовку, к ссылке добавляются символы «#i», Вы можете изменить «i», на другой символ.

Использование шорткода — можно отключить автоматическое добавление содержания и использовать шорткод:

Его можно вставить в любом месте на странице.

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