SIM投稿アーカイブ（一覧）ページはfunctions.phpに設定を記述しないと表示されません。この記事ではその方法を紹介します。
目次
functions.phpの記述例
投稿アーカイブページを表示させるためのfunctions.php記述例は下記のとおりです。
/*----------------------------------------------------------*/
/* 投稿アーカイブページの表示設定 */
/*----------------------------------------------------------*/
function post_has_archive($args, $post_type)
{
if ('post' == $post_type) {
$args['rewrite'] = true;
$args['has_archive'] = 'news'; //URLとして使いたい文字列
}
return $args;
}
add_filter('register_post_type_args', 'post_has_archive', 10, 2);コード捕捉解説
基本コピペで実装できますが、8行目のslug（URLとして使いたい文字列）は各自で置き換えて下さい。上の記述例では「お知らせ」ページを想定して「news」にしています。
管理画面でパーマリンクを更新
SIM投稿アーカイブページの有効化で忘れがちなのが、パーマリンクの更新です。
functions.phpの設定が終わったら、忘れずに次の操作を行って下さい。
パーマリンクの更新方法
WordPress管理画面＞設定＞パーマリンク＞「変更を保存」をクリック
この操作で、はじめて投稿アーカイブページが有効化されます。
投稿アーカイブページのテンプレートファイル
fuctions.phpの設定だけをしても、投稿アーカイブページのテンプレートファイルを作っておかないと表示されませんので作っておきましょう。
投稿アーカイブのテンプレートファイル名
投稿アーカイブのテンプレートファイルは下記のとおりです。
投稿アーカイブページのテンプレートファイル
archive.php
テンプレートファイルの記述例
これについては本記事の趣旨ではありませんので、ここでは記述例を載せておくだけに留めます。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<!-- ヘッドタグ読み込み -->
<?php get_header(); ?>
</head>
<body <?php body_class(); ?>>
<div class="body-whole_wrapper --front-page">
<!-- ヘッダーパーツ読み込み -->
<?php get_template_part('includes/header-parts'); ?>
<main class="l-main">
<!-- パン屑リスト -->
<div class="breadcrumb-wrapper">
<div class="breadcrumb">
<a href="<?php echo esc_url(home_url('/')); ?>" class="breadcrumb-a">ホーム</a>
<div class="breadcrumb-layer"></div>
<a href="<?php echo esc_url(home_url('/')); ?>/news" class="breadcrumb-a">お知らせ</a>
</div>
</div>
<!-- タイトルセクション -->
<section class="page-title-section">
<!-- H1タグ -->
<h1 class="c-page-h1">お知らせ</h1>
</section>
<section class="base-section">
<div class="base-container">
<!-- お知らせ一覧 -->
<ul class="news-info_wrapper">
<?php
// ページ番号の取得
$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
'post_type' => 'post', //投稿タイプ
'posts_per_page' => 10, //１ページの表示数
'paged' => $paged //何ページ目の情報を取得するかを指定
);
// 以下、ループ構造
$the_query = new WP_Query($args);
if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post(); ?>
<?php
$cat = get_the_category(); // カテゴリの配列を返すテンプレートタグ
$catslug = $cat[0]->slug; // カテゴリslugの変数
$cat_name = $cat[0]->name; // カテゴリ名の変数
?>
<li class="news-row_wrapper">
<div class="news-date_wrapper">
<!-- 投稿日表示 -->
<div class="news-date"><?php the_time('Y年n月j日') ?></div>
<!-- カテゴリ名表示（カテゴリ名slugでクラス付与・リンクなし) -->
<div class="news-classification">
<div class="<?php echo esc_attr($catslug); ?>"><?php echo esc_html($cat_name); ?></div>
</div>
</div>
<div class="news-content">
<!-- お知らせ内容表示 -->
<p><?php the_content(); ?></p>
</div>
</li>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<?php endif;
?>
</ul>
<!-- ページネーション全体 -->
<div class="news-pagination-wrapper">
<?php
$args = array(
'type' => 'list',
'current' => $paged,
'total' => $the_query->max_num_pages,
'prev_text' => '<',
'next_text' => '>',
);
echo paginate_links($args);
?>
</div>
</div>
</section>
</main>
<!-- フッターパーツ読み込み -->
<?php get_template_part('includes/footer-parts'); ?>
</div>
<!-- フッター読み込み -->
<?php get_footer(); ?>CSSは別記事を参照するか、ご自分で作って下さい。
捕捉説明
- 上の投稿アーカイブ記述例は、お知らせ一覧ページのものですので、一覧表になるようにコードを書いています。しかし、基本構造はulタグによるリスト構造であり、記述する内容も「カテゴリー名」「投稿日」「内容」「ページネーション」と、一般的なアーカイブページと概ね同じです。
- 「内容」の部分は「抜粋」や「タイトル」等と、必要に応じて置き換えて下さい。
- タイトルセクションやパン屑リストはコーダーによって書き方が違うと思いますので無視して下さい。
注意：記事数の表示設定で生じるバグの解消方法
SIMアーカイブページのお知らせ表示数は、WordPress管理画面＞設定＞表示設定＞1ページに表示する最大投稿数よりも多い数字にしないと表示がバグります。
例えば、管理画面の表示設定で10記事となっているのに、記事一覧ページ（archive.php）の表示を9記事に設定していると、一番古いページが404ページに飛んでしまうバグが発生しました。
このバグを解消するために、管理画面の表示設定は、記事一覧ページ（archive.php）の表示を9記事よりも少ない、記事数（例えば５記事）に設定し直すとバグは解消されました。
関連記事
お知らせ一覧ページの作り方
あわせて読みたい
【WordPress】お知らせ一覧（投稿アーカイブ）ページの作り方【オリジナルテーマ】
WordPressのお知らせ一覧ページの作り方を紹介します。 WordPressのお知らせ一覧ページは「投稿アーカイブ」のことです。投稿アーカイブは、一般的なホームページの場合...
ページネーションの作り方
あわせて読みたい
【WordPress】投稿アーカイブのページネーションの作り方
投稿アーカイブページのページネーションの作り方を紹介します。 完成イメージ WordPressでは投稿アーカイブページのページネーション用のコードが最初から用意されてい...
