シェアする

【簡単コピペだけ!】ワードプレスでプラグインなしで目次を自動生成する方法

ワードプレス

記事の冒頭に目次を置くことによって読者に利便性を持たせることができます。

記事の内容を簡単に把握できる他、「ページ内リンク」にすることによって目次をクリックしたらその場所まで一気に飛ばすことの可能だからです。

ワードプレスで目次を作るには「Table of Contents Plus」というプラグインが有名ですが、プラグインを入れることのデメリットを考え、今回はプラグインなしで目次の生成をしました。

Toi

PHPはおろかCSSやHTMLですら危うい超初心者の私ですが、プラグインなしでもコピペだけで超簡単に目次を作ることができましたのでその方法をシェアしたいと思います。

スポンサーリンク

ページ内リンク付きのシンプルな目次を作ります

目次

このような、シンプルな目次を作ります。

仕組みとしては見出しから目次が生成されます。

見出し2(h2)、見出し3(h3)まで表示され、リスト化されています。見出し4(h4)以降は表示されません。

記事のタイトルが見出し1(h1)になっていることが多く、記事中の見出しはh2から始めることが多いので目次でh1を使うことは想定していません。

見出し2の冒頭には■が付き見出し3の冒頭には-がつきます。

目次にカーソルを当てると色が変わり、クリックするとその内容が書かれている場所まで一気にスクロールしてくれます。

背景色や文字色はCSSで簡単に変更することができます。

今回はこちらのサイトを参考にさせて頂きました。

なぜプラグインを使わないの?それは重くなったり不具合回避のため

プラグイン

「Table of Contents Plus」というプラグインを使えばコードを書き足したりしなくてもいいので初心者でも簡単に目次の生成ができます。

でもなぜプラグインを入れないのでしょうか?

プラグインを入れすぎるとワードプレスの動作が重くなってしまったり、他のプラグインとの相性が悪いと不具合が起こってしまうというデメリットもあります。

ということで私はプラグインは必要最低限にして、何かを実装する際もできるだけプラグインなしでの方法を選ぶようにしています。

まずはバックアップ

コードをいじる前にまず、バックアップをとってください。

もし問題が起きた場合は元に戻して下さい。全て自己責任でお願いします。

データベース、画像、テーマ、プラグイン全てを数クリックで一発でバックアップがとれる「All-in-One WP Migration」の解説です。

コードの貼り付けはコピペ1回だけ!

以下のコードを貼り付けます。

貼り付ける場所は好きな場所でもOKですが、できるだけ高速表示をさせたい方は「footer.php」の</body>の直前がいいかと思います。

それでは貼り付ける場所について説明していきます。

コードを貼り付ける場所

①「外観」→「テーマの編集」をクリックします。

目次自動生成のチュートリアル

② テーマファイルの「footer.php」をクリックします。

目次自動生成のチュートリアル

③ タグがズラーっと並んでいますが、下にスクロールして</body>(閉じタグ)の直前、赤い四角で囲まれている場所にタグを貼り付けて下さい。

目次自動生成のチュートリアル

④ 最後にファイルを更新をクリックします。

目次自動生成のチュートリアル

コードを貼り付ける場所(Simplicityなどテーマ使用の場合)

Simplicity」などテーマを使用している方は子テーマに記載してください。

「Simplicity」の場合のコードの貼り付け場所について説明したいと思います。

テーマを使用していない方は読み飛ばして次の段落「CSSコードの貼り付けもコピペ1回のみ!」へ行って下さい。

①「外観」→「テーマの編集」をクリックします。

目次自動生成のチュートリアル

②「編集するテーマを選択」を「Simplicity2 child」にします。

目次自動生成のチュートリアル

今回のようにコードを編集する場合は必ず「Simplicity2 child」を編集します。

「Simplicity2」のファイルを編集してしまうと、「Simplicity」自体をアップデートした場合コードが書き換えられてしまい、もう一度この作業をするハメになります。

③「footer-insert.php」をクリックします。

目次自動生成のチュートリアル

