Wordpressの自作テンプレートで日付別アーカイブを表示する方法

WordPressの自作テンプレートで日付別アーカイブを表示する方法

2015年1月5日 wordpress

【PR】当サイトにはアフィリエイト広告が含まれています。

今更ですが、ブログの日付別アーカイブページが表示されないことに気付きました。
何で！？と思って調べたら、単純に
「archive.php」を作るのを忘れていました。

せっかくなので、「archive.php」の作り方をまとめます。

wordpressでブログを作る時に必要なテンプレート

wordpressのブログのテンプレートを自作する時には、下記のphpテンプレートを作成する必要があります。

index.php ･･･　全ての記事の一覧ページ
single.php ･･･　個別の記事を表示するページ
category.php ･･･　カテゴリー別の一覧ページ
archive.php ･･･　日付別アーカイブの一覧ページ

このうち、カテゴリー別の一覧ページや日付別アーカイブの一覧ページが必要ない場合は、category.phpやarchive.phpを作る必要はありません。
category.phpやarchive.phpが存在しない場合は、代わりにindex.phpが表示されます。

今回は、この「archive.php」を作成し忘れていたため、自動的に「index.php」が表示されてしまっており、日付別アーカイブページが表示されない状態になっていたわけです。

それでは、「archive.php」を作ってみましょう！

archive.phpの作り方

「archive.php」は、基本的にindex.phpをコピーし、
読み込みタグやページのタイトル部分など、日付別アーカイブに必要な部分を変更して作ります。

ですので、まずは元となるindex.phpを見てみましょう。
少し長くなりますが、ページまるごとのコードを載せてみます。
（このブログでは、index.phpはNOTESのページになります。）

<?php get_header(); ?>

<div class="blog-head">
    <h1>BLOG</h1>
    <p><?php bloginfo('description'); ?></p>
</div><!--/.blog-head-->

<div class="blog-main">
    <ul>    
        <?php
        $args = array(
            'post_type' => 'post', /* 投稿タイプ */
            'paged' => $paged
        ); ?>
        
        <?php query_posts( $args ); ?>

        <?php if (have_posts()) :
        while (have_posts()) : the_post();　?>
        <li id="post-<?php the_ID(); ?>">
            <div>
                <h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                <p><?php echo mb_substr(strip_tags($post-> post_content),0,50).'...'; ?></p>
                <p><?php echo get_the_date(); ?></p>
                <p class="tag">
                <?php if (the_category(' '))  the_category(); ?>
                </p>
                <p class="readbtn"><a href="<?php the_permalink(); ?>">&raquo; 読む</a></p>
            </div>
        </li>
        
        <?php 
            endwhile; // 繰り返し処理終了
            else : ?>
        <li class="post span9">
        <div><h5>お探しの記事は見つかりませんでした</h5></div>
        </li>
        <?php endif; ?>
    </ul>
</div><!--/.blog-main-->

<?php get_footer(); ?>

<?php get_header(); ?>

</div>

<ul>

<?php

$args = array(

'post_type' => 'post', /* 投稿タイプ */

'paged' => $paged

); ?>

<?php query_posts( $args ); ?>

<?php if (have_posts()) :

while (have_posts()) : the_post();　?>

<div>

<p><?php echo mb_substr(strip_tags($post-> post_content),0,50).'...'; ?></p>

<?php if (the_category(' ')) the_category(); ?>

</p>

</div>

</li>

<?php

endwhile; // 繰り返し処理終了

else : ?>

<div><h5>お探しの記事は見つかりませんでした</h5></div>

</li>

<?php endif; ?>

</ul>

</div>

<?php get_footer(); ?>

このindex.phpをarchive.phpに変換するためには、黄色でマークアップした、
4～5行目、10～19行目、32～34行目を弄る必要があります。
順番に見て行きましょう！

4～5行目ブログのヘッダー部分を修正する

まず、4~5行目の

<h1>BLOG</h1>
<p><?php bloginfo('description'); ?></p>

1 2	<h1>BLOG</h1> <p><?php bloginfo('description'); ?></p>

↑こちらを、archive.php用の記述に変更してみます。

index.phpでは、<h1>タイトルで「BLOG」と表示していますが、
日付別アーカイブページでは「2015年 1月」のように、アーカイブの年・月を表示します。
また、index.phpではbloginfo('description');で、wordpressのダッシュボードで設定した「キャッチフレーズ」が表示されるように設定していますが、
日付別アーカイブページでは「アーカイブ： 2015年 1月の一覧ページです。」のように、こちらもアーカイブの年・月を表示するように変更します。

変更後のコードは下記のようになります。

<h1>
    <?php if(is_month()): /* 月別アーカイブ */?>
        <span><?php echo get_query_var('year'); ?>年</span>
        <span><?php echo get_query_var('monthnum'); ?>月</span>
    <?php elseif(is_year()): /* 年別アーカイブ */ ?>
        <span><?php echo get_query_var('year'); ?>年</span>
    <?php endif; ?>
</h1>

<p>アーカイブ：
    <?php if(is_month()): /* 月別アーカイブ */?>
        <span><?php echo get_query_var('year'); ?>年</span>
        <span><?php echo get_query_var('monthnum'); ?>月</span>
    <?php elseif(is_year()): /* 年別アーカイブ */ ?>
        <span><?php echo get_query_var('year'); ?>年</span>
    <?php endif; ?>
    の一覧ページです。
