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

Всем привет!

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

Введение

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

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

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

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

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

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

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

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

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

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

Больше дела — меньше слов. Переходим к технической части.

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

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

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

<h2 id="id1">заголовок 1</h2>

где 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>

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

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>

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

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

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

1
2
3
4
5
6
7
8
9
<div style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;">
<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 style="border: 1px dotted black; padding: 5px 5px 0 15px; margin: 5px;">
<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>

Заключение

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

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

С уважением, Владимир Денисов!

Также стоит прочитать:

Красивая форма подписки feedburner для WordPress... Всем привет! Сегодня поменял внешний вид формы подписки на обновления моего...блога, реализованной через такой сервис Google, как feedburner. Именно по этой...причине в данной статье я расскажу о создании красивой формы подписки feedburner...для WordPress.
Картинки в комментариях. Плагин Comment Images... Здравствуйте, читатели моего блога! Речь в данной статье пойдет о плагине для...WordPress, который позволяет вставлять изображения в комментарии. Разумеется,...это не единственный способ выполнения данной операции, ведь уже размещенное в...интернете изображение можно вставить в комментарий с использованием ссылки не...него. Однако, для этого изображение должно быть размещено в интернете, а...какое-либо стороннее изображение, к примеру, с жесткого диска вашего компьютера,...добавить не удастся. В этом случае на помощь приходит плагин.
Галерея изображений стандартными средствами WordPr... Всем привет! В сегодняшней статье я хочу затронуть вопрос создания простой...галереи изображений для WordPress стандартными средствами данной CMS.
Простой способ изменить фон для WordPress сайта!... Всем привет! Сегодняшняя статья будет наиболее интересна новичкам, которые...хотят изменить или установить фон для своего сайта/блога на WordPress, ведь в...ней я расскажу об одном быстром и простом способе сделать фон для своего...интернет-ресурса.
Всплывающие картинки в WordPress без плагина... Всем привет! Про то, как сделать всплывающие картинки в WordPress я уже писал в...одной из своих статей, но там речь шла о...применении специального плагина. Логично будет рассмотреть способ получения...аналогичного результата без установки дополнительных плагинов. Именно об этом мы...и поговорим в рамках сегодняшней статьи.

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

  • Хорошая статья. Надо как нибудь попробовать. Володь, а как работает «Оценка»-это та что со звездочками? Я щелкал по ней и твитнул статью, а оценка все равно ноль. 😕

  • Да,все теперь работает! Поздравляю с сотней поситителей. ❗ Когда рекламу будешь ставить?

    • Спасибо, Андрей, действительно данная отметка была достигнута впервые ❗
      Если честно, то на счет рекламы пока особо не думал, на самом деле уровень посещаемости не дотягивает до требований РСЯ. А некоторые виды рекламы приносят сущие копейки. Надо будет посмотреть, реально ли что-то заработать 😉

  • Спасибо за информацию. Правда у меня пока статьи не большие, но думаю для общего развития пригодиться. ➡

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

    Но, вручную это делать — работа клопотливая. Для масовых (когда обрабатываю например 300 статей) созданий вики для постов использую Зеброид — и пока более удобного инструмента не встречал.

    Для WP было бы шикарно найти плагин, который бы сам формировал оглавление — избавило бы мастера от головной боли.

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

      • Если говорить о 1-2 статьях в неделю — то это да. А вот если вести два десятка блогов (ресурсов, назовем это так) — то как раз над автоматизацией нужно бы задуматься.

  • Очень легко и просто получилось содержание статьи. Как раз искал, как это удобнее сделать.Спасибо, Владимир, за полезную информацию.

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

  • Владимир, спасибо за статью. У себя никак руки не доходили разобраться с этим, теперь поправлю свои статьи и сделаю содержание. Ещё раз — спасибо!

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

    Спасибо большое

  • Здравствуйте! Можно так же сделать содержание блога?

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.