Contents

1 この章で学ぶこと。

この章で学ぶこと。

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

テンプレートを追加する

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

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

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

最後に、カテゴリーごとの一覧を表示するテンプレートcategory.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の大きなメリットのひとつです。

category.phpを作成する

WordPressでは、投稿にカテゴリーを設定することができます。たとえば「お知らせ」「採用情報」「制作実績」などのカテゴリーを作っておくと、それぞれのカテゴリーに属する記事だけを一覧で表示できます。このカテゴリー一覧ページを表示するためのテンプレートが、category.php です。

たとえば、ニュース記事に「お知らせ」というカテゴリーを設定している場合、そのカテゴリー名をクリックすると、「お知らせ」に属する投稿だけが一覧で表示されます。category.php を作成しておくことで、カテゴリーごとの一覧ページを、テーマ側で自由にデザインできるようになります。

category.phpコード



<?php get_header(); ?>
<div class="site-wrapper">
	
<div class="site-container">
  <div class="wrap">
    <div class="content">
      <div class="main">

        <h1><?php single_cat_title(); ?></h1>
        
        <?php if ( category_description() ) : ?>
          <p><?php echo category_description(); ?></p>
        <?php endif; ?>

        <?php if ( have_posts() ) : ?>
          <div class="news-list">
            <?php while ( have_posts() ) : the_post(); ?>
              <article class="news-item">
                <time class="date" datetime="<?php echo esc_attr( get_the_date('Y-m-d') ); ?>">
                  <?php echo esc_html( get_the_date('Y.m.d') ); ?>
                </time>

                <h2 class="title">
                  <a href="<?php the_permalink(); ?>">
                    <?php the_title(); ?>
                  </a>
                </h2>
              </article>
            <?php endwhile; ?>
          </div><!----main///////END---->
		  
		  <div class="pagination">
            <?php the_posts_pagination(); ?>
          </div>

        <?php else : ?>
          <p>記事がありません。</p>
        <?php endif; ?>

      </div><!----news-list//////END---->
	  </div><!----content///////END---->
	</div><!----wrap///////END---->
	</div><!----site-container///////END---->
</div><!----site-wrapper///////END---->



<?php get_footer(); ?>

`カテゴリーのページが表示される`

投稿が増えていけば、特に問題はないのですが投稿数が少ない場合、コンテンツ部分が短く、footerがページ最下部へ配置されないことがあります。.site-wrapperなどfooterを除外したすべてのセクションを包囲し、以下のcssを追加することでfooterが下へ固定されます。参考にしてください。

CSSを追記する

/* 新しく追加：全体を包むラッパー */
.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 画面全体の高さを確保 */
}