WordPressで記事目次を自動生成するプラグイン：JQuery Content Directory

JQuery Content Directory

JQuery Content Directory は WordPress プラグインで、WordPress 2.7 以上でのみ動作します。これは jquery-table-of-contents プラグインをベースに機能強化して作られたものです。

このプラグインは、ブログ記事の目次を自動生成し、記事の右上に配置できます。読者は目次から記事の構成を把握できるほか、興味のある段落へすばやく移動して読むこともできます。

プラグインの使用効果プレビュー

JQuery Content Directory のインストールは簡単です。プラグインをアップロードして有効化するだけで、WordPress 管理画面から直接インストールすることもできます。注意点として、設定時には WordPress テーマ構造と CSS について少し知識があるとよいでしょう。

インストール後、WordPress 管理画面の「設定」から「自動文章目次設定」を見つけて設定できます。簡単な設定を行えば、ブログ記事に自動目次機能を持たせることができます。

記事目次の位置を設定する

JQuery Content Directory には、テーマ内で「記事本文」が置かれているタグの位置と、どの見出しタグを区切りの目印として使うかを知らせる必要があります。つまり、プラグインに次の内容を指定します。

  • 記事本文がどの CSS セレクター内に限定されているか。
  • 目次階層を生成する HTML 見出しタグはどれか。たとえば h2。

たとえば、私のブログの記事本文は .jquerycd .entry タグ内に限定されており、h2 タグを区切りの目印として使っています。そのため、コンテンツ領域のセレクターは次のように設定できます。

.jquerycd .entry

区切り見出しタグは次のように設定します。

h2

テーマ構造が異なる場合は、自分の single.php またはブラウザーの開発者ツールで、実際の記事コンテナーを確認する必要があります。

タグを確認する方法

自分の記事がテーマ内のどのタグ内にあるのかわからない場合は、次の手順で確認できます。

  1. WordPress 管理画面に入ります。
  2. 「外観」=>「編集」を開きます。
  3. single.php を見つけます。
  4. テンプレートファイル内で記事本文を出力しているコードを探します。通常は次のようなコードです。
<?php the_content(); ?>
  1. このコードの外側で最も近い HTML タグと、その class 名を確認します。

たとえば、the_content() の外側の構造が次のようになっている場合です。

<div class="jquerycd">
  <div class="entry">
    <?php the_content(); ?>
  </div>
</div>

この場合、記事本文を限定するタグは次のようになります。

.jquerycd .entry

記事目次の生成スタイル設定

JQuery Content Directory は、ユーザーによる目次スタイルのカスタマイズに対応しています。管理画面で目次タイトルを設定できるほか、CSS を編集して目次の表示効果を制御することもできます。

たとえば、目次タイトルを「我是标题」に設定すると、フロントエンドで表示される際に、このタイトルが目次領域の名前として使われます。

プラグインはデフォルトで jquery-toc.css ファイルを使って目次スタイルを設定します。もちろん、テーマの style.css に新しい CSS ルールを定義することもできます。セレクター名が管理画面で設定した CSS 名と対応していれば問題ありません。

たとえば、style.css に #newstyle を追加して目次スタイルを設定できます。

/* リストスタイル */
#newstyle ul {
  padding: 5px 0 0 14px;
  margin: 0;
  border-top: 2px solid #050;
}

#newstyle ul a {
  color: #050;
}

/* 目次タイトルのスタイル */
#newstyle strong {
  font-size: 16px;
  line-height: 30px;
}

/* 表示/非表示ラベルのスタイル */
#newstyle span {
  margin-left: 5px;
}

その後、プラグインの管理画面で CSS 名を次のように設定します。

newstyle

保存すると、記事目次はこの新しいスタイルルールで表示されるようになります。

Leave a Reply