IT坊やだからさ。

ウェブディレクター/プログララマーの現役フリーランスが送るガンダム話

プラグイン

プラグインなしで目次を追加!WordPressの目次の作り方!

投稿日:

プラグインなしでWordpressに目次を作成する

WordPressで目次を追加してないことに気づいたので目次を追加することにした。

わたしはプラグインは使いたくないので自作で目次を作ることに。

プラグインを使えば簡単に目次は追加できるが動作が遅くなるのでできる限り回避したいのがウェブ屋だ。

もし目次を追加したいが、プラグインを使いたくないと言う人は参考にしてほしい。

Javascriptを使って目次を作成

では目次の作成手順だが、簡単に言えばjQueryを使って目次を作成する。

Javascriptをコーディングして目次を生成するのだが、スクリプトを別途「.js」ファイルのテンプレートにするのか「single.php」へ直書きするかの2択が存在する。

どちらの手順でも目次は作成されるのだが、メンテナンスなどを考えると「.js」ファイルを新たに作成する方が好ましい。

いづれの手段でも多少のJavascript言語の知識が必要になるのでもしプログラミング言語にアレルギーがある人はプラグインのやり方をオススメすす。

そこで今回は「目次」の作成についてプラグインを使ったやり方も含め全て情報を共有しよう。

まずはわたしが採用したやり方「.js」ファイルのテンプレートを作成する手順から。

「.js」ファイルを作成して目次機能を追加

まずは簡単に「.js」ファイルのテンプレートについて。

WordPressとはテンプレートファイルの集合体である。

このブログでも何度か登場したが「header.php」「index.php」などは全てテンプレートファイルと呼ばれるWordpress構成ファイルなのだ。

それらファイル群に新たな仲間として目次機能の「.js」ファイルを追加する作業と思って貰えば良い。

これらテンプレートファイルはウェブサーバーの以下のディレクトリに格納されている。

/サーバールート/ドメイン/wp-content/themes/テーマ名

(レンタルサーバーによって多少ディレクトリ構成は異なる)

ではテンプレートファイルの定義が終わったので本題のJavascriptについて書いていく。

このコーディングではjQueryライブラリを使用して作成する。

作成したファイルは「indoc.js」としているが任意の名前で構わない。

由来は「index of contents」から複数の文字を取得して設計した。

サンプルのテンプレートファイルでは「見出しタグh4」までを目次へ表示する設計にしている。

もし「見出しタグh3」までで十分とするのなら次の作業で「h4」を取り除く。

「each(function())前に定義している”article h4」の情報を削除する。

次に条件文「if」の中にある「else if 〜 (h4)」のループを削除すれば良い。

作成したサンプルファイルは目次を表示するクラス名をファイル名と同じく「indoc」とした。

ただしファイル名およびクラス名は任意なので変更可能。

個人の好みに合わせて調整されたし。

次に作成した「indoc.js」ファイルをウェブサーバーへ格納する。

格納先はテーマ名配下のテンプレートファイルが置かれている場所だ。

/サーバールート/ドメイン/wp-content/themes/テーマ名

(参考までにもう一度ディレクトリの例を載せておく)

作成したテンプレートファイルを格納した後はWordpressの調整役を担う「function.php」に作成したファイルを登録する。

これで機能の登録が完了だ。

このパターンは記事の任意の場所に目次を表示させる仕組みになる。

目次表示させるには「テキストエディタ」モードにして「<div id=”indoc”></div>」と入力すれば良い。

ただ多くのウェブサイトは最初の見出し2のすぐ上で目次を表示している。

それを自動化することも可能だ。

次のコードを「function.php」へ追加する。

(既に入力している「indoc」コードを削除してはいけない)

これで記事で最初の見出し2のすぐ上に目次が表示される仕組みになる。

記事の本文から目次クラス(「<div id=”indoc”></div>」)を削除する事。

目次のレイアウトをCSSファイルで調整する

これで目次の自動表示が可能となった。

ただこのままではヴィジュアル面で未完成である。

表示させたままだとこの様な状態である。

デザインを施してない目次

このままでは世間の晒し者に。

そこでCSSファイルを編集して目次のレイアウトを調整していく。

CSSの設定値を変更する事で色々なパターンに対応できる。

設定を反映した結果がこちら。

CSSファイルから目次のデザインを整えた後

デザインは自分の好きな様に設定ができるので楽しい。

わたしはサイトの背景色と合わせた縁取りにしたがそこは人の好みに分かれるところだ。

プラグインを使った目次の作成

ここまでは独自でスクリプトファイルを作成して目次を作る手順を踏んできた。

「このやり方は難しい」や「プログラミングのアレルギー反応が〜」がある人もいるだろう。

そこで便利なやり方はプラグインを使うやり方だ。

目次に関する最も便利なプラグインは「TOC+」だろう。

Table of Contents Plus ダウンロードページ

リンク先もしくはプラグイン一覧から「TOC+」を検索してインストールする。

有効化した後に左のメニューバーの中に「TOC+」と表示されるので選択する。

「基本設定」の中にある「表示条件」などを好みに合わせて調整してやれば良い。

プラグインを使用するとなんとも簡単な作業になる。

だが、ウェブ屋はそれを面白がらない。

プラグインを使わずにウェブサイトを作り上げることはウェブ屋として楽しみの1つなのである。

近々、逆に「プラグイン」を作ろうと計画中である。

ふふふ。

今日も良い1日を。

      

-プラグイン

執筆者:


  1. […] 基本的な部分は プラグインなしで目次を追加!WordPressの目次の作り方! こちらの記事を参考にしていますので、分かりづらい方はそちらを参考にしてください。 […]

関連記事

プラグインなしでコードは書ける

プラグインいらず!WordPressでコード記述ならGistがオススメ!

わたしの様にIT技術を記事にしている人は共通の問題を持っていることだろう。 それは記事の中に「コード」を挿入したいと言う問題だ。 テキストベースでコードを記述することは確かに可能である。 以前もタグの …

【WordPress】Jetpackプラグインを使わない理由!

【WordPress】Jetpackプラグインを使うの辞めました。

優秀な人材は中々いない。 しかし優秀なプラグインはたくさんある。 それは優秀な人材が優秀なプラグインを作りまくっているからだ。 わたしも優秀な人材に人生を作り直してもらいたいものだ。 さて、そんなくだ …

Yoastでサイトマップを登録するのは簡単だよ

【WordPress】Yoastを使って簡単にサイトマップを作成!

みなさん、こんばんは。 SEOプラグインは何をお使いでしょうか。 質問をしているわたしは「Yoast」を使っている。 この「Yoast」はSEO定番のプラグイン「All in One SEO」の上位プ …

jetpackとanalyticsのPVの違い

驚愕の事実!JetpackとAnalyticsのPV数が違う原因追求!

ウェブ屋の仕事はどれだけウェブサイトを見てもらえるかが勝負である。 どれだけウェブサイトを作り込んでいても全く見られないウェブサイトは「価値がない」と言われてもしかない。 どれだけ良質であってもリーチ …

プロフィール

逆襲のジェリド

逆襲のジェリドは史実を覆すべく、復活を遂げた。時代はプログラミングを求める!俺を戦いに駆り立てたのは貴様だ!そんなこと言えるのかよ!

現役ITエンジニアフリーランス。得意分野はphp、Java、Javascript、VB.net、VBA。仕事についてはDMで。このブログではウェブかプログラミング、ガンダムについて徒然なるままに。

詳しくはこちら→ 詳細プロフィール