意外とわかっていませんでした。これは！と思い書き留めておきます。
固定ページの階層について。
階層をつけるときといえば。たとえば、
『固定ページ「社員紹介」』>『固定ページ「社員A」』『固定ページ「営業スタッフB」』『固定ページ「営業スタッフC」』…
などでしょうか。これは、各固定ページの親に『固定ページ「社員紹介」』を指定するということです。
固定ページを作成、編集する画面でこのような記述があるかと思います。
ここで、「親」に、関連するページを指定することで、パンくずリストで、親ページを経由していることが表示されたり、サイトマップ上でのサイト構造の明確化に役立ちます！
なので、今回の場合だと、「社員紹介」ページで、固定ページで作った所属社員ページの一覧を見せたい…などといった場合に役立ちます。
更新が少ないなら、カスタム投稿を作る必要はあまり無いのでね。まぁこちらも手間は多少ありますが…
逆に、作った固定ページを関連付けたくないなどといった場合は「親」を指定しなくて結構です！
「親」を指定すると、固定ページ一覧画面ではこのようになります。
では以下、手順です。
まず、「社員紹介」ページのスラッグを指定します。（パーマリンク設定が「投稿名」「カスタム構造」の場合）仮に、/staffとします。
その「社員紹介」ページでメディアを挿入してリンクを貼れば楽なのですが、せっかくなのでループとかしましょう。
テンプレートファイルをつくる
スラッグをファイル名末尾に、「-」ハイフンで区切って作成します。
固定ページで使用するため、page-staff.phpとなります。
このpage-staff.phpにコーディングをすることで「そのページだけの表示」を実現することが可能です。
では、「社員紹介｜（スラッグ”staff”）」を親とした、子ページたちを「社員紹介｜（スラッグ”staff”）」ページ内に出力していきます。
やっぱり「query_posts」を使う
あくまでサイト内の下層ページなので、query_postsで、そのページ内のメインループとして扱っても良いでしょう。
配列で条件を指定しますが、以下の条件で抽出します
1 2 3 4 5 6 7 8 | $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でループして、任意の条件を抽出して完成です。
例として、社員の写真と、リンクを表示するとしましょう。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | 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の引数に指定しています。
次の
1 2 | <img src=“‘ . get_bloginfo(‘template_url’) . ‘/img/’ . $staffPageId . ‘.png” alt=“‘ . $staffName . ‘” style=“max-width: 100%; height: auto;” /><br />‘; |
ここですが、$staffPageIdを利用して画像URLを指定しています。
社員のページヘリンクするため、各社員で、個別の、顔写真か何かを出力します。
画像ファイル名をスラッグと同じにしておくことで、取得したデータで分けて画像を出力できます！
ついでに、写真の下に、社員の名前などを入れようと思います。
ループの中で更に条件分岐をさせます。
1 2 3 4 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‘の時の処理。これらはスラッグで判定しています。
これで社員一覧を表示するコードができました！
全部書くとこんな感じです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $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は結構パッと浮かぶメジャーな手段ですが、理想の条件を抽出するための指定がまだまだウロ覚えなので、頑張って共に精進していきましょう！
でわ！
