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

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

WordPress.org 日本語

1 pocket

CC Child Pages

https://ja.wordpress.org/plugins/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」にする。

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

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

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

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

add_filter('child-pages-shortcode-template', 'custom_child_pages_shortcode_template');
function custom_child_pages_shortcode_template($template = '') {
  $template  = '
%post_title%
';
  $template .= '
%post_excerpt%
';
  $template .= '
続きを読む...
';
  return $template;
}

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

// ラッパー
add_filter('ccchildpages_outer_template', 'custom_ccchildpages_outer_template', 10, 2);
function custom_ccchildpages_outer_template($template, $atts) {
  $template = '
{{ccchildpages}}
';
  return $template;
}

// 子ページ単位
add_filter('ccchildpages_inner_template', 'custom_ccchildpages_inner_template', 10, 2);
function custom_ccchildpages_inner_template($template, $atts) {
  $template  = '{{title_tag}}';
  $template .= '
{{excerpt}}
';
  $template .= '
{{more}}
';
  return $template;
}

// タイトル部
add_filter('ccchildpages_title_template', 'custom_ccchildpages_title_template', 10, 2);
function custom_ccchildpages_title_template($template, $atts) {
  $template = '
{{title}}
';
  return $template;
}

// 抜粋
add_filter('ccchildpages_excerpt_template', 'custom_ccchildpages_excerpt_template', 10, 2);
function custom_ccchildpages_excerpt_template($template, $atts) {
  $template = '{{page_excerpt}}';
  return $template;
}

// 続きを読むリンク
add_filter('ccchildpages_more_template', 'custom_ccchildpages_more_template', 10, 2);
function custom_ccchildpages_more_template($template, $atts) {
  // ここでは {{title}} が使えないので、タイトルの文字列を使いたい場合は get_the_title() で取得するしかない
  $template = '{{more}}';
  return $template;
}

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

ショートコードの引数を使うのが面倒な場合、たとえば「more」ではなくすべての記事で「続きを読む」と出したい場合は、デフォルト値の置き換えで対応できる。たとえばmore文言は以下のように定義されていて、フィルターフックで置き換えられるようになっている。

$default_atts = apply_filters('ccchildpages_defaults', array(
	...
	'more' => __('Read more ...', 'cc-child-pages'),
	...
));
$a = shortcode_atts($default_atts, $atts);
$a = apply_filters('ccchildpages_attributes', $a);

ccchildpages_defaults か ccchildpages_attributes のどちらかを使えばいい。

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

たとえば、こうすれば

// デフォルト設定
add_filter('ccchildpages_defaults', 'custom_ccchildpages_defaults');
function custom_ccchildpages_defaults($atts) {
  $atts['more'] = '続きを読む';
  return $atts;
}

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