WordPress

【WordPress(ワードプレス)】トップページに固定ページの情報を取得(get_page_by_path)して表示する方法

2021年1月6日

 

こんにちは、イケゾーです。

サブクエリとは何か
【WordPress(ワードプレス)】メインクエリとサブクエリとは?初心者向け解説

続きを見る

先日アップした記事「サブクエリとは何か」に、具体例を追加して解説をしていきます。こちらの記事では、「カテゴリを指定して最新記事を取得して表示する」方法を解説しました。

今回は、「トップページに、固定ページとその子ページの情報を取得して表示する」方法を解説します。

 

【WordPress(ワードプレス)】トップページに固定ページの情報を取得(get_page_by_path)して表示するサブクエリ

この記事では、サブクエリの具体例と使い方を解説しています。

 

この記事はこんな人におすすめ!

  • WordPressの「サブクエリ」ってなに
  • サブクエリの具体例を知りたい
  • トップページに固定ページ、それを親ページとする子ページの情報を表示したい

 

 

ワードプレスおすすめ参考書
【WordPress(ワードプレス)初心者におすすめ本】「仕事の現場でサッと使える! デザイン教科書」のレビュー

続きを見る

当ブログでは、WordPressテーマ 「WING(AFFINGER5)」 を使用しています。

 

ファイル構成の確認と準備

まずは完成形を確認し、ファイルの構成を準備しましょう。解説の画面と同じにしたい場合は揃えてください。

 

完成形の確認

トップページ

 

トップページに固定ページの内容を表示させています。ご存知の通り、この情報はメインクエリでは持ってこれませんね。

なのでサブクエリを作成して、固定ページの「タイトル」や「抜粋」を取得して表示しています。さらにその子ページの「アイキャッチ画像」と「タイトル」を4件取得して表示しています。

 

サブクエリを忘れた方はこちら
【WordPress(ワードプレス)】メインクエリとサブクエリとは?初心者向け解説

続きを見る

 

テンプレートファイルの準備

では最初に、ファイルを用意しましょう。
使用するのは、トップページ「front-page.php」と関数を記述する「functions.php」です。中身は空っぽで構いません。

 

固定ページの作成

次に固定ページを用意します。

親ページの作成

親ページは「店舗情報」と名前をつけてスラッグは「/shop」にします。

 

子ページの作成

子ページを「XXモール」という名前で8つ作成しました。
全ての子ページにおいて、ページ属性の「親ページ」に先ほど作成した「店舗情報」を選択しましょう。

 

固定ページの情報を取得(get_page_by_path)して表示するサブクエリ

完成版ソースコードで全体の流れを把握しましょう。 大切な部分に一言コメントを添えているので、参考にしてください。

 

完成版ソースコード

front-page.php
  <?php
  $shop_obj = get_page_by_path( 'shop' );// 固定ページ(スラッグがshop)のオブジェクトを取得する
  $post = $shop_obj;
  setup_postdata( $post );// 引数に投稿objを渡すことで、投稿情報をセットする(サブクエリ的な使い方)
  $shop_title = get_the_title();
  ?>
    <h2 class="section-title"><?php the_title(); ?></h2>// タイトルを表示
    <p class="section-lead"><?php echo get_the_excerpt(); ?></p>// 抜粋を表示
    <?php wp_reset_postdata(); ?><!-- setup_postdataをメインクエリに戻す -->

    <ul class="shops">
      <?php
      $shop_pages = get_child_pages( 4, $shop_obj->ID );//「 functions.php」の関数で子ページを4件取得する
      if ( $shop_pages->have_posts() ) :// ループ処理
        while ( $shop_pages->have_posts()) : $shop_pages->the_post();
      ?>
      <li class="shops-item">
        <a class="shop-link" href="<?php the_permalink(); ?>">
          <div class="shop-image">
            <?php the_post_thumbnail( 'common' ); ?>// アイキャッチ画像の表示
          </div>
          <div class="shop-body">
            <p class="name"><?php the_title(); ?></p>// タイトルを表示
            <p class="location"></p>
            <div class="buttonBox">
              <button type="button" class="seeDetail">MORE</button>
            </div>
          </div>
        </a>
      </li>
    <?php
      endwhile;
      wp_reset_postdata();// メインクエリに戻すときのお決まり
    endif;
    ?>
    </ul>
    <div class="section-buttons">
      <button type="button" class="button button-ghost" onclick="javascript:location.href = '<?php echo esc_url( home_url( 'shop' ) ); ?>';">
        <?php echo $shop_title; ?>一覧を見る<!-- 5行目で作った変数を使う -->
      </button>
    </div>

 

functions.php

下記の記事で作成した関数「get_child_pages」を使用します。「get_child_pages」は、親ページのIDを指定すると子ページの情報を取得する関数です。こちらを少しカスタマイズしていきます。

【WordPress(ワードプレス)】子ページの情報を取得(post_parent)して表示するサブクエリ|コード公開

続きを見る

// 子ページを取得する関数
function get_child_pages( $number = -1, $specified_id = null ){
	if ( isset( $specified_id ) ):
		$parent_id = $specified_id;
	else:
		$parent_id = get_the_ID();
	endif;

	$args = array(
	  'posts_per_page' => $number,// 取得したい記事数
	  'post_type' => 'page',// 取得したい投稿タイプ
	  'orderby' => 'menu_order',
	  'order' => 'ASC',
	  'post_parent' => $parent_id,
	);

	$child_pages = new WP_Query( $args );
	return $child_pages;
}

 

 

ソースコード詳細解説

ではコードを解説していきます。

 

front-page.php

get_page_by_path()

引数に固定ページのスラッグ'shop'を指定することで、そのページのオブジェクトを取得できます。

また、子ページのオブジェクトを取得したい場合は、get_page_by_path( '親ページのスラッグ/子ページのスラッグ' )と指定すると取得できます。

setup_postdata()

引数に1つの投稿データを指定することで、setup_postdata()からwp_reset_postdata()の間でサブクエリ的な使い方ができます。

wp_reset_postdata()はメインクエリに戻すために必須の記述になります。

get_child_pages()

下の記事にて作成した関数で、子ページを取得するためのモノです。

【WordPress(ワードプレス)】子ページの情報を取得(post_parent)して表示するサブクエリ|コード公開

続きを見る

get_child_pages(4, $shop_obj->ID )

関数の第一引数に、取得する件数を指定します。

第二引数の$shop_obj->IDは、固定親ページ「店舗情報」を指定しています。$shop_objには、get_page_by_path('shop')で取得した固定ページ「店舗情報」オブジェクトが格納されています。

 

functions.php

get_child_pages( $number = -1 , $specified_id = null )

関数の第二引数に、親ページのIDを指定できるようにします。デフォルトはnullで空の状態にしておくことで、省略できるようになります。

関数の第二引数をしている場合とそうでない場合の条件分岐を作ることができます。

isset()

引数に指定されている変数がnullの場合はFlasenullでない場合はTrueを返します。

つまり$parent_idの値は下記のようになります。

第二引数が指定されている場合 ー> 第二引数の値が格納される

そうでない場合 ー> 閲覧しているページのIDが格納される(get_theID()により)

 

 

まとめ

 

 

イケゾー
最後まで読んでいただき、ありがとうございました。
ご不明点やご意見は、コメントやTwitterにて、お寄せください 🙂
では、またお会いしましょう

  • この記事を書いた人

ikezooo

ご訪問ありがとうございます。 Ikezoooブログ「WEB積み上げ先生」を運営している30歳です。こちらでは、完全初心者からのプログラミング学習を発信しています。

-WordPress

© 2021 IkezoooBlog