投稿記事一覧を表示するページの設定（2021-03-10）

投稿記事一覧のページを作成した。現在のHPはCocoonテーマを使っているが、ブログ記事一覧の設定は投稿ページに限られており、固定ページに全投稿ページの一覧を掲載するようなテンプレートは用意されていない。またプラグインの「ショートコード」には投稿一覧のライブラリがあるがページネーションがない。そこで、ネット記事を参考に、ページネーション付の投稿記事一覧のページを作成した。

WordPressで投稿記事一覧等を表示する場合はWP_Queryクラスを使う。WP_Queryクラスには、表示する投稿があるかどうかを判断するhave_postsメソッドや、ループ内で次の投稿に進むthe_postメソッドなどが用意されている。その基本形は以下の通り。

１，配列$argsに記事を取得するための条件を指定。
２，$args情報を入れ、WP_Queryクラスを呼び出してクエリ情報を入手し、投稿数分ループさせる。
３，メインループに影響を与えないよう、最後にサブループで取得中の投稿情報をリセットする

<?php
//$argsのプロパティを変えていく
$args = array(
'post_type' => 'post', 
'posts_per_page' => -1,
'no_found_rows' => true, //ページャーを使う時はfalseに。
)
$the_query = new WP_Query($args);
if ($the_query->have_posts()) :
while ($the_query->have_posts()) : $the_query->the_post();
 /* ループ内の記述 */
 endwhile;
endif;
wp_reset_postdata();
?>

詳細はWordPress Codex 日本語版を参照。

ページ送りを表示するには、最後のwp_reset_postdata()より前に、以下のページネーションを生成するコードを入れる。

wp_reset_postdata();

 /* ページャーの表示 */
if ( function_exists( 'pagination' ) ) : pagination( $the_query->max_num_pages, $paged );
 //$wp_query ではなく $the_query ないことに注意！ 
endif;

wp_reset_postdata();

ここで、ページネーションを生成する関数「function pagination」は、下記のサイトのコードを拝借し、テーマフォルダーのfunction.phpに追記した。

WordPressでページャー（ページネーション）をプラグインなしで実装

また、サムネイル画像の挿入、カテゴリや引用文の表示などの一連の表示機能とCSSは、まるまる下記のサイトのコードを借用した。

WordPressサブループ自動作成ツール

これらのコードに、記事のアイキャチとタイトル・抜粋文が横に並ぶようなタグを入れて完成したプログラムは以下の通り。

<?php
//loop-post-content.php
global $max_num_page;
$paged = get_query_var('paged') ?: 1;
$args = array(
'post_type' => 'post',
'posts_per_page' => 20,
'orderby' => 'date',
'order' => 'DESC',
'paged' => $paged,
);
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) :
	while ( $the_query->have_posts() ) : $the_query->the_post();
?>
<!--ここにループの中の記述 --> 
<article class="article-list">
 <!--記事へのリンクを出力-->
<a href="<?php the_permalink(); ?>">
<!--サムネイル(アイキャッチ)画像を左コラムに出力-->
<div class="column-wrap column-2 column-2-4-1-3">
<div class="column-left">
 <?php
if( has_post_thumbnail()){
the_post_thumbnail('medium');
 }
else{ // サムネイル画像ない場合はNo Image画像
?>
<img src="https://home-atmo.com/wp-content/themes/cocoon-master/images/no-image-320.png" alt="" />
<?php } ?>
</div>
<!--タイトル、抜粋文を右コラムに出力-->
<div class="column-right">
 <p class="text">
<!--投稿のタイトルを出力-->
<h6><?php the_title(); ?></h6>
 <!--投稿日を表示-->
<time class="article-date" datetime="<?php echo get_the_date( 'Y-m-d' ); ?>">
<?php echo get_the_date(); ?>
</time>
 <!--投稿のカテゴリを一つだけ出力-->
<?php if( has_category() ){ ?>
<span class="cat-data">
<?php $postcat=get_the_category(); echo $postcat[0]->name; ?>
</span>
<?php } ?>
 <!--抜粋文の内容を出力-->
<?php the_excerpt(); ?>
</p>
</div>
</div>
<!-- end text -->
 </a>
</article>
<!-- end article-list -->
<?php 
endwhile;
endif;
/* ページャーの表示 */
if ( function_exists( 'pagination' ) ) :
pagination( $the_query->max_num_pages, $paged ); 
//$wp_query ではなく $the_query ないことに注意！
endif;
wp_reset_postdata();
?>

この「loop-post-content.php」をテーマフォルダーに入れ、固定ページ中でショートコードで読み込むと以下のように記事一覧が表示される。

backgroundでサムネイル画像サイズを最適化する　2021-03-12:追記

投稿記事一覧のサムネイル画像のサイズが一定でないので下記のようなバックグラウンド処理をして一律にした。

参考記事：
WordPressで画像のサイズをCSSで最適化してレスポンシブデザインに対応する
 WordPressの記事一覧のアイキャッチ画像が揃わないとお悩みの方に朗報！！

backgroundを使って画像を挿入する場合は、『img』タグではなく『div』+『style=””』を使って画像を出力します。例えば、テーマフォルダ内の『images』というフォルダに入っている画像を出力する場合は、下記のように記述します。

<div class="bk-img" style="background-image: url(<?php echo get_template_directory_uri(); ?>/images/sample.jpg);"></div>


.bk-img {
  width: 100%;
  height: 120px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

上記のソースコードのように指定することで、指定したサイズに合わせて画像を切り抜いて表示してくれます。
注意する点としては、backgroundで画像を出力する場合は、必ず高さと幅を指定しておかなくてはいけない点です。高さと幅を指定しないと画像が表示されないので注意しましょう！上記では、高さをpxで絶対指定し幅は、親要素に合うように100%で指定していますが、親要素に合わせない場合は、widthの幅ををpxで絶対指定してください。

サムネイル画像をbackgroundで出力するコード


<?php
if( has_post_thumbnail() ) {
$postthumb =wp_get_attachment_image_src( get_post_thumbnail_id(), $size ); 
$url = $postthumb[0];
}
?>
<div class="bk-img" style="background-image: url(<?php echo $url; ?>);"></div>
 
※『$size』の部分には、『thumbnail, medium, large, full』のどれかを値として挿入。

以上の変更をオリジナルファイル「loop-post-content.php」に適用し、ファイル名を「loop-post-content1.php」に改定した。変更部は下記の通り

<!--サムネイル(アイキャッチ)画像を出力-->
<div class="column-wrap column-2 column-2-4-1-3">
<div class="column-left">
<?php
if( has_post_thumbnail() ) {
$size='large';
$postthumb =wp_get_attachment_image_src( get_post_thumbnail_id(), $size );
$url = $postthumb[0];
}
else { // サムネイルがない場合
$url ="https://home-atmo.com/wp-content/themes/cocoon-master/images/no-image-320.png";
}
?>
<div class="bk-img" style="background-image: url(<?php echo $url; ?>);"></div>
</div>