【AFFINGER6】目次の表示方法4選！クリック率の高め方も3つ解説【＋限定特典】

AFFINGER6で目次を表示する方法がわかりません。
おすすめの方法を教えてください！

このような、AFFINGER6で目次を作りたい方におすすめの記事です。

AFFINGER6には標準で目次機能がないので、目次の表示方法で迷うと思います。

そこで今回は、AFFINGER6で目次を表示する方法の4つを比較しつつ、最もおすすめな方法を紹介します。

この記事で、目次のを最適に表示させられると思いますよ！

1. AFFINGER6（アフィンガー6）で目次を表示する方法4選！
2. AFFINGER6で目次を表示する3つのメリット
3. AFFINGER6（アフィンガー6）の目次を最適化する3つのコツ
4. まとめ

AFFINGER6（アフィンガー6）で目次を表示する方法4選！

AFFINGER6で目次を表示する方法は以下の4つです。

目次を表示する方法

HTMLタグで目次を手動表示
functions.phpで目次を自動表示
公式プラグインで目次を表示
その他のプラグインで目次を表示

それでは、それぞれの特徴とやり方を順番に解説します。

方法①：HTMLタグで目次を手動表示

主な特徴

自由度が高い
ページ速度に悪影響がない
手動で目次を作るのが面倒

まず、HTMLタグで目次を作る方法は毎回手動で作るので効率が悪くなります。

ただ、プラグインを使わないのでページ速度が遅くなることはありません。

目次を表示する手順

Gutenbergの場合「クラシック」ブロックを追加する
「タグ→その他のパーツ→目次(カスタム)」をクリック
コードエディタから見出しタグと目次に同じidを指定する

コードエディタは以下のように記述しましょう。

目次のデザインは管理画面の「外観→カスタマイズ（その他）→目次プラグイン（すごいもくじ）」から設定できます。

正直なとこ、この方法を使うことは少ないので覚えなくてもOKです。

方法②：functions.phpで目次を自動表示

主な特徴

自動で目次が表示できる
ページ速度に影響がない
機能が少ない

2つ目は、functions.phpにコードを追加して目次を自動表示する方法で、シンプルな目次を作りたい方におすすめです。

まず、WordPress管理画面の「外観→テーマエディター」から、子テーマのfunctions.phpに以下のコードを追加します。

functions.phpを表示する

//////////////////////////////////////////////////
//Original sanitize_callback
//////////////////////////////////////////////////
// CheckBox
function fit_sanitize_checkbox( $checked ) {
    return ( ( isset( $checked ) && true == $checked ) ? true : false );
}
// radio/select
function fit_sanitize_select( $input, $setting ) {
 $input = sanitize_key( $input );
    $choices = $setting->manager->get_control($setting->id)->choices;
    return ( array_key_exists( $input, $choices ) ? $input : $setting->default );
}
// number limit
function fit_sanitize_number_range( $number, $setting ) {
    $number = absint( $number );
    $atts = $setting->manager->get_control( $setting->id )->input_attrs;
    $min = ( isset( $atts['min'] ) ? $atts['min'] : $number );
    $max = ( isset( $atts['max'] ) ? $atts['max'] : $number );
    $step = ( isset( $atts['step'] ) ? $atts['step'] : 1 );
    return ( $min <= $number && $number <= $max && is_int( $number / $step ) ? $number : $setting->default );
}
 
 
  
