記事の一覧をまとめたページを表示したい時はどうすればいいの?
そのために記事の一覧ページであるアーカイブページ用のテンプレートファイルが用意されているんだよ
またアーカイブページに飛べるリンクがなかったのでリンクを作成しました
目次の順番にやっていけばできるので頑張りましょう
1.archive.phpを作成
新規ファイルで”archive.php”を作成するか、似た様なレイアウトの場合ならすでに作成したファイルをコピーして名前を変えても大丈夫です。
今回はindex.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.アーカイブページでの表示数を変える
しかしこのままだとアーカイブページに表示される記事数が設定画面で設定した件数のままになっています。
ちなみに今は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で整えます。
このあたりは人によって変わってくるので参考程度で。
今回のケースですと…
- 「記事の一覧を見る」ボタンの削除
- 見出しを「記事一覧」に変える
以上で簡単なアーカイブページの作成は完了です!
コメント