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

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

Здравствуйте, мои дорогие читатели. Рад вас видеть. В одной из своих предыдущих статей я говорил, что не лишним будет сделать оглавление, если объем статьи от 6000 символов и более.

Но, как это осуществить, не поделился. Сегодня я всё-таки расскажу вам, как сделать содержание для статьи в wordpress. Хотя эта информация будет полезна не только тем, кто создал сайт на CMS Вордпресс. Просто редактор вордпресса существенно упрощает задачу правки кода статьи.

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

С помощью плагина

Я являюсь сторонником того, что на блоге нужно использовать минимальное количество плагинов. Они грузят блог, усложняют код и так далее. У меня сейчас активировано 17 плагинов и есть еще 7 неактивных. Я считаю, что это много. А у вас сколько?

Для нашей задачи тоже существует решение в виде специального плагина.

Хоть я и не сторонник этого подхода, но хотя бы упомянуть о нем я обязан. Есть такой плагин 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 простым способом без плагина?

Июнь 5th, 2017 Любовь Зубарева Как сделать содержание статьи в wordpress простым способом блог любови зубаревой 10 аватар-min

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

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

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

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

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

Содержание:

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

ТЕКСТ вашей записи.

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

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

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

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

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

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

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

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

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

Например, я создала также содержание для с

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

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

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

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

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

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

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


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

поделитесь в соц.сетях

Untitled Document

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

Как сделать содержание в статье блога на 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 + решение без плагина

Содержание статьи с плагином TOC+ и кодом

Привет уважаемые читатели 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+

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

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

меню настроек TOC+

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

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

настройки toc+

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. Дополнительные настройки, которые мало кому пригодятся, поэтому их нет смысла описывать.

карта сайта Table of Contents Plus

Еще в панели управления плагином можно найти вкладку 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> в который и помещаем содержание статьи.

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

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

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

Как создать оглавление в записях и на страницах WordPress

Вы когда-нибудь задумывались о том, чтобы добавить в некоторые ваши длинные статьи блок с оглавлением? Оглавление упрощает пользователю навигацию по большой статье и позволяет сразу перейти к разделу, который он хотел бы прочесть. Также оно положительно влияет на SEO, так как Google автоматически добавляет ссылку Перейти к разделу, когда ваш сайт отображается в результатах поиска. Также вы можете вручную создать оглавление, написав немного кода HTML, но для многих новичков в WordPress это может вызвать трудности. В этой статье мы покажем вам как создать оглавление в записях и на страницах WordPress без единой строчки кода HTML или CSS.

jumptosection[1]

Первым делом вам необходимо установить и активировать плагин Table of Contents Plus. После активации вам необходимо настроить плагин. Просто кликаем на Параметры » TOC+ в административной панели WordPress.

toc-settings[1]

На вкладке Main Options вы можете выбрать где и когда вы хотите выводить оглавление. Стандартное его положение — ‘before the first heading’ (‘перед первым заголовком’). Это означает, что оглавление будет выведено перед первым тегом заголовка в вашей записи или на странице. Можно изменить значение на верх, низ или после первого заголовка.

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

Плагин будет выводить содержание только на страницах. Таково его поведение по-умолчанию. Однако, если вы хотите включить автоматическую генерацию оглавления и для записей блога в том числе, то вам для этого необходимо отметить галочку сразу после настройки ‘Auto insert for the following content types’. Вы можете ознакомиться с нашей статьей по отличиям записей от страниц в WordPress.

В Table of Contents Plus несколько предустановленных скинов. Их можно выбрать в разделе Presentation настроек. Также есть возможность создать свои собственные стили для оглавления.

toc-presentation[1]

После того, как вы закончите с настройками, кликните на кнопку Save Options для сохранения проделанных изменений.

Как это работает?

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

<h2>, <h3>, <h4>, <h5>

toc-post[1]

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

[no_toc]

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


Если хотите, то можете также вывести содержание в виджет сайдбара. Просто переходим в Внешний вид » Виджеты и перетягиваем виджет TOC+ в сайдбар. Также можно отметить галочку рядом с ‘Show the table of contents only in the sidebar’ (Отображать содержание только в сайдбаре), и оглавление будет выводиться только в сайдбаре, а не в записях и на страницах.

toc-widget[1]

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

VN:F [1.9.22_1171]

Rating: 5.0/5 (6 votes cast)

Как сделать автоматическое оглавление: подробная инструкция

Привет Всем! С вами Blog-Bridge.ru и я, Калмыков Антон. В этой статье я хотел бы рассказать вам, как сделать автоматическое оглавление в WordPress в своей статье при помощи кода или при помощи плагина Table of Contents Plus.

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

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

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

Содержание статьи:

