［成果物］WordPressで日付別アーカイブを実装！時系列での投稿管理テクニック

この記事では、以下の投稿で作成した成果物をまとめて確認することができます。

ご自身の環境と見比べて反映漏れがないかなど、ご確認用にご活用ください。

元の記事

WordPressで日付別アーカイブを実装！時系列での投稿管理テクニック

WordPressで日付別アーカイブ機能を実装する方法を詳しく解説します。月別・年別・日別での投稿一覧表示、パーマリンク設定の変更、時系列による投稿の絞り込み方法など、お知らせサイトなどで重要な日付管理機能の構築テクニックを実践的に学べる内容です。

は今回新規追加したものです。

は今回変更したものです。

固定ページ一覧

タイトル	スラッグ	順序	テンプレート	備考
ようこそ	`sample-page`	100		トップページ
会社概要	`about`	200	`会社概要専用テンプレート`
沿革	`history`	100
アクセス	`access`	200
サービス	`service`	300
お客様の声	`voice`	350
お知らせ	`news`	380
お問い合わせ	`contact`	400

投稿一覧

投稿日	タイトル	カテゴリ	タグ	備考
2025年07月15日	新店舗オープンのお知らせ	新店舗	新店舗
2025年07月14日	夏季休暇のお知らせ	休業	長期休暇
2025年06月13日	WordPress講習会開催のお知らせ	イベント	WordPress, 講習会
2025年05月12日	夏SNS総フォロワー100人を達成しました	WEB/SNS	SNS
2025年05月12日	Webサイト開設のお知らせ	WEB/SNS	よろしく, ホームページ
2024年07月11日	Hello World!!	未分類	よろしく	WPが自動生成

テーマファイル一覧

現時点のテーマファイルはありません

	ファイル名	用途	備考
	`category.php`	カテゴリーベース用テンプレート
	`date.php`	日別用テンプレート
	`footer.php`	フッター共通部
	`front-page.php`	トップページ専用テンプレート
	`functions.php`	共通関数
	`header.php`	ヘッダー共通部
	`index.php`
	`kaisha.php`	会社概要用テンプレート
	`main.css`	共通スタイルシート
	`page-contact.php`	お問い合わせ用テンプレート
	`page-news.php`	お知らせ用テンプレート
	`page.php`	固定ページ用テンプレート
	`single.php`	投稿用テンプレート
	`style.css`	テーマヘッダー
	`sub.css`	個別スタイルシート
	`tag.php`	タグベース用テンプレート

コード

現時点のコードは以下の通りです。

category.php

<?php get_header();?>

    <?php
            
        $target = get_queried_object();

        // そのカテゴリーに属する投稿を取得
        $args = [
            'post_type' => 'post',
            'post_status' => 'publish',
            'orderby' => 'title',
            'order' => 'asc',
            'category__in' => [$target->term_id],
        ];
        
        $query = new WP_Query($args);
        
        echo '<ul class="post-list">' . PHP_EOL;

        while ($query->have_posts()) {
            $query->the_post();
            
            echo '<li>'.
                '<span class="date">'.get_the_date('Y年m月d日').'</span>'.
                '<span class="category">'.$target->name.'</span>'.
                '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
                '</li>'.PHP_EOL;
        }
        
        wp_reset_postdata(); // 投稿データをリセット
        
        
        echo '</ul>' . PHP_EOL;
    ?>		

    <p>※このページは category.php テンプレートで表示されています</p>
<?php get_footer();?>

date.php

<?php get_header();?>

<?php
// 共通部の条件指定
$args = [
    'post_type'      => 'post',
    'post_status'    => 'publish',
    'orderby'        => 'title',
    'order'          => 'asc',
];

//年月日に応じて抽出条件を指定
if ( is_year() ) {

    // 年の場合
    $args['date_query']  = [
        [
            'year'  => (int)get_query_var('year'),
        ]
    ];

} elseif ( is_month() ) {

    // 年月の場合
    $args['date_query']  = [
        [
            'year'  => (int)get_query_var('year'),
            'month' => (int)get_query_var('monthnum'),
        ]
    ];
} elseif ( is_day() ) {

    // 年月日の場合
    $args['date_query']  = [
        [
            'year'  => (int)get_query_var('year'),
            'month' => (int)get_query_var('monthnum'),
            'day' => (int)get_query_var('day'),
        ]
    ];
}

$query = new WP_Query($args);

echo '<ul class="post-list">' . PHP_EOL;

while ($query->have_posts()) {
    $query->the_post();

	$categories = get_the_category();
	$category_name = !empty($categories) ? $categories[0]->name : '';

    echo '<li>'.
        '<span class="date">'.get_the_date('Y年m月d日').'</span>'.
        '<span class="category">'.$category_name.'</span>'.
        '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
        '</li>'.PHP_EOL;
}

