WordPressの記事にメニューをつけた
全然たいした話じゃないんですけどね。
メニューがあった方が見やすいかもしれないと思って。
あとだらだら文章書くので、前置きが長いとか。
記事中のh2を取得して、タイトルの下にリストとして吐き出し、ついでにh2にもIDを連番で振って行く。
で、アンカーリンクにする。jQueryで書いてます。
(function($){
var num = $('.entry-content h2').length;
var html ='';
//h2が複数あるときだけ
if(num>1){
html += '<div class="singlepage-menu">';
//メニューのタイトル
html += '<p class="singlepage-menu-title">Menu</p><ol>';
for(i=0; i<num; i++){
//連番を作る
var anchor = 'anchor'+i;
//ID付与
$('.entry-content h2').eq(i).attr('id', anchor);
var text = $('.entry-content h2').eq(i).text();
//リストを作る
html += '<li><a href="#' +anchor +'">' +text + '</a></li>';
}
html += '</ol></div>';
$('.entry-content').prepend(html);
}
})(jQuery);
あとはこれをシングルページの時だけ読み込むようにしています。(functions.php)
.entry-titleがh1だったのでh2を利用しています。
h3以下を拾ってサブメニュー化もできますけど、あんまり記事の最初が冗長なのも嫌だし。
いちいち毎回記事の頭にリスト書くのも面倒だったのでjQueryでさっくりすませました。
実際に使ってるのはこの辺の記事とか。
ついつい見てるオススメの犬猫ブログ
どうですかね、多少は見やすくなったでしょうか??
※使っているクラス(.entry-content)や出力の位置は使っているテーマによって違うと思います。
適宜変えてください。
広告
広告
この投稿へのトラックバック
トラックバックはありません。
- トラックバック URL
この投稿へのコメント