こんにちは。
今回はプラグインを使わずにワードプレスの目次を自動生成するプログラムを作りましたので、シェアできればと思います。 コピペでOKです！
今回作った目次プログラムを使ったサンプルページがこちらです。 目次をクリックするとその部分まで飛びます。
サイトを作るにあたって、目次をつけたいと思いました。 でも、プラグインは負荷がかかったら嫌なので極力使いたくないですし、自分でコーディングするのはめんどくさい（←おい）
なのでこのサイトで紹介しているプログラムを使わせていただこうと思いました。 結構いろんなサイトでもこのサイトのプログラムを紹介していましたし、結構よさそうです。 （非常に参考になりました。ありがとうございます。）
ですが、参考にさせていただいたプログラムが自分の理想的な操作でなかったため、修正しました。
作成したプログラムの特徴
- 目次を自動的に生成し、クリックすると見出しまでスクロール
- 見出しにリンクを貼っていても問題なし
- URLに「#」を表示しない
- h2からh6まで対応（階層表示）
参考にしたプログラムからの変更点
とりあえずサイトで紹介されていたプログラムをそのままこのサイトに使ってみました。
こんな感じでHTMLを作成して、
<h2>主なライセンスの内容と実用例</h2>
<h3 class="entry_pickup_title"><a href="http://www.gnu.org/licenses/gpl.html">GPL(GNU General Public License)</a>表示してみます。
おわかりでしょうか？
<h2><h3>を使っているのに、同じ列になってしまっています。 コードを見てみると、こんな感じで<ul>が<ul>を子に持っています （わかりやすくなるように内容は変えてます）。↓
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</ul>これって実はHTMLの正しい使い方ではないんですよね。 （これでも問題なく動いてしまうのが問題なのですがｗ） 正しくはこういう感じです↓ （入れ子にするなら<li></li>の中に<ul>を記述していく）
<ul>
<li>1
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
</li>
</ul>このように正しいタグの使い方に修正します。
また、<h2>タグなどにリンクを貼っていた場合、そのリンクが目次にも作用してしまって、目次を押すとリンクページに行ってしまいます。 （こちらは問題点というより、作者が<h2>などにリンクを貼る気がなかっただけでしょうけど）
こちらも直しました。
作成したプログラムと使い方
まずは下のコードをお使いのテーマに組み込みます。テーマを編集する際には子テーマを作ってそちらに編集したファイルを置くのがよいでしょう。
2017/12/27 追記 ワードプレスでは特殊な事情がない限りwp_head()によってjqueryがすでに読み込まれています。 もう一度読み込むとエラーになるので、
<script src=”//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
の記述を削除しました。
<style type="text/css">
#toc {
margin: 0 auto;
width: 100%;
background: #ffffff;
}
.mokuji_wrap {
border: 2px solid #888;
border-radius: 4px;
padding: 2% 2%;
}
.mokuji {
color: #888;
text-align: center;
}
#toc ul {
margin:0; //テーマデフォルトのmarginをリセット
list-style-type: disc; //はみ出し対策
font-size: 100%;
}
#toc li {
margin-left: 1em; //はみ出し対策
line-height: 1.2;
}
</style>
<script type="text/javascript">
$(function() {
var idcount = 1;
var toc='';
var ht_arr = [];
var a_arr = [];
$(".entry-content :header",this).each(function(){
this.id = "toc_" + idcount;
idcount++;
if(this.nodeName.toLowerCase() == "h2") {
ht_arr.push(2);
} else if(this.nodeName.toLowerCase() == "h3") {
ht_arr.push(3);
} else if(this.nodeName.toLowerCase() == "h4") {
ht_arr.push(4);
} else if(this.nodeName.toLowerCase() == "h5") {
ht_arr.push(5);
} else if(this.nodeName.toLowerCase() == "h6") {
ht_arr.push(6);
}
var a = '<a href="#' + this.id + '">' + $(this).text() + "<\/a>";
a_arr.push(a);
});
toc += '<ul>';
for(var i=0; i+1<ht_arr.length; ++i){
if(ht_arr[i] == ht_arr[i+1]){
toc += '<li>'+ a_arr[i] + '</li>';
}
else if(ht_arr[i] < ht_arr[i+1]){
toc += '<li>'+ a_arr[i] + '<ul>';
}
else if(ht_arr[i] > ht_arr[i+1]){
toc += '<li>'+ a_arr[i] + '</li>';
var ulli_num = ht_arr[i]-ht_arr[i+1];
for(var j=0; j<ulli_num; ++j){
toc += '</ul></li>';
}
}
}
//最後の1つと</ul></li>の数合わせ
toc += '<li>'+ a_arr[ht_arr.length-1] + '</li>';
var ulli_num = ht_arr[ht_arr.length-1]-2;
for(var j=0; j<ulli_num; ++j){
toc += '</ul></li>';
}
toc += '</ul>';
if(toc){ toc = '<div class="mokuji_wrap"><div class="mokuji">【目次】</div>' + toc + '</div>'; }
$("#toc").html(toc);
//ページ内リンク#非表示。加速スクロール
$('a[href^=#]').click(function(){
var speed = 400,
href= $(this).attr("href"),
target = $(href == "#" || href == "" ? 'html' : href),
position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
</script>僕が変更したところがきれいなコードじゃなくてすいません(;^_^A javascriptを最初に読み込むとサイトのも見込みが遅くなるので、「footer.php」の
