WordPressの記事にメニューをつけた

bookstitle160801

全然たいした話じゃないんですけどね。
メニューがあった方が見やすいかもしれないと思って。
あとだらだら文章書くので、前置きが長いとか。

記事中の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