カテゴリ一覧から記事を探す

WordPressで目次をプラグインなしで作る方法【コピペで簡単】

WordPressで目次をプラグインなしで作る方法【コピペで簡単】

記事の投稿時に毎回つけている目次のデザインを綺麗にしたいという方にオススメできる記事になっています。

プラグインなしで簡単に作ることができます!その後CSSをいじって綺麗な目次を作っていきましょう!

記事の前半では自動で目次を生成する方法について。
後半ではそのCSSについて説明していき、最後に目次の上に広告を入れ込む方法も解説します!

1.目次の完成品

既に目次の完成品が出ていますが、私は毎回h2タグに自分で番号を振っています。(エディタで「1.」とか「2.」とかを書き込んでいます)

そのため、番号を振らずにh2タグを書いていると、以下のような見た目になります。

目次の完成品

CSSをいじれば、自動で番号を振ることももちろん可能ですのでそこはお任せしたいと思います。

余談:プラグインを使わないメリット

プラグインはできるだけ使わないほうがいいと言われています。

なぜなら、プラグインがありすぎるとサイトの速度が重くなる→上位に上がりづらくなるということにつながるからです。

サイト速度について気になった方は以下の記事を参考にしてみてください。

また、プラグインの脆弱性からサイトを攻撃される恐れもあるとか。
こればっかりは運ですが、できるだけプラグインは使わないということを目指したほうがよさそうです。

2.目次を自動生成するコード

目次を自動生成するコードは以下の通り。jQueryを使いプラグインなしで目次をWordPressの記事に自動追加するの記事を参考にしています。

footer.php
<!--目次追加-->
< script type = "text/javascript" > jQuery(function ($) {
  var idcount = 1;
  var toc = '';
  var currentlevel = 0;
  jQuery("article h2,article h3", this).each(function () {
    this.id = "toc-" + idcount;
    idcount++;
    var level = 0;
    if (this.nodeName.toLowerCase() == "h2") {
      level = 1;
    } else if (this.nodeName.toLowerCase() == "h3") {
      level = 2;
    }
    while (currentlevel < level) {
      toc += "<ol>";
      currentlevel++;
    }
    while (currentlevel > level) {
      toc += "</ol>";
      currentlevel--;
    }
    toc += '<li><a href="#' + this.id + '">' + jQuery(this).html() + "</a></li>\n";
  });
  while (currentlevel > 0) {
    toc += "</ol>";
    currentlevel--;
  }
  if (jQuery("article h2")[0]) {    
    jQuery("#toc").html('<div class="mokuji">目次</div>' + toc);
  }
}); < /script>
<!--目次追加ここまで-->

これを、footerの</body>のすぐ上に追加します。

フッターテーマの一番下は次のようになるはず。


</script>
<!–目次追加ここまで–>
</body></html>

このコードではh2、h3までを拾って目次を作成します。
h4以降を拾いたい場合は、参考元の記事をご確認ください。

実際に目次を追加する方法

目次が必要な記事と必要でない記事があると思います。

目次が必要な記事に対して、目次を入れたい場所で「<div id=’toc’></div>」を書き込めばOKです。
※ビジュアル状態ではなくテキストエディタ状態でやります。編集中は見た目が一切分かりませんが、プレビューで目次を確認できます。

3.目次を綺麗に見せるCSS

以下のCSSで目次を完成品のようにきれいに見せることが可能です。

CSS
#toc {
  margin-top: 20px;
  margin-bottom: 35px;
  border-radius: 4px;
  font-size: 16px;
  padding-right: 16px;
  padding-left: 16px;
  padding-top: 5px;
  background-color: #FFFBF4;/*目次の背景色*/
  border: 2px solid #F89174;/*目次の枠線*/
}

#toc .mokuji {
  font-size: 25px;
  font-weight: bold;
  color: #F89174;/*「目次」の文字色*/
  text-align: left;
}

#toc .mokuji:before {
  content: "\f046";
  font-family: FontAwesome;
  padding-right: 6px;
  font-size: 25px;
  color: #F89174;/*アイコンの色*/
}

#toc ol {
  counter-reset: number;
  list-style: none;
  margin-bottom: 0px;
  padding-top: 5px;
  padding-left: 7px;
  padding-bottom: 10px;
}

#toc ol li {
  line-height: 1.25em;
}

#toc ol li:before {
  font-weight: bold;
  color: #555555;
  padding-right: 12px;
}

#toc ol li a {
  font-weight: bold;
  color: #555555;
  text-decoration: none;
}

#toc ol li a:hover {
  text-decoration: underline
}

#toc ol ol li {
  line-height: 1.25em;
  margin-bottom: 0.5em;
  font-size: 14px;
  margin-left: 5px;
}

#toc ol ol li:before {
  content: "\f0da";
  font-family: FontAwesome;
  padding-right: 6px;
  margin-left: 0px;
  color: #CCC;
}

#toc ol ol li a {
  color: #3D3D3D;
  font-weight: normal;
  padding-right: 6px;
  text-decoration: none
}

#toc_container ol ol li a:hover {
  text-decoration: underline
}

色を変更したい場合は、コメントを入れている場所をいじることで簡単に変更可能です。

4.目次の上に広告を追加したい場合

ここまでできて、実際に追加して綺麗な目次ができていたら、「この目次の上に広告を追加したいんだけどなぁ」と思う方もいるかもしれません。

目次の上に広告を置くのは、かなりクリック率がよく、ほぼ全員置いているように感じます。

やり方としては、一番下側の部分を以下を参考にして変更しましょう。

footer.php
 if (jQuery("article h2")[0]) {
		var adsCode = '/*ここにアドセンスのコード*/';
		jQuery("#toc").before(adsCode);
        jQuery("#toc").html('<div class="mokuji">目次</div>'+ toc);
    }
});

コメントで「ここにアドセンスのコード」としている部分に、Google Adsenseにてコピーしてきたコードを貼り付けます。(/*と*/は消してね)

ここで、注意点が二つあります。

広告貼り付けの際の注意点

  1. 改行を無くす
  2. </script>の部分を<\/script>にする

改行があると、エラー判定になります。

また、</script>の部分を<\/script>にすることで、きちんと広告コード全体を読み込ませることができます。(¥を入力でバックスラッシュになります)

二か所あるはずですので、どちらにも追加しましょう!

不安になりますが、アドセンスのコードが1色で表現されていればこの点に関しては大丈夫だと思ってください!

5.まとめ

目次を設けることで自分の探している答えがページ内にあるかどうかがすぐにわかるため、ユーザにとって良いページになるようです。

この記事を参考にして、きれいな目次を作成してユーザに優しいページ作りを心がけていきましょう!

また、今回のような「プラグインを使わなくても簡単に機能を作ることができる」ようなものに関しては、できるだけプラグインを使わないよう心掛けていきましょう。

本当に必要なプラグインについて見る