おはようございます、SABURO DESIGNのサブロー(@saburo_design)です。

ワードプレスで固定ページに、その下の階層の固定ページ(子ページ)一覧を表示させたい事があります。テーマによってはデフォルトで機能が付いていたり、プラグインを使用するという手もありますが、ここではコピペでできる子ページ一覧出力コードを紹介したいと思います。

各種案内の子になっているページを一覧表示する
各種案内の子になっているページを一覧表示する

当サイトで言えばこちらの各種案内ページのようなイメージです。各種案内の子になっているページをアイチャッチ画像や抜粋分とともに一覧出力してCSSでレイアウトを整えています。簡単にできますので皆さんもやって見ましょう。どうしてもテーマをカスタマイズするのに抵抗があるという方はプラグインに頼りましょう。プラグインならChild Pages Shortcodeあたりが使いやすいかと思います。

固定ページの子ページ一覧を出力する

以下のコードを子ページ一覧を出力させたいテンプレートファイルの任意の場所にコピペするだけです。シンプルに子ページのタイトルだけをリスト表示します。

  • 子ページのタイトル
  • 子ページのタイトル
  • 子ページのタイトル

IDを指定した固定ページの子ページ一覧を出力する

現在のページの子ページではなく、特定の固定ページの子ページを出力したい場合があると思います。たとえばトップページにサービス一覧を表示させたいとか。以下の例では『ID:886』の固定ページの子ページを出力できるようになります。

  • ID:886の子ページのタイトル
  • ID:886の子ページのタイトル
  • ID:886の子ページのタイトル

タイトルだけでなく子ページのアイチャッチ画像や抜粋文もつける

以下のコードでアイチャッチ画像・タイトル・抜粋文(50文字)も表示できます。CSSで見やすいように各自レイアウトしてください。

  • 【アイチャッチ画像(原寸)】
    子ページのタイトル
    抜粋文(50文字制限)
  • 【アイチャッチ画像(原寸)】
    子ページのタイトル
    抜粋文(50文字制限)
  • 【アイチャッチ画像(原寸)】
    子ページのタイトル
    抜粋文(50文字制限)

アイキャッチ画像をサムネイルサイズ

アイチャッチ画像を正方形のサムネイルで出力したい場合は、 <?php the_post_thumbnail('full'); ?>の『full』と書かれているところを『thumbnail』に変えましょう。

  • 【アイチャッチ画像(サムネイルサイズ)】
    子ページのタイトル
    抜粋文(50文字制限)
  • 【アイチャッチ画像(サムネイルサイズ)】
    子ページのタイトル
    抜粋文(50文字制限)
  • 【アイチャッチ画像(サムネイルサイズ)】
    子ページのタイトル

タイトルに文字数制限を掛ける

デザインやレイアウトの都合上、タイトルにも文字数の制限を掛けたいと言う人は、 <?php the_title(); ?>の代わりに下記のコードを入れましょう。

  • 【アイチャッチ画像】
    子ページのタイトル(32文字制限)
    抜粋文
  • 【アイチャッチ画像】
    子ページのタイトル(32文字制限)
    抜粋文
  • 【アイチャッチ画像】
    子ページのタイトル(32文字制限)
    抜粋文

これでタイトルを32文字まで出力します。32と書いてあるところ(2箇所とも)でタイトルの文字数の制限を掛けることができます。制限する文字数を変えたいときは2箇所とも変えてください。

まとめ

商品一覧ページ
商品一覧ページの例

いかがでしたでしょうか?使い方によってはカスタムフィールドと組み合わせて価格も表示した商品一覧ページとかも作れます。一度お試しあれ!