Конечно же, не стоит злоупотреблять этим и делать содержание в посте, в котором всего 1500 – 2000 символов, один заголовок h3 и вы рассказываете о прекрасной погоде за окном. В этом случае использование оглавления совершенно неуместно и будет только раздражать.

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

Как сделать содержание статьи при помощи кода

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

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

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

Далее нажимаем кнопку «Вставить/Изменить ссылку» в редакторе WordPress.

И присваиваем ссылку # с номером для каждого пункта нашего меню.

Причем для второй строчки у вас URL  будет «#2», для третьей — «#3» и так далее.

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

В нем «1» — это переменная, которая соответствует номеру вашего заголовка. Например, в нашем случае для первой строчки это выглядит так:

А для второй вот так:

После того, как вы присвоили переменные вашим заголовкам, в правом верхнем углу редактора Вордпресс нажимаем «Сохранить»  и «Просмотреть».

В результате вот что у нас получилось:

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

Второй способ вывода оглавления заключается в установке и настройке под свои потребности плагина Table of Contents Plus.

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

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

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

После установки и активации плагина давайте перейдем к более тонким его настройкам.

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

Будем считать,  что если вы читаете данный раздел, то плагин уже установили. Теперь в административной панели Вордпресса в «Настройках» нажимаем на «TOC+».

После этого мы попадаем на страницу, на которой и происходит корректировка плагина под наши потребности.

  • «Position» — данный пункт позволяет выводить содержание до (Before first heading) или после (After first heading) первого заголовка, вверху (TOP) или в самом низу статьи (Bottom).
  • Второй пункт «Show when» — дает нам возможность выбора количества заголовков в посте, после которого плагин автоматически будет выводить содержание (в случае активации третьей строчки).
  • Строка «Auto insert for ….» — позволяет нам выбрать, где будет происходить автоматический вывод оглавления, в записях «post» или на страницах «page» блога.
  • В четвертой строчке «Heading text» — мы можем переименовать по нашему усмотрению заголовок содержания. Мы его назвали «Содержание статей», вы можете проявить свою фантазию и обозначить его по-другому. Также при активации в данной строчке чекбокса «Allow the user to toggle…» вы можете предоставить пользователю возможность скрывать содержание.
  • Чекбокс «Show hierarchy» — активирует древовидную иерархию оглавления.
  • Чекбокс «Number list items» — позволяет присваивать нумерацию разделов в оглавлении.
  • Чекбокс «Enable smooth…» — активирует прокрутку перехода к разделу. У нас я его поставил, так как он придает плавности перехода к разделу. Но это, по моему мнению, а пользоваться этим или нет решать только вам.

Настройка внешнего вида таблиц оглавления

  • Width — задает ширину таблицы оглавления. В ней три значения на выбор:

«Относительная (Relative)», «Фиксированноя (Fixed)» и «Другая (Other)». В результате вы с легкостью сможете подобрать нужный вам размер.

  • Wrapping – задает обтекание текстом таблицы. Мне не очень понравилось как это смотрится у нас на сайте, и я оставил не активным данный пункт.
  • Presentation – придает стиль нашей таблице. По умолчанию стоит серый цвет, но мы решили поменять его и выбрали пункт «Custom», в котором сами задали цвет фона и шрифта.

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

В данном меню мы можем дополнительно настроить регистры, анкоры, ограничить путь к файлам, исключить стиль CSS плагина и при этом будет задан стиль темы (Exclude CSS file), задать уровни заголовков, которые будут выводиться «Heading levels», а также задать уровень отступа от верхней кромки страницы (Smooth scroll ….).

Для нас пункт «Smooth scroll top offset» был спасением, так как у нас верхнее меню сайта статично и передвигается вместе с прокруткой статьи. И когда происходило перемещение на нужную часть нашей статьи, то меню закрывало наши заголовки. Изменив это значение на 90 px, я решил нашу проблему.

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

Заключение

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

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

Вообщем, теперь вы можете делать свои статьи более удобными для своего читателя. Причем потратив на это совсем немного времени. Выберите для себя наиболее удобный вариант для составления оглавления и вперед!

Пусть ваши посты будут в 100 раз лучше, чем у ваших конкурентов и пусть ваш контент займет топовые места в поисковой выдаче.

Если возникнут вопросы — пишите в комментариях!

Я с вами прощаюсь, до новых встреч!

Статьи в тему:

Простой способ защиты от спамеров: Akismet плагин

Hyper cache — настройка лучшего плагина по кэшированию

WordPress плагин формы обратной связи: Contact Form 7 ваш незаменимый помощник для общения

Как сделать хлебные крошки WordPress? Плагин Yoast SEO наш лучший помощник

 С наилучшими пожеланиями, Калмыков Антон

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

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