Простые способы создания оглавления (содержания) на сайте

Простые способы создания оглавления (содержания) на сайте

Блок с оглавлением статьи полезен прежде всего посетителям сайта, большая часть которых читают статьи бегло. Не находя в самом начале интересующей информации многие покидают страницу. С помощью списка заголовков мы сразу даем понять, что содержится в статье  и легко переадресовываем читателя в нужный раздел.  Рассмотрим простые способы добавления содержания для  статей сайта без плагинов на HTML+CSS, Js+CSS и с плагином для WordPress.

Создаем оглавление с помощью Javascript.

Скрипт легкий и не нагружает сайт, не создает текст в исходном коде страницы.  Создает оглавление из тегов h2-h7. Автоматически генерирует блок содержания перед первым заголовком, при выделении области статьи, которую необходимо оглавить.

Создаем оглавление с помощью Javascript

Первым делом создайте в блокноте документ и назовите его toc.js. Скопируйте этот код и вставьте его в документ, сохраните.

JS
(function ($) { 'use strict'; jQuery(document).ready(function () { /* Create a table of contents */ $.fn.ToC = function( options ) { var toc = $.extend({ /* * The heading property is the selector for your headings. It must be a valid * jQuery selector, such as 'div' or '.heading'. */ heading : 'h2, h3, h4, h5, h6, h7', /* * The generateID property specifies whether or not we want to have anchor ids * automatically generated for us. This is recommended. */ generateID : true, /* * If the generateID property is set to true, the baseID property will in turn * be used as the base ID for your headings, such as <h2 id="foo-1">. In this case, * foo would be the base ID. */ baseID : 'heading', /* * The containerClass property is the class we'll add to our <nav> parent element. * This has no bearing on the script, it is here merely for your convenience. */ containerClass : 'toc-navi', /* * The appendTo property is crucial in determining the placement of your newly generated * navigation. This property must be a valid jQuery selector. * NOTE: The navigation will be prepened to this element (placed before all other elemenets within it). */ appendTo : this }, options); return this.each(function() { var $this = $(this), navigation = $('<ol>'); $this.find( toc.heading ).each(function(i) { var id = this.id; /* * If ID generation is enabled, we add a custom id to each heading, * which will serve as the destination for our anchor. */ if ( toc.generateID ) { if ( id.length ) this.id += ' '; id = toc.baseID + '-' + i; this.id += id; } /* * I opted for the <nav><ul><li><a> structure, * so that's what you get. */ navigation .append( $('<li>') .append( $('<a>') .attr( 'href', '#' + id ) .text( this.innerHTML ) ) ); }); $(toc.appendTo).prepend( $('<nav>').append( navigation ).addClass( toc.containerClass ) ); }); }; /* * Example usage, with all the extras. */ $('.toc').ToC({ heading : 'h2, h3, h4, h5, h6, h7', generateID : true, baseID : 'contents', containerClass : 'table-of-contents', appendTo : '.toc' });
});

})(jQuery);

1. Подключение скрипта на сайт WordPress.

Созданный документ  необходимо загрузить в папку темы сайта. Зайдите на свой хостинг или подключитесь по FTP. Перейдите в /wp-content/themes, найдите папку «JS» и загрузите в нее файл toc.js.

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

PHP
/** Enqueues scripts TOC. */ function nanima_scripts() { wp_enqueue_script( 'toc', get_template_directory_uri() . '/js/toc.js', array('jquery'), true ); } add_action( 'wp_enqueue_scripts', 'nanima_scripts' );

2. Подключение скрипта к HTML сайту.

Загрузите файл toc.js в папку «JS». Вставьте строчку <script type="text/javascript" src="js/toc.js"></script> перед закрывающим тегом </body> на ту страницу, которая отвечает за вывод содержимого ваших постов.

3. Выводим оглавление в статье.

На странице выделите ту часть статьи для которой необходимо будет создать оглавление <div class="toc">текст</div>. Например, первый заголовок у вас начинается со второго абзаца, над этим заголовком добавьте <div class="toc">, а в конце статьи закройте блок </div>. Содержание сгенерируется перед первым заголовком статьи. 

4. Стили для блока «Содержание».

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

CSS
/* Table of contents ------------------------------------------------- */ .table-of-contents { font-size: .8em; display: inline-block; float: right; max-width: 30%; margin-bottom: 12px; margin-left: 16px; padding: 0 1em; border: 1px solid #dadada; -webkit-border-radius: 3px; background: #f5f7f9; -webkit-box-shadow: inset 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3); box-shadow: inset 0 0 1px rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3);
} .table-of-contents:before { content: 'Содержание'; display: block; font-size: 1.2rem; font-weight: bold; color: #8495a3; } .table-of-contents a { text-decoration: none; color: #545454; } .table-of-contents a:hover, .table-of-contents a:active { text-decoration: underline; } .table-of-contents ol { padding: 0; list-style: none; counter-reset: counter-table-of-contents; } .table-of-contents ol ol { padding-left: 2em; } .table-of-contents ol li { margin: .5em 0; } .table-of-contents ol li::before { content: counters(counter-table-of-contents, '.') ' '; counter-increment: counter-table-of-contents; opacity: .7; } @media only screen and (max-width: 768px){ .table-of-contents { display: block; float: none; max-width: 100%; margin-left: 0; } }

Оглавление с помощью HTML и CSS кода.

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

Добавьте в теги заголовков атрибут id. В том месте где захотите вывести оглавление добавьте блок навигации и нумерованный <ol> или ненумерованный <ul> список ссылок.

HTML
<nav class="table-of-contents">
<h2 id="toc-heading">Оглавление</h2>
<ol>
<li><a href="toc-1">Заголовок 1</a></li>
<li><a href="toc-2">Заголовок 2</a></li>
<li><a href="toc-3">Заголовок 3</a></li>
</ol>
</nav>

<h2 id="toc-1">Заголовок 1</h2>
<p>Есть в тихом августе, мечтательном и кротком, такая мягкая, певучая печаль, что жаль минувшего, мелькнувшего в коротком, что сердце просится: «к забвению причаль».</p>

<h2 id="toc-2">Заголовок 2</h2>
<p>Как обвораживает мне глаза адриатическая бирюза! Облагораживает мне уста непререкаемая красота.</p>

<h3 id="toc-3">Заголовок 3</h3>
<p>Обескураживает вышина, от туч разглаживает лик луна. И разгораживает небеса семисияющая полоса.</p>

Теперь осталось добавить стили, можно воспользоваться предыдущими, только изменить класс .table-of-contents:before на .toc-heading.

Плагин «Легкое оглавление» для WordPress.

Очень удобный плагин Easy Table of Contents, генерирует блок с содержанием статьи, как на страницах, так и в записях. Можно настроить условие, когда содержание будет появляться в статье, выбрать место вывода, стиль нумерации.

плагин для создания содержания статьи сайта

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

Простые способы создания оглавления (содержания) на сайте
СтраUz
Читайте также
Привет! Я Натали Мамбетова.

Занимаюсь разработкой сайтов, блогов, интернет-магазинов, лендингов на WordPress. Оказываю платные помощь и консультации. Являюсь сертифицированным партнером TemplateMonster по CMS системе WordPress, имею сертификат этой компании подтверждающий мои навыки в работе с данной системой.

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

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

© СтраUz 2018. Все права защищены. Копирование разрешено только с указанием гиперссылки на источник.
Сделано с ❤
Заказать сайт