ブログ

BLOGブログ

WordPress

WordPressで記事一覧を表示する(WP_Query編)

よくあるネタで申し訳ないですが、
WordPressで記事一覧を表示する方法です。

一言で、記事一覧と言っても、
月別やカテゴリー別など、何かの分類で表示したい場合は、アーカイブを使いましょう。
今回は、記事一覧の中でも投稿の一覧を表示する為のコードに成ります。

投稿の一覧を表示する為には、WP_Query()という関数か、
get_posts()というテンプレートタグを使います。
乱暴な言い方をすると、ページネーションが必要な場合は、WP_Query()を使います。

トップページに最新の5件を表示する
などであれば、get_posts()でも良いですし、今回、ご紹介するWP_Query()でも良いですね。

ここでご紹介するコードを使う場所(ファイル)ですが、
固定ページで使用しても良いですし、トップページでも使用しても大丈夫です。
どのPHPファイルに書くかは、テンプレート階層に準じてください。

早速ですが、いつものように、プログラムの全文から・・・

<?php
// 取得する記事の条件を設定
$args = array(
    'post_type' => 'post', // カスタム投稿の場合は、カスタム投稿のpost_typeを指定
    'paged' => $paged,
    'posts_per_page' => 3
);

// 条件($args)を元に記事の一覧を取得
$query = new WP_Query( $args );
?>

<?php
// 記事が取得できている場合
if ( $query->have_posts() ) :
?>

<div class="table-responsive">
	<table class="emp_table text-nowrap">

<?php
	// 記事を1件ずつ表示する為のループの開始
	while ( $query->have_posts() ) : $query->the_post();

/* ここに記事をどう表示するかを記述する */

<?php
	// 記事を1件ずつ表示する為のループの終了
	endwhile;
?>

	</table>
</div>

<?php
// 記事が取得できている場合の条件最後
endif;

// WP_Queryをリセットする
wp_reset_postdata();
?>

それぞれの説明です。

// 取得する記事の条件を設定
$args = array(
    'post_type' => 'post', // カスタム投稿の場合は、カスタム投稿のpost_typeを指定
    'paged' => $paged,
    'posts_per_page' => 3
);

3行目から7行目は、どんな条件の記事一覧が必要か指定しています。
ここで指定できる条件(パラメータ)についても公式ドキュメントのWP_Query()の説明を参照すると良いと思います。

// 条件($args)を元に記事の一覧を取得
$query = new WP_Query( $args );

10行目で記事の一覧を取得します。

// 記事が取得できている場合
if ( $query->have_posts() ) :

15行目は記事の一覧が取得できているか確認し、取得出来ている場合はこのまま下の処理を進めます。
取得出来ていない場合は、37行目までスキップします。

	// 記事を1件ずつ表示する為のループの開始
	while ( $query->have_posts() ) : $query->the_post();

23行目で取得した記事一覧を1件づつ表示する為のループを開始します。

25行目付近に記事をどう表示したいかを書きます。
ここは、それぞれで色々な表示があると思いますので、今回の説明からは省きますが、
タイトルを表示したければ、
the_title();
などに成りますね。

	// 記事を1件ずつ表示する為のループの終了
	endwhile;

29行目は23行目で始まる記事一覧のループの範囲を示す為のループの最後です。

// 記事が取得できている場合の条件最後
endif;

37行目は、15行目で確認した記事の一覧が取得できているか確認している条件式の終わりを明示しています。

// WP_Queryをリセットする
wp_reset_postdata();

最後に40行目で、WP_Query()という関数を使ったので、リセットしておきます。

以上で、投稿の一覧を表示できるように成ります。

なお、固定ページで記事一覧を作成し、トップページ等からリンクを設定する場合は、
固定ページに設定したslugを元に以下のようなコードでリンクを設定します。

<a href="<?php echo esc_url( get_permalink( get_page_by_path('固定ページのslug名')->ID ) );?>">リンク先の名称</a>
topTOP