wordpressで全記事一覧を一覧表示させたい方におすすめ

wordpressで全記事一覧を一覧表示させたい方におすすめ

みなさんはwordpressを使って制作をしていますか。

wordpressは現在どのくらい使用されているのでしょうか。
なんとWeb 上の35%のサイトが WordPress を使っています。
趣味のブログから大規模なニュースサイトまで様々です。
https://ja.wordpress.org/

そしてwordpressで普段多く使用する機能といえば、
投稿でしょうか。

実際にwordpressでは簡単に投稿を作る事が出来ます。
そしてなんと投稿は1つでは無く、いくつも作成が出来ます。
同じホームページ上でブログとは違う形で「お知らせ」をアップしたい、
「お客さまの声」も集めて更新したいなどという風な感じで使用できます。

今回はそんな複数投稿を作成して、
まとめて1つのアーカイブ(記事一覧)を取得したいなんて、
考えているかたのための記事になります。
ぜひ参考にしてみてください。

投稿(カスタム投稿)を作成する

通常の投稿はすでにwordpressをインストールした時点で、
入っています。

デフォルトで入っている投稿とは別の投稿を作成したい
時はカスタム投稿として、作成します。

カスタム投稿の作成については下記を参考にして制作してみてください。

カスタム投稿タイプの作り方|プラグインから直接入力まで徹底解説!


(関数に記載する方法(function.php),プラグインを使用する方法など
あります)

複数のアーカイブページを作成する

カスタム投稿ができましたら、
アーカイブページを作成します。

今回は単一の投稿のアーカイブページの作成ではないため、
固定ページを使用して作成をします。
まずテンプレートファイルを作成します。
名前は任意で大丈夫ですが、わかりやすい名前を使用してください。
例:all_archive.php

テンプレートファイルに記載するコードは下記です。

 

<?php
/*
Template Name: 全記事一覧テスト
*/
?>

<?php get_header(); ?>

<?php
$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1 ;
$args = array(
‘post_type’ => array(‘A’,’B’,’C’),
‘posts_per_page’ => 18, //表示(取得)する記事の数
‘paged’ => $paged
);
$my_query = new WP_Query($args);

if( $my_query -> have_posts() ) :
while($my_query -> have_posts()) : $my_query -> the_post();
?>

<!– ここに投稿記事内容記述 — >

<?php endwhile; ?>
<?php endif; ?>

<!– ページャー — >

<?php
if ($my_query->max_num_pages > 1) {
echo paginate_links(array(
‘base’ => get_pagenum_link(1) . ‘%_%’,
‘format’ => ‘/page/%#%/’,
‘current’ => max(1, $paged),
‘total’ => $my_query->max_num_pages
));
}
?><?php wp_reset_postdata(); ?>

<!– ページャー — >

<?php get_footer(); ?>

 

ヘッダーとフッターは通常通り読み込ませませます。
上記でのポイントは下記になります。

ポイント01:「paged」の指定でページャーを有効にする

$paged = get_query_var(‘paged’) ? get_query_var(‘paged’) : 1 ;

ここで重要になるのが「paged」の指定です。
まず、WP_Queryの引数配列内において、pagedを指定しないと
ページャーが有効化となりません。
さらに今回は固定ページ内で実装するので、
pagedの値として「get_query_var(‘paged’)」をいれてあげる必要があります。

ポイント02:post_typeを指定して複数記事を読み込む

‘post_type’ => array(‘A’,’B’,’C’),

こちらのABCにあたるものがカスタム投稿のpost_typeになります。
「投稿(カスタム投稿)を作成する」の章で作成した際に
作ってあげたpost_typeをいれます。

ポイント03:WP_Query()を使って一覧読み込む

$my_query = new WP_Query($args);

固定ページ内に新着記事一覧を表示させるため、
WP_Query()を使ってサブループを使い、
記事一覧を取得します。

メインループとサブループの詳しい使い方は下記
になります。
https://hirashimatakumi.com/blog/18.html

またWP_Query()を使った覚えておきたいプロパティ
は下記です。
https://haniwaman.com/loop/#WP_Query
ぜひ参考にしてみてください。

ポイント04:ループの終わりにクエリをリセットする

<?php wp_reset_postdata(); ?>

サブループはメインループと違い、ループの終わりに
クエリをリセットする必要があります。
そのため endwhile(ループの終わり)の後に、
wp_reset_postdata(ページ送り関数)
を追加してループをリセットして直前のクエリーを復元します。

複数記事一覧の固定ページを作成する

ではテンプレートが出来上がりましたので、
themeフォルダーにテンプレートをアップした後、
固定ページを作成して表示させてみましょう。

ページ属性→テンプレートから
上記で作成したテンプレートを選択して公開ボタンを押します。

<?php
/*
Template Name: 全記事一覧テスト
*/
?>
(※テンプレート上部で指定した「全記事一覧テスト」が選択に追加されて
いるので選択します。)

公開後ページが表示されていれば成功です。

固定ページの作成は下記にも詳しく載っているので参考に
してみてください。
https://techacademy.jp/magazine/1895

 

まとめ

wordpressは単一の投稿のみではなく、
今回の様に複数記事をまとめて取得ができ、
全アーカイブも作れたりできます。

カスタムフィールドと連携させて、さらに記事を細かく
取得できるなどまだまだ沢山機能はありますので、
ぜひ調べてみてください。

参考:

https://designsupply-web.com/knowledgeside/2931/