WordPressは既存テーマを使うだけでもサイトは作れます。
しかし、本当に自由な表現や設計を行うためには、「オリジナルテーマ」を作れることが大きな武器になります。

本講では、サンプルサイトを一から作成しながら、WordPressテーマの基本構造と仕組みを実践的に学んでいきます。「なんとなく使う」から「理解して使う」へ。その一歩として、まずは最小構成のテーマを作るところから始めましょう。

この講座で学ぶこと

テーマの基本構造（ファイル構成）やテンプレートの仕組み、 WordPress特有の関数の使い方、 静的HTMLをWordPress化する方法を解説しています。

WordPress化するサンプルサイト

以下のサイトを、サンプルにしてワードプレス化にしていきます。

WordPressの最小構成テーマを作成する

ここからは、WordPressテーマ作成の第一歩として、いちばんシンプルなテーマの形を作っていきます。WordPressのテーマというと複雑に見えますが、最初からたくさんのファイルを用意する必要はありません。まずは、テーマとして認識される最低限の形を作り、そこから少しずつ機能を広げていく流れがおすすめです。WordPressのクラシックテーマでは、最小構成として style.css と index.php の2つが基本になります。

HTMLサイト → WordPressテーマに変換する

これまでに作成してきたHTMLサイトをベースに、WordPressで動作するテーマへと変換していきます。WordPressのテーマは特別な仕組みに見えますが、実際には HTMLで作ったページをベースにして構成されます。index.html を複製して、index.php に変更してみましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>サイトのタイトル</title>
</head>
<body>
  <div class="wrap">
    <header class="header">
      <h1 class="logo">ロゴマーク</h1>
      <nav>
        <ul class="nav">
          <li><a href="#">HOME</a></li>
          <li><a href="#">会社概要</a></li>
          <li><a href="#">業務案内</a></li>
          <li><a href="#">お問い合わせ</a></li>
        </ul>
      </nav>
    </header>

    <section class="hero">
      <img src="./images/main.jpg" />
    </section>

    <section class="news-section">
      <div class="news-heading">
        <h2>NEWS</h2>
        <p>お知らせ</p>
      </div>

      <div class="news-list">
        <article class="news-item">
          <time class="date" datetime="2030-02-01">2030.02.01</time>
          <span class="tag">お知らせ</span>
          <p>Webデザインニュースサイト「ウェブマガジン」に取材いただきました</p>
        </article>
        <article class="news-item">
          <time class="date" datetime="2030-01-25">2030.01.25</time>
          <span class="tag">制作実績</span>
          <p>Smoothiesta様のWebサイトを制作いたしました</p>
        </article>
        <article class="news-item">
          <time class="date" datetime="2030-01-20">2030.01.20</time>
          <span class="tag">採用</span>
          <p>Webデザイナーを1名募集中です！</p>
        </article>
      </div>

    </section>

    <section class="cards">
      <div class="card"></div>
      <div class="card"></div>
      <div class="card"></div>
    </section>

    <footer class="footer">
      <p>All right reserved.2026</p>
    </footer>
  </div>
</body>
</html>

style.css の著作権・テーマ情報

WordPressのテーマでは、style.css の先頭にテーマ情報（ヘッダーコメント）を記述します。その下に続けて、デザイン構成を記述していきます。

/*
Theme Name: テーマの名前
Author: あなたの名前
Description: 学習用テーマ
Version: 1.0
*/
* {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 body {
     font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
     background: #f3f3f3;
     color: #222;
     line-height: 1.6;
 }

 img {
     max-width: 100%;
     display: block;
 }

 a {
     color: inherit;
     text-decoration: none;
 }

 .wrap {
     width: min(1240px, calc(100% - 40px));
     margin: 20px auto;
     background: #fff;
 }

 .header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 34px 44px 24px;
     background: #dcdcdc;
 }

 .logo {
     font-size: 24px;
     font-weight: 700;
     letter-spacing: 0.04em;
 }

 .nav {
     display: flex;
     gap: 28px;
     list-style: none;
     font-size: 18px;
     font-weight: 700;
 }

 .hero img {
     width: 100%;
     height: 340px;
     object-fit: cover;
 }

