固定ページで投稿の一覧表示の実装【初心者のためのWORDPRESS -07-】

Public Relation TEAM

今回は固定ページでの投稿一覧を作成してみようと思います。

投稿の一覧のページはブログ専用サイトではなく企業サイトの新着情報などでWPを使用する場合には多く活用されると思います。

今回ご紹介する方法は固定ページでの表示なので、ある程度の一覧情報ならテンプレート化して使っていけると思います。

固定ページ用一覧表示PHP

まずは下記のコードを確認してください。このPHPが固定ページで一覧を表示するためのコードです。

<?php
$paged = (int) get_query_var('paged');
$args = array(
    'posts_per_page' => 4,
    'paged' => $paged,
    'orderby' => 'post_date',
    'order' => 'DESC',
    'post_type' => 'post',
    'post_status' => 'publish'
);
$the_query = new WP_Query($args);
if ( $the_query->have_posts() ) :
    while ( $the_query->have_posts() ) : $the_query->the_post();
        get_template_part( 'bloglist', get_post_format() );
    endwhile;
endif;
wp_reset_postdata();
?>

簡単にコードの説明をすると4行目のposts_per_pageは表示する記事の件数です。

私は4件と設定してありますが、5件目以上の記事はページングを設定してページ送りにて表示させる予定です。ページングについては次回の記事で詳しくご紹介したいと思います。
基本的にはコピペで実装できますが、1つ注意点があります。それは14行目にあるget_template_partと言う関数です。
上記の私の場合はbloglistという引き数がそれにあたります。
このbloglistでリピートさせる記事の中身を呼び出しています。
お察しの通り、このリピートさせる中身を作成していないと、上記のPHPコードを入れても何も表示されません。
bloglistと言う名前は任意で変更してください。

記事を表示させる一覧ページ用のテンプレート作成

では上記で説明したbloglistの中身を作成します。
私は上記PHPコードを ul タグで括り、中のリストをリピートさせて記事一覧を制作しました。
まずはget_template_partで呼び出している同じ名前のPHPファイルを新しく作成しましょう。今回はbloglist.phpとなります。
このPHPファイルの中身は至ってシンプルでリピートさせたいリストの中身をhtmlコードで記述するだけです。 PHPコードは一切必要ありません。
固定ページと同じディレクトリにbloglist.phpを保存すれば完成です。

bloglist.phpサンプルコード

<li>
<?php the_post_thumbnail(); ?>
<p class="date"><?php the_time('Y.n.j'); ?></p>
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<p><a href="<?php the_permalink(); ?>">Read More</a></p>
</li>

完成した固定ページのご紹介（サンプル）

最後に完成した固定ページのサンプルコードを載せておきます。（ページング付き）

下部に挿入されているページング用のPHPコードはまた次の機会に記事にしたいと思います。

<?php get_header(); ?>
<section>
	<ul class="blog">
		<?php
		$paged = (int) get_query_var('paged');
		$args = array(
			'posts_per_page' => 4,
			'paged' => $paged,
			'orderby' => 'post_date',
			'order' => 'DESC',
			'post_type' => 'post',
			'post_status' => 'publish'
		);
		$the_query = new WP_Query($args);
		if ( $the_query->have_posts() ) :
			while ( $the_query->have_posts() ) : $the_query->the_post();
				get_template_part( 'bloglist', get_post_format() );
			endwhile;
		endif;
		wp_reset_postdata();
		?>
	</ul>

	<div class="paging">
		<?php
		if ($the_query->max_num_pages > 1) {
			echo paginate_links(array(
				'base' => get_pagenum_link(1) . '%_%',
				'format' => '/page/%#%/',
				'current' => max(1, $paged),
				'total' => $the_query->max_num_pages
			));
		}
		wp_reset_postdata();
		?>
	</div>

</section>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

固定ページで一覧を作成して見たい方は是非ご参考ください。
上記でちょっとチラ言いましたが、次回は固定でのページング設定について書いてみようと思います！（予定！）

それではまた次回っﾉｼ