企業サイトを作る際に子ページの一覧を出したいことがよくあります。

そんな時に重宝するプラグインを公式ディレクトリで公開しました。

WordPress › Child Pages Shortcode « WordPress Plugins

スクリーンショット

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

ショートコードでwidth属性を指定することで列数を変更することも可能です。

使い方

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

[child_pages]

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

• id – 子ページを出力したい固定ページのID。デフォルトはショートコードを貼りつけた固定ページのIDです。
• width – 子ページのブロックの横幅。デフォルトは50%です。
• size – 画像のサイズの名称を指定できます。デフォルトは”thumbnail”。他に”large”、”medium”、”post-thumbnail”などがあります。

属性を使用した例

[child_pages width="33%" size="thumbnail"]

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

このプラグインでは以下のようなフィルターフックを用意しておりますので、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です。

その他

• ブロックを揃えるためにjQueryで高さを揃える処理をしています。
• アイキャッチ画像を設定しない記事ではカメラの画像が表示されます。