企業サイトを作る際に子ページの一覧を出したいことがよくあります。
そんな時に重宝するプラグインを公式ディレクトリで公開しました。
WordPress › Child Pages Shortcode « WordPress Plugins
スクリーンショット
このプラグインをインストールして固定ページにとても簡単なショートコードを入力するだけで、以下のような子ページの一覧を出力します。
ショートコードでwidth属性を指定することで列数を変更することも可能です。
使い方
プラグインをインストール後に固定ページ上で以下のショートコードを入力してください。
[child_pages]
出力内容は以下の属性でカスタマイズ可能です。
- id – 子ページを出力したい固定ページのID。デフォルトはショートコードを貼りつけた固定ページのIDです。
- width – 子ページのブロックの横幅。デフォルトは50%です。
- size – 画像のサイズの名称を指定できます。デフォルトは”thumbnail”。他に”large”、”medium”、”post-thumbnail”などがあります。
- disabled_excerpt_filters – 抜粋に対するフィルターが適用されなくなり、負荷が低減されます。(参考)
属性を使用した例
[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です。
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以降）
ピンバック: matsumotokoichi.com - 導入済みプラグイン
お忙しい中、失礼します。
「Child Pages Shortcod」プラグインを利用させていただいております。
大変便利です。ありがとうございます。
できれば なんですけど、
属性に 除外ページを指定できるよう様にはなりませんか？
トップページにピックアップして表示したいものですから。
はじめまして。
Child Pages Shortcodeを使用させていただいている者です。素晴らしいプラグインを公開してくださって感謝しております。
ひとつ質問なのですが、抜粋の最後に３点リーダー（…）が付いているのですが、これを「続きを読む」のリンクに変更したいと思っています。なぜか変更できないため困っております。変更の仕方を教えていただけるとありがたいです。よろしくお願いします。
ピンバック: インストール後の設定いろいろ | memo
ピンバック: | WP-Sitebiz Themes
ピンバック: Child Pages Shortcode - 競技麻雀サークル☆一向聴（いーしゃんてん）
ピンバック: 重要カスタマイズ - 競技麻雀サークル☆一向聴（いーしゃんてん）
はじめまして。
使わせて頂いております。
子記事の一覧を取得出来ると言うことで、とても便利なのですが、出来れば子記事本文も取得できるようになればいっそう便利かと存じます。
現状、フィルターフックして下記のように無理矢理書き換えているのですが、もっとスマートな方法はありますでしょうか。
// コードここから——
/**
* child_page プラグインに、子記事の本文を取得する独自の拡張 %post_content% を加える
*/
function my_child_pages_shortcode_template_filter($template) {
// あとで本文を参照するときに使うため、記事IDを取得できるようにしておく。
$template = mb_ereg_replace(“%post_content%”, “%post_content_%post_id%%”, $template);
return $template;
}
add_filter(“child-pages-shortcode-template”, “my_child_pages_shortcode_template_filter”);
function my_child_pages_shortcode_output_filter($html) {
// 該当記事IDにマッチする本文をget_postで取得する処理。
$pattern = “%post_content_([0-9]*)%”;
mb_ereg_search_init($html, $pattern);
while (mb_ereg_search()) {
$matches = mb_ereg_search_getregs();
$replace_from = $matches[0];
// 記事IDは正規表現マッチにより、$matches[1]に格納されているので、それを元にget_postする。
$my_post_id = $matches[1];
$my_post = get_post($my_post_id,’OBJECT’,'edit’);
$my_post_content = $my_post->post_content;
$html = mb_ereg_replace( $replace_from, $my_post_content, $html );
}
return $html;
}
add_filter(“child-pages-shortcode-output”, “my_child_pages_shortcode_output_filter”);
// コードここまで—-
たとえば”child-pages-shortcode-template”フックの引数に記事IDを渡せるようになると、スマートなのですが。。。
あー、なるほど。たしかにpost_contentもあったほうがいいですね。
つぎのアップデートで追加しておきます。
ちなみに現状でやや楽にするには、テンプレート内でショートコードを使用することです。
たとえば
[get_content id=%post_id%]
みたいなショートコードを作って、そこでコンテンツを返すようにすれば割りとわかりやすいソースになるかもです。
ただし、子ページにもショートコードが入ってるとショートコードの無限ループみたいなことになるので要注意です。
(この無限ループについてはショートコードのネストを拒否する属性を追加しようと思ってます。)
以下のページは、コンテンツそのものではないですが、子ページのギャラリーを出力する例です。
http://firegoby.jp/archives/3618
あー、でも数日中にアップデートしますので、お待ちいただけるなら待っていただいたほうがいいかも。^^
ゴールデンウィークが明けてみればズッパシ欲しい機能がついてて感動しました。
> たとえば
> [get_content id=%post_id%]
> みたいなショートコードを作って、そこでコンテンツを返すようにすれば割りとわかりやすいソースになるかもです。
これはいいですね。いろいろ応用できそうで。
便利に使わせていただいております。
説明の「id – 子ページを出力したい固定ページのID。」についてもう少し詳しくご説明いただけないでしょうか・・・。恐らく私がほしい機能がこれなのですがいま一つわからなくて。検索しても出てこなかったもので。
すみません。
idというのはそれぞれの記事が固有に持っている数字のことで、その記事の編集画面を開くとURLのなかにpost=1111みたいな数字があると思います。
その数字がIDです。
wordpress初心者です。マニュアル本を読んで初めてブログを製作中です。Twenty Twelveをテーマに選び真っ先にchild pages shortcodeを導入しました。他は何もしていません。子ページの一覧が表示されるのですが高さがそろわず右に行くほど階段状に下がって表示されます。どうすれば高さの表示がそろうのでしょうか？
javascriptで高さを自動的に揃えるようになっていると思うんですが、デフォルトのTwenty Twelveにこのプラグインを適用しただけならうまく動作するはずです。
テーマの中に wp_footer() 及び wp_head() が含まれてないことないですか？(デフォルトのTwenty Twelveなら最初から入ってます。)
もしくは他のプラグインとのコンフリクトが原因として考えられますが、この場合は私の方では原因をつかみかねます。
すばやいご返事ありがとうございました。
結局私ではらちがあかず wordpressのインスツールからやり直しました所 直りました。もう少し勉強を続け何とか皆様の質問や答えを理解できるようになるように努力します。