WordPress個別サポート

WordPressサイトの中で親子ページを設定することはありますが、親ページを開いたときに子ページが自動で一覧表示されると便利です。

親ページを開いたときに子テーマを自動で一覧表示

親ページを開いたときに子テーマを自動で一覧表示

Child Pages Shortcodeプラグインを使うと、そのような子ページ一覧を作成することができます。以下、親ページの中で自動で子ページを一覧表示する手順を説明します。

BizVektorには親子ページ一覧機能があります。この記事で紹介するChild Pages Shortcodeプラグインを使わなくても子ページ一覧は表示できます。
スポンサーリンク

WordPressテーマ「LOTUS (TCD039)」

Child Pages Shortcodeプラグインの使い方

プラグインのインストール

「プラグイン」‐「新規追加」メニューからChild Pages Shortcodeプラグインをインストール、有効化します。

Child Pages Shortcodeプラグインのインストール

Child Pages Shortcodeプラグインのインストール

親ページにショートコードを入力

「固定ページ」‐「固定ページ一覧」メニューから、親ページにするページの編集画面を開いて、次のショートコードを入力します。

[child_pages]

ここでは「ご利用案内」を親ページにするため、編集画面を開いてショートコードを入力しました。

Child Pages Shortcodeのショートコードを入力

Child Pages Shortcodeのショートコードを親ページに入力

完了後、「更新」ボタン(または「公開」ボタン)をクリックすると設定完了です。

子ページで親を選ぶ

この親ページの下に子ページをぶら下げます。それには、「固定ページ」‐「固定ページ一覧」メニューで子ページにしたいページの「クイック編集」をクリックします。

子ページにするページの「クイック編集」をクリック

子ページにするページの「クイック編集」をクリック

「親」(1)で親ページ(ここでは「ご利用案内」)を選びます。

子ページの「親」を選ぶ

子ページの「親」を選ぶ

「更新」ボタン(2)をクリックすると設定完了です。

他の子ページも同じように「クイック編集」を使って「親」を選びましょう。

終わったら、もう一度「固定ページ」‐「固定ページ一覧」メニューを開いてみましょう。親ページに子ページをぶら下げたイメージを確認できます。

親ページと子ページを確認

親ページと子ページを確認

これで、親ページを開くと子ページが自動で一覧表示されるはずです。

親ページを開くと子ページが一覧表示される

親ページを開くと子ページが一覧表示される

このようなレイアウトを親ページに手動で作るのは面倒ですが、親ページと子ページを設定するだけで自動で完成するのがメリットです。

子ページ一覧のカスタマイズ

ショートコードのオプションを設定することで、表示形式をカスタマイズできます。

幅(列数)を設定する

初期設定では2列ごとの表示になっていますが、個々のブロックの幅を設定することで、列数を増やすことができます。次の例では、「width="33%"」を指定しています。1列の幅が全体の33%になるので結果として3列で表示されます。

[child_pages width="33%"]

表示結果は次のようになります。

子ページを3列で表示する

子ページを3列で表示する

画像のサイズを設定する

初期設定ではアイキャッチ画像のサイズはサムネイルになっているので、正方形の画像が表示されるかもしれません。画像サイズはsizeオプションを使って次のようなサイズを指定できます。

  • thumbnail(既定) --- サムネイル
  • medium --- 中サイズ
  • large ---大サイズ
  • full --- フルサイズ

以下は中サイズ画像(medium)を表示する例です。

[child_pages size="medium"]

合わせて3列表示にしてみます。

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

表示結果は次のようになります。

子ページの画像を中サイズに

子ページの画像を中サイズに

任意の親ページの子ページを一覧する

初期設定では現在の親ページの子ページが一覧表示されますが、ページIDを指定して任意の固定ページの子ページを一覧表示することもできます。

[child_pages id="10"]

表示結果は次のようになります。

任意の親ページの子ページを一覧する

任意の親ページの子ページを一覧する

スマホ対応(マルチカラムの解除)

モバイル端末など幅が狭くなったときにマルチカラムを解除して1列で表示するCSSの例は次のようになります。

/* スマホなどでは1列表示に */
@media (max-width: 480px) {
    .child_pages .child_page {
        float: none;
        width: 100% !important;
    }
}

表示結果は次のようになります。

スマホなどでは1列表示に

スマホなどでは1列表示に

子ページの表示順を変更する

一覧表示される子ページの表示順を変更するにはIntuitive Custom Post Orderプラグインを使う方法があります。以下、使い方を簡単に説明します。

Intuitive Custom Post Orderプラグインのインストール

「プラグイン」‐「新規追加」メニューからIntuitive Custom Post Orderプラグインをインストール、有効化します。

Intuitive Custom Post Orderプラグインのインストール

Intuitive Custom Post Orderプラグインのインストール

固定ページを並べ替え可能に

「設定」‐「並び替え設定」メニューを開いて、「固定ページ」をチェックして「更新」ボタンをクリックします。

固定ページを並べ替え可能に

固定ページを並べ替え可能に

固定ページを並べ替える

「固定ページ」‐「固定ページ一覧」メニューで並べ替えたい固定ページにマウスオーバーすると、カーソルが十字に変わります。この状態で固定ページを上下にドラッグアンドドロップすると、表示順を変更することができます。

固定ページを並べ替える

固定ページを並べ替える

たとえば、次のように並べ替えたとします。

固定ページを並べ替えた例

固定ページを並べ替えた例

この順番が子ページ一覧にも反映されます。

子ページ一覧の表示順が変わる

並べ替えた順番が子ページの表示順にも反映される

まとめ

親ページの中に子ページのリストを手動で作成するのは面倒ですよね。そんなときはChild Pages Shortcodeプラグインを使えば、自動で子ページを一覧表示できます。親ページにはショートコードを1行入力しただけです。その親ページに子ページをぶら下げるだけで、このように子ページ(タイトル・アイキャッチ画像・記事抜粋)を表示できるということです。便利ですよね。

ぜひ、使い方をマスターしましょう。よくわからないときはWordPress個別サポートでサポートします。

念のため確認ですが、BizVektorには親子ページ一覧機能があります。Child Pages Shortcodeプラグインを使わなくても子ページ一覧は表示できます。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート