本章で作成するテーマは、以下の通りです。
HTMLで作成した静的ページをオリジナルテーマ化する場合の作成手順例を示します。 静的ページをテーマ化することでヘッダーやフッダー部を共通部品として作成することができますので保守性を向上させることができます。 こでの作成例は、テーマ作成の基本事項を理解するための最小手順を示しています。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
theme-sample フォルダと theme-sample.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-theme-sample // ダウンロードファイルの解凍フォルダ
├─📁 html // 作成するページの HTML フォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ ├─ favicon.ico // アイコンファイル
│ │ ├─ jirou.png // 山田次郎の似顔絵ファイル
│ │ └─ yamada.png // 山田太郎の似顔絵ファイル
│ ├─ index.html // 山田太郎の自己紹介 HTML ファイル／トップページ
│ └─ jirou.html // 山田次郎の自己紹介 HTML ファイル
├─📁 theme-sample // テーマの完成版
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ ├─ favicon.ico // アイコンファイル
│ │ ├─ jirou.png // 山田次郎の似顔絵ファイル
│ │ └─ yamada.png // 山田太郎の似顔絵ファイル
│ ├─ footer.php // ページ共通フッターテンプレートファイル
│ ├─ functions.php // テーマ機能ファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ index.php // 山田太郎 自己紹介（トップページテンプレート）
│ ├─ page-jirou.php // 山田次郎 自己紹介（固定ページテンプレート）
│ ├─ screenshot.png // サムネイル画像ファイル
│ └─ style.css // テーマ情報ファイル
├─ screenshot.png // サムネイル画像ファイル
└─ theme-sample.zip // テーマファイル
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。今回の作成例では、html フォルダに格納されている内容になります。
📁 html // 作成するページの HTML フォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ favicon.ico // アイコンファイル
│ ├─ jirou.png // 山田次郎の似顔絵ファイル
│ └─ yamada.png // 山田太郎の似顔絵ファイル
├─ index.html // 山田太郎の自己紹介 HTML ファイル／トップページ
└─ jirou.html // 山田次郎の自己紹介 HTML ファイル
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>自己紹介</title>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="#hometown">故郷</a></li>
<li><a href="#hobby">趣味</a></li>
<li><a href="jirou.html">次郎</a></li>
</ul>
</nav>
<main>
<h2>氏名</h2>
<p><span>山田 太郎</span></p>
<h2>イラスト</h2>
<div><img src="images/yamada.png" alt="山田太郎"></div>
<h2>生年月日</h2>
<p>1959年2月17日</p>
<h2 id="hometown">出身地</h2>
<p>北海道</p>
<h2>性格</h2>
<p>普段は温厚ですがお腹がすくと怒り出します。<br>お酒が好きで毎日、晩酌をしています。</p>
<h2 id="hobby">趣味</h2>
<ul>
<li>写真撮影</li>
<li>散歩</li>
<li>Webサイト作成</li>
</ul>
<h2 id="foods">好きな食べ物トップ3</h2>
<ol>
<li>お寿司</li>
<li>焼肉</li>
<li>ラーメン</li>
</ol>
</main>
<footer>
<p><small>© 2022 <a href="https://www.hamaya2020.com" target="_blank">情報デザイン工房 濱屋</a>.</small></p>
</footer>
</body>
</html>
HTML（jirou.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>自己紹介</title>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<nav>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="#hometown">故郷</a></li>
<li><a href="#hobby">趣味</a></li>
<li><a href="jirou.html">次郎</a></li>
</ul>
</nav>
<main>
<h2>氏名</h2>
<p><span>山田 次郎</span></p>
<h2>イラスト</h2>
<div><img src="images/jirou.png" alt="山田二郎"></div>
<h2>生年月日</h2>
<p>1959年2月17日</p>
<h2 id="hometown">出身地</h2>
<p>北海道</p>
<h2>性格</h2>
<p>体を動かすのが好きでサッカーをしています。<br>ドライブとキャンプが好きなアウトドア派です。</p>
<h2 id="hobby">趣味</h2>
<ul>
<li>キャンプ</li>
<li>ドライブ</li>
<li>サッカー</li>
</ul>
<h2 id="foods">好きな食べ物トップ3</h2>
<ol>
<li>ステーキ</li>
<li>パスタ</li>
<li>ハンバーグ</li>
</ol>
</main>
<footer>
<p><small>© 2022 <a href="https://www.hamaya2020.com" target="_blank">情報デザイン工房 濱屋</a>.</small></p>
</footer>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-sample）を作成し必要ファイルを元フォルダ（html）などからコピーします。
📁 theme-sample // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ favicon.ico // ファビコンファイル
│ ├─ jirou.png // 山田次郎の似顔絵ファイル
│ └─ yamada.png // 山田太郎の似顔絵ファイル
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-sample
Description: 山田太郎の自己紹介テーマです。
Author: 情報デザイン工房 濱屋
Version: 1.1.0
*/
テーマの機能（functions.php）を作成します。 今回は、空ファイルで（内容はなくても）大丈夫です。
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="icon">
<title>自己紹介</title>
<?php // ★ /head タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<nav>
<ul>
<?php // ★ 相対パスのURL指定は絶対パスに変更 ?>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="#hometown">故郷</a></li>
<li><a href="#hobby">趣味</a></li>
<?php // ★ 相対パスのURL指定は絶対パスに変更 ?>
<li><a href="<?php echo home_url( '/jirou/' ); ?>">次郎</a></li>
</ul>
</nav>
元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。
PHP（footer.php）
<footer>
<p><small>© 2022 <a href="https://www.hamaya2020.com" target="_blank">情報デザイン工房 濱屋.</a></small></p>
</footer>
<?php // ★ /body タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。
PHP（index.php）
<?php // ★ トップページテンプレート ?>
<?php // ★ ヘッダーテンプレートの読み込み ?>
<?php get_header(); ?>
<main>
<h2>氏名</h2>
<p><span>山田 太郎</span></p>
<h2>イメージ絵</h2>
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<div><img src="<?php echo get_template_directory_uri(); ?>/images/yamada.png" alt="山田太郎"></div>
<h2>生年月日</h2>
<p>1959年2月17日</p>
<h2 id="hometown">出身地</h2>
<p>北海道</p>
<h2>性格</h2>
<p>普段は温厚ですがお腹がすくと怒り出します。<br>お酒が好きで毎日、晩酌をしています。</p>
<h2 id="hobby">趣味</h2>
<ul>
<li>写真撮影</li>
<li>散歩</li>
<li>Webサイト作成</li>
</ul>
<h2>好きな食べ物トップ3</h2>
<ol>
<li>お寿司</li>
<li>焼肉</li>
<li>ラーメン</li>
</ol>
</main>
<?php // ★ フッターテンプレートの読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（jirou.html）からヘッダー部とフッダー部を削除し page-jirou.php を作成します。
PHP（page-jirou.php）
<?php // ★ 固定ページ（スラッグ名：jirou）テンプレート ?>
<?php // ★ ヘッダーテンプレートの読み込み ?>
<?php get_header(); ?>
<main>
<h2>氏名</h2>
<p><span>山田 次郎</span></p>
<h2>イメージ絵</h2>
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<div><img src="<?php echo get_template_directory_uri(); ?>/images/jirou.png" alt="山田次郎"></div>
<h2>生年月日</h2>
<p>1959年2月17日</p>
<h2 id="hometown">出身地</h2>
<p>北海道</p>
<h2>性格</h2>
<p>体を動かすのが好きでサッカーをしています。<br>ドライブとキャンプが好きなアウトドア派です。</p>
<h2 id="hobby">趣味</h2>
<ul>
<li>キャンプ</li>
<li>ドライブ</li>
<li>サッカー</li>
</ul>
<h2>好きな食べ物トップ3</h2>
<ol>
<li>ステーキ</li>
<li>パスタ</li>
<li>ハンバーグ</li>
</ol>
</main>
<?php // ★ フッターテンプレートの読み込み ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-sample.zip）を作成します。
📁 theme-sample.zip // テーマファイル（圧縮 zip ファイル）
└─📁 theme-sample // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ ├─ favicon.ico // アイコンファイル
│ ├─ jirou.png // 山田次郎の似顔絵ファイル
│ └─ yamada.png // 山田太郎の似顔絵ファイル
├─ footer.php // ページ共通フッターテンプレートファイル
├─ functions.php // テーマ機能ファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ index.php // 山田太郎 自己紹介（トップページテンプレート）
├─ page-jirou.php // 山田次郎 自己紹介（固定ページテンプレート）
├─ screenshot.png // サムネイル画像ファイル
└─ style.css // テーマ情報ファイル
WordPress のダッシュボードにログインして作成したテーマ（theme-sample.zip）のインストールと有効化を行います。
固定ページ（山田次郎の自己紹介）を表示させるために WordPress のダッシュボードで固定ページの作成を行います。 入力したコンテンツは表示されません。下記の指定があるページを作成すれば大丈夫です。
WordPress サイトを表示して表示内容を確認します。
WordPress のダッシュボードで入力した投稿ページや固定ページの表示が可能なオリジナルテーマの作成手順例を示します。 ここでの作成例は、テーマ作成の基本事項を理解するための最小限の機能にしてありますがメニューやページネーションなどの機能実装も実施していますので参考にしてください。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
theme-simple フォルダと theme-simple.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-theme-simple // ダウンロードファイルの解凍フォルダ
├─html // 作成するページの HTML フォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ └─ noimage.png // アイコン代替画像ファイル
│ ├─ index.htm // トップページ HTML ファイル
│ ├─ page.html // 投稿・固定ページ HTML ファイル
├─📁 theme-simple // テーマファイルの完成版
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 images // 画像フォルダ
│ │ └─ noimage.png // サムネイル代替画像ファイル
│ ├─ footer.php // ページ共通フッターテンプレートファイル
│ ├─ front-page.php // トップページテンプレートファイル
│ ├─ functions.php // テーマ機能ファイルファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ index.php // 汎用テンプレートファイル
│ ├─ page.php // 固定ページテンプレートファイル
│ ├─ page-test.php // 固定ページテンプレート（スラッグ名付き）ファイル
│ ├─ screenshot.png // サムネイル画像ファイル
│ ├─ single.php // 投稿ページテンプレートファイル
│ ├─ style.css // テーマ情報ファイル
│ └─ test.php // 固定ページテンプレート（自由名称）ファイル
├─ screenshot.png // サムネイル画像ファイル
└─ theme-simple.zip // テーマファイル
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、html フォルダに格納されている内容になります。
html // 作成するページの HTML フォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ └─ noimage.png // アイコン代替画像ファイル
├─ index.htm // トップページ HTML ファイル
└─ page.html // 投稿・固定ページ HTML ファイル
HTML（index.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>シンプルテーマ</title>
</head>
<body>
<div class="header">
<header class="container">
<h1><a href="index.html">シンプルテーマ</a></h1>
<nav>
<ul>
<li><a href="index.html">トップ</a></li><li><a href="page.html">固定ページ１</a></li><li><a href="page.html">固定ページ２</a></li>
</ul>
</nav>
</header>
</div>
<div class="main">
<main class="container">
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ１０</h2>
<p class="blog-item__datetime">2022-05-23<br>11:02:03</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ１０</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ９</h2>
<p class="blog-item__datetime">2022-05-23<br>11:01:37</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ９</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ８</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:57</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ８</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ７</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:31</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ７</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ６</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ６</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ５</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ５</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ４</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ４</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ３</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ３</p>
</div>
</div>
</a>
</article>
<article class="blog-list__list-item">
<a href="page.html" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img src="images/noimage.png" alt="イメージなし">
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title">投稿ページ２</h2>
<p class="blog-item__datetime">2022-05-23<br>11:00:05</p>
<p class="blog-item__author">test</p>
</div>
<p class="blog-item__read">投稿ページ２</p>
</div>
</div>
</a>
</article>
<nav class="navigation pagination" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="index.html">2</a>
<a class="next page-numbers" href="index.html">次</a>
</div>
</nav>
</main>
</div>
<div class="footer">
<footer class="container">
<p><small>© 2026 Theme NOTE BOOK.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</body>
</html>
HTML（page.html）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="images/favicon.ico" rel="icon">
<title>シンプルテーマ</title>
</head>
<body class="single">
<div class="header">
<header class="container">
<h1><a href="index.html">シンプルテーマ</a></h1>
<nav>
<ul>
<li><a href="index.html">トップ</a></li><li><a href="page.html">固定ページ１</a></li><li><a href="page.html">固定ページ２</a></li>
</ul>
</nav>
</header>
</div>
<div class="main">
<main class="container">
<h1>投稿ページ１</h1>
<p>段落（投稿ページ1）</p>
<hr class="wp-block-separator">
<h1>H1見出し</h1>
<hr class="wp-block-separator">
<h2>H2見出し</h2>
<hr class="wp-block-separator"/>
<h3>H３見出し</h3>
<hr class="wp-block-separator aligncenter">
<h4>H４見出し</h4>
<hr class="wp-block-separator">
<h5>H５見出し</h5>
<hr class="wp-block-separator">
<h6>H６見出し</h6>
<hr class="wp-block-separator">
<h1>H1見出し</h1>
<h2>H2見出し</h2>
<h3>H３見出し</h3>
<h4>H４見出し</h4>
<h5>H５見出し</h5>
<h6>H６見出し</h6>
<h3>表題１</h3>
<ul>
<li>ああああ</li>
<li>いいいいい
<ol>
<li>ううううう</li>
<li>ええええええええ</li>
<li>おおおおおおおおおおおお</li>
</ol>
</li>
<li>かかかかか</li>
<li>きききき</li>
</ul>
<div class="blog-pages-pagination">
<span class="post-page-numbers current" aria-current="page">ページ 1</span>
<a href="page.html" class="post-page-numbers">ページ 2</a>
<a href="page.html" class="post-page-numbers">ページ 3</a>
</div>
<div class="blog-single_pagination">
<p>« <a href="page.html" rel="prev">投稿ページ０</a></p>
<p><a href="page.html" rel="next">投稿ページ２</a> »</p>
</div>
</main>
</div>
<div class="footer">
<footer class="container">
<p><small>© 2026 Theme NOTE BOOK.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-simple）を作成し必要ファイルを元フォルダ（html）などからコピーします。
📁 theme-simple // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ └─ noimage.png // アイコン代替画像ファイル
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-simple
Description: WordPressのシンプルテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.1.0
*/
テーマの機能（functions.php）を作成します。 テーマがの機能を定義する theme_simple_setup 関数を定義します。 また、この関数を有効化するために add_action('after_setup_theme', 'theme_simple_setup'); を使用してセットアップ時の呼び出し登録を行います。
PHP（functions.php）
<?php
/* ★ テーマ機能設定 */
function theme_setup() {
add_theme_support('title-tag');
add_theme_support('post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
add_theme_support('post-thumbnails');
register_nav_menus(
array(
'primary' => __( 'Primary menu' ),
)
);
}
add_action( 'after_setup_theme', 'theme_setup' );
function sample_enqueue_scripts() {
wp_enqueue_style('sample-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'sample_enqueue_scripts');
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<!doctype html>
<?php // ★ 言語属性を設定 ?>
<html <?php language_attributes(); ?>>
<head>
<?php // ★ 文字コードを設定 ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php // ★ 相対パスのファイル指定は絶対パスに変更 ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php // ★ サイトアイコンを設定 ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php // ★ /head タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_head(); ?>
</head>
<?php // ★ テンプレート種類を設定 ?>
<body <?php body_class(); ?>>
<div class="header">
<header class="container">
<?php // ★ ホーム URL ＆ サイトタイトルを設定 ?>
<?php $h1 = '<a href="' . esc_url( home_url( '/' ) ) . '">' . esc_html( get_bloginfo( 'name' ) ) . '</a>'; ?>
<?php // ★ 投稿・固定ページかを判定→投稿・固定ページ：p タグを使用／投稿・固定ページ以外：h1 タグを使用 ?>
<?php if (is_singular()) { ?>
<p class="h1"><?php echo $h1; ?></p>
<?php } else { ?>
<h1><?php echo $h1; ?></h1>
<?php } ?>
<?php // ★ メニュー定義有無を判定→有り：メニューを展開／無し：固定ページリストを展開 ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
$html = wp_nav_menu( array( // メニューを展開
'theme_location' => 'primary', // 対象メニュー名
'container' => false, // 要素のラップ要素
'items_wrap' => '%3$s', // 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
'fallback_cb' => false, // コールバック関数
'echo' => false, // 編集結果を返却
) );
}
else {
$html = wp_list_pages( array( // 固定ページリストを展開
'title_li' => '', // リストの見出し（ulタグなし）
'echo' => false, // 編集結果を返却
) );
}
?>
<nav>
<ul>
<?php echo $html; ?>
</ul>
</nav>
</header>
</div>
元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。
PHP（footer.php）
<div class="footer">
<footer class="container">
<?php // ★ 著作権表示を自動生成 ?>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
<?php // ★ /body タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除しトップページテンプレート（front-page.php）を作成します。
PHP（index.php）
<?php /* トップページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php // ★ 投稿一覧生成 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() ); // URL
$title = get_the_title(); // タイトル
if ( has_post_thumbnail() ) { // アイキャッチ画像指定有無を判定
// アイキャッチ画像が登録→アイキャッチ画像の URL を取得
$thumbnail = 'src="' . get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' ) . '" alt="アイキャッチ"';
}
else {
// アイキャッチ画像が未登録→テーマフォルダの「images/noimage.pmg」を使用
$thumbnail = 'src="' . get_template_directory_uri() . '/images/noimage.png' . '" alt="イメージなし"';
}
$excerpt = get_the_excerpt(); // 抜粋
$date = get_the_date( 'Y-m-d' ); // 投稿日付
$time = get_the_date( 'H:i:s' ); // 投稿時間
$author = get_the_author(); // 投稿者
?>
<article class="blog-list__list-item">
<a href="<?php echo $permalink; ?>" class="blog-item">
<div class="blog-item__content">
<div class="blog-item__thumbnail">
<img <?php echo $thumbnail; ?>>
</div>
<div class="blog-item__detail">
<div class="blog-item__element">
<h2 class="blog-item__title"><?php echo $title; ?></h2>
<p class="blog-item__datetime"><?php echo $date . '<br>' . $time; ?></p>
<p class="blog-item__author"><?php echo $author; ?></p>
</div>
<p class="blog-item__read"><?php echo $excerpt; ?></p>
</div>
</div>
</a>
</article>
<?php
}
the_posts_pagination( array( // ページネーションを表示
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
}
else {
?>
<p class="message">※ 表示対象がありません。</p>
<?php
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（page.html）からヘッダー部とフッダー部を削除し固定ページテンプレート（page.php）を作成します。
PHP（page.php）
<?php /* 固定ページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php // ★ ページコンテンツ表示 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（page.html）からヘッダー部とフッダー部を削除し固定ページテンプレート（スラッグ名付き）（page-test.php）を作成します。 ファイル名の接尾語（例の場合は test）がテンプレートのを識別名（スラッグ名で指定）になります。 本サンプルでは、固定ページテンプレート（page.php）と同様のレイアウトになっていますが、個別のレイアウトを設定することも可能です。
PHP（page-test.php）
<?php /* 固定ページ（スラッグ名）テンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main slug">
<main class="container">
<p style="color: red;">※ スラッグ名付きテンプレート（page-test.php）が適用されています。</p>
<?php // ★ ページコンテンツ表示 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（page.html）からヘッダー部とフッダー部を削除し固定ページテンプレート（自由名称）（test.php）を作成します。 自由名称のテンプレートを作成する場合は、ファイルの先頭部で指定されているテンプレート名（Template Name）がテンプレートの識別名（テンプレート名で指定）になります。 本サンプルでは、固定ページテンプレート（page.php）と同様のレイアウトになっていますが、個別のレイアウトを設定することも可能です。
PHP（test.php）
<?php
/*
* Template Name: test
*/
?>
<?php /* 固定ページ（個別名称）テンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main name">
<main class="container">
<p style="color: red;">※ 自由名称テンプレート（test.php）が適用されています。</p>
<?php // ★ ページコンテンツ表示 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（page.html）からヘッダー部とフッダー部を削除し投稿ページテンプレート（single.php）を作成します。
PHP（single.php）
<?php /* 投稿ページテンプレート */ ?>
<?php // ★ ヘッダーテンプレート読み込み ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php // ★ ページコンテンツ表示 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
if ( is_singular() ) { // ページ（投稿、固定など）表示
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
}
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に付加する文字
'link_after' => '', // リンクテキストの後ろに付加する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<?php
}
?>
</main>
</div>
<?php // ★ フッターテンプレート読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し汎用ページテンプレート（index.php）を作成します。 汎用ページテンプレートは、アーカイブ一覧ページなどの上記の個別テンプレートに合致しないページを表示するのに使用されます。
PHP（index.php）
<?php /* 汎用ページ用テンプレート */ ?>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php
if ( is_singular() ) {
?>
<?php // ★ 投稿、固定ページ生成 ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
the_content();
}
}
?>
<?php
}
else {
?>
<?php // ★ 一覧ページ生成 ?>
<?php
if ( have_posts() ) {
?>
<h2>一覧</h2>
<ul class="item-list">
<?php
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() );
$title = get_the_title();
$excerpt = get_the_excerpt();
$date = get_the_date( 'Y-m-d' );
?>
<li>
<a href="<?php echo $permalink; ?>">
<h3><?php echo $date . ' ' . esc_html($title); ?></h3>
<p><?php echo nl2br(esc_html($excerpt)); ?></p>
</a>
</li>
<?php
}
?>
</ul>
<?php
}
else {
?>
<p>※ 表示対象なし！</p>
<?php
}
?>
<?php
}
?>
</main>
</div>
<?php // ★ ヘッダーテンプレートを展開 ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-simple.zip）を作成します。
📁 theme-simple.zip // テーマファイル（圧縮 zip ファイル）
└─📁 theme-simple // テーマファイルフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 images // 画像フォルダ
│ └─ noimage.png // サムネイル代替画像ファイル
├─ footer.php // ページ共通フッターテンプレートファイル
├─ front-page.php // トップページテンプレートファイル
├─ functions.php // テーマ機能ファイルファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ index.php // 汎用テンプレートファイル
├─ page.php // 固定ページテンプレートファイル
├─ page-test.php // 固定ページテンプレート（スラッグ名付き）ファイル
├─ screenshot.png // サムネイル画像ファイル
├─ single.php // 投稿ページテンプレートファイル
├─ style.css // テーマ情報ファイル
└─ test.php // 固定ページテンプレート（自由名称）ファイル
WordPress のダッシュボードにログインして作成したテーマ（theme-simple.zip）のインストールと有効化を行います。
表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。
スラッグ名付きの固定ページテンプレートを適用するためには、固定ページのプロパティで以下の設定を行います。
自由名称の固定ページテンプレートを適用するためには、固定ページのプロパティで以下の設定を行います。
WordPress サイトを表示して表示内容を確認します。
大学ノート風のオリジナルテーマの作成手順例を示します。 トップページ（表紙）、投稿ノートページ、固定ノートページをそれぞれ生成するテンプレートを用意しています。 メニューを定義することで右部に付箋紙を表示しページ選択を行うことが可能になります。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。theme-note フォルダと theme-note.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
📁 wp-theme-note // ダウンロードファイルの解凍フォルダ
├─📁 html // 作成するページの HTML フォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 fonts // フォントフォルダ
│ │ ├─ KleeOne-Regular.otf // フォントファイル
│ │ └─ KleeOne-SemiBold.otf // フォントファイル
│ ├─ index.html // トップ（表紙）ページ HTML ファイル
│ └─ note.html // ノートページ HTML ファイル
├─📁 theme-note // テーマフォルダ
│ ├─📁 css // スタイルシートフォルダ
│ │ └─ style.css // スタイルシートファイル
│ ├─📁 fonts // フォントフォルダ
│ │ ├─ KleeOne-Regular.otf // フォントファイル
│ │ ├─ KleeOne-SemiBold.otf // フォントファイル
│ │ └─ footer.php // ページ共通フッターテンプレートファイル
│ ├─ functions.php // テーマ機能ファイルファイル
│ ├─ header.php // ページ共通ヘッダーテンプレートファイル
│ ├─ index.php // トップページテンプレートファイル
│ ├─ page.php // 固定ページテンプレートファイル
│ ├─ screenshot.png // サムネイル画像ファイル
│ ├─ single.php // 投稿ページテンプレートファイル
│ └─ style.css // テーマ情報ファイル
├─ screenshot.png // サムネイル画像ファイル
└─ theme-note.zip // テーマファイル
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、html フォルダに格納されている内容になります。
📁 html // 作成するページの HTML フォルダ
├─📁 css // スタイルシートファイルフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 fonts // フォントフォルダ
│ ├─ KleeOne-Regular.otf // フォントファイル
│ └─ KleeOne-SemiBold.otf // フォントファイル
├─ index.html // トップ（表紙）ページ HTML ファイル
└─ note.html // ノートページ HTML ファイル
HTML（index.html）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>ノート風サンプル</title>
</head>
<body>
<div class="container">
<div class="top-wrapper">
<div class="side">
<div class="sticker">
<div class="sticker-inner">
<div class="sticker-inner2"></div>
</div>
</div>
</div>
<div class="note">
<div class="inner">
<div class="inner2">
<div class="inner3">
<p class="notebook"><span>NOTE BOOK</span></p>
<h1 class="title"><span><a href="#">タイトル</a></span></h1>
<p class="index"><span>目次</span></p>
<ul class="list">
<li><a href="note.html">投稿１<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿２<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿３<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿４<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿５<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿６<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿７<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿８<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿９<span>（2022.01.01／test）</span></a></li>
<li><a href="note.html">投稿１０ テスト テスト テスト テスト テスト テスト テスト テスト テスト<span>（2022.01.01／test）</span></a></li>
</ul>
</div>
<nav class="navigation pagination" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<span aria-current="page" class="page-numbers current">1</span>
<a class="page-numbers" href="#">2</a>
<a class="next page-numbers" href="#">次</a>
</div>
</nav>
<footer>
<p><small>© 2026 xxxxxxxxxx.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
</div>
</div>
<aside>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="note.html">ノート</a></li>
<li><a href="note.html">ページ１</a>
<ul>
<li><a href="note.html">サブ１</a></li>
<li><a href="note.html">サブ２</a></li>
</ul>
</li>
<li><a href="note.html">ページ２ テスト</a></li>
</ul>
</aside>
</div>
</div>
</body>
</html>
HTML（note.html）
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<title>ノート風サンプル</title>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="note">
<header>
<div class="header-flex">
<div class="title">
<p><span><a href="index.html">タイトル</a></span></p>
</div>
<div class="side-info">
<p class="category"><a href="index.html">分類ABC</a></p>
<p class="date"><span>Date.</span>2026.01.09</p>
</div>
</div>
<h1>ノート風サンプル</h1>
</header>
<main>
<h2>ノート風サンプル</h2>
<p>ノート風の背景に文章を記述できます。<br>長い文章を書くとこうなります。あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわをん。</p>
<ul>
<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li> <!-- 01～05行 -->
<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li> <!-- 06～10行 -->
</ul>
<div>ボックスも作れます。</div>
<ol>
<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li> <!-- 01～05行 -->
<li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li><li>テキスト</li> <!-- 06～10行 -->
</ol>
</main>
<div class="blog-pages-pagination"> <span class="post-page-numbers current" aria-current="page">ページ 1</span> <a href="note.html" class="post-page-numbers">ページ 2</a></div>
<div class="blog-single_pagination">
<p>前の投稿ページ</p>
<p>次の投稿ページ</p>
</div>
<footer>
<p><small>© 2026 xxxxxxxxxx.</small><br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.</p>
</footer>
</div>
<aside>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="note.html">ノート</a></li>
<li><a href="note.html">ページ１</a>
<ul>
<li><a href="note.html">サブ１</a></li>
<li><a href="note.html">サブ２</a></li>
</ul>
</li>
<li><a href="note.html">ページ２ テスト</a></li>
</ul>
</aside>
</div>
</div>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-note）を作成し必要ファイルを元フォルダ（html）などからコピーします。
📁 theme-note // テーマフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 fonts // フォントフォルダ
│ ├─ KleeOne-Regular.otf // フォントファイル
│ └─ KleeOne-SemiBold.otf // フォントファイル
└─ screenshot.png // サムネイル画像ファイル
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-note
Description: ノート風のテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.1.0
*/
テーマの機能（functions.php）を作成します。
PHP（functions.php）
<?php
/* ★ テーマ機能設定 */
function theme_setup() {
add_theme_support('title-tag');
add_theme_support(
'post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
add_theme_support('post-thumbnails');
}
add_action('after_setup_theme', 'theme_setup');
unction sample_enqueue_scripts() {
wp_enqueue_style('sample-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'sample_enqueue_scripts');
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<!doctype html>
<?php // ★ 言語属性を設定 */ ?>
<html <?php language_attributes(); ?>>
<head>
<?php /* ★ 文字コードを設定 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php /* ★ 相対パスを絶対パスに変換 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php /* ★ サイトアイコンを設定 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<?php /* ★ /head タグの直前に挿入（WordPress の追加情報の展開場所を指定） */ ?>
<?php wp_head(); ?>
</head>
<?php /* ★ テンプレート種類を示すクラス名を設定 */ ?>
<body <?php body_class(); ?>>
<div class="container">
<?php /* ★ 著作権表示を生成 */ ?>
<?php
global $copyright;
$copyright = sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) );
$copyright .= '<br>Powered by WordPress. Theme by <a href="https://www.hamaya2020.com/" target="_blank">情報デザイン工房 濱屋</a>.';
?>
元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。
PHP（footer.php）
<?php // ★ メニュー定義有無を判定→有り：メニューを展開／無し：固定ページリストを展開 ?>
<?php
if ( has_nav_menu( 'primary' ) ) {
$html = wp_nav_menu( array( // メニューを展開
'theme_location' => 'primary', // 対象メニュー名
'container' => false, // 要素のラップ要素
'items_wrap' => '%3$s', // 編集型式（リスト項目）
'echo' => false, // 編集結果を返却
'fallback_cb' => false, // コールバック関数
) );
}
else {
$html = wp_list_pages( array( // 固定ページリストを展開
'title_li' => '', // リストの見出し（ulタグなし）
'echo' => false, // 編集結果を返却
) );
}
?>
<aside>
<ul>
<?php echo $html; ?>
</ul>
</aside>
</div>
</div>
<?php // ★ /body タグの直前に挿入（WordPress の追加情報の展開場所を指定） ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。
PHP（index.php）
<?php // ★ 投稿一覧表示用テンプレート ?>
<?php
$copyright = "";
?>
<?php // ★ ページ共通ヘッダーテンプレートを読み込み ?>
<?php get_header(); ?>
<?php
$page_title = "";
if ( is_category() ) {
$page_title = '<span>（カテゴリー：' . single_cat_title( '', false ) . '）</span>';
}
else if ( is_tag() ) {
$page_title = '<span>（タグ：' . single_tag_title( '', false ) . '）</span>';
}
else if ( is_date() ) {
$page_title = '<span>（年月：' . get_the_date( "Y年n月" ) . '）</span>';
}
?>
<div class="top-wrapper">
<div class="side">
<div class="sticker">
<div class="sticker-inner">
<div class="sticker-inner2"></div>
</div>
</div>
</div>
<div class="note">
<div class="inner">
<div class="inner2">
<div class="inner3">
<p class="notebook">NOTE BOOK</p>
<h1 class="title"><span><a href="<?php echo esc_url(home_url('/')); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></span></h1>
<p class="index">目次<?php echo $page_title; ?></p>
<ul class="list">
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
$permalink = esc_url( get_permalink() ); // URL
$title = get_the_title(); // タイトル
$date = get_the_date( 'Y.m.d' ); // 投稿日付
$author = get_the_author(); // 投稿者
?>
<li><a href="<?php echo $permalink; ?>" class="blog-item"><?php echo $title; ?><span>（<?php echo $date; ?>／<?php echo $author; ?>）</span></a></li>
<?php
}
?>
</ul>
</div>
<?php // ★ 投稿一覧用ページネーションを展開 ?>
<?php
$pagination = get_the_posts_pagination( array( // ページネーションを取得
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
if ($pagination == '') {
$pagination = '<nav class="navigation pagination" aria-label="投稿"><h2 class="screen-reader-text"></h2><div class="nav-links"><span aria-current="page" class="page-numbers current"> </span></div></nav>';
}
echo $pagination . PHP_EOL;
?>
<?php // ★ 著作権表示を展開 ?>
<footer>
<p><?php echo $copyright; ?></p>
</footer>
</div>
</div>
</div>
<?php
}
?>
<?php // ★ ページ共通フッターテンプレートを読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（note.html）からヘッダー部とフッダー部を削除し page.php を作成します。
PHP（page.php）
<?php // ★ 固定ページ用テンプレート ?>
<?php
$copyright = "";
?>
<?php // ★ ページ共通ヘッダーテンプレートを読み込み ?>
<?php get_header(); ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
$title = get_the_title(); // タイトル
$date = get_the_date( 'Y.m.d' ); // 投稿日付
?>
<div class="wrapper">
<div class="note">
<header>
<div class="header-flex">
<div class="title">
<p><span><a href="<?php echo esc_url(home_url('/')); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></span></p>
</div>
<div class="side-info">
<p class="category"></p>
<p class="date"><span>Date.</span><?php echo $date; ?></p>
</div>
</div>
<h1><?php echo $title; ?></h1>
</header>
<main>
<?php the_content(); ?>
</main>
<?php // ★ 分割ページ用ページネーションを展開 ?>
<?php
wp_link_pages( array( // 分割ページ用ページネーションを展開
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に負荷する文字
'link_after' => '', // リンクテキストの後ろに負荷する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
?>
<?php // ★ 投稿ページ用ページネーションを展開（固定ページでは存在しないのでダミー） ?>
<div class="blog-single_pagination">
<p></p>
<p></p>
</div>
<?php // ★ 著作権表示を展開 ?>
<footer>
<p><?php echo $copyright; ?></p>
</footer>
</div>
<?php
}
}
?>
<?php // ★ ページ共通フッターテンプレートを読み込み ?>
<?php get_footer(); ?>
元となる HTML ファイル（note.html）からヘッダー部とフッダー部を削除し single.php を作成します。
PHP（single.php）
<?php // ★ 投稿ページ用テンプレート ?>
<?php
$copyright = "";
?>
<?php // ★ ページ共通ヘッダーテンプレートを読み込み ?>
<?php get_header(); ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
$title = get_the_title(); // タイトル
$date = get_the_date( 'Y.m.d' ); // 投稿日付
$categories = get_the_category(); // カテゴリ
$category = '';
foreach( $categories as $item ) {
$name = __($item->name);
$link = esc_url( get_category_link( $item->term_id ) );
if ( $category != '' ) {
$category .= '／';
}
$category .= '<a href="' . $link . '">' . $name . '</a>';
}
?>
<div class="wrapper">
<div class="note">
<header>
<div class="header-flex">
<div class="title">
<p><span><a href="<?php echo esc_url(home_url('/')); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></span></p>
</div>
<div class="side-info">
<p class="category"><?php echo $category; ?></p>
<p class="date"><span>Date.</span><?php echo $date; ?></p>
</div>
</div>
<h1><?php echo $title; ?></h1>
</header>
<main>
<?php the_content(); ?>
</main>
<?php // ★ 分割ページ用ページネーションを展開 ?>
<?php
wp_link_pages( array( // 改ページ（複数ページ）処理
'before' => '<div class="blog-pages-pagination">',
'after' => '</div>' . PHP_EOL, // before/afterは、前後に付加する文字
'link_before' => '', // リンクテキストの前に負荷する文字
'link_after' => '', // リンクテキストの後ろに負荷する文字
'next_or_number' => 'number', // 'number'：ページ番号、'next'：前／次ページ
'separator' => ' ', // ページ番号間の文字
'nextpagelink' => __( 'Next page' ), // 次のページのリンクテキスト
'previouspagelink' => __( 'Previous page' ),// 前のページのリンクテキスト
'pagelink' => 'ページ %', // ページ番号のフォーマット（%はページ番号）
'echo' => true, // true：表示、false：返却
) );
?>
<?php // ★ 投稿ページ用ページネーションを展開 ?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<?php // ★ 著作権表示を展開 ?>
<footer>
<p><?php echo $copyright; ?></p>
</footer>
</div>
<?php
}
}
?>
<?php // ★ ページ共通フッターテンプレートを読み込み ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-note.zip）を作成します。
📁 theme-note.zip // テーマファイル（圧縮 zip ファイル）
└─📁 theme-note // テーマファイルフォルダ
├─📁 css // スタイルシートフォルダ
│ └─ style.css // スタイルシートファイル
├─📁 fonts // フォントフォルダ
│ ├─ KleeOne-Regular.otf // フォントファイル
│ ├─ KleeOne-SemiBold.otf // フォントファイル
│ └─ footer.php // ページ共通フッターテンプレートファイル
├─ functions.php // テーマ機能ファイルファイル
├─ header.php // ページ共通ヘッダーテンプレートファイル
├─ index.php // トップページテンプレートファイル
├─ page.php // 固定ページテンプレートファイル
├─ screenshot.png // サムネイル画像ファイル
├─ single.php // 投稿ページテンプレートファイル
└─ style.css // テーマ情報ファイル
WordPress のダッシュボードにログインして作成したテーマ（theme-note.zip）のインストールと有効化を行います。
表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 メニューは、ページの右部の付箋紙として表示されます。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。
WordPress サイトを表示して表示内容を確認します。
