個別記事ページを作成する方法 ｜ WordPressテーマ作成

WordPressで個別記事を作成するには、個別記事用のテンプレートが必要です。また個別記事を作成する際に必要なテンプレートタグもあります。本記事では個別記事ページを作成する方法と題して、次のポイントを解説します。

・個別記事用のテンプレトートを作成する方法
・個別記事で利用するテンプレトートタグの種類
・サイドバーのカテゴリ一覧や月別アーカイブの作成方法

個別記事用のテンプレートを作成する

個別記事ページで利用するテンプレートファイルは次のとおりです。

優先順位①（single-post.php）
優先順位②  (single.php)
優先順位③  (singular.php)

優先順位とありますが、例えば優先順位が②のsingle.phpと優先順位が③のsingular.phpがどっちもある場合は、優先順位が高いsingle.phpが個別記事のテンプレートファイルとして使われます。

今回は下記の画像のように、「single.php」で個別記事用のテンプレートファイルを作成しました。

個別記事ページを作り込む

では実際に個別記事ページを作り込んでいきます。以下にて個別記事ページを作り込んだHTMLファイルとCSSファイルを載せました。

☆HTML

<?php get_header(); ?>
<div class="article-container">
    <div class="article-box">
        <?php if (have_posts()) : ?>
            <?php while (have_posts()) : the_post(); ?>
                <h1 class="article-title"><?php the_title(); ?></h1>
                <div class="category-meta">
                    <div class="category"><?php the_category(); ?></div>
                    <time class="blog-meta" deta-time="<?php the_time('Y-m-d'); ?>"><?php the_time('Y-m-d'); ?></time>
                </div>
                <div class="article-image">
                    <?php the_post_thumbnail(''); ?>
                </div>
                <div class="article-content">
                    <?php the_content(); ?>
                </div>
            <?php endwhile; ?>
        <?php endif; ?>
        <div class="article-link">
            <div class="prev">前の記事：<?php previous_post_link(); ?></div>
            <div class="next">次の記事：<?php next_post_link(); ?></div>
        </div>
    </div>
    <div class="article-sidebar">
        <aside class="article-category">
            <h2 class="article-category-title">カテゴリー</h2>
            <ul class="article-category-list">
                <?php
                $args = array(
                    'title_li' => '',
                );
                wp_list_categories($args);
                ?>
            </ul>
        </aside>
        <aside class="article-archive">
            <h2 class="article-archive-title">月別アーカイブ</h2>
            <ul class="article-archive-list">
                <?php
                $args = array(
                    'type' => 'monthly',
                );
                wp_get_archives($args);
                ?>
            </ul>
        </aside>
    </div>
</div>
<?php get_footer(); ?>

☆CSS

.article-container {
  width: 90%;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
 
.article-container .article-box {
  width: 65%;
}
 
.article-container .article-box .article-title {
  text-align: center;
  margin-top: 40px;
}
 
.article-container .article-box .category-meta {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}
 
.article-container .article-box .category-meta .category {
  font-size: 14px;
}
 
.article-container .article-box .category-meta .category ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  -webkit-box-flex: wrap;
      -ms-flex: wrap;
          flex: wrap;
  margin-bottom: 10px;
}
 
.article-container .article-box .category-meta .category ul li {
  margin-left: 5px;
  list-style: none;
}
 
.article-container .article-box .category-meta .category ul li a {
  text-decoration: none;
  color: #2b398a;
  border: solid 1px #2b398a;
  padding: 5px 10px;
  font-weight: bold;
}
 
.article-container .article-box .article-image {
  width: 100%;
  margin-top: 5px;
}
 
.article-container .article-box .article-image img {
  width: 100%;
  height: 450px;
  -o-object-fit: cover;
     object-fit: cover;
}
 
.article-container .article-box .article-content {
  border-bottom: 2px solid #e7e7e7;
  padding-bottom: 50px;
}
 
.article-container .article-box .article-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-top: 30px;
}
 
.article-container .article-box .article-link .prev a {
  text-decoration: none;
  color: #000000;
}
 
