ブログテーマを充実させよう！ WordPress初心者のためのテーマ作成基本 – サンプルダウンロードつき

この記事を読む前に

前回のテーマを発展させます

この記事は前回作成したテーマをもとに解説していきます。まだご覧になっていない方は、ぜひそちらを先に参照してください！

サンプルテーマのダウンロード

今回作成するテーマは以下からダウンロードすることができます。実際にテーマとして利用することもできます。

ライセンスはGNU General Public Licenseです。ご自由にお使いください。

投稿にカテゴリーとタグを表示しよう

それではさっそく本題に入りましょう。最初は、個別ページで記事の先頭に、カテゴリーやタグのリンクを表示してみたいと思います。

投稿が属しているカテゴリーやタグを表示しているサイトは多いですね。読者が同じようなテーマの記事を巡回したいときに便利な機能です。

カテゴリーをクリックしたときは、そのカテゴリーに属する投稿の一覧を、タグをクリックしたときはそのタグがつけられている投稿の一覧を表示します。

カテゴリーのリンクを表示しよう

投稿が属するカテゴリーのリンクを表示するには、the_category()という関数を使用します。個別ページはsingle.phpのテンプレートが適用されていますので、このファイルを修正しましょう。

<div id="primary" class="l-main content-area">
  <main id="main" class="site-main" role="main">

    <?php while( have_posts() ) : the_post(); ?>    
      <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
        <header class="entry-header">
          <time class="tiny-text entry-date"><?php echo get_the_date(); ?></time>
          <?php the_title( '<h1 class="heading-big entry-title">', '</h1>' ); ?>

          <div class="category-tag-links">
            <div class="category-links">
              <span class="category-label">カテゴリー</span>
              <?php the_category( ' / ' ); ?>
            </div>
          </div>
        </header>

        <!-- 以下省略 -->

今回はタイトルの下に表示しますので、the_title()の後に記載しました。10～15行目がカテゴリーを表示する処理です。

the_category()は、第1引数にセパレータ（区切り文字）を渡すことができます。今回は' / 'を渡すことで、スラッシュを用いて区切ることにしました。ただし、スラッシュだけだと若干窮屈なので、両側にスペースを入れてあります。

また、カテゴリーのリンクだけだと何が表示されているかよくわからないので、「カテゴリー」というラベルを付けることにしました。<span class="category-label">カテゴリー</span>が該当部分です。ここを変えれば、文字ではなくアイコンを表示することもできます。

タグのリンクを表示しよう

投稿につけられているタグのリンクを表示するには、the_tags()という関数を使用します。カテゴリーのリンクに続けて表示してみましょう。

<div class="category-tag-links">
  <div class="category-links">
    <span class="category-label">カテゴリー</span>
    <?php the_category( ' / ' ); ?>
  </div>

  <?php 
    the_tags( 
      '<div class="tag-links"><span class="tag-label">タグ</span>', 
      ' / ',
      '</div>'
    ); 
  ?>
</div>

なんだかカテゴリーとはずいぶん実装の仕方が異なりますね。the_tags()は次のように、引数を3つ取ります。

<?php 
  the_tags(
    // タグのリンク一覧の前に表示する文字列 
    '<div class="tag-links"><span class="tag-label">タグ</span>',
    // タグを区切るための文字列
    ' / ',
    // タグのリンク一覧の後に表示する文字列
    '</div>'
  ); 
?>

HTMLのタグまで含めて関数の中に入れることで、「タグがある場合はそれを囲む<div>やラベルを表示し、ない場合は一切何も表示しない」という理想的な実装を簡単に実現することができます。the_title()と発想が同じですね。

これでカテゴリーとタグのリンクを表示することができました。CSSによるスタイルは適宜当ててください。

アーカイブページにタイトルや説明文を表示しよう

カテゴリーのリンクをクリックすると、そのカテゴリーに属する記事の一覧が表示されます。この一覧は「カテゴリーアーカイブ」と呼ばれます。

カテゴリーアーカイブ用のテンプレートは用意していませんので、現在はindex.phpが使用されます。タグについても、また日付アーカイブについても同様です。したがって投稿一覧ページと全く同じ見た目で表示されていますね。