//////////////////////////////////////////////////
//投稿ページ各種設定画面
//////////////////////////////////////////////////
function fit_post_cutomizer( $wp_customize ) {
// セクション
 $wp_customize->add_section( 'fit_post_section', array(
 'title'     => '投稿ページ設定',
 'priority'  => 1,
 ));
 // 目次の表示/非表示 セッティング
 $wp_customize->add_setting( 'fit_post_outline', array(
 'default'   => 'value1',
 'type' => 'option',
 'sanitize_callback' => 'fit_sanitize_select',
 ));
 // 目次の表示/非表示 コントロール
 $wp_customize->add_control( 'fit_post_outline', array(
 'section'   => 'fit_post_section',
 'settings'  => 'fit_post_outline',
 'label'     => '■目次の表示/非表示',
 'description' => '投稿ページに目次を表示するか選択<br>
 (記事内の最初のhタグの手前に自動で挿入されます。※[outline]ショートコードで好きな位置に表示可能)',
 'type'      => 'select',
 'choices'   => array(
 'value1' => '表示する(default)',
 'value2' => '表示しない',
 ),
 ));
 
 // 目次を表示するための最小見出し数 セッティング
 $wp_customize->add_setting( 'fit_post_outline_number', array(
 'default'   => '1',
 'type' => 'option',
 'sanitize_callback' => 'fit_sanitize_number_range',
 ));
 // 目次を表示するための最小見出し数 コントロール
 $wp_customize->add_control( 'fit_post_outline_number', array(
 'section'   => 'fit_post_section',
 'settings'  => 'fit_post_outline_number',
 'description' => '目次を表示するための最小見出し数を指定',
 'type'      => 'number',
 'input_attrs' => array(
         'step'     => '1',
         'min'      => '1',
         'max'      => '50',
     ),
 ));
 
 // 目次パネルデフォルト設定 セッティング
 $wp_customize->add_setting('fit_post_outline_close', array( 
 'type' => 'option',
 'sanitize_callback' => 'fit_sanitize_checkbox',
    ));
 // 目次パネルデフォルト設定 コントロール
 $wp_customize->add_control('fit_post_outline_close', array( 
        'section' => 'fit_post_section', 
        'settings' => 'fit_post_outline_close', 
        'label'     => '目次パネルをデフォルトで閉じておく',
        'type'      => 'checkbox',
    ));
 
 
 
 
}
add_action( 'customize_register', 'fit_post_cutomizer' );
 
 
//////////////////////////////////////////////////
//目次の表示/非表示、個別選択設定
//////////////////////////////////////////////////
if ( get_option('fit_post_outline') != 'value2') {
 function add_outline_fields() {
 //add_meta_box(表示される入力ボックスのHTMLのID, ラベル, 表示する内容を作成する関数名, 投稿タイプ, 表示方法)
 add_meta_box( 'outline_setting', '目次の個別非表示設定', 'insert_outline_fields', 'post', 'normal');
 }
 add_action('admin_menu', 'add_outline_fields');
 
 
 // カスタムフィールドの入力エリア
 function insert_outline_fields() {
 global $post;
 
 if( get_post_meta($post->ID,'outline_none',true) == "1" ) {
 $outline_none_check = "checked";
 }else {
 $outline_none_check = "";
 }
 
 echo '
 <div style="margin:20px 0; overflow: hidden; line-height:2;">
    <div style="float:left;width:120px;">目次の表示設定</div>
    <div style="float:right;width:calc(100% - 140px);">
      <input type="checkbox" name="outline_none" value="1" '.$outline_none_check.' >:この投稿では目次を非表示にしますか？
    </div>
    <div style="clear:both;"></div>
 </div>
 ';
 
 }
 
 // カスタムフィールドの値を保存
 function save_outline_fields( $post_id ) {
 if(!empty($_POST['outline_none'])){
 update_post_meta($post_id, 'outline_none', $_POST['outline_none'] );
 }else{
 delete_post_meta($post_id, 'outline_none');
 }
 
 }
 add_action('save_post', 'save_outline_fields');
}
 
 
//////////////////////////////////////////////////
//オリジナル目次を作成
//////////////////////////////////////////////////
function get_outline_info($content) {
 // 目次のHTMLを入れる変数を定義します。
 $outline = '';
 // h1?h6タグの個数を入れる変数を定義します。
 $counter = 0;
    // 記事内のh1?h6タグを検索します。(idやclass属性も含むように改良)
    if (preg_match_all('/<h([1-4])[^>]*>(.*?)<\/h\1>/', $content, $matches,  PREG_SET_ORDER)) {
        // 記事内で使われているh1?h6タグの中の、1?6の中の一番小さな数字を取得します。
        // ※以降ソースの中にある、levelという単語は1?6のことを表します。
        $min_level = min(array_map(function($m) { return $m[1]; }, $matches));
        // スタート時のlevelを決定します。
        // ※このレベルが上がる毎に、<ul></li>タグが追加されていきます。
        $current_level = $min_level - 1;
        // 各レベルの出現数を格納する配列を定義します。
        $sub_levels = array('1' => 0, '2' => 0, '3' => 0, '4' => 0);
        // 記事内で見つかった、hタグの数だけループします。
        foreach ($matches as $m) {
            $level = $m[1];  // 見つかったhタグのlevelを取得します。
            $text = $m[2];  // 見つかったhタグの、タグの中身を取得します。
            // li, ulタグを閉じる処理です。2ループ目以降に中に入る可能性があります。
            // 例えば、前回処理したのがh3タグで、今回出現したのがh2タグの場合、
            // h3タグ用のulを閉じて、h2タグに備えます。
            while ($current_level > $level) {
                $current_level--;
                $outline .= '</li></ul>';
            }
            // 同じlevelの場合、liタグを閉じ、新しく開きます。
            if ($current_level == $level) {
                $outline .= '</li><li class="outline__item">';
            } else {
                // 同じlevelでない場合は、ul, liタグを追加していきます。
                // 例えば、前回処理したのがh2タグで、今回出現したのがh3タグの場合、
                // h3タグのためにulを追加します。
                while ($current_level < $level) {
                    $current_level++;
                    $outline .= sprintf('<ul class="outline__list outline__list-%s"><li class="outline__item">', $current_level);
                }
                // 見出しのレベルが変わった場合は、現在のレベル以下の出現回数をリセットします。
                for ($idx = $current_level + 0; $idx < count($sub_levels); $idx++) {
                    $sub_levels[$idx] = 0;
                }
            }
            // 各レベルの出現数を格納する配列を更新します。
            $sub_levels[$current_level]++;
            // 現在処理中のhタグの、パスを入れる配列を定義します。
            // 例えば、h2 -> h3 -> h3タグと進んでいる場合は、
            // level_fullpathはarray(1, 2)のようになります。
            // ※level_fullpath[0]の1は、1番目のh2タグの直下に入っていることを表します。
            // ※level_fullpath[1]の2は、2番目のh3を表します。
            $level_fullpath = array();
            for ($idx = $min_level; $idx <= $level; $idx++) {
                $level_fullpath[] = $sub_levels[$idx];
            }
            $target_anchor = 'outline__' . implode('_', $level_fullpath);
 
            // 目次に、<a href="#outline_1_2">1.2 見出し</a>のような形式で見出しを追加します。
            $outline .= sprintf('<a class="outline__link" href="#%s"><span class="outline__number" style="display:none;">%s.</span> %s</a>', $target_anchor, implode('.', $level_fullpath), strip_tags($text));
            // 本文中の見出し本体を、<h3>見出し</h3>を<h3 id="outline_1_2">見出し</h3>
            // のような形式で置き換えます。
            $hid = preg_replace('/<h([1-6])/', '<h\1 id="' .$target_anchor . '"', $m[0]);
            $content = str_replace($m[0], $hid, $content);
 
        }
        // hタグのループが終了後、閉じられていないulタグを閉じていきます。
        while ($current_level >= $min_level) {
            $outline .= '</li></ul>';
            $current_level--;
        }
        // h1?h6タグの個数
        $counter = count($matches);
    }
    return array('content' => $content, 'outline' => $outline, 'count' => $counter);
}
 
