この章で学ぶこと。

DAY.1では、HTMLで作成したWebサイトを、ワードプレスのテーマにすることができました。こちらの講座は、DAY.1の続きになっていますので、必ずDAY.1から始めてくださいね。DAY.1は、こちらから▶︎

テンプレートを追加する

この章では、WordPressテーマに新しいテンプレートファイルと関数ファイルを追加します。今回追加するファイルは、以下の3つです。テンプレートの追加方法は、作成した後に、FTPを使って接続しテーマフォルダー内へ追加していきます。

ファイル名役割
single.php投稿記事の個別ページを表示するためのテンプレート
sidebar.php投稿ページなどに表示するサイドバー用のテンプレート
functions.phpテーマの機能を追加・設定するための関数ファイル

single.php は、投稿記事をクリックしたときに表示されるページです。
sidebar.php は、記事ページの右側などに差し込む共通パーツとして使用します。
functions.php は、アイキャッチ画像の有効化や、テーマ独自の機能を追加するために使用します。

まずは、この3つのファイルをテーマフォルダー内に追加していきましょう。

single.phpを作成する

single.php は、投稿（記事）をクリックしたときに表示される、記事専用のテンプレートです。

トップページには、最新3件のニュースが表示されるようになりました。次は、そのニュースタイトルをクリックした先の、記事詳細ページを作成していきます。NEWSの記事は、管理画面の「投稿」から作成しましたが、投稿した記事を個別ページとして表示するには、single.php というテンプレートファイルが必要になります。

今回は、記事本文を表示するメインエリアと、右側にサイドバーを配置するレイアウトで single.php を作成していきます。

sidebar.php

single.phpの右側へsidebar.phpを組み込みます。左側には、「投稿」で追加した記事が表示させる仕組みを作ります。

sidebar.phpにはバナーや広告を入れることができます。また、後ほど解説する「ウィジェット」を使うことで、自由なバーツを入れ込むことも可能です。

このファイルは、 「1件の記事を表示するテンプレート」です。「投稿記事の詳細ページ」を表示するため、記事タイトル・日付・本文などを、WordPressのデータから取得して表示しています。また、get_header() や get_footer() を使うことで、共通部分を読み込み、効率よくページを構成しています。

single.phpコード

<?php get_header(); ?>

<div class="site-container">
  <div class="wrap">
    <div class="content">
      
		<div class="main">
        <?php if ( have_posts() ) : ?>
          <?php while ( have_posts() ) : the_post(); ?>

            <article class="post">
              <h1><?php the_title(); ?></h1>
              <time datetime="<?php echo get_the_date('c'); ?>">
                <?php echo get_the_date('Y.m.d'); ?>
              </time>
              <?php the_content(); ?>
            </article>

          <?php endwhile; ?>
        <?php endif; ?>
 </div>

      <aside class="sidebar">
<?php get_sidebar(); ?>
      </aside>
    </div>
  </div>
</div>


<?php get_footer(); ?>

sidebar.phpを作成する

サイドバーは、記事の横に表示される補足情報のエリアです。後ほど解説するウィジェットを利用することができます。

sidebar.phpコード

<aside class="sidebar">
<?php dynamic_sidebar( 'sidebar' ); ?>
</aside>

functions.php(テーマのための関数ファイル)を作成する

テーマに機能を追加するファイルです。HTMLやCSSではできない機能の追加・設定の変更・拡張などを行います。今回は、ページタイトルを自動で入るように記述、ウィジェットエリアを追加、スラッグごとにbodyにクラスを付加するなど最もシンプルに最小機能を追加してあります。

functions.phpコード

<?php
add_theme_support( 'title-tag' );//タイトルを自動で入れる//
add_theme_support( 'post-thumbnails' );

register_nav_menus( array(
  'global' => 'グローバルメニュー',
) );

// ウィジェットエリア（サイドバー）
register_sidebar( array(
  'name' => 'サイドバー',
  'id'   => 'sidebar',
) );


//スラッグごとにbodyにクラスを付加する
//
function add_slug_body_class($classes) {
  if ( is_singular() ) {
    global $post;
    if ( isset($post->post_name) ) {
      $classes[] = $post->post_name;
    }
  }
  return $classes;
}
add_filter('body_class', 'add_slug_body_class');

テーマファイルが追加される

以上で、3枚のテンプレートを追加することができました。FTPで接続し「テーマフォルダー内」へアップロードします。

管理画面を、再読み込みしてみましょう。テーマファイルが、増えていれば、OKです。

CSSの記述を追加する

single.phpの右側へsidebarが配置されるように、スタイルシートも記述していきます。先ほどのsingle.phpに、クラスセレクタを充てていますので、それを参考にスタイルシートも記述します。

/* =========================
   single・page・sidebar
========================= */

.content {
  display: flex;
  gap: 50px;
}

.main {
  flex: 1;
	line-height:1.8rem;
}
.sidebar {
  width: 300px;
}

@media (max-width: 768px) {
	
  .content {
    flex-direction: column;
	  padding:0 10px;
  }

  .sidebar {
   width: min(100%, calc(100% - 20px));
	  margin-bottom:20px;
  }
}

ニュースのページが表示される

右側は、sidebarのスペースが保たれた状態で、ニュース(投稿のページ)が、表示されています。

sidebarにウィジェットを表示する

これまでに sidebar.php を作成し、dynamic_sidebar() を記述しました。
次は、実際にサイドバーの中身を「管理画面」から設定していきます。

ウィジェットとは？

ウィジェットとは、サイドバーなどに表示するパーツのことです。たとえば、以下のようなものがあります。

  • 最近の投稿
  • カテゴリー一覧
  • 検索フォーム
  • カスタムHTML

これらを、コードを書かずに管理画面から追加・変更できるのが特徴です。

ウィジェットの設定方法

外観▶︎ ウィジェット
「＋」のボタンから、バナーや画像を入れてみましょう。後ほど追加する固定ページ(ナビゲーションメニューへのリンク)や、カテゴリー、アーカイブなども入れることができます。


ウィジェットを追加したら、実際のサイトを確認してみましょう。

記事ページを開くと、右側のサイドバーにウィジェットが表示されているはずです。サイドバーは、クライアント自身が更新することも多い部分です。そのため、「コードを書かなくても内容を変更できる」というのが、WordPressの大きなメリットのひとつです。