このままでも大きく問題にはならないのですが、見た目が同じだと現在どこにいるかわかりにくいので、アーカイブページ用のタイトルや説明文を表示することを考えていきましょう。

このように、どのカテゴリーの記事一覧なのかを表示すれば、今何を閲覧しているのか明確になり、ユーザが迷子になるのを防ぐことができます。

アーカイブページにはいくつかの種類が存在する

アーカイブページには、大きく次の6つのタイプが存在します。

• カテゴリーアーカイブ
• タグアーカイブ
• 日付アーカイブ
• カスタム投稿アーカイブ
• カスタムタクソノミーアーカイブ
• 作成者アーカイブ

今のところこのテーマでは、色のついた最初の3つのアーカイブしか使用していませんので、これらを中心に解説していきます。

今回、カテゴリーとタグアーカイブを表示しているときは

という見出しを、日付のアーカイブを表示しているときは

という見出しを、記事一覧の上に表示する仕様にしたいと思います。

これを実現するには、大きく分けて次の2つの方法があります。

• それぞれのアーカイブ専用のテンプレートを用意する
• 条件分岐タグを使って実装する

アーカイブページは、それぞれ独自のテンプレートを適用することができます。たとえばカテゴリーアーカイブならcategory.php、タグアーカイブならtag.phpなどとなります。修正する箇所が多い場合はテンプレートを分けてもよいですが、今回は見出し部分のみの変更なので、条件分岐を使って実装してみたいと思います。

index.phpに見出しを表示する処理を追加しよう

現在、index.phpは主に次の6つのケースで使われています。

• ブログ投稿インデックスページ（Home）
• カテゴリーアーカイブページ
• タグアーカイブページ
• 日付アーカイブページ
• 検索ページ
• 404ページ

このうち、見出しは色のついた3つのページのみで表示しますので、それら以外のページでは表示されないように対応しなければなりません。検索ページ・404ページについては、後で専用のテンプレートを用意しますので、残る「ブログ投稿インデックスページ」での表示を防いでおきましょう。

ブログ投稿ページかどうかはis_home()で判定することができます。

<?php
  if ( ! is_home() ) {
    // 見出しの表示処理
  }
?>

is_home()がfalseのときに見出しを表示するようにすればよさそうですね。

今度はこの中に見出しを出力する処理を書いていきましょう。アーカイブページで見出しを表示するには、the_archive_title()を使用します。index.phpを次のように修正してみましょう。

index.phpに見出しを出力する処理を追加

<div id="primary" class="l-main content-area">
  <main id="main" class="site-main" role="main">
    <?php if( have_posts() ) : ?>
      <?php if( ! is_home() ) : ?>
        <header class="archive-header">
          <?php 
            the_archive_title( '<h1 class="archive-title">「', '」の記事一覧</h1>' );
          ?>
        </header>
      <?php endif; ?>

      <div class="entry-list">
        <?php while( have_posts() ) : the_post(); ?>

        <!-- 以下省略 -->

the_archive_title()は第1引数に「タイトルの前に出力する文字列」を、第2引数に「タイトルの後に出力する文字列」を渡すことができます。先ほど出てきたthe_tags()と似ていますね。今回はタイトルなので<h1>タグで囲み、さらに「○○の記事一覧」と表示されるようにしました。

この結果を確認すると、次のようになります。

本当はタイトルだけ表示したかったのですが、「カテゴリー: 」というラベルが挿入されました。タグアーカイブページでは「タグ: 」、日付アーカイブページでは「月別: 」と表示されます。

このままでも問題ない場合は次のステップを飛ばしてください。単に名前だけを表示したい場合は、フィルターを使ってラベルが表示されないようにします。

the_archive_title()が出力する「カテゴリー: 」「タグ: 」「月別: 」を除去しよう

the_archive_title()関数はとても便利なのですが、なぜか自動で追加されるラベルを取り除く仕組みが用意されていません……。自前で同じような関数を作れば解決できますが、今回はフィルターを使って除去してみたいと思います。

functions.phpに、以下のようなコードを記載してください。

/*
 * Filter the archive title to remove the label of the title.
 */
