【独学で充分 CMS】single.phpのカテゴリー別で表示する条件分岐

2020年2月2日　（更新日:2020年4月15日）

【独学で充分 CMS】single.phpのカテゴリー別で表示する条件分岐：【独学で充分 CMS】single.ph...


【独学で充分 CMS】single.phpのカテゴリー別で表示する条件分岐

投稿記事のカテゴリー別でページデザインを変えたい時があります。
ですが投稿記事はどのカテゴリーでも必ずsingle.phpに一度飛ばされます。
ですのでsingle.phpを複数作りたい時はsingle.phpの中でカテゴリーによる条件分岐をしてカテゴリー別で作ったテンプレートsingle.phpへ振り分けていきます。

 

それぞれのカテゴリー別で表示させるためのデザインを準備

HTMLファイルを準備します。
今回はカテゴリーをコンテンツA、コンテンツB、コンテンツCとしてそれぞれデザインを変更します。

私は以下の３つのHTMLを準備しました。
ファイル名はまずsingle-a.html

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>ページタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- header + nav -->


<div class="eye-catch-single">
          <figure class="thumbnail">
            <img src="#" alt="">
          </figure>
</div>

  <article class="clearfix">
    <aside>
      <section>
        <h3>項目</h3>
        <ul>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
        </ul>

      </section>
    </aside>

    <!-- main -->

    <main class="single-wrap">

      <div>

        <h1>記事タイトル</h1>
        <p>日付</p>
        <p>カテゴリー</p>
        <p>本文</p>
      </div>
    </main>

    <!-- main -->

  </article>
  <!-- footer -->

  <footer>
    <p>フッター</p>
  </footer>

  <!-- footer -->
</body>
</html>

single-b.html

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>ページタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  <!-- header + nav -->
  <article class="clearfix">
    <aside>
      <section>
        <h3>項目</h3>
        <ul>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
        </ul>

      </section>
    </aside>

    <!-- main -->

    <main class="single-wrap">

      <div>
        <figure class="thumbnail">
          <img src="#" alt="">
        </figure>
        <h1>記事タイトル</h1>
        <p>日付</p>
        <p>カテゴリー</p>
        <p>本文</p>
      </div>
    </main>

    <!-- main -->

  </article>
  <!-- footer -->

  <footer>
    <p>フッター</p>
  </footer>

  <!-- footer -->
</body>
</html>

single-c.html

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>ページタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  <!-- header + nav -->
  <article class="clearfix">

    <!-- main -->

    <main class="single-wrap">

      <div>
        <figure class="thumbnail">
          <img src="#" alt="">
        </figure>
        <h1>記事タイトル</h1>
        <p>日付</p>
        <p>カテゴリー</p>
        <p>本文</p>
      </div>
    </main>

    <!-- main -->
    <aside class="single-side-right">
      <section>
        <h3>項目</h3>
        <ul>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
          <li><a href="#">メニュー</a></li>
        </ul>

      </section>
    </aside>


  </article>
  <!-- footer -->

  <footer>
    <p>フッター</p>
  </footer>

  <!-- footer -->
</body>
</html>

共通のCSSは以下です。
ファイル名base.css

 

