【WordPressでオリジナルサイトを作ろう】⑯月別一覧編

date.phpの作成

テーマディレクトリの直下に、月別一覧を表示するためのテンプレートファイル「date.php」を作成します。

C:\Users\ユーザー名\Local Sites\blog\app\public\wp-content\themes\blog\date.php

date.phpのコーディング

date.phpのコードは下記の通りです。

    date.php
    
<?php get_header(); ?>

<div id="container" class="wrapper">
  <main>
    <h1 class="page-title">
      <?php echo get_query_var('year').'年'.get_query_var('monthnum').'月'; ?>
    </h1>

    <?php if(have_posts()): ?>
      <?php while(have_posts()):the_post(); ?>
        <?php
          $cat = get_the_category();
          $catname = $cat[0]->cat_name;
        ?>
        <article>
          <h2 class="article-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h2>
          <ul class="meta">
            <li><?php the_time('Y/m/d'); ?></li>
            <li><?php echo $catname; ?></li>
          </ul>
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
          <div class="text">
            <?php
              if (mb_strlen(strip_tags(get_the_content()), 'UTF-8') > 80) {
                $content = mb_substr(strip_tags(get_the_content()), 0, 80, 'UTF-8');
                echo $content . '…';
              } else {
                echo strip_tags(get_the_content());
              }
            ?>
          </div>
          <div class="readmore"><a href="<?php the_permalink(); ?>">READ MORE</a></div>
        </article>
      <?php endwhile; ?>

      <?php
        if (function_exists("pagination")) {
          pagination($wp_query->max_num_pages);
        }
      ?>
    <?php endif; ?>
  </main>

  <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>
    
  

基本のコードは「index.php」と同じです。

ページのタイトルに日付を表示します。

月別一覧の表示確認

サイドバーのArchiveで、日付のリンクをクリックして月別の一覧を表示してみましょう。

上記の通り、タイトルに年月が表示されて対象の記事が一覧で表示されていればOKです。

記事が12月分しかないので、記事の日付を変更して他の年月でも表示されることを確認しておきましょう。

投稿画面から「ニュースタイトル１」の記事を開きます。
「公開」の日付欄をクリックして、月を「11月」に変更してから「更新」をクリックします。

サイドバーのArchiveに11月が追加されるので、クリックして「ニュースタイトル１」の記事が表示されいることを確認します。