Child Pages Shortcode – 子ページの一覧を出力するショートコード


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

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

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以降)
 

Child Pages Shortcode – 子ページの一覧を出力するショートコード” への34件のコメント

  1. ピンバック: matsumotokoichi.com - 導入済みプラグイン

  2. お忙しい中、失礼します。
    「Child Pages Shortcod」プラグインを利用させていただいております。
    大変便利です。ありがとうございます。
    できれば なんですけど、
    属性に 除外ページを指定できるよう様にはなりませんか?
    トップページにピックアップして表示したいものですから。

  3. はじめまして。
    Child Pages Shortcodeを使用させていただいている者です。素晴らしいプラグインを公開してくださって感謝しております。
    ひとつ質問なのですが、抜粋の最後に3点リーダー(…)が付いているのですが、これを「続きを読む」のリンクに変更したいと思っています。なぜか変更できないため困っております。変更の仕方を教えていただけるとありがたいです。よろしくお願いします。

  4. ピンバック: インストール後の設定いろいろ | memo

  5. ピンバック: | WP-Sitebiz Themes

  6. ピンバック: Child Pages Shortcode - 競技麻雀サークル☆一向聴(いーしゃんてん)

  7. ピンバック: 重要カスタマイズ - 競技麻雀サークル☆一向聴(いーしゃんてん)

  8. はじめまして。
    使わせて頂いております。
    子記事の一覧を取得出来ると言うことで、とても便利なのですが、出来れば子記事本文も取得できるようになればいっそう便利かと存じます。
    現状、フィルターフックして下記のように無理矢理書き換えているのですが、もっとスマートな方法はありますでしょうか。
    // コードここから——
    /**
    * 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を渡せるようになると、スマートなのですが。。。

  9. あー、なるほど。たしかにpost_contentもあったほうがいいですね。
    つぎのアップデートで追加しておきます。

    ちなみに現状でやや楽にするには、テンプレート内でショートコードを使用することです。

    たとえば
    [get_content id=%post_id%]
    みたいなショートコードを作って、そこでコンテンツを返すようにすれば割りとわかりやすいソースになるかもです。

    ただし、子ページにもショートコードが入ってるとショートコードの無限ループみたいなことになるので要注意です。
    (この無限ループについてはショートコードのネストを拒否する属性を追加しようと思ってます。)

    以下のページは、コンテンツそのものではないですが、子ページのギャラリーを出力する例です。
    http://firegoby.jp/archives/3618

    • あー、でも数日中にアップデートしますので、お待ちいただけるなら待っていただいたほうがいいかも。^^

      • ゴールデンウィークが明けてみればズッパシ欲しい機能がついてて感動しました。

        > たとえば
        > [get_content id=%post_id%]
        > みたいなショートコードを作って、そこでコンテンツを返すようにすれば割りとわかりやすいソースになるかもです。

        これはいいですね。いろいろ応用できそうで。

  10. 便利に使わせていただいております。
    説明の「id – 子ページを出力したい固定ページのID。」についてもう少し詳しくご説明いただけないでしょうか・・・。恐らく私がほしい機能がこれなのですがいま一つわからなくて。検索しても出てこなかったもので。
    すみません。

    • idというのはそれぞれの記事が固有に持っている数字のことで、その記事の編集画面を開くとURLのなかにpost=1111みたいな数字があると思います。
      その数字がIDです。

  11. wordpress初心者です。マニュアル本を読んで初めてブログを製作中です。Twenty Twelveをテーマに選び真っ先にchild pages shortcodeを導入しました。他は何もしていません。子ページの一覧が表示されるのですが高さがそろわず右に行くほど階段状に下がって表示されます。どうすれば高さの表示がそろうのでしょうか?

    • javascriptで高さを自動的に揃えるようになっていると思うんですが、デフォルトのTwenty Twelveにこのプラグインを適用しただけならうまく動作するはずです。
      テーマの中に wp_footer() 及び wp_head() が含まれてないことないですか?(デフォルトのTwenty Twelveなら最初から入ってます。)
      もしくは他のプラグインとのコンフリクトが原因として考えられますが、この場合は私の方では原因をつかみかねます。

      • すばやいご返事ありがとうございました。
        結局私ではらちがあかず wordpressのインスツールからやり直しました所 直りました。もう少し勉強を続け何とか皆様の質問や答えを理解できるようになるように努力します。

        • 横やり失礼します。

          確かにChild Page ShortcodeのデフォルトのJSやCSSはそのままで十分見応えする装飾を施してくれますが、自分なりにイチから装飾したいときには、僕は下記のようにフィルタフックで無効化しています。

          function return_empty_str() {
          return ”;
          }
          add_filter(“child-pages-shortcode-js”, “return_empty_str”);
          add_filter(“child-pages-shortcode-stylesheet”, “return_empty_str”);

          フィルタフック「child-pages-shortcode-js」と「child-pages-shortcode-stylesheet」はそれぞれ、標準で読み込むjsのURL、cssのURLを書き換えるモノですが、空の文字列を返すことで読み込みそのものを停止させています。
          あとはstyle.css等の別ファイルでスタイル定義してあげればOKですね。

  12. やっとこ、このプラグインを見つけました。
    望む形に出来そうです。
    ただ、画像やタイトル部分に<a>がついてますが、外すことは出来るのでしょうか?
    フィルターフックのことが書いてありますが、良くわかりません。

  13. ピンバック: チームメンバー紹介ページの作り方 | PSO2 Team "Libre personnes"

  14. やっとできた!と思ったのですが…..
    テンプレートをレスポンシブ対応にしたので、スマートフォンで表示したときに横幅を50%ではなく、100%にするにはどうしたらいいのでしょうか。

  15. ピンバック: Child Pages Shortcode と Table of Contents Plusの共存 | Compile

  16. お忙しい中失礼致します。色々検索していてこちらのページにたどり着きました。
    「child pages shortcodeをカスタム投稿タイプにも対応させる」
    こちらの記事そのままの事を実行したくて・・!!泣

    どのようにすればカスタム投稿のページを固定ページなどに、child pages shortcodeで表示する事が出来るのでしょうか・・。どうか教えて頂ければ幸いです。宜しくお願い致します。

    • このプラグインはデフォルトでは固定ページにしか対応していないです。フィルターフックを使えば可能だと思いますが、phpのスキルが必要です。

  17. wordpress初心者です。こちらのプラグインとっても便利です。
    前の方にも質問がありましたが、僕も右に向かうに当たって子ページ一覧が下がっていってしまします。
    デフォルトの50%でやっているのですが、1番目の物だけが上がっているようなイメージです。
    2番目以降はしっかり整っています。
    当方使用テーマはShuttershotです。
    宜しくお願い致します。

    • 失礼します。
      ショートコードをこのサイトなどからコピペしていませんか?コピペせずに手で打ってみてください。
      [child_pages width="33%" size="thumbnail"]
      こちらをエディタにコピペしてもらっても大丈夫だと思います。

      案外このミスをしている方が多そうなので書いておきます。

  18. @ob様

    こんばんは、はじめまして。

    アドバイスありがとうございました。

    ご指摘の通り、コピペでなく自分で打ってみましたところ、うまく表示されるようになりました。

    なかば、諦めていただけに本当に助かりました。

    ありがとうございました!!!

  19. はじめまして。
    こちらのプラグインに出会えてよかったです。
    やりたいことが可能になりました。
    ありがとうございます。

    そこで一つだけお聞きしたいのですが、子ページ一覧の表示数は変更可能でしょうか。
    子ページが20ページあるとして、10ページだけ表示して、「次へ」のような感じで残りの10ページを表示させるような感じなのですが。

    やりたいことがこちらのプラグインで実装できていますので、できればご教授をお願いできればと思います。

    以上宜しくお願いいたします。

  20. 以前の回答にある、レスポンシブ対応させるための
    >テーマにCSSを書いてください
    とは、どんなものを書いたらよいのでしょうか?面倒くさい質問だとは思いますが、どうしても教えていただきたくて…。

    プラグインを使ってでしか見栄えのするサイトを作れない者としては大変大変ありがたいプラグインなだけに、
    使うも(スマホで見ると)難しい、使わぬも難しい、
    といった感じで勝手にとっても苦しんでおります(>_<)

    ぜひ、ご回答よろしくお願いします!!!

  21. はじめまして。
    Child Pages Shortcodeを使用させて頂いています。
    ありがとうございます。
    使ってみての希望ですが、「公開日時」と「カスタムフィード」(フィード名はショートコードで指定したい)のテンプレート変数を追加してほしいのです。どうかご検討をお願いします。

  22. ピンバック: プラグイン『Child Pages Shortcode』 | ビバ!Wordpress

  23. 探していたピッタリのプラグインを発見させていただきました。
    ありがとうございます。
    質問ですが、
    width=”33%”で子を2頁だけにした時ですが、左から2個め(中央に当たる)コンテナが左側コンテナより下がってしまうのは私の何かミスでしょうか?
    それと、
    各コンテナがデフォルトでは「白」ベースですが、背景に画像を使用したサイトで使用しており、コンテナを透明にして、背景画像と統一感を出したいと考えています。
    これは、どのようにすればよろしいでしょうか?
    初歩的な質問で申し訳ありませんが御教示をお願いします。

コメントは受け付けていません。