function whitesnow_get_the_archive_title( $title ) {
  if ( is_category() ) {
    $title = single_cat_title( '', false );
  } elseif ( is_tag() ) {
    $title = single_tag_title( '', false );
  } elseif ( is_month() ) {
    $title = get_the_date( 'Y年n月' );
  }

  return $title;
}

add_filter( 'get_the_archive_title', 'whitesnow_get_the_archive_title' );

the_archive_title()は、タイトルを取得するために内部でget_the_archive_title()という関数を使用しています。この関数がタイトルを返すときに実行するフィルターが'get_the_archive_title'です。

フィルターがうまく適用されていれば、次の画像のようにラベルが表示されなくなっているはずです。

コードの詳しい説明は別の機会に行いたいと思います。

カテゴリー・タグの説明文を入力しよう

カテゴリー一覧を表示するとき、どのような基準でそのカテゴリーが分類されているのか、どんな記事が含まれているのかを簡単に説明するとユーザーフレンドリーかもしれません。

カテゴリーの説明文を入力するにはまず、管理画面の［投稿］から1［カテゴリー］を選びます。現在登録されているカテゴリー一覧が現れますので、説明文を編集したいカテゴリーの名前をクリックします（2）。

カテゴリーの編集画面が現れますので3の［説明］を編集します。書き終えたら、4の［更新］ボタンを押して変更を反映してください。

タグの説明が必要な場合は、同じような手順で編集することができます。［投稿］から［タグ］を選んでください。

カテゴリー・タグの説明文を表示しよう

カテゴリーやタグの説明文を表示するには、the_archive_description()という関数を用います。

<div class="archive-description"><?php the_archive_description(); ?><div>

ただし、説明文は入力されていない場合があり、この場合は空の<div>が表示されることになります。特に大きな問題にはならないのですが、未入力の時は<div>そのものも表示しないようにできると最善です。

これを踏まえ、次のように存在確認をしながら出力してみます。

<?php if ( ! is_home() ) : ?>
  <header class="page-header">
    <?php 
      the_archive_title( '<h1 class="page-title">「', '」の記事一覧</h1>' );

      if ( is_category() || is_tag() ) {
        $desc = get_the_archive_description();
        
        if ( $desc ) {
          echo '<div class="page-description">' . $desc . '</div>';
        } 
      }
    ?>
  </header>
<?php endif; ?>

まず、is_category()でカテゴリーアーカイブか、is_tag()でタグアーカイブかを判定します（「作者」にも説明機能がありますが、ここでは対象としません）。

次に、get_the_archive_description()を用いて、カテゴリーまたはタグの説明文を文字列として取得します。最後に、この説明文が存在するとき（空の文字列ではないとき）に、echoを用いてタグとともに出力を行います。

説明文を表示することができました！　スタイルについては適宜調整を行ってください。

/*
 * Disable wpautop in term description.
 */
remove_filter( 'term_description','wpautop' );

検索結果ページを用意しよう

検索フォームにキーワードを入れて実行すると、マッチした場合は検索結果一覧が表示されます。現在はindex.phpが結果出力を担っていますが、「何で検索したか」「何件見つかったか」という情報を表示できると、ユーザにとってより親切でしょう。

また、検索に何もヒットしなかった場合は、単に「記事が見つからなかった」と知らせるだけでなく、「〇〇で検索しましたが、何も見つかりませんでした」と伝えられた方が理想的です。

これらを実現するには、アーカイブの見出しと同じようにindex.phpを条件で分岐させればよさそうです。

ところが、index.phpとはいくつかの点が異なるため、分岐が多くなってしまう恐れがあります。そこで今回は、新しくsearch.phpを作って実装していきます。search.phpは検索結果を表示するための専用のテンプレートです。

search.phpはindex.phpが行っている主要な機能を持っていなければなりません。たとえば投稿一覧を表示するためのループや、検索結果が多い場合はページネーションも必要になります。したがって、index.phpをコピーして必要な部分を改変していくのがよさそうですが、同じような処理が分散してしまうのを防ぐため、一部共通化することを考えてみましょう。

テンプレートパーツを利用しよう

テンプレートパーツ（Template Part）とは、テンプレートの一部を別ファイルとして保存し、複数のテンプレートで利用することのできる機能です。たとえば今回、index.phpとsearch.phpで、「投稿の一覧を表示する」部分は全く同じですね。そこで、この処理をテンプレートパーツにして読み込むようにし、共有化しましょう。

