wordpressで固定ページの「子ページ」を一覧表示する「アーカイブ固定ページ」をつくるコード

2014.5.3 Wordpress

意外とわかっていませんでした。これは!と思い書き留めておきます。

固定ページの階層について。

階層をつけるときといえば。たとえば、
『固定ページ「社員紹介」』>『固定ページ「社員A」』『固定ページ「営業スタッフB」』『固定ページ「営業スタッフC」』…

などでしょうか。これは、各固定ページの親に『固定ページ「社員紹介」』を指定するということです。

固定ページの子ページを出力

固定ページを作成、編集する画面でこのような記述があるかと思います。
ここで、「親」に、関連するページを指定することで、パンくずリストで、親ページを経由していることが表示されたり、サイトマップ上でのサイト構造の明確化に役立ちます!

なので、今回の場合だと、「社員紹介」ページで、固定ページで作った所属社員ページの一覧を見せたい…などといった場合に役立ちます。
更新が少ないなら、カスタム投稿を作る必要はあまり無いのでね。まぁこちらも手間は多少ありますが…

逆に、作った固定ページを関連付けたくないなどといった場合は「親」を指定しなくて結構です!
「親」を指定すると、固定ページ一覧画面ではこのようになります。

固定ページの子ページを出力2

では以下、手順です。

まず、「社員紹介」ページのスラッグを指定します。(パーマリンク設定が「投稿名」「カスタム構造」の場合)仮に、/staffとします。

その「社員紹介」ページでメディアを挿入してリンクを貼れば楽なのですが、せっかくなのでループとかしましょう。

テンプレートファイルをつくる

スラッグをファイル名末尾に、「-」ハイフンで区切って作成します。
固定ページで使用するため、page-staff.phpとなります。

固定ページの子ページを出力4

のpage-staff.phpにコーディングをすることで「そのページだけの表示」を実現することが可能です。
では、「社員紹介|(スラッグ”staff”)」を親とした、子ページたちを「社員紹介|(スラッグ”staff”)」ページ内に出力していきます。

やっぱり「query_posts」を使う

あくまでサイト内の下層ページなので、query_postsで、そのページ内のメインループとして扱っても良いでしょう。

配列で条件を指定しますが、以下の条件で抽出します

$staffsArr = array(
  'posts_per_page' => -1 ,
  'order' => 'ASC' ,
  'order_by' => 'post_title' ,
  'post_type' => 'page' ,
  'post_parent' => $post -> ID
);
$staffPageData = query_posts($staffsArr);

order‘と‘order_by‘は無くても結構です。
ここでは’post_parent‘がキモとなります。
親投稿のIDを指定することで、子ページのデータを取得しますが、
今回の場合だと、$post->IDと指定することで「社員紹介」ページで、『「社員紹介」ページを親とする、子ページ』のデータを取得できます。

あとはこの$staffPageDataをforeachでループして、任意の条件を抽出して完成です。
例として、社員の写真と、リンクを表示するとしましょう。

foreach($staffPageData as $staffPage) {
	
	$staffName =  $staffPage -> post_title;
	$staffPageId =  $staffPage -> post_name;
	$staffPageLink =  get_permalink($staffPage->ID);

	echo '<li><a href="' . $staffPageLink . '">

	<img src="' . get_bloginfo('template_url') . '/img/' .  $staffPageId . '.png" 
	alt="' . $staffName . '" class="report-trainer" style="max-width: 100%; height: auto;" /><br />';


//社員ごとの文言。子ページスラッグ変更時はこちらも要変更

	if($staffPageId == 'shain_a') {	echo '<span class="icon-chart">社員Aの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_b') {	echo '<span class="icon-chart">営業スタッフBの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_c') {	echo '<span class="icon-chart">営業スタッフCの紹介ページを見る</span>' ;}
			
echo '</li>';							
		
	}

foreachの中でループし、社員1人分ずつデータを抽出していきます。