wp_reset_postdata(); // 投稿データをリセット

echo '</ul>' . PHP_EOL;
?>

<p>※このページは date.php テンプレートで表示されています</p>

<?php get_footer();?>

footer.php

    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
    <?php wp_footer();?>
</body>
</html>

front-page.php

<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは front-page.php テンプレートで表示されています</p>
<?php get_footer();?>

functions.php

<?php
// 外観→メニューの有効化
add_theme_support( 'menus' );
// titleタグの有効化
add_theme_support( 'title-tag' );

// スタイルシートの読み込み
add_action('wp_enqueue_scripts', 'load_theme_style');
function load_theme_style() {
    wp_enqueue_style(
        'theme-main-style',
        get_stylesheet_directory_uri() . '/main.css',
        array(),
        filemtime(get_stylesheet_directory() . '/main.css'),
    );
    wp_enqueue_style(
        'theme-sub-style',
        get_stylesheet_directory_uri() . '/sub.css',
        array('theme-main-style'),
        filemtime(get_stylesheet_directory() . '/sub.css'),
    );
}

// 階層対応タイトル
function custom_document_title($title) {
    $custom_title = '';

	if (is_front_page()) {
		// サイトタイトルを取得
        $custom_title = get_bloginfo('name');
	} else {
		// 現在表示中のページタイトルを取得
        $custom_title = get_the_title();

    	// 現在ページの親ページIDを取得
    	$parent_id = wp_get_post_parent_id(get_the_ID());
    	// 親ページが存在する場合（IDが0以外）、親ページのタイトルを追加
    	if ($parent_id) {
    		// 親ページのタイトルを取得
        	$custom_title = $custom_title . '｜';
        	$custom_title = $custom_title . get_the_title($parent_id);
    	}

		// サイトタイトルを取得
        $custom_title = $custom_title . '｜';
		$custom_title = $custom_title . get_bloginfo('name');
	}

    return $custom_title;
}
add_filter('pre_get_document_title', 'custom_document_title');

?>

header.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head();?>
</head>
<body>
    <header class="global-header">
        <?php $tag = is_front_page() ? 'h1' : 'div'; ?>
        <<?php echo $tag; ?> class="logo"><?php bloginfo('name'); ?></<?php echo $tag; ?>>
        <?php wp_nav_menu('header-menu'); ?>
    </header>
    <main>
    <?php
        if (is_category()) {
            $category = get_queried_object();
            echo '<h1 class="page-title">'.$category->name.'のお知らせ</h1>'.PHP_EOL;
        } elseif (is_tag()) {
            $tag = get_queried_object();
            echo '<h1 class="page-title">タグ「'.$tag->name.'」のお知らせ</h1>'.PHP_EOL;
        } elseif ( is_date() ) {
            $title_date = '';
            if( get_query_var('year') ) {
                $title_date .= get_query_var('year').'年';
            }
            if( get_query_var('monthnum') ) {
                $title_date .= get_query_var('monthnum').'月';
            }
            if( get_query_var('day') ) {
                $title_date .= get_query_var('day').'日';
            }

            echo '<h1 class="page-title">'.$title_date.'のお知らせ</h1>'.PHP_EOL;
        } elseif (!is_front_page()) {
            echo '<h1 class="page-title">'. get_the_title() .'</h1>'.PHP_EOL;
        }
    ?>

index.php

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイ・オリジナルテーマ</title>
</head>
<body>
	<header>
    	<h1><?php the_title(); ?></h1>
    	<ul>
        	<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
        	<li><a href="<?php echo home_url('about'); ?>">会社概要</a>
            	<ul>
	                <li><a href="<?php echo home_url('about/history'); ?>">沿革</a></li>
                	<li><a href="<?php echo home_url('about/access'); ?>">アクセス</a></li>
            	</ul>
        	</li>
        	<li><a href="<?php echo home_url('service'); ?>">サービス</a></li>
        	<li><a href="<?php echo home_url('contact'); ?>">問い合わせ</a></li>
    	</ul>
	</header>

    <main>
        <?php the_content();?>
    </main>
    
    <footer>
        <p>© 2025 マイ・オリジナルテーマ</p>
    </footer>
</body>
</html>

kaisha.php

<?php
/*
Template Name: 会社概要専用テンプレート
*/
?>
<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは kaisha.php テンプレートで表示されています</p>
<?php get_footer();?>

main.css

/* サイトタイトル */
.global-header .logo {
    font-size: 3.0rem;
    font-weight: bold;
    color: #333;
    margin: 0;
}

.global-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.0rem 2.0rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* step.1 */
.menu-header-menu-container .menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 1.0rem;
}

/* step.2 */
.menu-header-menu-container .menu .menu-item {
    border: 1px solid gray;
    background-color: rgba(255, 255, 255, 0.5);
}

