wordpressで固定ページの子ページを取得してリスト表示する

2014.5.4 webツール

案件で使ったのでメモ。

前回、同じようなタイトルでメモ系記事を書きました。
wordpressで固定ページの「子ページ」を一覧表示する「アーカイブ固定ページ」をつくるコード

「親」ページのもとに子ページを作って、それを『「親」ページ』内に一覧表示するというものでしたが、
仮にこの「親」がサイト内で結構大事なコンテンツな場合、サイドバーに掲載して、常に見えるようにしておきたいものですよね。

且つ、いちいち一覧ページ(≒「親」ページ)にジャンプしちゃうのもアレなので、一覧表示も出来るようにしてみます。

階層構造はこんな感じと仮定します。

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

社員3人…

get_pagesで親ページを元に子ページまで情報を取得

get_pages:WordPress私的マニュアル

child_of‘に、親ページのIDを指定します。これはスラッグではいけません
きっと勘違いしがちなポイントなので、しっかりIDを指定します。

foreachで順繰りに出力

何をしているかというと、
この部分でリンク付きテキストを出力しているのですが
せっかくならページタイトルをリンクテキストにしてしまうのでは無く、ifで条件分岐してそれぞれのページヘの解りやすいリンクテキストにします。

if($post -> post_name)で、それぞれのページに設定したスラッグを取り出して、合致した時のみ、{}内のテキストを出力します。

しかしここで一番重要なのはsetup_postsdata($post)です。

setup_postdata:WordPress私的マニュアル

コレがないとリンクが全く別のものになってしまうんです。
ループ中で出力する$post変数を$post以外にしても同様の状態に…理解に苦しむ次第です。丁寧な解説はsatohmsysまでm(_ _)m

 

話を戻し、更にif文を使って、ページを公開していなかったりした時の処理もします
全部書くとこんな感じです。

$mypostsが取得できない=指定した親ページに子ページがない場合は、「近日公開予定」と表示されるはずです。

 

さらにさらに、無駄にアコーディオンで出てくるようにしてみます。

これをファイル中で読み込んで、先程までのリストをアコーディオン表示するために、
見出しとクラスを追加します。

ボタンとしてクリックする要素class=”trigger”を指定、その後にアコーディオン表示される要素class=”acordion_tree”と指定するだけで、
【クリックして見る】をクリックすると、社員個別ページヘのリンクがスルスルっと降りてきます。

今回使ったアコーディオンはjQueryに依存するので注意してください。

 

get_pagessetup_postdataの復習で綴ってみました。
案件で使ったものはせっかくなので随時復習替わりにブログ化していこうと思います。目指せwordpressエンジニア!

 

でわ!

Profile

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