お金は廻る、マネーは環る。ラウンドビスケット
wordpress

WordPressの目次は自作がオススメ!目次プラグインを使わない方法【備忘録】

Wordpress目次の作り方解説画像

こんにちは、KOKIです。

WordPressでブログをやり始めてかれこれ4年になる私ですが、最近ようやく目次を作成する重要さを理解しました・・・(笑)

現在私は「JIN」という有料のWordpressテーマを使っているのですが、有料のテーマでも目次の作成は「プラグインを使いなさい」と言われておしまいだったりします(汗)

JIN MANUAL > 目次の作り方

しかしプラグインが原因で起きるエラーをできる限りなくしたいと思っている私は、目次のプラグインを使わずに自作で目次を作ることに決めました!(笑)

JINが推奨している「Table Of Contents Plus」というプラグインを入れると全ての記事に勝手に目次を作成してしまうんですね〜^^;

目次の作り方解説画像

というわけでサクッと目次の作り方を解説していきます!

▼目次

作り方解説

今回はこのような目次を作って行きます!

目次の作り方解説画像

この目次は実際に私が記事で使ったものですね(笑)

【参考記事】まだ格安SIM使ってないの?3年で5社使ってきた私がオススメの格安SIM4社を紹介します!

使うのはリストタグ

目次作成に使うのはリストタグです!

番号なしの箇条書き<ul></ul>と<li></li>の組み合わせや、番号ありの<ol></ol>と<li></li>の組み合わせですね!

サンプルを見ていただければ分かるかと思いますが、Wordpressのビジュアルエディタでワンクリックで呼び出せるものしか基本的には使っていません。

しかしビジュアルエディタでやろうとするとうまくいかないので、テキストエディタで編集していくことになります。でも簡単なので安心してください!(笑)

書いていく前に仕組みを知ろう!

作り方は先ほど書いたようにただリストタグを組み合わせるだけです。

しかしただそれだけだと目次のタイトルをクリックしても該当の部分に飛ぶことはできないので、文字にリンクを貼っていくことになります。

リンクといっても単にURLを貼るのとは違って、ここではidを使って記事の中の位置を教えてあげる必要があります。

例えば

見出し1=title1 (←これがidです)

と指定し、目次のリストタグ内でこのtitle1を呼び出してあげるだけです。

サンプルコード

以下がHTMLの記述になります!

赤字の部分が先ほど説明したidになります。

今回はtitle1としていますが、基本的に区別ができればなんでもOKです。

 

小見出しも同様にidを指定してやればOKです。

 

続いて目次部の記述

少し複雑に見えますがやっていることはかなりシンプルで、リストタグの基本的な記述にidを表示する記述を加えただけです。

見出しを作成した時につけたidは#idで呼び出します。

あとは小見出しをつける時に親と子の関係を見失わなければ正しく表示されるはずです。

上のサンプルで言えば紫の<li></li>が親青の<ul></ul>が子になる感じです。

よく分からない人はこれを毎回このままコピペして使っちゃいましょう(笑)

プラスαで見栄え良く

以上で目次は完成ですが、あとはお好みで見栄えを良くしていきましょう。

サンプルでは文字のサイズを14pxに変更し、枠線ボックスで囲って装飾を加えています。

枠線ボックスは有料テーマ「JIN」に最初から入っているものをそのまま使用しているだけです(笑)

この辺はCSSの知識があれば自分でもカスタマイズ可能だと思いますが、今回は割愛します。

 

あとどうでもいい補足ですが、今回記事内でソースコードを表示するのに使っているのは「Crayon Syntax Highlighter」というプラグインです。

目次の作り方解説画像

使い方についてはこちらの記事なんかがかなり参考になると思います!

【参考記事】Webサイト上でエディタ形式にソースコードを表示するプラグイン「Crayon Syntax Highlighter」

それでは!