</p>

<h1>

<?php if(is_month()): /* 月別アーカイブ */?>

<?php elseif(is_year()): /* 年別アーカイブ */ ?>

<?php endif; ?>

</h1>

<p>アーカイブ：

<?php if(is_month()): /* 月別アーカイブ */?>

<?php elseif(is_year()): /* 年別アーカイブ */ ?>

<?php endif; ?>

の一覧ページです。

</p>

月別アーカイブ用のページと年別アーカイブ用のページで場合別けし、
年別アーカイブ用のページの時に「月」が表示されないようにしています。

10～19行目アーカイブの読み込みタグを修正する

次に、10～19行目の

<?php
$args = array(
	'post_type' => 'post', /* 投稿タイプ */
	'paged' => $paged
); ?>

<?php query_posts( $args ); ?>

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

<?php

$args = array(

'post_type' => 'post', /* 投稿タイプ */

'paged' => $paged

); ?>

<?php query_posts( $args ); ?>

<?php if (have_posts()) :

while (have_posts()) : the_post();　?>

↑こちらを、archive.php用の記述に変更してみます。

index.phpでは投稿タイプが「post」の投稿をすべて取得するように設定していますが、
archive.phpでは、ブログ読者に選択された月度、年度の記事だけを取得するようにします。

変更後のコードは下記のようになります。
ちなみに、category.phpを作る時も、下記と同じ記述になります。

<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

1	<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

32～34行目アーカイブの読み込みタグの、閉じタグを修正する

先ほど10～19行目で、アーカイブの読み込みタグを修正しましたので、
それに伴い、閉じタグも修正する必要があります。

32～34行目の

<?php 
endwhile; // 繰り返し処理終了
else : ?>

<?php

endwhile; // 繰り返し処理終了

else : ?>

↑こちらを、

<?php endforeach; else: ?>

1	<?php endforeach; else: ?>

このように修正します。

これで完成です！
完成したarchive.phpをまとめて見てみますと、下記のようになります。
（このブログでarchive.phpを使用しているページは、こちらになります。）

<?php get_header(); ?>

<div class="blog-head">
    <h1>
	<?php if(is_month()): /* 月別アーカイブ */?>
            <span><?php echo get_query_var('year'); ?>年</span>
            <span><?php echo get_query_var('monthnum'); ?>月</span>
        <?php elseif(is_year()): /* 年別アーカイブ */ ?>
            <span><?php echo get_query_var('year'); ?>年</span>
        <?php endif; ?>
    </h1>

    <p>アーカイブ：
	<?php if(is_month()): /* 月別アーカイブ */?>
            <span><?php echo get_query_var('year'); ?>年</span>
            <span><?php echo get_query_var('monthnum'); ?>月</span>
        <?php elseif(is_year()): /* 年別アーカイブ */ ?>
            <span><?php echo get_query_var('year'); ?>年</span>
        <?php endif; ?>
        の一覧ページです。
    </p>
</div><!--/.blog-head-->

<div class="blog-main">
    <ul>
	<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>
        <li id="post-<?php the_ID(); ?>">
            <div>
                <h5><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h5>
                <p><?php echo mb_substr(strip_tags($post-> post_content),0,50).'...'; ?></p>
                <p><?php echo get_the_date(); ?></p>
                <p class="tag">
                <?php if (the_category(' '))  the_category(); ?>
                </p>
                <p class="readbtn"><a href="<?php the_permalink(); ?>">&raquo; 読む</a></p>
            </div>
        </li>
        
        <?php endforeach; else: ?>
        <li class="post span9">
        <div><h5>お探しの記事は見つかりませんでした</h5></div>
        </li>
        <?php endif; ?>
    </ul>
</div><!--/.blog-main-->        

<?php get_footer(); ?>

<?php get_header(); ?>

<h1>

<?php if(is_month()): /* 月別アーカイブ */?>

<?php elseif(is_year()): /* 年別アーカイブ */ ?>

<?php endif; ?>

</h1>

<p>アーカイブ：

<?php if(is_month()): /* 月別アーカイブ */?>

<?php elseif(is_year()): /* 年別アーカイブ */ ?>

<?php endif; ?>

の一覧ページです。

</p>

</div>

<ul>

<?php if ($posts) : foreach ($posts as $post) : start_wp(); ?>

<div>

<p><?php echo mb_substr(strip_tags($post-> post_content),0,50).'...'; ?></p>

<?php if (the_category(' ')) the_category(); ?>

</p>

</div>

</li>

<?php endforeach; else: ?>

<div><h5>お探しの記事は見つかりませんでした</h5></div>

</li>

<?php endif; ?>

</ul>

</div>

<?php get_footer(); ?>

category.phpを作成する場合

ちなみに、category.phpを作成する場合は、archive.phpの4-21行目を

<h1><?php single_cat_title(); ?></h1>
<p>カテゴリー：<?php single_cat_title(); ?>の一覧ページです。</p>

1 2	<h1><?php single_cat_title(); ?></h1> <p>カテゴリー：<?php single_cat_title(); ?>の一覧ページです。</p>

↑上記に変更するだけでOKです！

single_cat_title();でカテゴリー名を取得するように変更しました。

【PR】当サイトにはアフィリエイト広告が含まれています。