.message{
	padding: 20px 28px 42px;
	text-align:center;
	
}


 .news-section {
     display: grid;
     grid-template-columns: 250px 1fr;
     gap: 28px;
     padding: 44px 28px 42px;
     align-items: start;
 }

 .news-heading h2 {
     font-size: 34px;
     line-height: 1;
     color: #33278c;
     margin-bottom: 10px;
     letter-spacing: 0.03em;
 }

 .news-heading p {
     font-size: 16px;
     color: #33278c;
     font-weight: 700;
 }

 .news-list {
     display: grid;
     gap: 18px;
 }

 .news-item {
     display: grid;
     grid-template-columns: 88px 84px 1fr;
     gap: 18px;
     align-items: center;
     font-size: 16px;
 }

 .date {
     color: #555;
 }

 .tag {
     display: inline-flex;
     justify-content: center;
     align-items: center;
     min-height: 30px;
     padding: 4px 12px;
     border-radius: 999px;
     background: #e6e6e6;
     font-size: 13px;
     font-weight: 700;
     color: #444;
     white-space: nowrap;
 }

 .news-banner {
     background: #000;
     min-height: 470px;
 }

 .cards {
     display: grid;
     grid-template-columns: 1fr 1fr 1fr;
     gap: 72px;
     padding: 0 28px 42px;
 }

 .card {
     background: #dcdcdc;
     aspect-ratio: 1 / 0.82;
 }


 .footer {
     background: #dcdcdc;
     text-align: center;
     padding: 58px 20px 50px;
     font-size: 28px;
     font-weight: 700;
 }

 @media (max-width: 1024px) {
     .header {
         flex-direction: column;
         align-items: flex-start;
         gap: 18px;
     }

     .nav {
         flex-wrap: wrap;
         gap: 16px 20px;
         font-size: 16px;
     }

     .news-section,
     .cards {
         grid-template-columns: 1fr;
     }

     .news-banner,
     .card--tall {
         min-height: 300px;
     }
 }

 @media (max-width: 640px) {
     .wrap {
         width: min(100%, calc(100% - 20px));
         margin: 10px auto;
     }

     .header {
         padding: 24px 20px 20px;
     }

     .logo {
         font-size: 22px;
     }
	 
	  .nav {
     gap: 28px;
     font-size: 14px;
     font-weight: 400;
 }
	 

     .hero img {
         height: 220px;
     }

	 .message{
		 text-align:left;
	 }
	 
     .news-section {
         padding: 28px 20px 28px;
         gap: 20px;
     }

     .news-heading h2 {
         font-size: 30px;
     }

     .news-item {
         grid-template-columns: 1fr;
         gap: 8px;
     }

	 
	 .tag{
		 
		 width:20%;
		 text-align:left!important;
		 font-size: 12px;
		 padding: 4px 10px;
	 }
	 
     .cards {
         padding: 0 20px 28px;
         gap: 24px;
     }

     .footer {
         font-size: 20px;
         padding: 36px 16px;
     }

index.phpの役割について

index.htmlを複製して、index.phpに変換し、以下のファイルを用意します。WordPressにおける index.php は、トップページ専用のファイルではなく、どのページにも対応できる汎用テンプレートです。WordPressには、ページの種類ごとに

  • 固定ページ → page.php
  • 投稿ページ → single.php

といった専用テンプレートが存在します。これらのテンプレートが存在しない場合は、 最終的に index.php が使われる仕組みになっています。つまり、すべてのページの“受け皿”になるファイルと認識しておきましょう。

※ screenshot.pngは、テーマのイメージを表す画像ファイルです。1200×900で作成すると綺麗に出ます。

項目名称
Theme Name:テーマの名前(必須)
Theme URL:テーマのURL
Description:テーマの説明
Author:テーマ制作者の名前
Version:テーマのバージョン

テーマフォルダー

一式揃ったら、テーマフォルダーは、「wp-content > themes」の中に一式をアップロードします。

管理画面から、「外観 > テーマ」の中に、自分が作成したテーマが見えるようになればOKです。

相対パスをWordPress独自の関数に修正する

アクセスしてみましょう。WordPressの最小構成テーマは作成できたのですが、CSSが正しく適用されていません。また画像も表示されない状態になっています。

CSSファイルの相対パスの修正

■修正前
<link rel="stylesheet" href="style.css">
 
■修正後
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">

画像ファイルのパスの修正

画像ファイルのパス(src=の部分)も以下のように修正します。

■修正前
<img src="images/main.jpg" alt="メインイメージ">
 
■修正後
<img src="<?php echo get_template_directory_uri(); ?>/images/main.jpg"  alt="alt="メインイメージ"">