[WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

  • あとで読みたい人は…

こんばんは、@cappeeです。

最近長い記事も多くなってきたので、ページ内の目次を自動生成してくれるプラグインを導入する時期がきたかなと。

ちょっと前までは「Table of Contents Generator」というプラグインを導入していました。下記などを参考にプラグインを入れた後は問題なく表示されたんですが、すぐにアップデートのアラートがでて、アップデートするとなぜか目次が消えてしまいました。。しばらくアップデートせず初期のまま表示していたんですが、やっぱりアラートが気になる。。
ページ内目次を生成するTable of Contents Generator WordPress pluginを導入

ので、別の目次プラグインを探していたところ、ちょうどいつも拝見してるかちびと.netで「Table of Contents Plus」が紹介されていたので導入してみました。いい感じだったので設定方法など書いておきます。

少しカスタマイズしてますが、こんな感じで目次が表示されますよ。

「Table of Contents Plus」プラグインの設定方法

「Table of Contents Plus」プラグインをインストール

WordPressの管理画面で、プラグインの「新規追加」から「Table of Contents Plus」を検索してインストール、有効化します。

設定ページを開く

「インストール済みプラグイン」の「Settings」か、「設定」の「TOC+」リンクから設定ページを開きます。

プラグインの設定

現時点での私の設定はこんな感じです。カスタマイズしなくても5種類のデザインから選択できるのは嬉しいですね!

TOC Cappee Design WordPress1 [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

  • Position … 目次を掲載する位置。「Before first heading (default)」は最初の見出しの前に掲載
  • Show when … いくつ見出しがあれば目次を自動表示するか
  • Auto insert for the following content types … 目次を表示するページの種類(ブログは「post」をチェック)
  • Heading text … 目次エリアの見出し
  • Allow the user to toggle the visibility of the table of contents …目次をユーザーが隠せるかどうか
  • Show hierarchy … h2,h3の見出しの階層を表示するか
  • Number list items … リストの左にある数字を表示するか
  • Enable smooth scroll effect … 目次のリンクをクリックした時に滑らかなスクロールで移動するか
  • Width … 目次枠の幅
  • Wrapping … 目次を左に表示するか、右に表示するか
  • Font size … フォントの大きさ
  • Presentation … 目次のデザイン。カスタムにするとボーターや背景、見出し文字色、リンク色などを選択できます

設定が完了したら「Update Options」ボタンを押して目次が表示されているか確認します。

また、目次の掲載位置を記事ごと好きな場所に設定したい場合は、投稿画面の「テキスト」タブをクリックし、下記のように記述すれば表示されます。(プラグインの方で位置を設定していても、この記述の位置が優先されます)

<!--TOC-->

残念ながら記事の一覧ページには目次は表示されないようです。(設定ご存知の方いたら教えてください><)

目次をさらにカスタマイズ

以上でも十分なくらいですが、個人的に細かいところをプラグインのphpファイルとCSSを変更してさらにカスタマイズしました。

wp-content/plugins/table-of-contents-plus/toc.php
wp-content/plugins/table-of-contents-plus/screen.css

ulタグをolタグに変更
目次のリストには数字を表示しており、順序のあるリストとなっているので、ulタグではなくolタグに変更しました。
ソースコード内を「ul」で検索してphpファイルとcssファイルを置換します。

リストの数字はリンクさせない
デフォルトだと数字にもリンクが貼られているので、細かいですがSEOを考慮して文字だけにリンクさせました。
「Table of Contents Plus」の設定画面で「Number list items」にチェックをしてください。(チェックしないとリンクが消えてしまいます。)

toc.phpファイルは下記のように変更するときっと同じように表示されると思います。(バージョン 1211 1303.1 現在)
プラグインの書き換えは自己責任で、必ずバックアップをとってから編集するようにお願いします。

// list item 部分を書き換える
<a href=”#’ . $this->url_anchor_target( $matches[$i][0] ) . ‘”>を</span>の後ろに移動します。

// list item
if ( in_array($matches[$i][2], $this->options['heading_levels']) ) {
if ( $this->options['ordered_list'] ) {
// attach leading numbers when lower in hierarchy
$html .= '<span class="toc_number toc_depth_' . ($current_depth - $numbered_items_min + 1) . '">';
for ($j = $numbered_items_min; $j < $current_depth; $j++) {
$number = ($numbered_items[$j]) ? $numbered_items[$j] : 0;
$html .= $number . '.';
}
$html .= ($numbered_items[$current_depth] + 1) . '</span>
<a href="#' . $this->url_anchor_target( $matches[$i][0] ) . '">';
$numbered_items[$current_depth]++;
}
$html .= strip_tags($matches[$i][0]) . '</a>';
}

// assemble flat list 部分を書き換える
<a href=”#’ . $anchor . ‘”>をcount($replace)の後ろに移動します。

// assemble flat list
if ( !$this->options['show_heirarchy'] ) {
$items .= '<li>';
if ( $this->options['ordered_list'] ) $items .= count($replace) . '<a href="#' . $anchor . '">';
$items .= strip_tags($matches[$i][0]) . '</a></li>';
}

目次があると最初に記事全体をざっくり把握できるので読み手は効率的に読むことができるのでいいですよね。
長い記事の場合はマストです。

 

Pocket
article clipper [WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

4 thoughts on “[WordPress] ページ内の目次を自動でつくるプラグイン「Table of Contents Plus」の設定方法

  1. Pingback: 【WordPress】ブログ記事や固定ページに目次をつける便利なプラグイン「Table of Contents Plus」 - 心和ログ

  2. Pingback: 【WordPress】ブログ記事や固定ページに目次をつける便利なプラグイン「Table of Contents Plus」 - cocowa

  3. Pingback: モバイル版はWPtouchにひとまずお預け

  4. Pingback: 【2014年7月24日】気になった記事 | 変人ブログ

コメントを残す

メールアドレスが公開されることはありません。

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)