プラグイン「 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」ではなくすべての記事で「続きを読む」と出したい場合は、デフォルト値の置き換えで対応できる。たとえばmore文言は以下のように定義されていて、フィルターフックで置き換えられるようになっている。

ccchildpages_defaultsccchildpages_attributes のどちらかを使えばいい。

もっと言うとmoreはちゃんと翻訳ファイルを見てくれているようなのでmoファイルを作ればいいんだけど、それが面倒っていう場合はデフォルト値をベタ書きで置き換えてしまえばいける。

たとえば、こうすれば

[child_pages more="続きを読む"]と書く必要はなく [child_pages]だけで「続きを読む」と表示されるようになるし、 more に何か指定すればそっちが優先されることになる。