先ほどの$staffPageDataの中に格納されたデータを、「->」を使って引っ張り出します。

$staffName = $staffPage -> post_title;」これでページのタイトル

$staffPageId = $staffPage -> post_name;」これでページのID

$staffPageLink = get_permalink($staffPage->ID);」これでページヘのリンクを取得しています。
こちらは各ページのIDを取得して、get_permalinkの引数に指定しています。

次の

<img src="' . get_bloginfo('template_url') . '/img/' . $staffPageId . '.png" 
 alt="' . $staffName . '" style="max-width: 100%; height: auto;" /><br />';

ここですが、$staffPageIdを利用して画像URLを指定しています。
社員のページヘリンクするため、各社員で、個別の、顔写真か何かを出力します。
画像ファイル名をスラッグと同じにしておくことで、取得したデータで分けて画像を出力できます!

固定ページの子ページを出力5

ついでに、写真の下に、社員の名前などを入れようと思います。

ループの中で更に条件分岐をさせます。

	if($staffPageId == 'shain_a') {	echo '<span>社員Aの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_b') {	echo '<span>営業スタッフBの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_c') {	echo '<span>営業スタッフCの紹介ページを見る</span>' ;}

ここです。

$staffPageIdが、’shain_a‘の時の処理、’eigyo_staff_b‘の時の処理、’eigyo_staff_c‘の時の処理。これらはスラッグで判定しています。

 

これで社員一覧を表示するコードができました!

全部書くとこんな感じです。

$staffsArr = array(
 'posts_per_page' => -1 ,
 'order' => 'ASC' ,
 'order_by' => 'post_title' ,
 'post_type' => 'page' ,
 'post_parent' => $post -> ID
);
$staffPageData = query_posts($staffsArr);

foreach($staffPageData as $staffPage) {
	
	$staffName =  $staffPage -> post_title;
	$$staffPageId =  $staffPage -> post_name;
	$$staffPageLink =  get_permalink($staffPage->ID);

	echo '<li><a href="' . $staffPageLink . '">

	<img src="' . get_bloginfo('template_url') . '/img/' .  $staffPageId . '.png" 
	alt="' . $staffName . '" class="report-trainer" style="max-width: 100%; height: auto;" /><br />';


//社員ごとの文言。子ページスラッグ変更時はこちらも要変更

	if($staffPageId == 'shain_a') {	echo '<span class="icon-chart">社員Aの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_b') {	echo '<span class="icon-chart">営業スタッフBの紹介ページを見る</span>' ;}

	if($staffPageId == 'eigyo_staff_c') {	echo '<span class="icon-chart">営業スタッフCの紹介ページを見る</span>' ;}
			
echo '</li>';							

wp_reset_query();		
	}

 

最後に、query_posts()ループでは、wp_reset_query();を末尾に記入することがとても重要なので、お忘れのないように!
このコードをpage-staff.phpの任意の場所に入れ込むことで、固定ページ「社員一覧」が、社員個別の写真とリンクがある「アーカイブページ」となりました。

 

query_postsは結構パッと浮かぶメジャーな手段ですが、理想の条件を抽出するための指定がまだまだウロ覚えなので、頑張って共に精進していきましょう!

でわ!

プロフィール

東京でWebデザイナー・コーダーとして、フロントエンド的なことからグラフィックデザイン的なことをして、ごにょごにょと小さく活動中。Webクリエイターでは珍しい(?) HIPHOP, R&B好き。休日はよくカフェや漫画喫茶に出向いたりパン屋に行ったり、主に散歩しています。だいたいラーメンを食べて帰ってくる、そんな過ごし方です(都内のオススメ散歩コース募集中!)。デザインのトレンドやデザイン思考、HTML、CSSからSASS、Javascript、Wordpress構築などコーディングのTIPSなどをブログにアップしていきます。その他のことはtwitter( @satohmsys )まで。