*{
  margin:0;
  padding: 0;
  -webkit-appearance: none;
}
body,html{
  width: 100%;
  height: 100%;
}
body{
  font-family: sans-serif;
  background-color:white;
}
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}
header,main,footer,article{
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
header{
  padding-top: 20px;
  padding-bottom: 10px;
}
header h1{
  font-size: 40px;
  font-weight: normal;
  width: 60%;
  float: left;
}
header nav{
  width: 40%;
  float: left;
}
nav ul{
  list-style-type: none;
}
nav li{
  float: left;
}
nav a{
  color: black;
  text-decoration: none;
  display: block;
  padding: 10px 30px;
}
nav a:hover{
  background-color: black;
  color:white;
}
.eye-catch{
/*  height: 400px;*/
  color:transparent;
  background-color:lightgray;
  background-size: cover;
}


.home h2{
  font-size: 30px;
  text-align: center;
  font-weight: normal;
  padding-top: 50px;
  padding-bottom: 50px;
}
.home a{
  text-decoration: none;
  color:gray;
}
main{
  padding-bottom:50px;
}
.box1{
  width: 50%;
  float: left;
  padding-bottom:50px;
}

.thumbnail img{
  width: 100%;
  /*height: 400px;*/
}


.single-wrap div{
  width: 70%;
  float: left;
}
.archive-wrap div{
  width: 70%;
  float: left;
}
.archive-wrap .archive{
  padding-bottom:50px;
}
.archive-wrap h2{
  font-size: 30px;
  padding-top: 50px;
  padding-bottom:50px;
}



/*固定ページ*/


.page-wrap div{
  width: 70%;
  float: left;
}
.page-wrap h3{
  font-size: 34px;
  padding-bottom:20px;
}

/*固定ページ*/

/*about meページ*/


.aboutme-wrap div{
  width: 70%;
  float: left;
}
.aboutme-wrap h4{
  font-size: 50px;
  font-weight: normal;
  text-align: center;
  color: blue;
  padding-bottom:20px;
}

/*about meページ*/

aside{
  width: 30%;
  float: left;
}



aside h3{
  font-size: 24px;
  line-height: 175%;
  font-weight: normal;
}
aside ul{
  list-style-type: none;
  font-size: 14px;
}
aside a{
  color: gray;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
}
aside section{
  margin-bottom: 10px;
  padding-left:0px;
  padding-right:30px;
}
aside a:hover{
  color: white;
  background-color: gray;
}


.wrap > div{
  margin-bottom: 30px;
}

aside input{
  font-size: 14px;
  width: 100%;
  height: 40px;
  border: 1px solid gray;
  padding-left:30px;
  background-image: url(images/24px.svg);
  background-repeat: no-repeat;
  background-position: 6px center;
}
.search-wrap div{
  width: 70%;
  float: left;
}
.search-wrap .search{
  padding-bottom:50px;
}
.search-wrap h2{
  font-size: 30px;
  padding-top: 50px;
  padding-bottom:50px;
}
.search-query{
  font-size: 30px;
  padding-bottom:50px;
}

.page-link{
  width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-top:50px;
  padding-bottom: 20px;
}
.page-link > p:first-of-type{
  float: left;
}
.page-link > p:last-of-type{
  float: right;
}






.box1 .box1left{
  width: calc(20% - 10px);
  height: 100px;
  overflow: hidden;
  float: left;
}
.box1left a{
  color: transparent;
  display: block;
}
.eyecatch-image{
  background-size: cover;
}
.box1 .box1right{
  width: 80%;
  float: right;
}



article{
  padding-bottom:50px;
}
.eye-catch-single{
  margin-bottom: 50px;
  height: auto;
  /*background-color: lightgray;*/
}
.single-side-right section{
  padding-left: 30px;
}
.thumbnail{
  /*background-color: lightgray;*/
  height: 400px;
  overflow: hidden;
}




footer{
  background-color:black;
}
footer p{
  color:white;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

それではその３つのHTMLをPHPファイルに変更していきます。
まずはsingle-a.htmlをsingle-a.phpに複製保存します。

 

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="base.css">
</head>
<body>
  <!-- header + nav -->

  <header class="clearfix">
    <h1>ページタイトル</h1>
    <nav>
      <ul>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
        <li><a href="#">メニュー</a></li>
      </ul>
    </nav>
  </header>
  
  <!-- header + nav -->

の部分を下記に変更します。

 

<?php get_header(); ?>

そしてfooterの部分も下記のように変更します。

 

  <!-- footer -->

  <footer>
    <p>フッター</p>
  </footer>

  <!-- footer -->
</body>
</html>

から

 

<?php get_footer(); ?>

次にアイキャッチの部分も変更します。

 

<div class="eye-catch-single">
          <figure class="thumbnail">
            <img src="#" alt="">
          </figure>
</div>

を下記に差し替えます。

 

<div class="eye-catch-single">
  <figure class="thumbnail">
    <?php the_post_thumbnail(); ?>
  </figure>
</div>

<aside>の中も変えます。

 

<aside>
  <section>
    <h3>項目</h3>
    <ul>
      <li><a href="#">メニュー</a></li>
      <li><a href="#">メニュー</a></li>
      <li><a href="#">メニュー</a></li>
      <li><a href="#">メニュー</a></li>
    </ul>

  </section>
</aside>

から

 

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

次は記事をループします。

 

<main class="single-wrap">

  <div>

    <h1>記事タイトル</h1>
    <p>日付</p>
    <p>カテゴリー</p>
    <p>本文</p>
  </div>
</main>

から

 

<main class="single-wrap">

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

        <h1><?php the_title(); ?></h1>
        <p><?php the_date(); ?></p>
        <?php the_category(); ?>
        <?php the_content(); ?>

      <?php endwhile; ?>
      <?php else : ?> <p>コンテンツがありません</p>
    <?php endif; ?>

  </div>
</main最後に<?php get_footer(); ?>の直前にページリンクを記述。

最後に<?php get_footer(); ?>の直前にページリンクを記述。

 

<div class="page-link clearfix">
  <p><?php previous_post_link('&laquo; %link','前の記事へ'); ?></p>
  <p><?php next_post_link('%link &raquo;','次の記事へ'); ?></p>
</div>

最終的なsingle-a.phpの中身は下記になります。

 

<?php get_header(); ?>



<div class="eye-catch-single">
  <figure class="thumbnail">
    <?php the_post_thumbnail(); ?>
  </figure>
</div>

<article class="clearfix">
  <aside>
    <?php get_sidebar(); ?>
  </aside>

  <!-- main -->

  <main class="single-wrap">

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

          <h1><?php the_title(); ?></h1>
          <p><?php the_date(); ?></p>
          <?php the_category(); ?>
          <?php the_content(); ?>

        <?php endwhile; ?>
        <?php else : ?> <p>コンテンツがありません</p>
      <?php endif; ?>

    </div>
  </main>

  <!-- main -->

</article>

<div class="page-link clearfix">
  <p><?php previous_post_link('&laquo; %link','前の記事へ'); ?></p>
  <p><?php next_post_link('%link &raquo;','次の記事へ'); ?></p>
</div>

<?php get_footer(); ?>

single-b.phpの中身は下記です。

 

<?php get_header(); ?>

<article class="clearfix">
  <aside>
    <?php get_sidebar(); ?>
  </aside>

  <!-- main -->

  <main class="single-wrap">

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

          <figure class="thumbnail">
            <?php the_post_thumbnail(); ?>
          </figure>
          <h3><?php the_title(); ?></h3>
          <p><?php the_date(); ?></p>
          <?php the_category(); ?>
          <?php the_content(); ?>

        <?php endwhile; ?>
        <?php else : ?> <p>コンテンツがありません</p>
      <?php endif; ?>
    </div>
  </main>

  <!-- main -->

</article>

<div class="page-link clearfix">
  <p><?php previous_post_link('&laquo; %link','前の記事へ'); ?></p>
  <p><?php next_post_link('%link &raquo;','次の記事へ'); ?></p>
</div>

<?php get_footer(); ?>

single-c.phpの中身は下記です。

 

<?php get_header(); ?>

<article class="clearfix">

  <!-- main -->

  <main class="single-wrap">

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

          <figure class="thumbnail">
            <?php the_post_thumbnail(); ?>
          </figure>
          <h3><?php the_title(); ?></h3>
          <p><?php the_date(); ?></p>
          <?php the_category(); ?>
          <?php the_content(); ?>

        <?php endwhile; ?>
        <?php else : ?> <p>コンテンツがありません</p>
      <?php endif; ?>
    </div>
  </main>

  <!-- main -->
  <aside class="single-side-right">
    <?php get_sidebar(); ?>
  </aside>


</article>

<div class="page-link clearfix">
  <p><?php previous_post_link('&laquo; %link','前の記事へ'); ?></p>
  <p><?php next_post_link('%link &raquo;','次の記事へ'); ?></p>
</div>

<?php get_footer(); ?>

これでカテゴリー別のページができました。
次にsingle.phpを複製してsingle-default.phpにファイル名を変更します。
single.phpの中を下記に変更します。

 

<?php
$post = $wp_query->post;
if ( in_category(array( 'コンテンツA' )) ) {
  include(STYLESHEETPATH.'/single-a.php');
} else if ( in_category(array( 'コンテンツB' )) ) {
  include(STYLESHEETPATH.'/single-b.php');
} else if ( in_category(array( 'コンテンツC' )) ) {
  include(STYLESHEETPATH.'/single-c.php');  
} else {
  include(STYLESHEETPATH.'/single-default.php');
}
?>

条件分岐を使ってカテゴリーごとで表示するテンプレートファイルを変更させます。
カテゴリーに当てはまらない場合はsingle-default.phpを使用します。

index.phpから

コンテンツA

コンテンツB

コンテンツC

関連記事

WordPressをいじる
【ワードプレス 使い方】WordPress 5.4 アダレイ update
【ワードプレス プラグイン】ブログのデータをバックアップする
テーマのカスタマイズ
【ワードプレス デザイン】フッターにサイドバー情報を表示する
WordPressを使ってみる
ワードプレス・テーマをカスタマイズ
【ワードプレス SEO】プラグインYoast SEO導入までの解説
WordPress5.5アップデートは新機能追加で新リリース
ワードプレス固定ページ【テーマ オリジナル】
index.phpと連携するphpファイル【WordPress】
【ワードプレス】プラグインを使わずページャーを作る
記事のアイキャッチ画像を使う
検索結果用のページsearch.php
アーカイブ・ページ