【コピペOK】WordPressの目次をプラグイン無しで作る方法

悩む人「シンプルでスッキリとした目次が作りたい…。ただ、プラグインは使わない方法がいいと思ってます。プログラミング知識はゼロなので、わかりやすく教えてください！」

こういった悩みを解決していきます。

本記事の内容

• wordpress目次の作り方【プラグイン無し】

この記事を執筆したぼくは、ブログ歴2年です。

今回は、プラグイン無しの目次の作り方を解説します。完成形は下記のとおり。

シンプルなデザインが好きな人にはぴったりかと。
当ブログのManablogCopyにもベストマッチです。
»【本音レビュー】Manablog Copy（マナブログ コピー）を1年愛用した感想

コピペで簡単なので、ぜひ参考にしてみてください。

参考記事・・・WordPress目次の作り方【プラグインなし・自動挿入】

wordpress目次の作り方【プラグイン無し】

下記の場所にコードを貼り付ければ完了です。

• その①：function.php
• その②：style.css

その①：function.php

下記をコピーして、「function.php」の一番下に貼り付けします。
[管理画面 → 外観→ テーマファイルエディター → function.php]

// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //
//目次をh2の上に表示する
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  //

function insert_table_of_contents( $the_content ){
    if(is_single()) {
        $tag = '/^(.+?)<\/h2>$/im';
        if(preg_match_all($tag, $the_content, $tags)) {
            $idpattern = '/id *\= *["\'](.+?)["\']/i';
			$table_of_contents = '
 記事の内容
';
			$idnum = 1;
            $nest = 0;

            for($i = 0 ; $i < count($tags[0]) ; $i++){
                if( ! preg_match_all($idpattern, $tags[0][$i], $idstr) ){
                    $idstr[1][0] = 'autoid_'.$idnum++; 
                    $the_content = preg_replace( "/".str_replace('/', '\/' ,$tags[0][$i])."/", preg_replace('/(^' . $tags[1][$i] .'';
            }

            $table_of_contents .= '
';

            if($tags[0][0]){
                $the_content = preg_replace('/(^.+?<\/h[2-6]>$)/im', $table_of_contents.'${1}', $the_content,1);
            }
        }
    }
    return $the_content;
}
add_filter('the_content','insert_table_of_contents');

忘れず変更を保存しましょう。

その②：style.css

追加CSSに下記を貼り付けです。
[管理画面 → 外観 → カスタマイズ → 追加CSS]

.single p.point {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

main .wrap h2, main .wrap p {
    padding-right: 40px;
    padding-left: 40px;
}

p.mokuji {
	margin: 0 40px;
    background: #f7f7f7;
	padding: 5px 0;
	text-align: center;
}

@media only screen and (max-width: 479px) {
	p .mokuji {
		margin-left: 15px;
		margin-right: 15px;
	}
}

各所変更するとすきなデザインに出来ますが、プログラミング知識がない人は貼り付けだけでOKです。

なお、こちらの目次は自動表示されます。通常通り記事を執筆すると、一番上にH2見出し前に表示されるので、余計な作業もありません。超おすすめです。

それでは、今回は以上です。
良いブログライフを(*´∀｀*)

シンプルなWordPressテーマを探している人へ

当ブログでも使用中のWordPressテーマ「ManablogCopy」がおすすめです。

他の有料テーマと比較しても安価なので、興味がある人はチェックしてみて下さい。
»【本音レビュー】Manablog Copy（マナブログ コピー）を1年愛用した感想