処理を共有しておけば、後で修正が必要になったときに複数のファイルを編集する必要がなくなり、修正し忘れが起きにくくなるほか、コードが読みやすくなるなどのメリットがあります。

今回はループの中の、投稿1つを表示している部分をテンプレートパーツ化してみましょう。

まず、テーマフォルダの中に、パーツを格納するためのフォルダ、template-partsを作成します。このフォルダの中に、投稿用のパーツをまとめるためのpostというフォルダを作ります。

フォルダができたたら、postの中にcontent.phpというファイルを作成し、保存してください。

これで準備が調いました。フォルダ構成や名前はすべて任意です。この通りにする必要はありませんので、自分でテーマを作るときは扱いやすいように構成してください。

さて、今度は中身を記入していきましょう。まず、index.phpから該当箇所をcontent.phpに移動します。

index.php

<?php get_header(); ?>

<div id="primary" class="l-main content-area">
  <main id="main" class="site-main" role="main">
    <?php if ( have_posts() ) : ?>
      <?php if ( ! is_home() ) : ?>
        <header class="page-header">
          <?php 
            the_archive_title( '<h1 class="page-title">「', '」の記事一覧</h1>' );

            if ( is_category() || is_tag() ) {
              $desc = get_the_archive_description();

              if ( $desc ) {
                echo '<div class="page-description">' . $desc . '</div>';
              } 
            }
          ?>
        </header>
      <?php endif; ?>

      <div class="entry-list">
        <?php while ( have_posts() ) : the_post(); ?>
          <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
            <header class="entry-header">
              <time class="tiny-text entry-date"><?php echo get_the_date(); ?></time>
              <?php the_title( 
                '<h2 class="heading-big entry-title"><a href="' . esc_url( get_permalink() ) . '">',
                '</a></h2>'
              ); ?> 
            </header>

            <?php if( has_post_thumbnail() ) : ?>
              <div class="entry-thumbnail">
                <a href="<?php the_permalink(); ?>">
                  <?php the_post_thumbnail( 'post-thumbnail' ); ?>
                </a>
              </div>
            <?php endif; ?>

            <div class="entry-content">
              <?php the_content( '<span class="btn btn-primary">Continue Reading</span>' ); ?>
            </div>
          </article>
        <?php endwhile; ?>
      </div>
      
      <?php
        the_posts_pagination ( array(
          'screen_reader_text'  => '投稿のナビゲーション',
        ) );
      ?>
    <?php else: ?>
      <section class="no-result not-found">
        <header class="page-header">
          <h1 class="heading-big page-title">Nothing Found</h1>
        </header>

        <div class="page-content">
          おさがしの記事は見つかりませんでした。 
        </div>
      </section>
    <?php endif; ?>
  </main>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

1つの投稿を出力しているのは24～44行目ですね。ここの部分を切り取り、content.phpに移動してください。

content.php

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <header class="entry-header">
    <time class="tiny-text entry-date"><?php echo get_the_date(); ?></time>
    <?php the_title( 
      '<h2 class="heading-big entry-title"><a href="' . esc_url( get_permalink() ) . '">',
      '</a></h2>'
    ); ?> 
  </header>

  <?php if( has_post_thumbnail() ) : ?>
    <div class="entry-thumbnail">
      <a href="<?php the_permalink(); ?>">
        <?php the_post_thumbnail( 'post-thumbnail' ); ?>
      </a>
    </div>
  <?php endif; ?>

  <div class="entry-content">
    <?php the_content( '<span class="btn btn-primary">Continue Reading</span>' ); ?>
  </div>
</article> 

これでcontent.phpは完成です。

今度はindex.phpでこのファイルを使えるようにしなければなりません。先ほど切り取った箇所に、get_template_part()という関数を記載して読み込みます。

<?php while ( have_posts() ) : the_post(); ?>
  <?php get_template_part( 'template-parts/post/content' ) ?>
<?php endwhile; ?>

第1引数にファイルまでのパスを記載するのですが、指定の仕方が少し特殊ですので注意してください。ファイルの「.php」を除いた部分まで記述します。

