Упрощение вывода оглавления статьи при помощи шорткода

Опубликовано ,

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

Пример содержания статьи

  1. Добавление якоря
  2. Вывод якоря
  3. Кнопка «к содержанию»

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

Кроме того, есть возможность, что Гугл заберет ссылки из оглавления в расширенный сниппет:

Содержание на самом сайте (открывается по клику)

Большинство блоггеров выводят его при помощи плагина TOC+ (Table of Contents Plus). Он довольно удобен и обладает расширенными настройками, позволяя максимально кастомизировать вывод оглавления статьи.

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

И в первом, и во втором случаях навигация по статье составляется из заголовков H2-H5 и выводится в указанном месте в начале статьи.

Почему мне не нравится такое решение?

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

Минус: якорные ссылки придется задавать вручную.

Простое добавление якоря шорткодом

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

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

Итак, создаем шорткод:

<?php
/**
 * Шорткод, выводящий якорь
**/
function fairy_short($atts, $content = "") {
    extract(shortcode_atts(array(
         "id" => ''
    ), $atts));
	return '<div class="post-anchor" id="'.$id.'">'.$content.'</div>';
}
add_shortcode("oglavl", "fairy_short");

Этот код надо добавить в самый конец файла functions.php (в админке: Внешний вид / Редактор).

Функция выше создает элемент <span> с классом post-anchor и заданным вами идентификатором.

Вот так будет выглядеть его вывод:

У вас будет 2 возможности использования:

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

Плавное движение к подзаголовку

Если вам не нравится стандартный якорный «прыжок», можете добавить в файл footer.php следующие несколько строк, которые создадут эффект плавной промотки.

/**
 * Скрипт плавной промотки до якоря
 */
$('a[href^="#"]').click(function (event) {
	event.preventDefault();
	var id  = $(this).attr('href'),
		top = $(id).offset().top;
	$('body,html').animate({scrollTop: top-60}, 1000);
});

Примечание: не забудьте заключить скрипт в соответствующие теги <script></script>

На строке №8 вы можете указать отступ от верха страницы (60 пикселей в данном случае: top-60) и скорость промотки (1000)

Использование шорткода в статье

Еще раз приведу код вывода данного шорткода в редакторе: ТЕКСТ(не обязательный элемент)

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

Пункт №1 будет ссылаться на подзаголовок H2 «Простое добавление якоря шорткодом». Переходим к этому пункту и обрамляем его в наш шорткод, не забыв указать уникальный идентификатор.

Как это выглядит — смотрите ниже

Обрамленный шорткодом подзаголовок статьи

Теперь остается только добавить в оглавление статьи ссылку на наш якорь id-1. Можете проверить ее работоспособность =)

Второй вариант вывода

Вторую ссылку добавим без текста, в любом месте статьи.

Этот якорь будет невидим в теле статьи, можно добавлять его куда душе угодно. Ссылку — аналогично в содержание.

Вот в общем-то и все =)

К содержанию

Ссылка «К содержанию статьи»

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

  • немного дооформить блок-якорь,
  • изменить код шорткода
  • добавить идентификатор-якорь к оглавлению статьи

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

1) Переходим в текстовый редактор и добавляем якорь к заголовку оглавления. Вот так это выглядит у меня:

2) Редактируем функцию шорткода

Добавим ссылку с текстом «к содержанию» в вывод шорткода. Как видите, я сразу прописала ссылку к якорю #oglavl и задала класс k-sod

<?php
/**
 * Шорткод, выводящий якорь со ссылкой "к содержанию". Выводится одним тегом К содержанию, возможность привязки к тексту убрана
**/
function fairy_short_2($atts, $content = "") {
    extract(shortcode_atts(array(
         "id" => ''
    ), $atts));
	return '<div class="post-anchor" id="'.$id.'"></div><a href="#oglavl" class="k-sod">К содержанию</a>';
}
add_shortcode("oglav", "fairy_short_2");

3) Оформляем ссылку в файле style.css (в админке Внешний вид / Редактор)

/**
 * Стили ссылки "к содержанию" и стрелочки рядом с ней
 */
 .k-sod {
    display: block;
    clear: both;
    border-bottom: 1px solid;
    text-align: right;
    font-size: 13px;
}
.k-sod:after {
    content: "\2191";
    margin-left: 3px;
}

Задаем размер шрифта, выравнивание по правому краю, линию-разделитель. Также при помощи псевдоэлемента :after выводим стрелку вверх после ссылки

4) Вывод

Неправильный вариант — шорткод попал в тег заголовка, как видно в визуальном редакторе

Правильный вариант

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

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

Задавайте вопросы, с удовольствием отвечу =)

4 комментария

  1. Viktoria

    Спасибо большое, мне очень была полезна информация. Честное слово все прочла и попыталась разобраться 🙂 . Меня смущает содержание статьи с перепрыгиванием. Поэтому в большинстве случаев пишу содержание без ссылок. Читатель просмотрев содержание поймет, что интересующая его тема присутствует, но до нее нужно будет «промотать». Если посещение статьи на 2200 слов 2 минуты, то с прыжками оно еще сократится. А вот ссылка, возвращающая к содержанию страницы, мне понравилась. Я как раз из тех любителей «все включено».

    Ответить
  2. Наталья

    На многих сайтах видела оглавление и задумывалась, как же это делается. Просто любопытно. Я сама не сторонница писать большие тексты, не потому что лень, а просто сама не люблю читать слишком большие тексты, Да и краткость — сестра таланта, чего зря воду лить. Лучше по существу.
    И всё же информация действительно ценная. Может быть и мне она когда-нибудь пригодится. Главное. знать. где её искать при надобности. А я теперь знаю.
    Спасибо.

    Ответить
  3. vitaly

    Подскажите, как сделать вывод новостей не из отдельной страницы, а из отдельных якорей (или чего-то другого) на одной странице?
    На странице есть аудиофайлы:
    — 1 название файла
    — 2 название файла
    — 3 название файла
    Как сделать так чтоб при публикации на этой же странице следующего аудио файла, например:
    — 4 название файла
    он выводился в ленту новостей?
    Можно конечно на отдельной странце размещать по одному аудиофайлу, но страниц будет очень много, и это
    не сильно удобно.

    Ответить
  4. Алевтина

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

    Ответить

А что вы думаете по этому поводу?

Ваш e-mail не будет опубликован.

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