//目次を作成します。
function add_outline($content) {
 
    // 目次を表示するために必要な見出しの数
 if(get_option('fit_post_outline_number')){
 $number = get_option('fit_post_outline_number');
 }else{
 $number = 1;
 }
    // 目次関連の情報を取得します。
    $outline_info = get_outline_info($content);
    $content = $outline_info['content'];
    $outline = $outline_info['outline'];
    $count = $outline_info['count'];
 if (get_option('fit_post_outline_close') ) {
 $close = "";
 }else{
 $close = "checked";
 }
    if ($outline != '' && $count >= $number) {
        // 目次を装飾します。
        $decorated_outline = sprintf('
 <div class="outline">
   <span class="outline__title">目次</span>
   <input class="outline__toggle" id="outline__toggle" type="checkbox" '.$close.'>
   <label class="outline__switch" for="outline__toggle"></label>
   %s
 </div>', $outline);
        // カスタマイザーで目次を非表示にする以外が選択された時＆個別非表示が1以外の時に目次を追加します。
 if ( get_option('fit_post_outline') != 'value2' && get_post_meta(get_the_ID(), 'outline_none', true) != '1' && is_single() ) {
         $shortcode_outline = '[outline]';
         if (strpos($content, $shortcode_outline) !== false) {
             // 記事内にショートコードがある場合、ショートコードを目次で置換します。
             $content = str_replace($shortcode_outline, $decorated_outline, $content);
         } else if (preg_match('/<h[1-6].*>/', $content, $matches, PREG_OFFSET_CAPTURE)) {
             // 最初のhタグの前に目次を追加します。
             $pos = $matches[0][1];
             $content = substr($content, 0, $pos) . $decorated_outline . substr($content, $pos);
         }
 }
    }
 return $content;
}
add_filter('the_content', 'add_outline');

そして、「外観→カスタマイズ→追加CSS」に以下のCSSをコピペしましょう。

CSSを表示

/*目次*/
.outline{
 border:1px dotted #D8D8D8;
 padding:20px;
 margin-top:20px;
 display:inline-block;
 font-size:0.9em;
 line-height:1.5em;
}
.outline__toggle{display: none;}
.outline__switch::before{
 content:"開く";
 cursor:pointer;
 border: solid 1px #D8D8D8;
 padding:5px;
 font-size:0.8rem;
 margin-left:5px;
 border-radius: 5px;
}
.outline__toggle:checked + .outline__switch::before{content:"閉じる"}
.outline__switch + .outline__list{
 overflow:hidden;
 width:0;
 height:0;
 margin-top:0;
 margin-left:-20px;
 transition: 0.2s;
}
 
.outline__toggle:checked + .outline__switch + .outline__list {
    width: auto;
    height: auto;
    margin-top: 20px;
    transition: 0.2s;
    border-top: dotted 1px #d2d2d2;
    padding-top: 1em;
}
.outline__item:before {content: normal;}
.outline__link{
 display:relative;
 color:#191919 !important;
}
.outline__link:hover{border:none;}
.outline__number{
 display: inline-block;
 color:#7F7F7F;
 background:#F2F2F2;
 padding:3px 6px;
 font-weight:400;
 font-size:1.2rem;
 margin-right: 5px;
}
label.outline__switch {
    position: relative;
    float: right;
}
li .outline__item{
list-style-type:none!important;
}
li .outline__item:before{
content:'- ';
}
ul .outline__item{
 list-style-type:none!important;
}
ul{
 -webkit-padding-start: 1.2em;
}

表示設定は、「外観→カスタマイズ→投稿ページ設定」からできますが、デザインのカスタマイズにCSSが必要なのが欠点ですね〜。

参考：ワードプレスで目次をプラグインなし(functions.php）で実装する方法