Автоматические содержание статей из заголовков h2 — удобная навигация по странице для записей WordPress
Содержание отлично подойдет для статейного сайта, данное решение именно на них и было реализовано, для удобства навигации пользователя, что повышает поведенческие и лояльность пользователя к сайту.
Реализовано не на одном статейнике, решение очень удобное и с ним в разы проще размещать статьи.
Подключаем все необходимое
Открываем single.php и вставляем под h1 див table-of-contents.
1 2 3 4 | <div id="table-of-contents"> <div class="table-of-contents-head">Содержание статьи</div> <ul style="display: none;"></ul> </div> |
Туда же размещаем скрипт, можно конечно и в шапку, но если нужен будет отдельный шаблон, который я описываю ниже, лучше в single.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | jQuery(document).ready(function($) { var menu = $('.modal-body h2'); if ( menu.length ) { $('#table-of-contents ul').html(menu.clone()); $('#table-of-contents ul h2').replaceWith(function(index, oldHTML){ return $('<span class="sl_lt">').html(oldHTML); }); $('#table-of-contents span').wrap('<li></li>'); $('#table-of-contents span').wrap('<a id="b" rel="nofollow noindex" class="anchor"></a>'); var i=0; $('.modal-body h2').each(function(){ i++; $(this).attr('id', 'b_'+i); }); var a=0; $('#table-of-contents ul li a').each(function(){ a++; $(this).attr('href', '#b_'+a); }); $('#table-of-contents ul').show(); $('#table-of-contents a').hover( function(){$(this).prev('span').show();}, function(){$(this).prev('span').hide();} ); $('a[href^="#"]').click(function(){ var _href = $(this).attr('href'); $('html, body').animate({scrollTop: $(_href).offset().top+'px'}); return false; }); } }); |
Ну и стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #table-of-contents { padding: 0 10px; border: 1px solid #ccc; } .table-of-contents-head { font-size: 18px; margin: 7px 0; } #table-of-contents ul{ margin: 0 0 0 30px; } #table-of-contents li a { padding: 5px 0; display: block; color: #765B66; text-decoration: underline; } #table-of-contents li { font-size: 16px; } |
После все что добавили, чтобы заработало, необходимо контент обернуть в див с классом modal-body, и все должно работать.
Добавляем отдельный шаблон записей
Если вы добавляя статьи вручную делали содержание страниц, можно сделать отдельный шаблон.
Создаем файл например single-soderzhanie.php на основе нашего single.php и прописываем в нем следущее:
1 2 3 4 5 6 | <?php /* Template Name: Шаблон записи с содержанием Template Post Type: post */ ?> |
Заливаем обратно и видим в админке, что мы можем изменить шаблон нашей записи, на шаблон с содержанием
И теперь у нас есть отдельный шаблон записи с содержанием, размещаем статьи, выбираем свойства записи и радуемся жизни.