シェアする

  • このエントリーをはてなブックマークに追加

記事の目次を表示するプラグインを入れてみた

Table of Contents Generatorを導入

記事のhタグを拾って目次を生成してくれるTable of Contents Generatorを導入しました。

導入方法

  1. Table of Contents Generator WordPress plugin | SYPよりTOC Generator Pluginをダウンロード
  2. 解凍したylsy_toc.phpをプラグインにアップロードする。
  3. プラグインを有効にする。

使い方

記事中のhタグ(h2~)を拾って、階層構造の目次を生成します。
よってhタグを使っていない場合は目次は表示されません。

目次を記事に挿入する場合は記事の任意の場所に<!--TOC-->を挿入します。

テンプレートに挿入する場合は、

<?php echo $post->post_toc; ?>

を挿入します。

応用編

そもそもこの目次プラグインはdelab – xhtml CSS SEO CMS PHP など Webデザイン WEBサイト構築の話題さんに憧れて追加したのですが、サイドバーに表示されている目次がかっちょいいのだと思うわけです。
とりあえずこのサイトでもうまくいったので、目次をサイドバーに表示させる方法についてメモしておきます。

手順

  1. 設定画面のデザインタブ->テーマエディタからサイドバーのファイル(GrossyBlueならsidebar.php)を選択。
  2. 任意の場所に
    <?php echo $post->post_toc; ?>

    を挿入。

  3. 他のサイドバーコンテンツに習いpost_toc; ?>の上に<h2 class=”sidebartitle”>目次</h2>を追加(これはテーマによって異なると思います)

注意

サイドバーに追加するときに下手にif文の中やwhile文の中に配置すると、表示されなくなったりしますんで注意してください。ソース読めばわかることなんですが、自分はそれやって表示されね?とか言ってました。

余談

delabさんのサイトを初めて見たときに、どうやったらこんな素敵なページができるんだろう?と思ったんですよ。デザインの素晴らしさもさることながら、全ての記事に目次がついていて、構造的文章っていうんでしょうか、それを利用して動的に目次を作るって、いったいどんな仕組み?と。

そのときはまだWordPressを使ったことが無かったし、こんなことがWordPressでできるなんて思ってもみなかった。それが、自分のサイトでこんなに簡単に実現できるなんて!
まさに驚きですよね。

WordPress最高!

参考サイト

Table of Contents Generator WordPress plugin | SYP
power source* ? WP plugin: 記事の目次を自動生成 – Table of Contents Generator
delab – xhtml CSS SEO CMS PHP など Webデザイン WEBサイト構築の話題

シェアする

  • このエントリーをはてなブックマークに追加

フォローする