今はWordPressのサイト構築にすっかり夢中なんですね。
何せ全てが「自分だけの城」ですから。
アメブロが色々と制約やルールのある賃貸アパルトメントだとすれば、自サーバーのWordPressはさながら戸建の一軒家です。その代わり、マンション管理人は居ないから、セキュア面は全て自分で工夫して責任を背負う必要があります。また、自分の努力次第で豪邸にもなれるしボロ屋にもなるでしょう。
最近ではサイトの構築をしているんだかそのブログを書いてるんだか、自分でも良く分からなくなってきています。何にせよ、私がこの手のアーティクルを書いたところでテックブログに届くわけもないので、基本的には自分のための備忘録を書いているだけですね。
自作ブログの真価とは
自前サーバー＋WordPressといえば、色々とメリデメあるわけですが。
まずすぐに思いつくメリットとしては：
- 広告が出ない
- レイアウトやサイトデザインが自由
- 画像容量や埋め込みやプラグインなどコンテンツが無制限
このあたりですよね。
でも、それ以外も色々あって、その一つが今回ご紹介する
- 自由に機能拡張ができる
これこれ。
もしかしたらこれが最も大きいのかもしれない。これがあるとコンテンツが有機的になるんですよね。
例えば、＜特定の記事を見ているときだけ＞連載記事の目次を付けられる。
上図。ANDROMEDAの制作記事を見ている。その時「だけ」右側に連載記事の目次が出現しています。
こんなことが簡単にできてしまうんですね。
私の記事は、モノによって50回だの80回だのとんでもない連載回数になってしまうコンテンツがあります。それを全部結合して、アーカイビングしてもいいんだけれど、スクロール量が多すぎて見るに耐えないコンテンツになってしまいます。そんな時、この機能が役立ちます。
記事を結合するのではなく、散り散りに散在しているアーティクルを目次で俯瞰しながら読むことができる。
しかも、全部の記事で目次が出てくるわけではない。
私が指示した「あのネタと」「あのネタと」「あのネタだけ」選択的に目次が表示されるのです。無関係の記事を見ているときに目次（INDEX）は表示されません。しかも、この目次は私がシコシコ頑張って作ったわけでなく、指定通りに自動的にリストアップされます。
今回はWordPressユーザーの為に、この「自動目次」のセットアップ手順を掲載します。
若干のコーディングを伴いますが、内容はとても簡単で、どなたでも再現可能です。
仕組み
どんなブログにも備わっている機能ですが、ブログには「カテゴリー」という概念があります。いわゆる＃のようなタグの他に、「記事の内容を表す大分類のようなもの＝カテゴリー」があり、記事ひとつひとつのメタデータとして付帯しています。今回の「自動目次」はそのカテゴリを利用しています。
これは、コーディング次第ではカテゴリではなくタグを使うことも可能です。連載にユニークなタグを付けるようにして、それでソーティングして目次表示しても良いでしょう。だから、タグを使うのは目次生成の一例です。今回はWordPressの「カテゴリ」で自動目次を生成する方針で設計していきます。
私のWordPress上でのカテゴライズはこんな感じになっています。
アメブロと異なり、WordPressでは複数のカテゴリーに対してフラグが立てられるようになっていますし、図のように「階層構造」まで採れるようになっています。
ANDROMEDA連載の場合は、上記カテゴリの「Loudspeaker Building」「ANDROMEDA」「オーディオ」の3つのカテゴリにフラグを立てています。
しかしながら、ANDROMEDA連載でユニークなフラグは「ANDROMEDA」カテゴリだけです。他の「オーディオ」や「Loudspeaker Building」カテゴリの記事まで拾ってきてしまうと、目次にはANDROMEDAと無関係な記事が並んでしまいます。
したがって、今回はこの「ANDROMEDA」の連載記事だけに絞った目次が生成されるように、制御を工夫していきます。
目次を生成するためのプラグインを自作
最初は私もあり物のプラグインを使おうとしました。
List Category Posts ：カテゴリーの記事一覧をショートコードやウィジェットで表示する という物です。
ただ、これは便利で簡単だが制約が多く、私の希望には沿わなかった。
ここから先は自動的な目次表示をするためのプログラミングと手順をご紹介します。
ベテランのWordPressユーザーであっても「プラグイン」は買ったりダウンロードして使うもの、という常識感があります。しかし、実は僅かなPHPのコードが書ければ自作ができてしまうのです。私はAIと何度か壁打ちしながら所望の自動目次が生成できるプラグインを自作しました。
my-series-toc.php
<?php
/*
Plugin Name: My Series TOC
Description: 指定カテゴリの記事一覧を目次化し、現在の記事を強調表示、タイトルもPHP側で出す
Version: 1.3
Author: KeroYon＜あなたの名前＞
*/
function my_series_toc_shortcode() {
if ( !is_single() ) return ''; // 投稿ページのみ表示
// 表示対象のカテゴリID
// 78=ANDROMEDA, 145=UltimateMicroSub, 153=EURODAEN, 79=MX-1000H, 80=MX-0001Λ, 81=LINE Clova WAVE
$allowed_cats = array(78, 145, 153, 79, 80, 81);
// 投稿が属するカテゴリIDを取得
$post_cats = wp_get_post_categories(get_the_ID());
$matched = array_intersect($post_cats, $allowed_cats);
if ( empty($matched) ) return ''; // 対象カテゴリでなければ何も返さない
$cat_id = reset($matched);
// 記事一覧を全件取得（子カテゴリ含めない）
$args = array(
'cat' => $cat_id,
'posts_per_page' => -1,
'orderby' => 'date',
'order' => 'ASC',
'tax_query' => array(
array(
'taxonomy' => 'category',
'field' => 'term_id',
'terms' => $cat_id,
'include_children' => false,
),
),
);
$query = new WP_Query($args);
if ( !$query->have_posts() ) return '';
$current_post_id = get_the_ID();
// 出力開始
$output = '<div class="series-toc-wrapper">';
$output .= '<h3>この連載の目次</h3>'; // タイトルをPHP側で出す
$output .= '<ul class="my-catlist">';
while ( $query->have_posts() ) {
$query->the_post();
$title = get_the_title();
$post_id = get_the_ID();
$permalink = get_permalink();
if ( $post_id === $current_post_id ) {
// 現在の記事だけ強調
$output .= '<li><b><u>' . esc_html($title) . '</u></b></li>';
} else {
$output .= '<li><a href="' . esc_url($permalink) . '">' . esc_html($title) . '</a></li>';
}
}
$output .= '</ul>';
$output .= '</div>';
wp_reset_postdata();
return $output;
}
add_shortcode('series_toc', 'my_series_toc_shortcode');
// 2025.09.28
// カテゴリの親子関係で余計な記事を引き込むバグ修正
// 閲覧中記事の目次を協調表示する処理追加
上記コードは、赤字部分をご自身の希望に合わせて書き換えるだけで、今すぐお手元の環境で動きます。
＜あなたの名前＞ はauthorです。適当にアルファベットで名前を入れてください。
$allowed = array(78, 145, 153, 79, 80, 81)は、「目次を表示したいカテゴリID」を表しています。このIDをご自身で調べて記入します。
カテゴリーidの調べかたですが、以下の通りです。
1. WordPress ダッシュボード → 投稿 → カテゴリー に進む
2. 一覧から目的のカテゴリをクリック
3. ブラウザのアドレスバーを見ると URL に tag_ID=数字 が含まれている
この数字がカテゴリーIDです。
私の表示したいカテゴリIDはこんな感じになっていました。
逆に、この数字のついたカテゴリ以外では目次を表示して欲しくないのですね。
78の時はANDROMEDAの目次が。79の時はMX-1000Hの目次が動的に切り替わって表示される仕組みです。
表示したいカテゴリだけを配列に入れるわけです： (78,153,81,80,79,145)
<u><b>は閲覧記事の協調表示です。他の表現にしてもいいかもしれません。
<h3>この連載の目次</h3>はウィジェットのタイトル表示です。
必要に応じて書き換えるか、コメントアウトしてください。
以上のスクリプトが出来上がったら、my-series-toc.phpという名前で保存し、以下のパスを作って設置します。
……../wordpress/wp-content/plugins/my-series-toc/my-series-toc.php
うまくパスが通っていたら、自動的にプラグインに新しいプラグインが出現するはずです。
WPのダッシュボード→プラグイン と操作してください。「My Series TOC」という名前で出ています。
これを「有効化」しておいてください。これで実行準備は完了です。
実行表示場所を設置する
アウトプットする表示場所を作りましょう。
私の場合は、ブログページの右側ペインにあるウィジェット群の中に目次表示ウィジェットを足しました。
操作は以下の通りです。
1. WPで ダッシュボード→外観→ウィジェット と操作します。
2. 「＋」ボタンを押し、→検索欄で「ショートコード」を打って探し、→ウィジェット群に追加します。
3. ショートコードとして、これだけを書き込みます。
[series_toc]
はい、これだけです。これで目次が自動表示されます。
試しに、ご自身で選んだカテゴリーの記事を単独表示状態としてみてください。
おそらくウィジェット上に同一カテゴリの記事が（目次として）並ぶはずです。
逆の視点で言えば、「カテゴリー」は目次に一覧化されることをイメージしながら付与して行くという事ですね〜・・・・。
目次ウィジェット内のテキストを修飾
ここから先はオプションです。
私は目次一覧の文字が大きすぎて気に入らなかったので、CSS装飾を書いてデザインへ足しました。
WPのダッシュボード→外観→カスタマイズと進みます。
「追加CSS」を展開します。
そこに以下のコードを書き込みました。
.series-toc-wrapper {
font-size: 0.8em !important;
line-height: 1.4em;
margin-bottom: 1em;
}
.series-toc-wrapper ul.series-toc-list {
padding-left: 0.1em;
margin: 0;
list-style-type: disc;
}
.series-toc-wrapper ul.series-toc-list li {
margin-bottom: 0.1em;
}
.series-toc-wrapper ul.series-toc-list li a {
text-decoration: none;
color: #CC3030;
}
.series-toc-wrapper ul.series-toc-list li a:hover {
text-decoration: underline;
}
最後に、[公開] ボタンを押して更新します。
これらにより、少し小さめのフォントかつ指定カラーで目次が表示できます。
先のphpの中にはあらかじめスタイルを指定するコードが埋めてあるので、こんな事が可能になるんですね。
さて、今回ご紹介した長期連載の目次機能。これもWordPressのような自由度の高いプラットフォーム「ならでは」と言えるのではないでしょうか？
期間を跨いで散り散りの長期連載などが俯瞰してみられ、カテゴリ記事一覧とはまた違った使い勝手が得られます。何より、目次が付与されるとスペシャルなコンテンツ感が増長できるので激オススメです。👍
＜2025.09.28 追記＞
- いくつかのバグを修正。
- 見ている記事の目次行を協調表示する処理を追加。
- タイトルはphp側で付加するようにしショートコードからは排除。
→無関係な記事ではウィジェット非表示へ
投稿者
KeroYon
関連投稿
WordPress, サーバー攻撃のその後
先日の記事にて、自前のウェブサイトが猛烈なサ...
