ホームワードプレスでプラグインなしで目次を自動生成する方法
2019年8月5日
記事の冒頭に目次を置くことによって読者に利便性を持たせることができます。
記事の内容を簡単に把握できる他、「ページ内リンク」にすることによって目次をクリックしたらその場所まで一気に飛ばすことが可能だからです。
ワードプレスで目次を作るには「Table of Contents Plus」というプラグインが有名ですが、プラグインを入れることのデメリットを考え、今回はプラグインなしで目次の生成をしました。
PHPはおろかCSSやHTMLですら危うい超初心者の私ですが、プラグインなしでもコピペだけで超簡単に目次を作ることができましたのでその方法をシェアしたいと思います。
ページ内リンク付きのシンプルな目次を作ります
このような、シンプルな目次を作ります。
仕組みとしては見出しから目次が生成されます。
見出し2（h2）、見出し3（h3）まで表示され、リスト化されています。見出し4（h4）以降は表示されません。
記事のタイトルが見出し1（h1）になっていることが多く、記事中の見出しはh2から始めることが多いので目次でh1を使うことは想定していません。
見出し2の冒頭には■が付き見出し3の冒頭には-がつきます。
目次にカーソルを当てると色が変わり、クリックするとその内容が書かれている場所まで一気にスクロールしてくれます。
背景色や文字色はCSSで簡単に変更することができます。
今回はこちらのサイトを参考にさせて頂きました。
なぜプラグインを使わないの？それは重くなったり不具合回避のため
「Table of Contents Plus」というプラグインを使えばコードを書き足したりしなくてもいいので初心者でも簡単に目次の生成ができます。
でもなぜプラグインを入れないのでしょうか？
プラグインを入れすぎるとワードプレスの動作が重くなってしまったり、他のプラグインとの相性が悪いと不具合が起こってしまうというデメリットもあります。
ということで私はプラグインは必要最低限にして、何かを実装する際もできるだけプラグインなしでの方法を選ぶようにしています。
まずはバックアップ
コードをいじる前にまず、バックアップをとってください。
もし問題が起きた場合は元に戻して下さい。全て自己責任でお願いします。
https://realinfojpn.xsrv.jp/all-in-one-wp-migration-373.html
コードの貼り付けはコピペだけ！
「footer.php」に記載
「footer.php」に以下のコードを記載してください。貼り付ける場所は好きな場所でもOKですが、</body>の直前がいいかと思います。
| <!--目次追加--> | |
| <script type="text/javascript"> | |
| $(function() { | |
| var idcount = 1; | |
| var toc = ''; | |
| var currentlevel = 0; | |
| $("#kiji :header",this).each(function(){ | |
| this.id = "toc_" + idcount; | |
| idcount++; | |
| var level = 0; | |
| if(this.nodeName.toLowerCase() == "h2") { | |
| level = 0; | |
| } else if(this.nodeName.toLowerCase() == "h3") { | |
| level = 1; | |
| } else if(this.nodeName.toLowerCase() == "h4") { | |
| level = 2; | |
| } else if(this.nodeName.toLowerCase() == "h5") { | |
| level = 3; | |
| } | |
| while(currentlevel < level) { | |
| toc += "<ul>"; | |
| currentlevel++; | |
| } | |
| while(currentlevel > level) { | |
| toc += "</ul>"; | |
| currentlevel--; | |
| } | |
| toc += '<li><a href="#' + this.id + '">' + $(this).html() + "<\/a><\/li>\n"; | |
| }); | |
| if(toc){ toc = '<div class="mokuji_wrap"><div class="mokuji">【目次】</div><ul class="parent">' + toc + '</ul></div>'; } | |
| $("#toc").html(toc); | |
| //ページ内リンク#非表示。加速スクロール | |
| $('a[href^=#]').click(function(){ | |
| var speed = 1000, | |
| href= $(this).attr("href"), | |
| target = $(href == "#" || href == "" ? 'html' : href), | |
| position = target.offset().top; | |
| $("html, body").animate({scrollTop:position}, speed, "swing"); | |
| return false; | |
| }); | |
| }); | |
| </script> | |
| <!--目次追加ここまで--> |
by 「single.php」に記載
「footer.php」に記載したコードに#kijiをつけています。これは目次を付けたい部分だけを囲むためのIDです。目次には記事のタイトルや記事下の「関連記事」「コメント」などの見出しはひろってほしくないですね。あくまで記事の中の見出しのみを拾ってほしいので拾ってほしい部分を#kijiで囲みます。
「single.php」に以下のコードを追加します。
| <div id="kiji"> | |
| </div><!--#kiji--> |
場所は<p><?php the_content();?></p>を囲むようにすると記事の見出しのみを自動で拾ってくれる目次になります。
「header.php」に記載
「header.php」に以下のコードを記載してください。
| <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> | |
| <?php wp_deregister_script('jquery'); ?> |
場所はcssなどの読み込みを指定している後らへんでOKです。
<?php wp_deregister_script(‘jquery’); ?>
上記記述はjQueryが2重に読まれないようにする記述です。なくても問題ない場合は記載しなくてOKです。
CSSコードの貼り付けもコピペ1回のみ！
以下のコードを貼り付けていきます。
| /* 目次 */ | |
| #toc { | |
| margin: 0 auto; | |
| margin-top:50px; | |
| margin-bottom:50px; | |
| width: 90%; | |
| background: #f7f7f7; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| padding: 15px; | |
| } | |
| #toc a { | |
| color: #555; | |
| text-decoration: none; | |
| } | |
| .toc-title { | |
| margin:10px 0; | |
| text-align: center; | |
| font-weight:bold; | |
| font-size: 14px; | |
| } | |
| .mokuji_wrap { | |
| margin-bottom: 30px; | |
| } | |
| .mokuji { | |
| font-weight:bold; | |
| font-size: 18px; | |
| color: #666; | |
| background-color: #f7f7f7; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| #toc ul { | |
| padding: 0 20px; | |
| border: 0; | |
| font-size: 16px; | |
| color: #1111cc; | |
| } | |
| #toc li { | |
| margin-bottom: 5px; | |
| line-height: 1.6; | |
| list-style-type: none; | |
| } | |
| #toc li:before { | |
| content:"■"; | |
| padding-right: .5em; | |
| color: #666; | |
| } | |
| #toc ul ul li:before { | |
| content:"-"; | |
| padding-right: .5em; | |
| } | |
| #toc ul ul ul { | |
| display:none; | |
| } |
こちらのコードは冒頭で紹介した以下のような目次になります。
CSSを少し書き換えるだけでいろいろなデザインの目次を作ることができます。
ピンクの目次
| #toc { | |
| margin: 0 20px; | |
| margin-top:50px; | |
| margin-bottom:50px; | |
| padding:0 0 5px 0; | |
| width: 90%; | |
| background: #fcf5f7; | |
| } | |
| #toc a { | |
| color: #555; | |
| text-decoration: none; | |
| } | |
| .toc-title { | |
| margin:10px 0; | |
| text-align: center; | |
| font-weight:bold; | |
| font-size: 14px; | |
| } | |
| .mokuji_wrap { | |
| margin-bottom: 30px; | |
| } | |
| .mokuji { | |
| font-weight:bold; | |
| font-size: 18px; | |
| color: #fff; | |
| background-color: #ffb6c1; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| #toc ul { | |
| padding: 0 20px; | |
| border: 0; | |
| font-size: 16px; | |
| color: #1111cc; | |
| } | |
| #toc li { | |
| margin-bottom: 5px; | |
| line-height: 1.6; | |
| list-style-type: none; | |
| } | |
| #toc li:before { | |
| content:"■"; | |
| padding-right: .5em; | |
| color: #ffb6c1; | |
| } | |
| #toc ul ul li:before { | |
| content:"-"; | |
| padding-right: .5em; | |
| } | |
| #toc ul ul ul { | |
| display:none; | |
| } |
黄色の目次
黄色くしてみました。
| #toc { | |
| margin: 0 20px; | |
| margin-top:50px; | |
| margin-bottom:50px; | |
| padding:0 0 5px 0; | |
| width: 90%; | |
| background: #fdf7cc; | |
| } | |
| #toc a { | |
| color: #555; | |
| text-decoration:none; | |
| } | |
| .toc-title { | |
| margin:10px 0; | |
| text-align: center; | |
| font-weight:bold; | |
| font-size: 14px; | |
| } | |
| .mokuji_wrap { | |
| margin-bottom: 30px; | |
| } | |
| .mokuji { | |
| font-weight:bold; | |
| font-size: 18px; | |
| color: #fff; | |
| background-color: #e8d766; | |
| text-align: center; | |
| margin-bottom: 20px; | |
| } | |
| #toc ul { | |
| padding: 0 20px; | |
| border: 0; | |
| font-size: 16px; | |
| color: #1111cc; | |
| } | |
| #toc li { | |
| margin-bottom: 5px; | |
| line-height: 1.6; | |
| list-style-type: none; | |
| } | |
| #toc li:before { | |
| content:"■"; | |
| padding-right: .5em; | |
| color: #e8d766; | |
| } | |
| #toc ul ul li:before { | |
| content:"-"; | |
| padding-right: .5em; | |
| } | |
| #toc ul ul ul { | |
| display:none; | |
| } |
あとは記事の好きな場所にコードを付け足すだけ
こちらのコードを、記事の目次を追加したい箇所に貼り付けます。
注意点としては、ビジュアルエディターではなくテキストエディターに貼り付けて下さい。
AddQuicktagの利用が便利
このコードを記事に貼り付けるだけの作業ですが、毎回だと地味にめんどくさいです。
少しでも効率化をするために、私は「AddQuicktag」というプラグインを使ってタグを入れています。
これを使用することによってビジュアルエディタのまま、2クリックで目次を挿入することができます。
冒頭でプラグインはできるだけ入れたくない！と言いましたが、このプラグインは他のタグを入れるのにも重宝し作業効率化に必要不可欠と判断したので使用しています。
ということで毎回タグを挿入するもよし、「AddQuicktag」で効率化してもどちらでもOKです。
「AddQuicktag」のインストール方法、使用方法については以下の記事で解説しています。
https://realinfojpn.xsrv.jp/addquicktag-673.html
目次が表示されない
ワードプレスの標準テーマやSimplicityなどのテーマを使用していた時は目次が表示されましたが、当ブログで紹介している自作テーマをしようすると目次が表示されなくなってしまいました。その場合は「single.php」にclass=”entry-content”を付け足すと表示されるようになりました。
コメント