WordPress のテーマファイルは zip 型式の圧縮ファイルであり WordPress にテーマファイルのアップロードを行う時は、zip 型式のままでアップロードします。
テーマファイルに格納される主要なファイルは、以下の通りです。（必要に応じて格納するファイルが選択されます）
制御ファイルやテンプレートファイルを作成する場合は、必ず UTF-8（BOM なし）の型式で保存してください。
制御ファイルやテンプレートファイルを作成で使用する関数などは、このページの後ろの方に説明してありますので参照しながら進めてください。
テーマ情報を style.css にコメントとして記載します。
/*
Theme Name: テーマ名（必須）
Description: テーマの説明
Author: テーマ作成者の名前
Version: テーマのバージョン
Template: 親テーマ名
*/
テーマが提供する機能を記載します。主要な機能は、以下の通りです。
テーマ選択画面で使用するサムネイル画像です。 下部に WordPress がテーマの状態を示す情報をオーバレイしますので隙間を空けるなどの考慮をしてください。
表示するページの種別によってテンプレートのファイル名の決定ルールが異なり以下の順序でファイルが検索されます。
HTMLで作成した静的ページをオリジナルテーマ化する場合の作成手順例を示します。 静的ページをテーマ化することでヘッダーやフッダー部を共通部品として作成することができますので保守性を向上させることができます。 こでの作成例は、テーマ作成の基本事項を理解するための最小手順を示しています。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
theme-sample フォルダと theme-sample.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。今回の作成例では、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 山田太郎</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 山田次郎</small></p>
</footer>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-sample）を作成し必要ファイルを元フォルダ（html）などからコピーします。
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-sample
Description: 山田太郎の自己紹介テーマです。
Author: 山田太郎
Version: 1.0.0
*/
テーマの機能（functions.php）を作成します。 今回は、空ファイルで（内容はなくても）大丈夫です。
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<?php /* ページ共通ヘッダーテンプレート */ ?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<link href="<?php echo get_template_directory_uri(); ?>/images/favicon.ico" rel="icon">
<title>山田太郎 自己紹介</title>
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>
<body>
<header>
<h1>自己紹介</h1>
</header>
<nav>
<ul>
<?php /* リンク指定を行う場合は、echo home_url() を使用してサイト URL を生成します。 */ ?>
<li><a href="<?php echo home_url(''); ?>">トップ</a></li>
<li><a href="#hometown">故郷</a></li>
<li><a href="#hobby">趣味</a></li>
<li><a href="<?php echo home_url( '/jirou/' ); ?>">次郎</a></li>
</ul>
</nav>
元となる HTML ファイルから各ページで共通に使用するフッター部を切り出して footer.php を作成します。
PHP（footer.php）
<?php /* ページ共通フッターテンプレート */ ?>
<footer>
<p><small>© 2021 山田太郎</small></p>
</footer>
<?php /* /body タグの直前に wp_footer() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。
PHP（index.php）
<?php /* トップページテンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<main>
<h2>氏名</h2>
<p><span>山田 太郎</span></p>
<h2>イメージ絵</h2>
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<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 /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
元となる HTML ファイル（jirou.html）からヘッダー部とフッダー部を削除し page-jirou.php を作成します。
PHP（page-jirou.php）
<?php /* 固定ページ（スラッグ名：jirou）テンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<main>
<h2>氏名</h2>
<p><span>山田 次郎</span></p>
<h2>イメージ絵</h2>
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<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 /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-sample.zip）を作成します。
WordPress のダッシュボードにログインして作成したテーマ（theme-sample.zip）のインストールと有効化を行います。
固定ページ（山田次郎の自己紹介）を表示させるために WordPress のダッシュボードで固定ページの作成を行います。 ページの内容は、記入不要ですがスラッグは、jirou と設定します。
WordPress サイトを表示して表示内容を確認します。
WordPress のダッシュボードで入力した投稿ページや固定ページの表示が可能なオリジナルテーマの作成手順例を示します。 ここでの作成例は、テーマ作成の基本事項を理解するための最小限の機能にしてありますがメニューやページネーションなどの機能実装も実施していますので参考にしてください。
【注意事項】
本テーマでは、子メニューや孫メニューを定義した場合の表示がサポートされていません。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。
theme-simple フォルダと theme-simple.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、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>© 2022 シンプルテーマ.</small></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>© 2022 シンプルテーマ.</small></p>
</footer>
</div>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-simple）を作成し必要ファイルを元フォルダ（html）などからコピーします。
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-simple
Description: WordPressのシンプルテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/
テーマの機能（functions.php）を作成します。 テーマがの機能を定義する theme_simple_setup 関数を定義します。 また、この関数を有効化するために add_action('after_setup_theme', 'theme_simple_setup'); を使用してセットアップ時の呼び出し登録を行います。
PHP（functions.php）
<?php
/* テーマ機能設定 */
function theme_simple_setup() {
// title タグの自動出力指定
add_theme_support('title-tag');
// 対応している投稿フォーマット指定
add_theme_support(
'post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
// アイキャッチ（投稿サムネール）指定
add_theme_support('post-thumbnails');
set_post_thumbnail_size(128, 128);
// メニュー作成指定
register_nav_menus(
array(
'primary' => __( 'Primary menu' ),
)
);
// HTML5のマークアップ指定
add_theme_support(
'html5',
array(
'gallery',
'caption',
)
);
// カスタムロゴ指定
$logo_width = 256;
$logo_height = 256;
add_theme_support(
'custom-logo',
array(
'height' => $logo_height,
'width' => $logo_width,
'flex-width' => true,
'flex-height' => true,
'unlink-homepage-logo' => true,
)
);
// エディタのスタイル設定
add_editor_style( 'css/style.css' );
}
// セットアップ関数の呼び出しを指定
add_action( 'after_setup_theme', 'theme_simple_setup' );
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<?php /* ページ共通ヘッダーテンプレート */ ?>
<!doctype html>
<?php /* language_attributes() を使用して言語属性を取得します。 */ ?>
<html <?php language_attributes(); ?>>
<head>
<?php /* bloginfo( 'charset' ) を使用して使用する文字コードを取得します。 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php /* ファイルを指定する場合は、site_icon_url() を使用してサイトアイコンの URL を取得します。 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>
<?php /* body_class() を使用してテンプレート種類を示すクラス名を取得します。 */ ?>
<body <?php body_class(); ?>>
<div class="header">
<header class="container">
<?php /* is_singular() を使用して個別の投稿ページ（投稿や固定ページなど）かどうかをチェックします。 */ ?>
<?php /* home_url( '/' ) を使用して本サイトのホーム URL を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) を使用してサイトタイトルを取得します。 */ ?>
<?php if (is_singular()) { ?>
<p class="h1"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></p>
<?php } else { ?>
<h1><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php echo esc_html( get_bloginfo( 'name' ) ); ?></a></h1>
<?php } ?>
<?php /* has_nav_menu( 'primary' ) を使用して指定したメニューが割り当てられているかチェックします。 */ ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
<nav>
<?php /* wp_nav_menu( ・・・ ) を使用してメニュー情報を取得（展開）します。 */ ?>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary', // メニューの位置（初期値：なし）
'menu_class' => 'menu-wrapper', // ul要素のクラス名（初期値：menu）
'container' => false, // ul要素のラップ要素（初期値：div）
'items_wrap' => '<ul>%3$s</ul>', // 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
'fallback_cb' => false, // メニューが存在しない場合のコールバック関数（初期値：wp_page_menu）
)
);
?>
</nav>
<?php } ?>
</header>
</div>
元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。
PHP（footer.php）
<?php /* ページ共通フッターテンプレート */ ?>
<div class="footer">
<footer class="container">
<?php /* date( 'Y' ) を使用して現在の年を取得します。 */ ?>
<?php /* get_bloginfo( 'name' ) ) を使用してサイトタイトルを取得します。 */ ?>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
</footer>
</div>
<?php /* /body タグの直前に wp_footer(); を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。 本ページテンプレートは、投稿一覧ページ、投稿ページ、固定ページなどをすべて表示可能なように作成してあります。
PHP（index.php）
<?php /* ページ用テンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<div class="main">
<main class="container">
<?php /*
have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
WordPress クエリループを処理する一般形は、以下の通りです。
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
個別クエリの処理で使用している関数は、以下の通りです。
get_permalink() // 投稿のパーマリンクを取得
get_template_directory_uri() // 投稿のディレクトリィ URI を取得
get_the_author() // 投稿の投稿者名を取得
get_the_date() // 投稿の日付を取得
get_the_excerpt() // 投稿の投稿概要を取得
get_the_ID() // 投稿の投稿 ID を取得
get_the_post_thumbnail_url() // 投稿のアイキャッチ画像 URL を取得
get_the_title() // 投稿のタイトルを取得
has_post_thumbnail() // 投稿にアイキャッチ画像が登録されているかのチェック
is_single() // 固定ページ以外の個別の投稿ページが表示中かのチェック
is_singular() // 個別の投稿ページ（一覧以外）が表示中かのチェック
next_post_link() // 日付順でひとつ次の投稿のリンクを表示
previous_post_link() // 日付順でひとつ前の投稿のリンクを表示
the_content() // 投稿の本文を表示
the_title() // 投稿のタイトルを表示
the_posts_pagination() // 投稿の前と次のページ番号セットを表示
wp_link_pages() // ページ分割された投稿ページリンクを表示
*/ ?>
<?php
if ( have_posts() ) {
while ( have_posts() ) {
the_post();
if ( is_singular() ) { // ページ（投稿、固定など）表示
the_title( '<h1>', '</h1>' ); // タイトル
the_content(); // ページコンテンツ
}
else { // 投稿一覧表示
$permalink = esc_url( get_permalink() ); // URL
$title = get_the_title(); // タイトル
if ( has_post_thumbnail() ) { // アイキャッチ画像URL（サムネイルURL）
// アイキャッチ画像のURL取得（引数1：サイズ：'thumbnail'、'medium'、'large'、'full'
$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
}
}
if ( is_singular() ) { // ページ（投稿、固定など）表示
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：返却
) );
if ( is_single() ) { // 投稿ページ
?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<?php
}
}
else { // 投稿一覧表示
the_posts_pagination( array( // ページネーションを表示
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
}
}
?>
</main>
</div>
<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-simple.zip）を作成します。
WordPress のダッシュボードにログインして作成したテーマ（theme-simple.zip）のインストールと有効化を行います。
表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。
WordPress サイトを表示して表示内容を確認します。
大学ノート風のオリジナルテーマの作成手順例を示します。 トップページ（表紙）、投稿ノートページ、固定ノートページをそれぞれ生成するテンプレートを用意しています。 メニューを定義することで右部に付箋紙を表示しページ選択を行うことが可能になります。
【注意事項】
本テーマでは、子メニューや孫メニューを定義した場合の表示がサポートされていません。
オリジナルテーマ作成の練習を行う場合は、下記のリンク先からオリジナルテーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
テーマ作成で使用するのは、html フォルダと screenshot.png ファイルです。theme-note フォルダと theme-note.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
オリジナルテーマ作成の手順は、次の通りです。
テーマ作成の原型となる HTML / CSS と関連画像ファイルを作成します。 今回の作成例では、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="#">投稿１<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿２<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿３<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿４<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿５<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿６<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿７<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿８<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿９<span>（2022.01.01／test）</span></a></li>
<li><a href="#">投稿１０ああああああああああああああああ<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>© 2022 xxxxxxxxxx.</small></p>
</footer>
</div>
</div>
</div>
<aside>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="note.html">ノート</a></li>
<li><a href="#">固定ページ１</a></li>
<li><a href="#">固定ページ２</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>
<p class="category">分類ABC</p>
<p class="date"><span>Date.</span>2022.01.15</p>
<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-single_pagination">
<p>前の投稿ページ</p>
<p>次の投稿ページ</p>
</div>
<footer>
<p><small>© 2022 xxxxxxxxxx.</small></p>
</footer>
</div>
<aside>
<ul>
<li><a href="index.html">トップ</a></li>
<li><a href="note.html">ノート</a></li>
<li><a href="#">固定ページ１</a></li>
<li><a href="#">固定ページ２</a></li>
</ul>
</aside>
</div>
</div>
</body>
</html>
テーマ用のサムネール画像を作成します。 今回の作成例では、ダウンロードフォルダ内の screenshot.png ファイルになります。
テーマ用のフォルダ（theme-note）を作成し必要ファイルを元フォルダ（html）などからコピーします。
テーマ情報ファイル（style.css）を作成します。
CSS（style.css）
/*
Theme Name: theme-note
Description: ノート風のテーマです。
Author: 情報デザイン工房 濱屋
Version: 1.0.0
*/
テーマの機能（functions.php）を作成します。
PHP（functions.php）
<?php
/* テーマ機能設定 */
function theme_note_setup() {
// title タグの自動出力指定
add_theme_support('title-tag');
// 対応している投稿フォーマット指定
add_theme_support(
'post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
// アイキャッチ（投稿サムネール）指定
add_theme_support('post-thumbnails');
set_post_thumbnail_size(128, 128);
// メニュー作成指定
register_nav_menus(
array(
'primary' => __( 'Primary menu' ),
)
);
// HTML5のマークアップ指定
add_theme_support(
'html5',
array(
'gallery',
'caption',
)
);
// カスタムロゴ指定
$logo_width = 256;
$logo_height = 256;
add_theme_support(
'custom-logo',
array(
'height' => $logo_height,
'width' => $logo_width,
'flex-width' => true,
'flex-height' => true,
'unlink-homepage-logo' => true,
)
);
// エディタのスタイル設定
add_editor_style( 'css/style.css' );
}
// セットアップ関数の呼び出しを指定
add_action('after_setup_theme', 'theme_note_setup');
元となる HTML ファイルから各ページで共通に使用するヘッダー部を切り出して header.php を作成します。
PHP（header.php）
<?php /* ページ共通ヘッダーテンプレート */ ?>
<!doctype html>
<?php /* language_attributes() を使用して言語属性を取得します。 */ ?>
<html <?php language_attributes(); ?>>
<head>
<?php /* bloginfo( 'charset' ) を使用して使用する文字コードを取得します。 */ ?>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<?php /* ファイルを指定する場合は、echo get_template_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<?php /* ファイルを指定する場合は、site_icon_url() を使用してサイトアイコンの URL を取得します。 */ ?>
<link href="<?php site_icon_url(); ?>" rel="icon">
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
<?php /* /head タグの直前に wp_head() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_head(); ?>
</head>
<?php /* body_class() を使用してテンプレート種類を示すクラス名を取得します。 */ ?>
<body <?php body_class(); ?>>
<div class="container">
元となる HTML ファイルから各ページで共通に使用するフッダー部を切り出して footer.php を作成します。
PHP（footer.php）
<?php
/* 共通フッターテンプレート */
?>
<?php /* has_nav_menu() を使用して指定したメニューが割り当てられているかチェックします。 */ ?>
<?php /* wp_nav_menu() を使用してメニュー情報を取得（展開）します。 */ ?>
<?php if ( has_nav_menu( 'primary' ) ) { ?>
<aside>
<?php
wp_nav_menu(
array(
'theme_location' => 'primary', // メニューの位置（初期値：なし）
'menu_class' => 'menu-wrapper', // ul要素のクラス名（初期値：menu）
'container' => false, // ul要素のラップ要素（初期値：div）
'items_wrap' => '<ul>%3$s</ul>', // 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
'fallback_cb' => false, // メニューが存在しない場合のコールバック関数（初期値：wp_page_menu）
)
);
?>
</aside>
<?php } ?>
</div>
</div>
<?php /* /body タグの直前に wp_footer() を使用して WordPress の追加情報を展開できるようにします。 */ ?>
<?php wp_footer(); ?>
</body>
</html>
元となる HTML ファイル（index.html）からヘッダー部とフッダー部を削除し index.php を作成します。
PHP（index.php）
<?php /* 投稿一覧表示用テンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<?php /*
表示する投稿一覧の種類によって「目次」のサブタイトルを変更します。
すべての投稿一覧 // 目次
カテゴリー別の投稿一覧 // 目次（カテゴリー：カテゴリー名）
タグ別の投稿一覧 // 目次（タグ：タグ名）
日付別の投稿一覧 // 目次（年月：yy年mm月）
目次のサブタイトルを変更するためのい処理で使用している関数は、以下の通りです。
esc_html() // HTML のエスケープ処理
esc_url() // URL の無害化処理
get_bloginfo() // サイト情報の取得
get_the_date() // 投稿の日付を取得
home_url() // 現在のホーム URL を取得
is_category() // カテゴリーアーカイブページ表示中かのチェック
is_date() // 日付関連アーカイブページ表示中かのチェック
is_tag() // 投稿タグアーカイブページ表示中かのチェック
single_cat_title() // ページタイトル（カテゴリー名またはタグ名）の取得
single_tag_title() // タグタイトルの取得
*/ ?>
<?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 /*
have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
WordPress クエリループを処理する一般形は、以下の通りです。
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
個別クエリの処理で使用している関数は、以下の通りです。
date() // 日付時刻の取得
get_bloginfo() // サイト情報の取得
get_permalink() // 投稿のパーマリンクを取得
get_the_title() // 投稿のタイトルを取得
get_the_date() // 投稿の日付を取得
get_the_author() // 投稿の投稿者名を取得
get_the_posts_pagination // 投稿の前と次のページ番号セットを取得
*/ ?>
<?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
$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;
?>
<footer>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
</footer>
</div>
</div>
</div>
<?php
}
?>
<?php /* get_footer() を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
元となる HTML ファイル（note.html）からヘッダー部とフッダー部を削除し page.php を作成します。
PHP（page.php）
<?php /* 固定ページ用テンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<?php /*
have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
WordPress クエリループを処理する一般形は、以下の通りです。
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
個別クエリの処理で使用している関数は、以下の通りです。
date() // 現在の日付時刻を取得
get_bloginfo() // サイト情報を取得
get_the_title() // 投稿のタイトルを取得
get_the_date() // 投稿の日付を取得
the_content() // 投稿の本文を表示
wp_link_pages() // ページ分割された投稿ページリンクを表示
*/ ?>
<?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>
<p class="category"></p>
<p class="date"><span>Date.</span><?php echo $date; ?></p>
<h1><?php echo $title; ?></h1>
</header>
<main>
<?php the_content(); ?>
</main>
<?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：返却
) );
?>
<div class="blog-single_pagination">
<p></p>
<p></p>
</div>
<footer>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
</footer>
</div>
<?php
}
}
?>
<?php /* get_footer(); を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
元となる HTML ファイル（note.html）からヘッダー部とフッダー部を削除し single.php を作成します。
PHP（single.php）
<?php /* 投稿ページ用テンプレート */ ?>
<?php /* get_header() を使ってページ共通ヘッダーテンプレートを読み込みます。 */ ?>
<?php get_header(); ?>
<?php /*
have_posts() は現在の WordPress クエリにループできる結果があるかどうかをチェックします。
WordPress クエリループを処理する一般形は、以下の通りです。
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
個別クエリの処理で使用している関数は、以下の通りです。
date() // 現在の日付時刻を取得
get_bloginfo() // サイト情報を取得
get_category_link() // カテゴリー一覧ページの URL を取得
get_the_category() // 投稿のカテゴリオブジェクト配列を取得
get_the_title() // 投稿のタイトルを取得
get_the_date() // 投稿の日付を取得
next_post_link() // 日付順でひとつ次の投稿のリンクを表示
previous_post_link() // 日付順でひとつ前の投稿のリンクを表示
the_content() // 投稿の本文を表示
wp_link_pages() // ページ分割された投稿ページリンクを表示
*/ ?>
<?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>
<p class="category"><?php echo $category; ?></p>
<p class="date"><span>Date.</span><?php echo $date; ?></p>
<h1><?php echo $title; ?></h1>
</header>
<main>
<?php the_content(); ?>
</main>
<?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：返却
) );
?>
<div class="blog-single_pagination">
<p><?php previous_post_link(); ?></p>
<p><?php next_post_link(); ?></p>
</div>
<footer>
<p><?php echo sprintf( '<small>© %1$s %2$s.</small>', date( 'Y' ), get_bloginfo( 'name' ) ); ?></p>
</footer>
</div>
<?php
}
}
?>
<?php /* get_footer(); を使ってページ共通フッターテンプレートを読み込みます。 */ ?>
<?php get_footer(); ?>
作成したファイル群を使用してテーマファイル（theme-note.zip）を作成します。
WordPress のダッシュボードにログインして作成したテーマ（theme-note.zip）のインストールと有効化を行います。
表示確認を行うために WordPress のダッシュボードで投稿ページや固定ページを作成します。 また、固定ページを表示するためのメニュー定義などを行います。 メニューは、ページの右部の付箋紙として表示されます。 すでに表示させるためのコンテンツが作成済みの場合は、本作業が不要です。
WordPress サイトを表示して表示内容を確認します。
WordPress を使用してサイトを作成しているとテーマのカスタマイズを行いたくなることがあります。ここでは、テーマのカスタマイズ方法を説明します。 テーマのカスタマイズ方法は、複数ありますので以下の順でカスタマイズ可否を確認してください。
WordPress のテーマは、テーマによってカスタマイズできる範囲が大きく異なります。また、細かなカスタマイズをする場合は、有償テーマの購入が必要となる場合もあります。 テーマが提供するカスタマイズ機能のついては、テーマの提供サイトおよびテーマのカスタマイズ解説サイトなどを参照してください。
テーマが提供するカスタマイズ機能は、カスタマイズ画面（外観 → カスタマイズ）で実施しますが、テーマによっては個別のカスタマイズ画面が用意されている場合がありますので確認してください。
WordPress には、標準で持っていない機能を拡張するためのプラグイン機能が用意されており多くの開発者がプラグインを開発して提供しています。 カスタマイズを考えた場合に誰かがプラグインとして提供してくれているかもしれませんのでカスタマイズ内容に適用できるプラグインがないかを探してみましょう。 プラグインを探す時は、検索サイトで「wordpress プラグイン ＜カスタマイズ内容＞」などと検索してみてください。
追加 CSS を利用したカスタマイズを行う場合は、テーマが出力する HTML やテーマが提供する CSS を理解する必要があります。以下の手順で追加 CSS の作成および登録を行ってください。
WordPress のテーマは、ソースコードが提供されているので自由に修正することができますがテーマ自体のソースコードを修正してしまうとテーマのアップデートに対応できなくなります。 WordPress ではテーマの一部だけを修正する機能である子テーマ機能が提供されていますのでテーマのカスタマイズを行う場合は、子テーマの作成を行います。
子テーマ機能とは、親テーマ（カスタマイズを行う元のテーマを親テーマと呼びます）で修正が必要なファイルだけを取り出して修正を行い、それ以外のファイルは親テーマのファイルを使用するという機能です。 子テーマを使用する場合は、親テーマと子テーマの両方をインストールしておき子テーマを有効化して使用します。子テーマのテーマ情報には、親テーマのテーマ名が記載されていますので、子テーマ内に無いファイルは自動的に親テーマが参照されます。 子テーマを使用してカスタマイズする手順を下記に記述します。
なんらかの理由で子テーマでの対応ができない場合には、テーマ自体のソースコードを修正することになります。 保守性の面で推奨はできませんがソースコードを直接修正する場合は、以下の方法があります。
子テーマの作成手順例を示します。 ここでの作成例は、子テーマ作成の基本事項を理解するための最小手順を示しています。
子テーマ作成の練習を行う場合は、下記のリンク先から子テーマ作成用のサンプルファイルをダウンロードしてください。
ダウンロードしたファイルは、zip 圧縮をされていますので解凍して使用してください。
解凍した状態でのフォルダ／ファイル内容は、以下の通りです。
子テーマ作成で使用するのは、images フォルダと screenshot.png ファイルです。
fukasawa.2.0.5.zip ファイルは、親テーマのテーマファイルです。
fukasawa-child フォルダと fukasawa-child.zip ファイルは、下記の手順で作成した時に出来るファイル（完成版）なので、作成がうまくいかない場合に参照してください。
子テーマ作成の手順は、次の通りです。
親テーマの提供サイトからテーマファイルをダウンロードします。テーマファイルは、zip 型式で圧縮されていますので展開します。 ここの子テーマ作成例では、ポートフォリオ用のテーマである fukasawa を使用させて頂きます。
【謝辞】
WordPress のテーマである fukasawa は、シンプルなテーマで使いやすくコードも読みやいため色々と参考にさせて頂いています。
今回は、子テーマ作成の例で使用させて頂きました。
このようなテーマを提供して頂いている作者に感謝すると同時に、この場を借りてお礼申し上げます。
テーマファイル内のテンプレートファイルやスタイルシートを解析してカスタマイズする部分を特定します。 今回のカスタマイズ例では、fukasawqa の特徴的な表示である、左上のサイト名を画像に変更します。 （注：fukasawa には、この部分にイメージを設定する機能が用意されていますが、ここでは、子テーマを使用して実現します）
テーマ用のサムネール画像を作成します。
子テーマ用のフォルダ（fukasawa-child）を作成し必要ファイルをコピーします。
テーマ情報ファイル（style.css）を作成します。必要に応じてテーマ情報の下に CSS を記述することも可能です。
CSS（sytyle.css）
/*
Theme Name: fukasawa-child
Description: Fukasawaの子テーマでロゴがイラスト表示になります
Author: 山田太郎
Version: 1
Template: fukasawa
*/
body {
background: pink;
}
テーマの機能（functions.php）を作成します。 下記の記述を行うことで親テーマの style.css を読み込み後に子テーマの style.css の読み込みが行われます。
PHP（functions.php）
<?php
// スタイルシートの組み込み
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
// 生成するページにスタイルシート定義を追加
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
変更を行うテンプレートファイルを親テーマから取得して必要部分を修正します。 今回のカスタマイズでは、テーマ共通ヘッダーテンプレート（header.php）を修正します。
PHP（header.php）
<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<?php
if ( function_exists( 'wp_body_open' ) ) {
wp_body_open();
}
?>
<a class="skip-link button" href="#site-content"><?php _e( 'Skip to the content', 'fukasawa' ); ?></a>
<div class="mobile-navigation">
<ul class="mobile-menu">
<?php
if ( has_nav_menu( 'primary' ) ) {
$primary_nav = wp_nav_menu( array(
'container' => '',
'echo' => false,
'items_wrap' => '%3$s',
'theme_location' => 'primary'
) );
echo $primary_nav;
} else {
$pages_list = wp_list_pages( array(
'container' => '',
'echo' => false,
'title_li' => ''
) );
echo $pages_list;
}
?>
</ul>
</div><!-- .mobile-navigation -->
<div class="sidebar">
<?php
// Use a h1 element on the front page and/or the index of the blog, and a div elsewhere
if ( is_front_page() || is_home() ) {
$blog_title_elem = 'h1';
} else {
$blog_title_elem = 'div';
}
$custom_logo_id = get_theme_mod( 'custom_logo' );
$legacy_logo_url = get_theme_mod( 'fukasawa_logo' );
if ( $custom_logo_id || $legacy_logo_url ) :
$custom_logo_url = $custom_logo_id ? wp_get_attachment_image_url( $custom_logo_id, 'full' ) : $legacy_logo_url;
?>
<<?php echo $blog_title_elem; ?> class="blog-logo">
<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
<img src="<?php echo esc_url( $custom_logo_url ); ?>" />
</a>
<span class="screen-reader-text"><?php echo get_bloginfo( 'title' ); ?></span>
</<?php echo $blog_title_elem; ?>>
<?php elseif ( get_bloginfo( 'description' ) || get_bloginfo( 'title' ) ) : ?>
<<?php echo $blog_title_elem; ?> class="blog-title">
<?php /* サイト情報を出力している部分を固定の画像を出力するように変更します。 */ ?>
<?php /* ファイルを指定する場合は、echo get_stylesheet_directory_uri() を使用して絶対パスになるようにします。 */ ?>
<?php /* 通常のテーマでは、絶対パスにするために get_template_directory_uri() を使用しますが子テーマの場合は、get_stylesheet_directory_uri() を使用します。 */ ?>
<!-- <a href="<?php echo esc_url( home_url() ); ?>" rel="home"><?php echo get_bloginfo( 'title' ); ?></a> -->
<a href="<?php echo esc_url( home_url() ); ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/yamada.png" alt="山田太郎"></a>
</<?php echo $blog_title_elem; ?>>
<?php endif; ?>
<button type="button" class="nav-toggle">
<div class="bars">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
<p>
<span class="menu"><?php _e( 'Menu', 'fukasawa' ); ?></span>
<span class="close"><?php _e( 'Close', 'fukasawa' ); ?></span>
</p>
</button>
<ul class="main-menu">
<?php echo isset( $primary_nav ) ? $primary_nav : $pages_list; ?>
</ul><!-- .main-menu -->
<?php if ( is_active_sidebar( 'sidebar' ) ) : ?>
<div class="widgets">
<?php dynamic_sidebar( 'sidebar' ); ?>
</div><!-- .widgets -->
<?php endif; ?>
<div class="credits">
<p>© <?php echo date( 'Y' ); ?> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a>.</p>
<p><?php _e( 'Powered by', 'fukasawa' ); ?> <a href="https://www.wordpress.org">WordPress</a>.</p>
<p><?php _e( 'Theme by', 'fukasawa' ); ?> <a href="https://www.andersnoren.se">Anders Norén</a>.</p>
</div><!-- .credits -->
</div><!-- .sidebar -->
<main class="wrapper" id="site-content">
作成したファイル群を使用して子テーマファイル（fukasawa-child.zip）を作成します。
WordPress のダッシュボードにログインして親テーマ（fukasawa）と作成した子テーマ（fukasawa-child.zip）のインストールします。 テーマの有効化は、子テーマ（fukasawa-child）を有効化します。
WordPress サイトを表示して表示内容を確認します。
テーマ作成で使用する部品（関数など）について概略を記述します。 テーマ作成で使用する関数などは、多くのものが定義されていますが、ここでは本章で説明するサンプルテーマが使用しているものを中心に説明します。 これ以外にも多くの関数が定義されていますので関連図書や関連サイトを一読することをお薦めします。
使用例（PHP）
$text = __( 'Some text to translate and display.' );
使用例（PHP）
_e( 'Some text to translate and display.' );
使用例（PHP）
function theme_simple_setup() {
// セットアップ時の処理
}
add_action( 'after_setup_theme', 'theme_simple_setup' );
使用例（PHP）
add_editor_style( 'css/style.css' );
使用例（PHP）
add_theme_support( 'title-tag' );
add_theme_support( 'post-formats',
array(
'link',
'aside',
'gallery',
'image',
'quote',
'status',
)
);
add_theme_support( 'post-thumbnails' );
使用例（PHP）
bloginfo( 'name' )
使用例（PHP）
body_class();
使用例（PHP）
$text = date( 'Y年m月d日 G:i' );
使用例（PHP）
esc_attr_e( '<h1>タイトル</h1>' );
使用例（PHP）
$out_text = esc_html( '<h1>title</h1>' );
使用例（PHP）
$out_text = esc_html__( '<h1>title</h1>' );
使用例（PHP）
esc_html_e( ''<h1>title</h1>'' );
使用例（PHP）
$url = esc_url( home_url( '/' ) );
使用例（PHP）
if ( function_exists( 'wp_xxx' ) ) {
wp_xxx();
}
使用例（PHP）
$bloginfo = get_bloginfo( 'name' );
使用例（PHP）
$url = get_category_link( get_cat_ID( 'カテゴリー名' ) );
使用例（PHP）
<?php get_footer(); ?>
使用例（PHP）
<?php get_header(); ?>
使用例（PHP）
$permalink = esc_url( get_permalink() );
使用例（PHP）
$format = get_post_format();
使用例（PHP）
$path = get_stylesheet_directory();
使用例（PHP）
$uri = get_stylesheet_directory_uri();
使用例（PHP）
$path = get_template_directory();
使用例（PHP）
$uri = get_template_directory_uri();
使用例（PHP）
$author = get_the_author();
使用例（PHP）
$categories = get_the_category();
if ( $categories ) {
foreach ( $categories as $item ) {
// 項目（$item）の処理
$name = $item->name; // カテゴリー名の取得
$count = $item->count; // 投稿数の取得
}
}
使用例（PHP）
$date = get_the_date( 'Y年m月d日 G:i' );
使用例（PHP）
$excerpt = get_the_excerpt();
使用例（PHP）
$postid = get_the_ID();
使用例（PHP）
$url = get_the_post_thumbnail_url( get_the_ID(), 'thumbnail' );
使用例（PHP）
$pagination = get_the_posts_pagination( array(
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
作成例（HTML）
<nav class="navigation pagination" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links"><a class="prev page-numbers" href="http://test.local/">前</a>
<a class="page-numbers" href="http://test.local/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://test.local/page/3/">3</a>
<a class="page-numbers" href="http://test.local/page/4/">4</a>
<a class="next page-numbers" href="http://test.local/page/3/">次</a>
</div>
</nav>
使用例（PHP）
$time = get_the_time( G:i' );
使用例（PHP）
$title = get_the_title();
使用例（PHP）
$background_color = get_theme_mod( 'background_color' );
使用例（PHP）
get_template_part( 'loop', 'index' );
使用例（PHP）
$bool = has_custom_logo();
使用例（PHP）
$bool = has_nav_menu( 'primary' );
使用例（PHP）
$bool = has_post_thumbnail();
使用例（PHP）
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
使用例（PHP）
$url = home_url( '/' );
使用例（PHP）
$bool = is_category();
使用例（PHP）
$bool = is_date();
使用例（PHP）
$bool = is_front_page();
使用例（PHP）
$bool = is_page();
使用例（PHP）
$bool = is_paged();
使用例（PHP）
$bool = is_single();
使用例（PHP）
$bool = is_singular();
使用例（PHP）
$bool = is_tag();
使用例（PHP）
<html <?php language_attributes(); ?>>
使用例（PHP）
load_theme_textdomain('my_theme', get_template_directory() . '/languages');
使用例（PHP）
next_post_link();
使用例（PHP）
echo 'メッセージ' . PHP_EOL;
使用例（PHP）
previous_post_link();
使用例（PHP）
register_nav_menu( 'primary', __( 'Primary menu' ) );
使用例（PHP）
register_nav_menus( array(
'primary' => __( 'Primary menu' ),
'footer_menu' => __( 'Custom Footer Menu' ),
) );
使用例（PHP）
set_post_thumbnail_size( 128, 128, false );
使用例（PHP）
single_cat_title( '', true );
使用例（PHP）
single_tag_title( '', true );
使用例（PHP）
site_icon_url();
使用例（PHP）
$text = sprintf( 'arg1=%1$s, arg2=%2$s', 'value1', 'value2' );
使用例（PHP）
the_archive_title();
使用例（PHP）
the_content();
使用例（PHP）
the_custom_logo();
使用例（PHP）
if ( have_posts() ) { // 処理するクエリがあるかのチェック
while ( have_posts() ) { // 処理するクエリが無くなるまでループ
the_post(); // 処理するクエリ情報の設定
・・・ // 個別クエリの処理
}
}
使用例（PHP）
the_post_navigation( array(
'prev_text' => '前へ',
'next_text' => '次へ',
)
);
使用例（PHP）
the_post_thumbnail_url();
使用例（PHP）
the_posts_pagination( array( // ページネーションを表示
'mid_size' => 2, // 現在のページの左右に表示するページ番号の数
'prev_text' => __('Previous'), // 前のセットへのリンクテキスト
'next_text' => __('Next') // 次のセットへのリンクテキスト
) );
作成例（HTML）
<nav class="navigation pagination" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links"><a class="prev page-numbers" href="http://test.local/">前</a>
<a class="page-numbers" href="http://test.local/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="http://test.local/page/3/">3</a>
<a class="page-numbers" href="http://test.local/page/4/">4</a>
<a class="next page-numbers" href="http://test.local/page/3/">次</a>
</div>
</nav>
使用例（PHP）
the_title();
使用例（PHP）
wp_body_open();
フック例（PHP）
function body_hook(){
echo '<!--wp_body_open action hook-->';
}
add_action('wp_body_open','body_hook');
使用例（PHP）
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
使用例（PHP）
wp_footer();
フック例（PHP）
function footer_hook(){
echo '<!--wp_footer action hook-->';
}
add_action('wp_footer','footer_hook');
使用例（PHP）
wp_head();
フック例（PHP）
function head_hook(){
echo '<!--wp_head action hook-->';
}
add_action('wp_head','head_hook');
使用例（PHP）
$content = wp_kses_post( '<h1>タイトル</h1>' );
使用例（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-pages-pagination">
<span class="post-page-numbers current" aria-current="page">ページ 1</span>
<a href="http://test.local/test-page-1/2/" class="post-page-numbers">ページ 2</a>
<a href="http://test.local/test-page-1/3/" class="post-page-numbers">ページ 3</a>
</div>
使用例（PHP）
wp_nav_menu( array(
'theme_location' => 'primary', // メニューの位置（初期値：なし）
'menu_class' => 'menu-wrapper', // ul要素のクラス名（初期値：menu）
'container' => false, // ul要素のラップ要素（初期値：div）
'items_wrap' => '<ul>%3$s</ul>', // 編集型式（%1$s：menu_id、%2$s：menu_class、%3$s：リスト項目）
'fallback_cb' => false, // メニューが存在しない場合のコールバック関数（初期値：wp_page_menu）
) );
作成例（PHP）
<ul>
<li id="menu-item-1" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home menu-item-1"><a href="http://test.local/" aria-current="page">ホーム</a></li>
<li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="http://test.local/test-1/">固定ページ１</a></li>
<li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="http://test.local/test-2/">固定ページ２</a></li>
</ul>
使用例（PHP）
$out_text = wptexturize( '<p>© タイトル</p>' );