.menu-header-menu-container .menu .menu-item a {
    display: block;
    padding: 1.0rem 1.5rem;
    color:black;
    text-decoration: none;
    white-space: nowrap;
    transition: all 300ms ease;
}

/* step.3 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children {
    position: relative;
}

.menu-header-menu-container .menu .menu-item.menu-item-has-children > a::after{
    content: "▼";
    margin-left: 0.5rem;
    font-size: 0.8rem;
}

.menu-header-menu-container .menu .menu-item .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: -1px;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    list-style: none;

}

/* step.4-1 */
.menu-header-menu-container .menu .menu-item a:hover ,
.menu-header-menu-container .menu .menu-item.current-menu-item a {
    color: white;
    background-color: orange;
}

/* step.4-2 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children:hover .sub-menu {
    display: block;
}

/* step.4-3 */
.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item {
    border: 1px solid gray;
    border-top: none;
    background-color: white;
    width: 100%;
}

.menu-header-menu-container .menu .menu-item.menu-item-has-children .sub-menu .menu-item:first-child {
    border-top: 1px solid gray;
}


/* ページタイトルのスタイル */
.page-title {
    font-size: 2.0rem;
    color: #333;
    margin-bottom: 2.0rem;
    border-bottom: 2px solid #ddd;
    padding-bottom: 1.0rem;
}

.post-list .date {
    display: inline-block;
    width: 9.0rem;
}

.post-list .category {
    display: inline-block;
    width: 6.0rem;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.0rem;
    list-style: none;
}

page-contact.php

<?php get_header();?>
        <?php the_content(); ?>
        <h2>お問い合わせフォーム</h2>
        <form>
            <!-- ここにフォームを作成 -->
        </form>
        <p>※このページは page-contact.php テンプレートで表示されています</p>
<?php get_footer();?>

page-news.php

<?php get_header();?>

<?php the_content(); ?>

<?php
// カテゴリー一覧を取得
$categories = get_categories([
    'hide_empty' => true, // 投稿がないカテゴリーは除外
    'orderby' => 'term_order', // 管理画面と同じ並び順
    'order' => 'asc',
]);

echo '<h2>カテゴリー</h2>' . PHP_EOL;
echo '<ul class="category-list">' . PHP_EOL;

foreach ($categories as $category) {
    echo '<li><a href="'.get_term_link($category->term_id).'">'.$category->name.'</a></li>'.PHP_EOL;
}

echo '</ul>' . PHP_EOL;

// タグ一覧を取得
$tags = get_tags([
    'hide_empty' => true, // 投稿がないタグは除外
    'orderby' => 'name',
    'order' => 'asc',
]);

echo '<h2>タグ</h2>' . PHP_EOL;
echo '<ul class="tag-list">' . PHP_EOL;

foreach ($tags as $tag) {
    echo '<li><a href="'.get_term_link($tag->term_id).'">'.$tag->name.'</a></li>'.PHP_EOL;
}

echo '</ul>' . PHP_EOL;

// 月別一覧を追加
echo '<h2>月別</h2>' . PHP_EOL;
echo '<ul>'.PHP_EOL;
wp_get_archives([
    'type' => 'monthly',
    'format' => 'html',
    'echo' => true,
]);
echo '</ul>'.PHP_EOL;
?>

<p>※このページは page-news.php テンプレートで表示されています</p>

<?php get_footer();?>

page.php

<?php get_header();?>
        <?php the_content(); ?>
        <p>※このページは page.php テンプレートで表示されています</p>
<?php get_footer();?>

single.php

<?php get_header();?>
        <?php the_content(); ?>
        <p>※この投稿は single.php テンプレートで表示されています</p>
<?php get_footer();?>

style.css

/*
Theme Name: マイ・オリジナルテーマ
*/

sub.css

h1 {
    color: blue;
}

tag.php

<?php get_header();?>

    <?php
            
        $target = get_queried_object();

        // そのカテゴリーに属する投稿を取得
        $args = [
            'post_type' => 'post',
            'post_status' => 'publish',
            'orderby' => 'title',
            'order' => 'asc',
            'tag__in' => [$target->term_id],
        ];
        
        $query = new WP_Query($args);
        
        echo '<ul class="post-list">' . PHP_EOL;

        while ($query->have_posts()) {
            $query->the_post();
            
            echo '<li>'.
                '<span class="date">'.get_the_date('Y年m月d日').'</span>'.
                '<span class="category">'.$target->name.'</span>'.
                '<a href="'.get_the_permalink($post->ID).'">'.get_the_title($post->ID).'</a>'.
                '</li>'.PHP_EOL;
        }
        
        wp_reset_postdata(); // 投稿データをリセット
        
        
        echo '</ul>' . PHP_EOL;
    ?>		

    <p>※このページは tag.php テンプレートで表示されています</p>
<?php get_footer();?>