【プラグイン】 Child Pages Shortcode

下記の内容はこのURLよりお借りしています。

http://firegoby.jp/wp/child-pages-shortcode

スクリーンショット

このプラグインをインストールして固定ページにとても簡単なショートコードを入力するだけで、以下のような子ページの一覧を出力します。

使い方

プラグインをインストール後に固定ページ上で以下のショートコードを入力してください。

出力内容は以下の属性でカスタマイズ可能です。

id – 子ページを出力したい固定ページのID。デフォルトはショートコードを貼りつけた固定ページのIDです。
width – 子ページのブロックの横幅。デフォルトは50%です。
size – 画像のサイズの名称を指定できます。デフォルトは”thumbnail”。他に”large”、”medium”、”post-thumbnail”などがあります。
disabled_excerpt_filters – 抜粋に対するフィルターが適用されなくなり、負荷が低減されます。(参考)

属性を使用した例

フィルターフックについて

このプラグインでは以下のようなフィルターフックを用意しておりますので、CSSやHTMLなどのカスタマイズが可能です。

フィルターフックはfunctions.phpなどで以下のように使用します。

add_filter("child-pages-shortcode-template", "my_filter");

function my_filter($template) {
    // do something
    return $template;
}

child-pages-shortcode-template

子ページを出力する際に使用されるHTMLのテンプレートをカスタマイズするためのフィルターフックです。

デフォルトのHTMLは以下のようになっています。

<div id="child_page-%post_id%" class="child_page" style="width:%width%;">
    <div class="child_page-container">
        <div class="post_thumb"><a href="%post_url%">%post_thumb%</a></div>
        <div class="post_content">
            <h4><a href="%post_url%">%post_title%</a></h4>
            <div class="post_excerpt">%post_excerpt%</div>
        </div>
    </div>
</div>

テンプレート変数は以下のとおりです。

%width% – ショートコードのwidth属性の指定された値。
%post_id% – 固定ページのID
%post_title% – 固定ページのタイトル
%post_url% – 固定ページのURL
%post_thumb% 固定ページのアイキャッチ画像
%post_excerpt% – 固定ページの抜粋

child-pages-shortcode-stylesheet

このプラグインで使用されるスタイルシートまでのURLです。

child-pages-shortcode-js

このプラグインで使用されるJavaScriptまでのURLです。

child-pages-shortcode-query

このフックを利用すると、このプラグイン内でquery_posts()に渡される引数をカスタマイズできます。

以下はデフォルトの引数です。

$args = array(
    'post_status' => 'publish',
    'post_type' => 'page',
    'post_parent' => $p['id'],
    'orderby' => 'menu_order',
    'order' => 'ASC',
    'nopaging' => true,
);

child-pages-shortcode-output

このショートコードの出力直前のフィルターフックです。

テンプレートのカスタマイズ方法について（1.0.1以降）

テンプレートは上述のフィルターフック以外にも以下の方法でカスタマイズが可能です。

ショートコード内でカスタマイズ

ビジュアルエディター内に以下のように記述することで

で囲まれた部分がテンプレートとして使用されます。

ただし、WordPressのwpautopが作用するためにソースの記述方法にいろいろとコツが必要です。

［child_pages］<li> <a href="%post_url%">%post_title%</a></li>［/child_pages］

（二重で書いてもうまくエスケープされなかったため、成り行き上、［］は全角で書いています。笑）

カスタムフィールドを使用してカスタマイズ

“child-pages-template” という名前のカスタムフィールドの値にテンプレートを記述すれば、それを使用して出力されます。

その他

ブロックを揃えるためにjQueryで高さを揃える処理をしています。
アイキャッチ画像を設定しない記事ではカメラの画像が表示されます。
テンプレート内にshortcodeを記述できます。（1.0.1以降）