Как быстро сделать содержание в статьях вордпресс

Дата: / Автор поста:


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

Содержание

  1. Делаем каркас.
  2. Настраиваем ссылки.
  3. Прикрепляем ссылки к пунктам в статье.
  4. Прикручиваем стили.

Html основа.

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

<div class="soderganie">
<h3>Содержание к этой статье</h3>
<ol>
<li>пункт 1</li>
<li>пункт 2</li>
<li>пункт 3</li>
</ol>

Я сделал контейнер div с классом soderganie, потом я написал саму надпись заголовка, ну и далее идет сам список, пунктов, их можно добавлять и убавлять, но про это позже.

Настройка ссылок.

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

<div class="soderganie">
<h3>Содержание к этой статье</h3>
<ol>
<li><a href="#name1">пункт 1</a></li>
<li><a href="#name2">пункт 2</a></li>
<li><a href="#name3">пункт 3</a></li>
</ol>

Опять поясню, мы присоединили тег ссылки, но как бы без самой ссылки в нее понятии, к примеру http://wpsovet.ru/, а сделали по id с помощью знака решетки. Но вы не замарачивайтесь, главное у каждой ссылки прописать разные идентификаторы, то есть name1, name2, name3 и так далее. Вот что уже получилось

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

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

Тут еще все проще, к примеру я присоединяю к заголовкам h2, а так можно прикрепить к любому элементу, но лучше это делать именно к заголовкам, чтобы человек перемещался сразу же в нужное место. Вот у нас есть «пункт 1», в статье я его обозначу так.

<h2>пункт1</h2>

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

<h2 id="name1">пункт1</h2>

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

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

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

Присоединяем стили.

Как видите я в первом коде прописал класс «soderganie» ко всему блоку вывода. Так вот это не зря, теперь идем в файл стилей style.css. Я предлагаю свою комбинацию, но вы конечно же будете прописывать свои под ваш дизайн. Даю вам код стилей, а под ним разъясню за что отвечает каждая строчка.

.soderganie ol{background: #DADADA;display: inline-block;padding: 0 0 0 10px;border: #000 2px solid;width: 90%;margin-bottom:20px;}
.soderganie ol li{margin:15px 7px;}
.soderganie ol li a {text-decoration: none;font: 16px arial;color:#E6E6E6;}
  1. Первая строчка задает стиль ко всему содержанию, фон, внутренние отступы, обводка, длинна (кстати уже адаптивная), и внешние отступы.
  2. Стиль самих пунктов, тут я прописал только внешние отступы, чтобы они не сливались.
  3. Третья тут сами ссылки, убрал подчеркивание, настроил величину текста, сам шрифт, и его цвет.

Вот так у вас должно выглядеть в самом файле style.css, вставляйте в любое место, но лучше в самый низ.

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

  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(2 голоса, в среднем: 5 из 5)

С уважением к читателям Лифанов Валентин.

Нажмите на кнопку социальных сетей, вам не сложно, а мне приятно.

Комментарии к этой супер статье.

  • Андрей

    Давно хотел спросить, как это сделать :smile:

  • Руслан

    Очень понравилась, статья. Даже мне, который 10 дней тому :arrow: не знал что такое Html, удалось вставить в статью — содержание, без плагина.

    Все лаконично и понятно!

    Спасибо.

    • Лифанов Валентин

      Руслан пожалуйста, был рад помочь.

  • Лиза

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

    • Лифанов Валентин

      Да конечно к любому, только нужно оформление настроить, если что обращайтесь, помогу, ничего не возьму за это, мне самому интересно.

  • mixinvestor.com

    Валь, я не осилю, честно(( Выглядит круто конечно, но ты же знаешь на каком я «вы» с HTML :((

    • Лифанов Валентин

      Тогда плагин будем пробовать.

  • Андрей

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

    • Лифанов Валентин

      Применяй повышай юзабилити.

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

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

*

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Лифанов Валентин. ©2014 Все права защищены. Полное или частичное копирование запрещено.