【WordPress】『Godios. 』に目次の自動生成機能を追加する

こんにちは。たなかです。

当ブログではWPテーマに「Godios.」を使用しています。

シンプルで爆速、レスポンシブ対応ということで見た目には申し分ないのですが、記事作成時に目次を追加したいなと思ったので過程をご紹介します。

導入方法

今回はkou様の『【Godios】目次を自動表示するカスタマイズをしてみた』を参考に目次の自動生成機能を追加してみました。

変更にはGodios.の子テーマをいじっていく必要があります。コピペで済むのでプログラミングがわからない方でも対応可能です。順番にいきましょう。

functions.phpにコード追加

FileZillaなどのFTPソフトを使って、子テーマのfunctions.phpをダウンロードしてきます。

場所はwp-content/themes/godios-child/functions.php

ダウンロードできたらファイルを以下のコードを追記していきます。不安な方はバックアップとっておきましょう。



// 目次生成
function read_toc_scripts(){
    wp_enqueue_script( 'toc', get_stylesheet_directory_uri() .'/js/toc.js', array('jquery') );
  }
  add_action( 'wp_enqueue_scripts' , 'read_toc_scripts' );
  function toc_in($the_content) {
    if (is_single()) {
      $toc = "";
   
      $h2 = '/<h2.*?>/i';//H2見出し
      if ( preg_match( $h2, $the_content, $h2s )) {
        $the_content  = preg_replace($h2, $toc.$h2s[0], $the_content, 1);
      }
    }
    return $the_content;
  }
  add_filter('the_content','toc_in');

toc.jsを作成して追加

次にwp-content/themes/godios-child/js/の配下にtoc.jsという名前のファイルを作成し、以下のコードをペーストします。



jQuery(function($){
let toc = '';
    // 目次の階層の判断に使用する変数
    let hierarchy;
    // h2、h3の判断に使用する変数 
    let element = 0;
    // ループの回数をカウントする変数
    let count = 0;
    
    $('article h2,article h3').each(function(){
        // ループのカウント数を増加 
        count ++;  
        // h2、h3タグにIDの属性値を指定
        this.id = 'chapter-' + count;
            
        // 現在のループで扱う要素を判断する条件分岐
        if(this.nodeName == 'H2'){
            element = 0;
        }else{               
            element = 1;
        }  
        
        // 現在の状態を判断する条件分岐
        if(hierarchy === element){ // h2またはh3がそれぞれ連続する場合
            toc += '';
        }else if(hierarchy  element){ // h2の次がh3となる場合
            toc += '';               
            hierarchy = 1;
        }else if(hierarchy > element){ // h3の次がh2となる場合
            toc += '';               
            hierarchy  = 0;
        }else if(count == 1){ // ループ1回目の場合
            hierarchy = 0;
        } 
        
        // 目次の項目を作成。※次のループでの直下にタグを出力する場合ががあるので、ここではタグを閉じていません。
        toc += '
' + $(this).html() + '';  
    });
    
    // 目次の最後の項目をどの要素から作成したかにより、タグの閉じ方を変更
    if(element == 0){
        toc += '';
    }else if(element == 1){
        toc += '';
    }
    
    if (jQuery("article h2")[0]) {
        jQuery("#contents").append('目次'+ toc);
    }
});

上記2箇所の修正が完了後、ブログ記事を確認すると……