目次
広告
WP_Queryを使ったサブループのコード
以下本サイトのトップページで使っているコードを記載します。（※2019年12月1日時点のものです）
|
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 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 |
<?php $news_query = new WP_Query( array( 'post_type' => 'post', // 投稿タイプ 'cat' => '4,5,6,7', // カテゴリーID 'posts_per_page' => 5, // 記事取得数 'order' => 'DESC', // 取得記事の並べ順（※降順） 'orderby' => 'date' // 取得記事のソート方法（※投稿日順） ) ); ?> <?php if ( $news_query->have_posts() ) : ?> <h2><i class="fa fa-pencil" aria-hidden="true"></i>技術系ブログ</h2> <div id="post-wrapper" class="post-wrapper clearfix"> <?php while ( $news_query->have_posts() ) : ?> <?php $news_query->the_post(); ?> <div class="post-column clearfix"> <article id="post-<?php $news_query->post->ID; ?>" <?php post_class('', $news_query->post->ID); ?>> <a class="wp-post-image-link" href="<?php echo get_permalink(); ?>" rel="bookmark"> <?php if(get_the_post_thumbnail_url()) : ?> <img width="320" height="213" src="<?php echo get_the_post_thumbnail_url(); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""> <?php else: ?> <img width="320" height="213" src="<?php echo wp_upload_dir()['baseurl']; ?>/2019/11/deb99813daca97b1d9bf97342374bee4_s.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" > <?php endif; ?> </a> <header class="entry-header"> <div class="entry-meta"> <span class="meta-date"><a href="<?php echo get_permalink(); ?>" rel="bookmark"><?php echo get_the_date('Y年n月j日'); ?></a></span> <span class="meta-category"> <?php $a_categories = get_the_category(); // 記事のカテゴリー情報取得 $i_cat_cnt = 0; if($a_categories){ foreach($a_categories as $a_category){ // 登録されたカテゴリーを「/」区切りで全て表示 if($i_cat_cnt > 0){ echo ' / '; } echo '<a href="'. get_category_link( $a_category->term_id ). '" rel="category tag">'. $a_category->cat_name. '</a>'; $i_cat_cnt++; } } ?> </span> </div> <h2 class="entry-title"><a href="<?php echo get_permalink(); ?>" rel="bookmark"><?php echo get_the_title($news_query->post->ID); ?></a></h2> </header><!-- .entry-header --> <div class="entry-content entry-excerpt clearfix"> <p><?php echo get_the_excerpt($news_query->post->ID); ?> [...]</p> <a href="<?php echo get_permalink(); ?>" class="more-link">続きを読む</a> </div><!-- .entry-content --> </article> </div> <?php endwhile; ?> </div> <?php else: ?> <!-- ここに記事がなかった場合の処理を書く --> <?php endif; ?> |
上記コードは本サイトのテーマに合わせてカスタマイズしているので、必要な箇所だけ抜き取って使うとそれっぽい表示になると思います。
コードにコメントが少ないので以下に細かい箇所の補足を記載します。
記事をリクエストするWP_Query
|
1 2 3 4 5 6 7 8 9 10 11 |
<?php $news_query = new WP_Query( array( 'post_type' => 'post', // 投稿タイプ 'cat' => '4,5,6,7', // カテゴリーID 'posts_per_page' => 5, // 記事取得数 'order' => 'DESC', // 取得記事の並べ順（※降順） 'orderby' => 'date' // 取得記事のソート方法（※投稿日順） ) ); ?> |
上記コードで取得する記事の条件を指定しています。
条件には色々な種類がありますので、詳細は下記をご覧ください。
参考： 関数リファレンス/WP Query – WordPress Codex 日本語版
記事の有り無しを判定するhave_posts関数
|
1 2 3 4 5 |
<?php if ( $news_query->have_posts() ) : ?> <h2><i class="fa fa-pencil" aria-hidden="true"></i>技術系ブログ</h2> <div id="post-wrapper" class="post-wrapper clearfix"> <?php while ( $news_query->have_posts() ) : ?> <?php $news_query->the_post(); ?> |
一行目のifの条件分岐と四行目のwhileのループ条件にhave_postsを使っています。
一行目のhave_posts
一行目のhave_postsはWP_Queryの結果として「記事はあるの？」ということを判定している箇所になります。
もし記事がなければ、今回のコードでは処理を記載していないのですが末尾の下記箇所の処理を行います。
|
1 2 3 |
<?php else: ?> <!-- ここに記事がなかった場合の処理を書く --> <?php endif; ?> |
四行目のhave_posts
四行目のhave_postsもWP_Queryの結果として「記事はあるの？」ということを判定している箇所になります。
違いはifで使うかwhileで使うかの違いしかないのですが、have_postsは特殊な関数で、ループの中で呼び出すと永久ループして処理がうまくいかないみたいなので注意が必要です。
参考： 関数リファレンス/have posts – WordPress Codex 日本語版
get_permalink関数で記事のリンクを取得
|
1 |
<a class="wp-post-image-link" href="<?php echo get_permalink(); ?>" rel="bookmark"> |
get_permalinkで記事のURLを取得します。
aタグのhref属性にget_permalinkの結果を出力することで、記事へのリンクを設定します。
参考：テンプレートタグ/get permalink – WordPress Codex 日本語版
get_the_post_thumbnail_url関数でサムネイルの有り無しを取得してサムネイルのURLも取得する
|
1 |
<?php if(get_the_post_thumbnail_url()) : ?><br><img width="320" height="213" src="<?php echo get_the_post_thumbnail_url(); ?>" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt=""><br><?php else: ?><br><img width="320" height="213" src="<?php echo wp_upload_dir()['baseurl']; ?>/2019/11/deb99813daca97b1d9bf97342374bee4_s.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" ><br><?php endif; ?> |
一行目のifの条件分岐で「記事にサムネイル画像は設定されているの？」ということを判定しています。
サムネイルが設定されていれば二行目を処理して、設定されていなければ四行目を処理します。
get_the_post_thumbnail_url関数は記事のサムネイルのURLを出力するので、imgタグのsrc属性に関数の結果を出力することで、サムネイル画像を指定しています。
もしサムネイル画像がなければ、あらかじめメディアファイルに用意していたno image用の画像を表示します。
メディアファイルへの画像のURLはwp_upload_dir関数を使って「wp_upload_dir()[‘baseurl’]」と指定すると、WordPressのuploadsフォルダまでのパスを出力してくれるのでかなり便利です。
参考：テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版
get_the_date関数で記事の投稿日を取得
|
1 |
<span class="meta-date"><a href="<?php echo get_permalink(); ?>" rel="bookmark"><?php echo get_the_date('Y年n月j日'); ?></a></span> |
get_the_date関数で記事の投稿日を取得します。
パラメータのYは年、nは月、jは日を出力します。
パラメータの指定によって出力する内容は変わりますので、詳細は下記記事をご覧ください。
参考１：日付と時刻の書式 | WordPress.org 日本語
参考２：テンプレートタグ/get the date – WordPress Codex 日本語版
get_the_category関数で記事に設定したカテゴリーの一覧を取得
|
1 |
<?php<br> $a_categories = get_the_category(); // 記事のカテゴリー情報取得<br> $i_cat_cnt = 0;<br> if($a_categories){<br> foreach($a_categories as $a_category){<br> // 登録されたカテゴリーを「/」区切りで全て表示<br> if($i_cat_cnt > 0){<br> echo ' / ';<br> }<br> echo '<a href="'. get_category_link( $a_category->term_id ). '" rel="category tag">'. $a_category->cat_name. '</a>';<br> $i_cat_cnt++;<br> }<br> }<br>?> |
get_the_category関数で記事に設定したカテゴリーの一覧を取得します。
※カテゴリーは複数設定できるので、ここで取得するのはカテゴリーの「一覧」になります。
四行目で記事にカテゴリーが設定されているかどうかを確認して、五行目のforeachでカテゴリーの一つを取り出して、十行目のechoでaタグを出力しています。
aタグに指定するhref属性には、get_category_link関数で出力したカテゴリーアーカイブへのリンクを設定します。
get_category_link関数はカテゴリーのタームIDを指定するとアーカイブページのURLを出力するので、取り出したカテゴリー（$a_category）のterm_idをパラメータに渡してURLを取得しています。
get_the_title関数で記事のタイトルを取得
|
1 |
<h2 class="entry-title"><a href="<?php echo get_permalink(); ?>" rel="bookmark"><?php echo get_the_title($news_query->post->ID); ?></a></h2> |
get_the_title関数は記事のIDを指定することでタイトルが取得できるので、WP_Queryで取得した記事情報のIDを指定して記事のタイトルを取得しています。
参考：関数リファレンス/get the title – WordPress Codex 日本語版
get_the_excerpt関数で記事の抜粋を取得
|
1 |
<p><?php echo get_the_excerpt($news_query->post->ID); ?> [...]</p> |
get_the_excerpt関数は記事のIDを指定することで記事の抜粋が取得できるので、WP_Queryで取得した記事情報のIDを指定して記事のタイトルを取得しています。
本来は記事の続きがある場合に[…]が表示されるとのことなのですが、私が使っているテーマでは表示されなかったので末尾に[…]の文字を直接入れています。