ミギムキ

[WordPress] 目次リンクをプラグインなしで自動生成したい

公開日:2018/12/12

やりたいこと

長い文章を書くときは章立てして見出しをつけ、ページの冒頭に目次リンクをつけておくことが推奨されています
読み手がページのボリューム感を掴めるようになり、気になる章から読み進められるようになり、滞在率の向上と直帰率の低減が見込めます
SEO対策としても重要な目次リンクですが、見出しにidを振ってリンクをまとめて動作確認して～と、結構手間がかかります
かといって目次リンクのためだけにプラグインを使うのも気が引けます。ページのテイストに合わせて目次のデザインも自前でスタイルしたいということもあるでしょう
そんなときのために、プラグインなしで目次リンクを自動生成する仕組みを検討してみました

サンプルコード

functions.php

function set_index_link() {
    ob_start();
    echo '<p class="index_title">目次</p>';
    echo '<ul class="index_link"></ul>';
    $html = ob_get_contents();
    ob_end_clean();

    return $html;
}
add_shortcode( 'index_link', 'set_index_link' );

jQuery

jQuery(function($) {
    if($('.index_link')) {
        $('h2, h3, h4, h5, h6').each(function(index) {
            var anker = 'anker_' + index;
            $(this).attr( 'id', anker );
            $('.index_link').append('<li class="index_link_' + $(this).prop('tagName').toLowerCase() + '"><a href="#' + anker + '">' + $(this).text() + '</a></li>');
        });
    }
});

CSS

.index_title {
    padding: 0px;
    margin: 0px;
    font-size: 18px;
    font-weight: bold;
}
.index_link {
    padding: 0px;
    margin: 1em 0px 0px 1.5em;
}
.index_link_h3 {
    margin: 0px 0px 0px 1.5em;
}
.index_link_h4 {
    margin: 0px 0px 0px 3em;
}
.index_link_h5 {
    margin: 0px 0px 0px 4.5em;
}
.index_link_h6 {
    margin: 0px 0px 0px 6em;
}

html

[index_link]

目次リンクを置きたいところにショートコードを挿入してください

仕組み、解説、補足など

jQueryでページ内のhタグにアンカーを付け足します
合わせて、タイトルテキストを引っ張って目次リンクとしてまとめています
目次としてまとめたい見出しに合わせて、「$('h2, h3, h4, h5, h6')」の中身は削除してください

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。