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

(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'
        });

    });

})(jQuery);

/*
 * Example usage, with all the extras.
 */
    $('.toc').ToC({
        heading: 'h2, h3, h4',//укажите селекторы заголовков, можно указать тег, ID или class, по умолчанию h2-h7
        generateID: false,//отключит добавление ID в заголовки статьи, по умолчанию стоит true
        baseID: 'part',//изменит ID заголовков, по умолчанию "heading"
        containerClass: 'table-of-contents',//изменит класс контейнера содержания, по умолчанию "toc-navi"
        appendTo: '.entry-content'//вставит содержание перед любым блоком, тут надо указать селектор класса этого блока
    });

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

/**
 *Enqueues script TOC
 */
    add_action( 'wp_enqueue_scripts', 'webkato_toc_scripts' );
    function webkato_toc_scripts() {
        if( is_single() ) {
            wp_enqueue_script( 'toc', get_template_directory_uri() . '/js/toc.js', array('jquery'), true );
        }
    }

/**
 *Register scripts TOC
 */
    add_action( 'wp_enqueue_scripts', 'webkato_toc_scripts' );
    function webkato_toc_scripts() {
        wp_register_script( 'toc', get_template_directory_uri() . '/js/toc.js', array('jquery'), true );
    }

/**
 *Register shortcode for script TOC
 */
    add_shortcode( 'toc_script', 'webkato_toc_shortcode' );
    function webkato_toc_shortcode( $atts ) {
        wp_enqueue_script( 'toc' );
    }

<div class="toc">статья с заголовками</div>

<nav class="toc-navi">
  <h2 class="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 ------------------------------------------------- */ 
.toc-navi {
    float: right;
    font-size: 0.8em;
    max-width: 30%;
    margin-bottom: 12px;
    margin-left: 16px;
    padding: 0 1em;
    border: 1px solid #dadada;
    -webkit-border-radius: 3px;
    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);
}

.toc-navi::before { /*только для 1 способа на jQuery*/
    content: 'Содержание';
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: #8495a3;
}
.toc-heading { /*только для 2 способа на HTML*/
    content: 'Содержание';
    display: block;
    font-size: 1.2rem;
    font-weight: bold;
    color: #8495a3;
}
.toc-navi a {
    text-decoration: none;
    color: #545454;
}
.toc-navi a:hover, .toc-navi a:active {
    text-decoration: underline;
}
.toc-navi ol {
    padding: 0 0 0 20px;
}
toc-navi ol li {
    margin: .5em 0;
}
@media only screen and (max-width: 768px){
    .toc-navi {
        float: none;
        max-width: 100%;
        margin-left: 0;
    }
}