プラグイン「 CC Child Pages 」のカスタマイズ

子ページ一覧を表示するショートコードが使えるようになるプラグイン「Child Pages Shortcode」が6年間アップデートもなく放置されているようだったので、同等の機能を持つ「 CC Child Pages 」に乗り換えた。

Adds a responsive shortcode to list child and sibling pages. Pre-styled or specify your own CSS class for custom styling. Includes child pages widget.

ショートコード

ショートコードは [child_pages] でなんと「Child Pages Shortcode」と一緒。なので基本的にはプラグインを入れ替えるだけでエラーも記事の修正も必要なく移行が完了する。

もちろん、ショートコードにいろいろ引数を付けていた場合はそれらを「CC Child Pages」のルールに置き換えた形で書き直す必要がある。詳しくは前述のリンクを参照。

ところで、そのまま使うとエラーにこそならないものの「うわあぁぁ~~なんじゃこりゃ~~~」って言いたくなるような全く望んでいないデザインになる。

全く望んでいないデザイン
全く望んでいないデザイン

今までと同じCSSを有効にしたい!ていうか今までと同じHTMLで出力させたい!と言う場合は、「CC Child Pages」のCSSを無効にしたうえ、フィルターフックでテンプレートを書き換える必要がある。

スキンCSSの無効化

「設定」→「CC Child Pages」で「Enqueue Skins CSS」を「No」にする。

CSS無効設定
CSS無効設定

テンプレートのカスタマイズ

例えば、デフォルトではこんな感じのHTMLで出力される。

でも本当に出力したいHTMLはこう。特にタイトルは <h3>ではなく <h2>にしたい。

ちなみに「Child Pages Shortcode」ではこのようにカスタマイズしていた。

というわけで答えを書くと…

「外側」「内部」「抜粋文」「続きを読むリンク」でそれぞれフィルターフックが用意されているので、それぞれに対してカスタマイズを行う。

ショートコードの引数を使うのが面倒な場合、たとえば「more」ではなくすべての記事で「続きを読む」と出したい場合は、上記の {{ }} で囲われた変数部分を固定文言に置き換えてしまえばいい。

たとえば、こうすれば

[child_pages more="続きを読む"]と書く必要はなく [child_pages]だけで「続きを読む」と表示されるようになる(そのかわり more に何を指定しても無視されるようになるけど)。