④ こちらもタグがズラーっと並んでいますが、一番下にタグを貼り付けて下さい。

目次自動生成のチュートリアル

⑤ 最後にファイルを更新をクリックします。

目次自動生成のチュートリアル

これでJavascriptの編集は完了です。次にCSSで目次の装飾をしていきます。

CSSコードの貼り付けもコピペ1回のみ!

以下のコードを貼り付けていきます。

こちらのコードは冒頭で紹介した以下のような目次になります。

目次

CSSを少し書き換えるだけでいろいろなデザインの目次を作ることができます。

ピンクの目次

目次
このサイトで使用しているピンクの目次

黄色の目次

目次

黄色くしてみました。

コードを貼り付ける場所

①「外観」→「テーマの編集」をクリックします。

目次自動生成のチュートリアル

② テーマファイルの「style.css」をクリックします。

目次自動生成のチュートリアル

③ コードはどこに貼り付けてもOKですが一番下がいいでしょう。

目次自動生成のチュートリアル

④ 最後にファイルを更新をクリックします。

目次自動生成のチュートリアル

コードを貼り付ける場所(Simplicityなどテーマ使用の場合)

「Simplicity」を使用していない方は読み飛ばして「目次の自動生成」へ行って下さい。

①「外観」→「テーマの編集」をクリックします。

目次自動生成のチュートリアル

②「編集するテーマを選択」を「Simplicity2 child」にします。

目次自動生成のチュートリアル

③「スタイルシート」をクリックします。

目次自動生成のチュートリアル

④ 一番下(赤い四角で囲まれている場所)にタグを貼り付けて下さい。

目次自動生成のチュートリアル

⑤ 最後にファイルを更新をクリックします。

目次自動生成のチュートリアル

これでJavascriptの編集は完了です。次にCSSで目次の装飾をしていきます。

あとは記事の好きな場所にコードを付け足すだけ

<div id=“toc”></div>

こちらのコードを、記事の目次を追加したい箇所に貼り付けます。

注意点としては、ビジュアルエディターではなくテキストエディターに貼り付けて下さい。

目次自動生成のチュートリアル

このコードを記事に貼り付けるだけの作業ですが、毎回だと地味にめんどくさいです。

少しでも効率化をするために、私は「AddQuicktag」というプラグインを使ってタグを入れています。

これを使用することによってビジュアルエディタのまま、2クリックで目次を挿入することができます。

冒頭でプラグインはできるだけ入れたくない!と言いましたが、このプラグインは他のタグを入れるのにも重宝し作業効率化に必要不可欠と判断したので使用しています。

ということで毎回タグを挿入するもよし、「AddQuicktag」で効率化してもどちらでもOKです。

ここからは「AddQuicktag」の使用方法について説明していきます。

AddQuicktagの使用方法

①「プラグイン」→「新規追加」をクリックします。

AddQuicktagのチュートリアル

②「キーワード」に「AddQuicktag」と入力し「今すぐインストール」をクリックします。

AddQuicktagのチュートリアル

③「有効化」をクリックします。

AddQuicktagのチュートリアル

④「プラグイン」→「インストール済みプラグイン」へ移動します。

AddQuicktagのチュートリアル

⑤「AddQuicktag」の「設定」をクリックします。

AddQuicktagのチュートリアル

⑥ このような画面になります。

AddQuicktagのチュートリアル

⑦ 以下の様に入力してください。

AddQuicktagのチュートリアル

ボタンのラベル:目次

開始タグ:<div id=“toc”>

終了タグ:</div>

順番:0

ビジュアルエディタ-/post/page/attachment/comment/edit-comments/widgetsにチェック(一番右のチェックマークにチェックを入れると全てにチェックを入れることができます。)

⑧ 変更を保存をクリックします。

AddQuicktagのチュートリアル

⑨ 記事の投稿画面に「Quichtags」が現れ、そこをクリックすると目次と出てきます。

後はお好きな場所に目次を入れて下さい。

AddQuicktagのチュートリアル

Toi

お疲れ様でした!これで終了です!