これでcontent.phpが読み込めるようになりました。このままでも構いませんが、phpタグがたくさんあって読みにくいので、1つにまとめたいと思います。

<?php 
  while ( have_posts() ) {
    the_post();
    get_template_part( 'template-parts/post/content' );
  }
?>

すっきりしましたね。動作に問題がないかどうか、サイトを確認してみてください。

search.phpを作成しよう

続けて、search.php本体の実装に入ります。テーマフォルダの中にsearch.phpを作成し、index.phpの中身をそのままコピーしてください。あるいはindex.phpのファイル自体を複製し、ファイル名を変更しても構いません。

<?php get_header(); ?>

<div id="primary" class="l-main content-area">
  <main id="main" class="site-main" role="main">
    <?php if ( have_posts() ) : ?>
      <?php if ( ! is_home() ) : ?>
        <header class="page-header">
          <?php 
            the_archive_title( '<h1 class="page-title">「', '」の記事一覧</h1>' );

            if ( is_category() || is_tag() ) {
              $desc = get_the_archive_description();

              if ( $desc ) {
                echo '<div class="page-description">' . $desc . '</div>';
              } 
            }
          ?>
        </header>
      <?php endif; ?>

      <div class="entry-list">
        <?php 
          while ( have_posts() ) {
            the_post();
            get_template_part( 'template-parts/post/content' );
          }
        ?>
      </div>
      
      <?php
        the_posts_pagination ( array(
          'screen_reader_text'  => '投稿のナビゲーション',
        ) );
      ?>
    <?php else: ?>
      <section class="no-result not-found">
        <header class="page-header">
          <h1 class="heading-big page-title">Nothing Found</h1>
        </header>

        <div class="page-content">
          おさがしの記事は見つかりませんでした。 
        </div>
      </section>
    <?php endif; ?>
  </main>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

現在のindex.phpのコードです。これを検索結果ページ用に修正していきましょう。

まず、アーカイブページ用の見出し部分を出力している6～22行目までが不要ですので、削除してください。次に、この削除した部分に「何で検索したか」という情報を表示する処理を書いていきます。

検索ワードを表示するには、get_search_query()という関数を使用します。

<header class="page-header">
  <h1 class="page-title">
    「<span><?php echo get_search_query(); ?></span>」で検索した結果
  </h1>
</header>

とても簡単ですね。これだけで検索ワードを検索結果に表示することができます。なお、<span>を入れているのは、CSSで色を変えたり太字にしたりすることを想定してのことです。

さらに、検索に何件の投稿がヒットしたかも表示してみます。この数は$wp_queryというグローバル変数の、found_postsというプロパティが持っています。

<header class="page-header">
  <h1 class="page-title">「<span><?php echo get_search_query(); ?></span>」で検索した結果</h1>
  <p class="page-description">
    <span><?php echo $wp_query->found_posts; ?></span>件の記事が見つかりました。
  </p>
</header>

$wp_query->found_postsをechoすれば、ヒットした件数を表示することができます。くわしくはこのライブラリを参照してください。

検索結果画面らしくなりましたね。スタイルは適宜調整してください。

検索にヒットしなかったときの表示を変更しよう

検索に何もヒットしなかった場合、今は「おさがしの記事は見つかりませんでした」と表示されます。

これを、「○○で検索しましたが、何も見つかりませんでした」という内容に変えてみましょう。検索ワードはget_search_query()で取得できるのですぐにできそうですね。

<!-- 省略 -->

<?php else: ?>
  <section class="no-result not-found">
    <header class="page-header">
      <h1 class="heading-big page-title">Nothing Found</h1>
    </header>

    <div class="page-content">
      「<span><?php echo get_search_query(); ?></span>」で検索しましたが、何も見つかりませんでした。検索ワードを変えてもう一度お試しください。 
    </div>
  </section>
<?php endif; ?>

<!-- 省略 -->

これで、検索にヒットしなかったときの表示がわかりやすくなりました。

以上で検索画面の実装は完了です！

404ページを作成しよう

404ページとは

404ページは、存在しないURLにアクセスしたときに表示されます。ためしにフロントページのURLの後に適当な文字を入力することで、404ページを表示させてみましょう。

