【初心者向け】アーカイブページ(記事一覧ページ)を作成する【WordPress化】

アーカイブページ-アイキャッチ
きなこ
きなこ

記事の一覧をまとめたページを表示したい時はどうすればいいの?

こばゆた
こばゆた

そのために記事の一覧ページであるアーカイブページ用のテンプレートファイルが用意されているんだよ

記事一覧ボタン作成後
こばゆた
こばゆた

またアーカイブページに飛べるリンクがなかったのでリンクを作成しました

目次の順番にやっていけばできるので頑張りましょう

スポンサーリンク

1.archive.phpを作成

新規ファイルで”archive.php”を作成するか、似た様なレイアウトの場合ならすでに作成したファイルをコピーして名前を変えても大丈夫です。

今回はindex.phpをコピーして作成しました。

archive.phpの作成

アーカイブページのデザインを変えた場合は中に以下のループを入れるのを忘れないように注意してください。

<?php if(have_posts()): while(have_posts()) : the_post(); ?>

    <!--この中に処理を入れる-->

<?php endwhile; ?>
<?php else : ?>
  <p>記事がありません</p>
<?php endif; ?>
スポンサーリンク

2.functions.phpにコードを加える

次にfunctions.phpに以下のコードを入れます。

function post_has_archive($args, $post_type){
  if('post'== $post_type){
    $args['rewrite']=true;
    $args ["label"] = 'ラベル名'; /*「投稿」のラベル名 */
    $args['has_archive']='name'; /* アーカイブにつけるスラッグ名 */
  }
  return $args;
}

add_filter('register_post_type_args', 'post_has_archive', 10, 2);

今回は投稿なのでスラッグ名を”post”という名前にしました。

function post_has_archive($args, $post_type){
  if('post'== $post_type){
    $args['rewrite']=true;
    $args['has_archive']='post';
  }
  return $args;
}

add_filter('register_post_type_args', 'post_has_archive', 10, 2);

コードを入れたら「ダッシュボード」「パーマリンク設定」「変更の保存」をクリックします。

3.アーカイブページとリンクを紐付けする

今回はindex.phpのボタンリンクとアーカイブページを紐付けをします。

リンクのurlにテンプレートタグを埋め込み、/の後ろを先程指定したスラッグ名にすればOKです。

<?php echo home_url(); ?>/スラッグ名

今回の場合だと以下のような形になります。

<div class="btn">
	<a href="<?php echo home_url(); ?>/post">記事の一覧をみる</a>
</div>

これでリンクが繋がりました。

4.アーカイブページでの表示数を変える

しかしこのままだとアーカイブページに表示される記事数が設定画面で設定した件数のままになっています。

indexページでの記事表示数

ちなみに今は4件表示になっています。

アーカイブページでの記事表示数変更前

これを任意の件数にするためにはfunctions.phpにコードを加えます。

/* 特定のページの1ページあたりの表示数を変更する */
function change_posts_per_page($query) {
  if ( is_admin() || ! $query->is_main_query() ) /* メインクエリでの表示数 */
      return;
  if ( $query->is_archive() ) { //アーカイブページの場合
      $query->set( 'posts_per_page', '-1' ); /* 表示件数を指定する。-1で全件表示できる */
  }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

ただしこれはメインクエリの場合なのでサブクエリ(また後日)の時はまた変わってきます。

今回はアーカイブページの場合の表示数を全件表示にしています。

計7件記事を作成しましたが全部表示できました。

また表示数と記事数を減らして2ページ目、3ページ目とページを複数に分けることもできますがそのときはページャーの様なものが必要になってきます。

ページャーについては以下の記事を↓

5.CSSで整える

index.phpをそのままコピーしてきただけなのでアーカイブページにしてはよろしくないところがあるのでCSSで整えます。

このあたりは人によって変わってくるので参考程度で。

今回のケースですと…

  • 「記事の一覧を見る」ボタンの削除
  • 見出しを「記事一覧」に変える
こばゆた
こばゆた

以上で簡単なアーカイブページの作成は完了です!

6.まとめ

アーカイブページまとめ

1.archive.phpを作る

2.functions.phpにコードを記入

function post_has_archive($args, $post_type){
  if('post'== $post_type){
    $args['rewrite']=true;
    $args['has_archive']='name'; /* アーカイブにつけるスラッグ名 */
  }
  return $args;
}

add_filter('register_post_type_args', 'post_has_archive', 10, 2);

「ダッシュボード」→「パーマリンク設定」→「変更の保存」を忘れない

3.リンクを作る

URLのところに先ほどつけたスラッグ名を入れる

<?php echo home_url(); ?>/スラッグ名

4.functions.phpにコードを記入

/* 特定のページの1ページあたりの表示数を変更する */
function change_posts_per_page($query) {
  if ( is_admin() || ! $query->is_main_query() ) /* メインクエリでの表示数 */
      return;
  if ( $query->is_archive() ) { /* アーカイブページの場合 */
      $query->set( 'posts_per_page', '-1' ); /* 表示件数を指定する。-1で全件表示できる */
  }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

5.CSSで整える

コメント