【Xeory】WordPressでh2前に自動目次を挿入する

【1】toc.jsを作成

ファイル名:toc.js
ファイルの中身:

jQuery(function($) {
var idcount = 1;
var toc = '';
var currentlevel = 0;
jQuery("article h2,article h3", this).each(function() {
this.id = "toc-" + idcount;
idcount++;
var level = 0;
if (this.nodeName.toLowerCase() == "h2") {
level = 1;
} else if (this.nodeName.toLowerCase() == "h3") {
level = 2;
}
while (currentlevel < level) {
toc += "<ol>";
currentlevel++;
}
while (currentlevel > level) {
toc += "</ol>";
currentlevel--;
}
toc += '<li><a href="#' + this.id + '">' + jQuery(this).html() + "</a></li>\n";
});
while (currentlevel > 0) {
toc += "</ol>";
currentlevel--;
}
if (jQuery("article h2")[0]) {
jQuery("#toc").html('<div class="mokuji">CONTENTS</div>'+ toc);
}
});

引用元:jQueryを使いプラグインなしで目次をWordPressの記事に自動追加する | Plusers

【2】toc.jsをアップロード

場所:/wp-content/themes/xeory_base/lib/js/
アップロードファイル:toc.js


【3】functions.phpに記入

場所:/wp-content/themes/xeory_base/functions.php
下記を追記

// 自動目次
function read_toc_scripts(){
wp_enqueue_script( 'toc', get_template_directory_uri() .'/lib/js/toc.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts' , 'read_toc_scripts' );

function toc_in($the_content) {
$toc = <<< EOF
<div id='toc'></div>
EOF;
if ( is_single() ) {
$h2 = '/^<h2.*?>.+?<\/h2>$/im';
if ( preg_match_all( $h2, $the_content, $h2s )) {
if ( $h2s[0] ) {
if ( $h2s[0][0] ) {
$the_content  = str_replace($h2s[0][0], $toc.$h2s[0][0], $the_content);
}
}
}
}
return $the_content;
}
add_filter('the_content','toc_in');

引用元:jQueryを使いプラグインなしで目次をWordPressの記事に自動追加する | Plusers

【4】jqeryを読み込むようにする

場所:/wp-content/themes/xeory_base/header.php
 (の前)

<?php wp_enqueue_script('jquery'); ?>;