現在404ページ専用のテンプレートは用意していませんので、index.phpが使われます。当然投稿はありませんので、if( have_posts() )は満たされず、else文の後の「おさがしの記事は見つかりませんでした」が表示されることになります。

これでも機能としては十分ですが、「存在しないページにアクセスしている」ことをきちんと伝えてあげるためにも、よりわかりやすくすることを検討してみましょう。

今回は上の画像のような404ページを実装してみます。ナビゲーションやフッターは残し、それ以外の要素はすべて削除したシンプルな構成になっています。

404ページを作成しよう

それでは404ページを作成していきましょう。まず、新しく404.phpをテーマフォルダの中に作り、index.phpの中身を丸ごとコピーして貼り付けてください。または、ファイルをコピーしてリネームしても大丈夫です。

次に、404.phpには不要なコードを削除します。今回はelse文以降があればよいので、大半が不要になります。

<?php get_header(); ?>

<div id="primary" class="l-main content-area">
  <main id="main" class="site-main" role="main">
    <?php if ( have_posts() ) : ?>
      <?php if ( ! is_home() ) : ?>
        <header class="page-header">
          <?php 
            the_archive_title( '<h1 class="heading-medium page-title">「', '」の記事一覧</h1>' );

            if ( is_category() || is_tag() ) {
              $desc = get_the_archive_description();

              if ( $desc ) {
                echo '<div class="page-description">' . $desc . '</div>';
              } 
            }
          ?>
        </header>
      <?php endif; ?>

      <div class="entry-list">
        <?php 
          while ( have_posts() ) {
            the_post();
            get_template_part( 'template-parts/post/content' );
          }
        ?>
      </div>
      
      <?php
        the_posts_pagination ( array(
          'screen_reader_text'  => '投稿のナビゲーション',
        ) );
      ?>
    <?php else: ?>
      <section class="no-result not-found">
        <header class="page-header">
          <h1 class="heading-big page-title">Nothing Found</h1>
        </header>

        <div class="page-content">
          おさがしの記事は見つかりませんでした。 
        </div>
      </section>
    <?php endif; ?>
  </main>
</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

ハイライトした部分はすべて削除します。また、404ページではサイドバーを表示しませんので、50行目のget_sidebar()も消しましょう。

<?php get_header(); ?>

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <section class="no-result not-found">
      <header class="page-header">
        <h1 class="heading-big page-title">Nothing Found</h1>
      </header>

      <div class="page-content">
        おさがしの記事は見つかりませんでした。 
      </div>
    </section>
  </main>
</div>

<?php get_footer(); ?>

ずいぶん簡素になりましたね。

クラス名などは適宜調整してください。たとえばno-resultは不適切ですので、error-404などとするとよいと思います。

最後に、404ページに合わせて文面や内容を調整していきます。今回は「ホームに戻る」リンクも入れてみます。

<div id="primary" class="content-area">
  <main id="main" class="site-main" role="main">
    <section class="error-404 not-found">
      <header class="page-header">
        <h1 class="heading-big page-title">404 Not Found!</h1>
      </header>

      <div class="page-content">
        <p>ページが見つかりませんでした。URLが正しいかどうか確認してください。</p>
        <p><a href="<?php echo home_url( '/' ) ?>">ホームに戻る</a></p>
      </div>
    </section>
  </main>
</div>

完成しました！　内容が少ないので、あっという間にできあがりましたね。

404ページに時間をかけてもあまり意味はありませんが、少しだけ手間をかけておくと、サイトの印象が良くなるかもしれません。

たとえば上の画像はYouTubeの404ページです。サルが表示されることに、ちょっと驚きです 笑

せっかくユーザがサイトを訪れてくれたのに、「ページが見つからなかった」という結果になってしまうと、普通は残念な気持ちになります。しかし、404ページを楽しく表現したり、そこからの導線をきちんと確保することでその気持ちを緩和できれば、離脱を防ぐことが可能になるかもしれません。

今回はトップのナビゲーションを残したので「ホームに戻る」機能だけを実装しましたが、YouTubeのように検索ボックスを用意したり、あるいはおすすめの記事を簡単に表示したりするのもよいかもしれません。