ミニマリストアローンのブログ

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

BLOG

目次を作りたいブロガー「WordPressで目次を作りたいんだけど、余計なプラグインは入れたくない…。プラグインなしで自作する方法も知りたいなぁ。」

こういった悩みに答えていきます。

この記事では、WordPressで目次をプラグインなしで自作していく方法を紹介します。WordPress初心者でも簡単にできると思います。

プラグインを使わない理由

  • プラグインの数に比例してサイトが重くなる
  • 相性の悪いプラグイン同士が干渉してエラーが起こる場合がある
  • セキュリティ面にも問題が出てくる場合がある

詳しい理由はWordPressのおすすめプラグイン7選+2選【入れすぎ注意】が参考になるかと思います。

目次の作成は、プラグインを入れるほどではないので、自作した方がその分プラグインを使わずに済みます。
どうしても必要だと言うのなら仕方ありませんが。

本記事の内容

  1. WordPressで目次を自作する方法【やることは2つ】
  2. 余談:目次は見出し2だけで十分

スポンサードサーチ

WordPressで目次を自作する方法【やることは2つ】

WordPressで目次を自作する方法【やることは2つ】
やることは2つだけです。

  1. リストを作る
  2. ページ内リンクを作る

これだけです。

テキストエディタを使っていくので、ビジュアルエディタを使っている人は、テキストエディタに切り替えていきましょう。

1.リストを作る

1.リストを作る
上記の画像のように<ol>タグ<li>タグを囲っていきます。
ちなみに<ul>タグで囲ってもOKです。

<ol><ul>の違い

  • <ol>
    →番号付きリスト
  • <ul>
    →箇条書きリスト

要は読者が、これは『目次』であることが伝わればいいわけです。

これだけでも目次は成り立つのですが、飛びたい箇所にジャンプできません。
ということで、もう一手間くわえていきましょう。

2.ページ内リンクを作る

ページ内リンクを使って、ページ内でジャンプさせる仕組みをくわえていきます。
まず<li>タグの中のタイトルを<a>タグで囲みます。

そして、上記の画像のように"#"の中に数字を入れていきます。
この部分は半角英数字であればなんでもOK

例:<a href="#01">

見出しに『id属性』を加える


上記の画像のように、各見出しの中に『id属性』を入れていきます。
そして、さっき<a href="#">で指定した英数字をid=""の中に入れてください。

例:<h2 id="01">

完成するとこんな感じ

完成
完成です。これで各見出しにページ内リンクするようになりました。

下記が実際のソースコードです。

<ol>
	<li><a href="#01">1つ目の見出しタイトル</a></li>
	<li><a href="#02">2つ目の見出しタイトル</a></li>
	<li><a href="#03">3つ目の見出しタイトル</a></li>
</ol>

<h2 id="01">1つ目の見出しタイトル</h2>
本文
<h2 id="02">2つ目の見出しタイトル</h2>
本文
<h2 id="03">3つ目の見出しタイトル</h2>
本文

以上です。

スポンサードサーチ

余談:目次は見出し2だけで十分

余談:目次は見出し2だけで十分
他の人のブログを見ていると、見出し3にもジャンプできるようにリンクをつけていますが、プラグインで自動生成しない場合は、ぶっちゃけそこまで神経質にならなくてもいいと思います。

なぜなら、見出し3は、見出し2の内容を細かく説明してる部分なので、いきなり見出し3にジャンプさせても内容は理解しづらいと思います。
この記事の冒頭にある『本記事の内容』という部分が目次になっていますが、見出し2しか書いていません。

目次の役割は読者が記事の内容を把握できるか、あるいは興味を持ってくれるかです。

タイトルを見る→記事の内容(目次)を見る→興味ある見出し2にクリックする→細かい内容を読む

これで十分だと思います。

なんならページ内リンクもさせる必要はない

さっきも言ったように目次の役割は、記事の内容を読者に把握してもらうためにあるもので、クリックでジャンプさせる必要は必ずしもありません。

本にも目次がありますが、ジャンプはできず、自分でページをめくらなければいけません。
しかし、その途中で興味のある内容に目が止まると、めくるのをやめて読み進めますよね?

なのでブログの目次でも、冒頭に記事の内容をリスト化したものだけを置いて、読者さんに記事全体に目を通してもらうというのもアリだということです。

最後に:目次はシンプルにする

ということで、そろそろ終わりにします。

他のブログでは、見出し2〜見出し4までリスト化されている目次を見ますが、正直そこまでごちゃごちゃさせなくてもいいと思っています。

記事の伝えたい内容を、大きく2つか3つくらいに分けて、それを目次にして見出し2を作っていくほうが見た目もスッキリします。

そっちの方が、サイト運営者も管理も楽で、読者さんにも読みやすいですからね。

人気記事Amazonアソシエイトに落ちる?【もしもアフィリエイトで解決します】

人気記事【2019年】ミニマリストが買ってよかった物&手放してよかった物

スポンサードサーチ