プラグインなしで目次リンクを自動生成する方法

長文記事を書く際に、目次を設置すると、ユーザーがサイト内をナビゲートしやすくなり、コンテンツの理解を助けることができます。また、目次でユーザーの関心が高まり滞在時間が増えると、「間接的にSEOに好影響を与える」と言われています◎プラグインを使用せず、自前でスタイルした目次リンクを自動生成する方法をご紹介します。

4つの手順

01.functions.php

①、下02で作るjsファイルを読み込み、
②目次リンクを生成するためのショートコードをfunctions.phpに追加します。

    
    // ----------custom.jsファイルの読み込み----------
function custom_scripts() {
    wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_scripts');

// ----------ブログ投稿ページ目次自動生成----------
function set_custom_index_link() {
    ob_start();
    echo '目次';
    echo '';
    $html = ob_get_contents();
    ob_end_clean();

    return $html;
}
add_shortcode('custom_index_link', 'set_custom_index_link');

このコードは、目次のタイトルと空のリストを含むHTMLを出力し、ショートコード[custom_index_link]を使用してページ内の任意の場所に目次を挿入することができます。

02.jQuery

次に、目次リンクを生成し、見出しタグにIDを付けるためのjQueryコードを作成します。

格納場所：wp-content/themes/your-theme/js/custom.js

(このコードは、ページ内のh2からh6までの見出しタグにIDを追加し、その見出しタグを目次リンクとしてリストにまとめます。)

    
    jQuery(document).ready(function($) {
    if ($('.custom_index_link').length) {
        $('h2, h3, h4, h5, h6').each(function(index) {
            var anker = 'anker_' + index;
            $(this).attr('id', anker);
            $('.custom_index_link').append('' + $(this).text() + '');
        });
    }
});

03.CSS

次に、目次リンクのスタイルを設定します。

    
    .custom_index_title {
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
}
.custom_index_link {
    padding: 0px;
    margin: 1em 0px 0px 1.5em;
}
.custom_index_link_h3 {
    margin: 0px 0px 0px 1.5em;
}
.custom_index_link_h4 {
    margin: 0px 0px 0px 3em;
}
.custom_index_link_h5 {
    margin: 0px 0px 0px 4.5em;
}
.custom_index_link_h6 {
    margin: 0px 0px 0px 6em;
}

04.HTML

最後に、目次リンクを表示させたい場所にショートコードを挿入します。

    
    [custom_index_link]

補足と注意

jQueryコードはページ内のすべてのh2からh6の見出しタグを対象としているため、サイドバーやフッターの見出しも目次に含まれる可能性があります。

これを防ぐためには、特定のコンテナ内の見出しタグのみを対象にするようにjQueryコードを修正する必要があります。本記事の場合、記事内の見出しタグにはそれぞれh2にはblog-heading2、h3にはblog-heading3などのクラス名を付与しているため、以下のようにカスタマイズしています。◎

    
    jQuery(document).ready(function($) {
    if ($('.custom_index_link').length) {
        $('.blog-heading2, .blog-heading3, .blog-heading4, .blog-heading5, .blog-heading6').each(function(index) {
            var anker = 'anker_' + index;
            $(this).attr('id', anker);
            $('.custom_index_link').append('' + $(this).text() + '');
        });
    }
});