.article-container .article-box .article-link .next a {
  text-decoration: none;
  color: #000000;
}
 
.article-container .article-sidebar {
  width: 35%;
  margin-left: 50px;
  margin-top: 70px;
}
 
.article-container .article-sidebar .article-category .article-category-title {
  color: #FFFFFF;
  background-color: #9e4f17;
  text-align: center;
  padding: 10px 0px;
}
 
.article-container .article-sidebar .article-category .article-category-list {
  margin-top: 30px;
  padding-left: 20px;
}
 
.article-container .article-sidebar .article-category .article-category-list li a {
  color: #000000;
  text-decoration: none;
  font-size: 18px;
}
 
.article-container .article-sidebar .article-archive {
  margin-top: 30px;
}
 
.article-container .article-sidebar .article-archive .article-archive-title {
  color: #FFFFFF;
  background-color: #9e4f17;
  text-align: center;
  padding: 10px 0px;
}
 
.article-container .article-sidebar .article-archive .article-archive-list {
  margin-top: 30px;
  padding-left: 20px;
}
 
.article-container .article-sidebar .article-archive .article-archive-list li a {
  color: #000000;
  text-decoration: none;
  font-size: 18px;
}

作成した個別記事ページの全体像は、次の画像のとおりです。

ヘッダーやフッターを表示する

 
まずはトップページと同じように個別記事ページにも<?php get_header(); ?>と<?php get_footer(); ?>と記述して、ヘッダーとフッターを表示させましょう。

個別記事ページにもWordPressループが必要

 個別記事ページはトップページと違って、1ページに1記事を表示させるページですが、その1記事を表示させるためにもWordPressループが必要になります。そのため下記のようにwordPressループを作成しましょう。

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

テンプレートタグでタイトルやアイキャッチ画像などを表示する

 下記の画像のようにタイトルやアイキャッチ画像、カテゴリー、現在時刻を表示させるには、テンプレートタグが必要になります。

・タイトルを表示する：<?php the_title(); ?>
・アイキャッチ画像を表示する：<?php the_post_thumbnail(''); ?>
・カテゴリーを表示する：<?php the_category(); ?>
・現在時刻を表示する：<?php the_time('Y-m-d'); ?>

記事の本文を表示する

 
下記の画像のように、記事の本文を表示させるためには<?php the_content(); ?>という記述が必要になります。

<div class="article-content">
 　<?php the_content(); ?>
</div>

前後の記事のページのリンクを入れる

個別記事ページには下記の画像のように前後の記事に移動できるリンクもあると、ユーザーの回遊率が上がるでしょう。前のページのリンクを表示させるには<?php previous_post_link( ); ?>、次のページのリンクを表示させるには<?php next_post_link( ); ?>と記述しましょう。

<div class="article-link">
    <div class="prev">前の記事：<?php previous_post_link( ); ?></div>
    <div class="next">次の記事：<?php next_post_link( ); ?></div>
</div>

カテゴリー一覧を作成する

 
下記の画像のようにカテゴリーの一覧を表示させるには、<?php wp_list_categories( $args ); ?>と記述しましょう。

wp_list_categories($args);
 <ul class="article-category-list">
    <?php
    $args = array(
         'title_li' => '',
     );
 
     wp_list_categories($args);
     ?>
 </ul>

デフォルトの状態だと、カテゴリーのリストの上に「カテゴリー」という表記が表示されてしまいます。このカテゴリーを消すために次の記述が必要になります。

月別アーカイブを作成する

$args = array(
         'title_li' => '',
     );

下記のように記事のアーカイブを表示させたい場合は、<?php wp_get_archives( $args ); ?>と記述しましょう。

<ul class="article-archive-list">
                <?php
                $args = array(
                    'type' => 'monthly',
                );
                wp_get_archives($args);
                ?>
 </ul>

上記では月別のアーカイブを表示させるために、次のように「monthly」と記述をしています。

 $args = array(
                    'type' => 'monthly',
                );

GIV株式会社は、埼玉県川越市にあるWEB（ホームページ）制作会社です。

お困りごと、ご相談、お気軽にご連絡ください。

お問い合わせは、こちらから。