ショートコードで子ページ一覧即製!Child Pages Shortcodeの使い方

Child Pages Shortcodeの巻

企業やお店のサイトで、商品やサービスなどの概要を説明するページの、アイキャッチ画像付きの一覧を作りたい!

そんな時に活躍するのが、Child Pages Shortcodeプラグイン。

このプラグインは、親子関係にある固定ページの子ページ一覧をショートコードだけで一覧化してくれる、超便利プラグインです。

Child Pages Shortcode – 子ページの一覧を出力するショートコード
https://firegoby.jp/wp/child-pages-shortcode

インストールは、ダッシュボードメニューのプラグイン~新規追加からインストールできます。

Child Pages Shortcodeの基本的な使い方

例えば、レストランのサイトなどで、

  • 「メニュー」の固定ページがあり、
  • 各メニューのページをそれぞれ固定ページで作成、
  • 各メニューページのコンテンツを利用して、その一覧を「メニュー」のページに載せたい

親ページ子ページのイメージ

というような時に

  1. 各メニューのページのページ属性で「メニュー」のページを親ページに、設定し、
    固定ページの親子設定
  2. 親ページである、「メニュー」のページにショートコード、
    を書き込む
    親ページにショートコードを入力

といった手順でサクサクッと一覧を作成することができるのが、Child Pages Shortcodeです。

ショートコードで作成された、メニューページ内のメニュー一覧

下の図でいうと、親の固定ページ=メニューの一覧のページ、子の固定ページ=メニューの種類のページとなります。
Child Pages Shortcode仕組み図解

デフォルトで種類ページのタイトル、アイキャッチ画像、抜粋文が表示されます。

固定ページのアイキャッチ画像が設定されていないテーマの場合

固定ページのアイキャッチ画像が設定されていないテーマを使っている場合は、アイキャッチ画像を固定ページで使える様にすれば一覧にも表示させることができます。

固定ページにアイキャッチ画像を設定する方法については、「functions.phpに書いたら便利だったワードプレス・コーデックス集」に説明してありますので、参考にして下さい。

また、アイキャッチ画像のサイズの設定方法については、「WordPressでアイキャッチ画像を好きなサイズで設定・使う方法」に書きましたので、参考になれば、と思います。

固定ページに抜粋が設定されていないテーマの場合

固定ページに抜粋が設定されていないテーマの場合は、functions.phpに固定ページにも抜粋機能を付けられる、コードを追記して下さい。

こちらも「functions.phpに書いたら便利だったワードプレス・コーデックス集」で説明していますので、参考にして下さい。

Child Pages Shortcodeの使い方・応用編・属性で見映えを調整する

Child Pages Shortcodeのページには以下の様に、属性でのカスタマイズ方法がかかれています。

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

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

引用:https://firegoby.jp/wp/child-pages-shortcode

ショートコードの書き方でいろいろと表示を変えることができる、という事ですね!

実際に表示を確認してみます。

属性id :子ページを出力したい固定ページのID  を使う

これはすごく使えます!

なぜなら、id指定することで「親ページでない固定ページや、投稿ページでも、子ページの記事の一覧を出力できる」という事だからです。

例えば、投稿ページに以下の様にショートコードにidを一緒に記載するだけで、
投稿ページ上でChildPages Shortcodeのページidでの表示

下の様に投稿ページ内にも固定ページ(子ページ)の一覧を表示させることができます。
投稿ページ上の子ページ記事一覧

企業ページなどで、1つの商品をブログで紹介、それに関連する商品説明の固定ページを並べたい、といった場合などに威力を発揮しそうです。

属性:width、sizeを使う

先ほどのテスト投稿に以下の様にwidth、sizeを付け加えてみます。
width、sizeをショートコードで使う

投稿ページは以下のような表示になります。
widthを33%、sizeをmediumにした場合の表示

サイズのmidiumは300pxという設定ですが、Child Pages ShortcodeのCSSで縮小されて、元画像が縮小されて表示される形になります。

widthの33%はこじんまりとしてなかなか良い感じですが、レスポンシブサイトの場合で、これをスマートフォン表示にした場合、以下の様な表示になってしまいます(^_^;)
レスポンシブサイトでsize:33%にした場合のスマートフォン表示

これを避けるには、ブレークポイント(:スマートフォン-PC表示のサイズの切り替えポイント)でCSSを切り替える記述をする必要が出てきますので、使用する場合には注意してください。

Child Pages Shortcodeの使い方・応用編・カスタムフィールドでカスタマイズする

Child Pages Shortcodeで作成される一覧で、

  • アイキャッチ画像の下にタイトルが表示されるようになっているが、これをアイキャッチ画像の上に表示させたい、
  • タイトルがh4になっているけれど、HTMLの構文上、h3や、pにしたい

というような場合、カスタムフィールドを使用することで、これらをカスタマイズすることができます。

カスタムフィールドは固定ページ、投稿ともに、編集ページの下の方に表示されますが、表示されていない場合は、編集ページの右上にある、表示オプションをクリックし、
表示オプションを開く

カスタムフィールドの☐に✔を入れます。
カスタムフィールドに✔を入れる

編集ページの下部にカスタムフィールドが表示されるので、新規作成をクリックします。
カスタムフィールドの新規作成をクリック

カスタムフィールドの名前欄に、

child-pages-template

値の欄に、Child Pages Shortcodeのテンプレートを記述します。

<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>

記述(コピペ)し終わったところ。
カスタムフィールドにChild Pages Shortcodeのテンプレートを記述する

テンプレートの中で<h4>~</h4>の部分がタイトルですので、これをアイキャッチ画像の前に移動、h3タグに変更すると、以下のようになります。
カスタムフィールドの編集と追加

カスタムフィールドの編集後の表示は下の様になります。
※widthはデフォルトの50%です。
カスタムフィールドの編集後の表示

このような表示にすると、サービス一覧や、もっと細分化した子ページ(例:メニューの中のドリンクメニュー → アルコール類のビール、ワインなどや、ソフトドリンクなど)の表示などにも応用できそうですね!

ではでは、今日はこの辺で。
以上、
「ショートコードで子ページ一覧即製!Child Pages Shortcodeの使い方」でした!

お役に立ったら、シェア、ブックマークなどよろしくお願いしま~す(^。^)

Published:2015/07/02

Written by