アプリ制作の勉強が全然できていません。。。どうも@yusukexpです。『絶対に挫折しないiPhoneアプリ開発「超」入門』を購入してみた！と買った本を紹介しているにもかかわらず申し訳ないですm(__)m
どうにか時間作って進めます！！
固定ページ（親）に固定ページ（子）の一覧を自動で表示させる！
さて、WordPressで固定ページを作成して、階層化することはあると思います。
例えば、進学塾を想定して、コースというページを作ります。それを親ページとして基礎コース・応用コースという子ページをそれぞれ作る感じです。その際に親ページには子ページのエントランスとしての機能（要は下層へ飛ぶリンクですかね）があればいい時に、子ページがもう絶対増えないというなら親ページを編集してリンクを貼っておいてもいいんですが、子ページが今後も増える可能性がある場合（今回でいうと特別進学コースとか、入門者コースなどが増えるかもしれない！）はいちいち編集するのは面倒ですよね。そんな時に自動で親ページに子ページのリンクやアイキャッチ画像などを追加してしまうコードを紹介します！
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 | <?php$parentId = get_the_ID();$args = 'posts_per_page=-1&post_type=page&orderby=menu_order&post_parent='.$parentId;query_posts($args);if (have_posts()) : while (have_posts()) : the_post();?><div class="col-md-6"> <div class="img-thumb"> <a href="<?php the_permalink(); ?>"> <div class="img-thumb-hover-left"> <i class="im-redo2"></i> </div> </a> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id, true); ?> <img src="<?php echo $image_url[0]; ?>" class="filler responsive" alt=""> </div> <h4 class="text-center"> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?> </a> </h4></div><?php endwhile;?><?php wp_reset_query(); ?><?php else:?><?php endif;?> |
*classには特に意味はありません。最近使ったコードをひっぱてきたので残っているだけですｗ
ハイライトしている部分が普段良く使うループと違う箇所ですね。
2行目で現在の投稿のIDを取得して、$parentIdに保存してます。それを3行目でパラメータとして使用します。（コード部分を横スクロールしたら$parentIdが使われていると思います。
3行目の部分を順に日本語にしてみると、
全件表示＋固定ページ＋ページ順序順＋親ページのIDが○○となります。
つまり、固定ページの中から親ページのIDが〇〇のページを（逆に言えば、親ページ〇〇の子ページを）ページ順序順（ページ属性で指定）に全件表示しろという命令になります。
14～18行目は子ページのアイキャッチ画像を出力するコードになります。
15行目で子ページのアイキャッチ画像のIDを取得して$image_idに保存します。次に、16行目でアイキャッチ画像のurlを取得します。そして、18行目で取得した画像のURLを出力しています。これで子ページのアイキャッチ画像が表示されます。
ちなみに、18行目の[0]を[1]にするとwidth、[2]にするとheightを出力します。
ですので、レスポンシブなサイトでなければ、下記のようなコードを使うと、アイキャッチ画像にもともとの幅と高さを持たせて出力できます。
1 | <img src="<?php echo $image_url[0]; ?>" width="<?php echo $image_url[1]; ?>" height="<?php echo $image_url[2]; ?>" alt=""> |
とはいえ、コードなんか書きたくないよーという方には、Child Pages Shortcodeというプラグインを導入するとショートコードを書くことで、上記のコードとほぼ同じことができますので確認してみてくださいね！！
RSSでブログを購読する!
