Содержание статьи в сайтбаре с фиксацией при прокрутке

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

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

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

Функция формирования содержания статьи на сайте

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

Функцию нужно добавить в ваш файл functions.php, предварительно сделав его резервную копию. А лучше работать с этим файлом в дочерней теме или через плагин.

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

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

Настройки эти вы найдёте в начале функции, вам нужно будет изменить значение символов и подпунктов в зависимости от объёма ваших статей. По умолчанию содержание отображается в статьях, где есть хотя бы 2 подзаголовка (h) и 2000 символов в статье.

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

Код для вывода содержания в сайтбаре

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

Код нужно разместить в файле functions.php, ниже основной функции:

## вывод содержания в сайдбаре
add_action('wp_head', 'sidebar_contents');
function sidebar_contents(){ 
if( ! is_singular() ) return;
global $post;
$args = array();
$args['selectors'] = array('h2','h3');
//$args['margin'] = 50;
//$args['to_menu'] = false;
//$args['title'] = false;
 $GLOBALS['kc_contents'] = Kama_Contents::init( $args )->make_contents( $post->post_content );
}
// затем в сайдбаре выводим: echo $GLOBALS['kc_contents'];

Вывод содержания в сайтбаре

Далее, в код сайтбара нужно добавить вот эту строчку:

echo $GLOBALS['kc_contents'];

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

Обычно в этом файле кодируется вся структура сайтбара. Вам необходимо открыть этот файл в редакторе, проанализировать и добавить перед закрытием последнего блока ДИВ (</div>) этот код:

<?php echo $GLOBALS['kc_contents']; ?>

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

Только содержание сейчас не будет фиксироваться при прокрутке, оно будет оставаться на своём месте. Для того чтобы содержание смещалось и было видно при прокрутке нужно наш код дополнить.

Как зафиксировать содержание статьи в сайтбаре

Первым делом нужно код вызова содержания обернуть в блок ДИВ с идентификатором id=»fixblock».

<div id="fixblock">
<?php echo $GLOBALS['kc_contents']; ?>
</div>

Далее, открываете файл подвала footer.php и перед закрытием тега БОДИ (</body>) вставляете код скрипта:

<script type="text/javascript">
function getTopOffset(e) {
 var y = 0;
 do { y += e.offsetTop; } while (e = e.offsetParent);
 return y;
}
var block = document.getElementById('fixblock'); /* fixblock - значение атрибута id блока */
if ( null != block ) {
 var topPos = getTopOffset( block );
 window.onscroll = function() {
 var newcss = (topPos < window.pageYOffset) ?
    'top:20px; position: fixed;' : 'position:static;';
 block.setAttribute( 'style', newcss );
 }
}
</script>

Сохраняйте файл и проверяйте. Сейчас содержание должно фиксироваться и двигаться вслед за статьёй.

Видеоинструкция

Вот так вот можно быстро сделать содержание для статей сайта. Для маленьких статей это неактуально, а вот для объёмных — очень удобный навигатор.

Друзья, у меня на сегодня всё, всем желаю удачи и хорошего настроения!

С уважением, Максим Зайцев