WordPress テーマの作成

　WordPress テーマの作成方法についての概ねの解説をします。
　WordPress テーマは汎用性のあるページデザインをテンプレートとして作成したものです。テンプレートは HTML と PHP ファイルで作成します。ベースとなるページには HTML が必要になります。

　そのため、WordPress テーマの作成には以下のプログラミング言語の知識が必要になります。

HTML
CSS
PHP

　JavaScript に関しては必要に応じて調べてもよいかと思います。
　また、WordPress はサーバーサイドプログラム PHP、データベースサーバー MySQL を利用しますので、サーバーの知識があった方がよいのですが、これもまた必要に応じて調べてみましょう。

　最初に、WordPress の開発環境を構築する必要があります。実稼働させるサーバーで試す前にローカル（自前のパソコン）に WordPress の開発環境を整えましょう。
　WordPress テーマの開発は基本的にローカルで行います。

- ad -

ローカルに開発環境を構築

　WordPress テーマを開発するにあたって、まずはローカルに開発環境を整えます。以下のツールを使うと便利です。

LOCAL: WordPress に特化した開発環境を構築します。SSH アクセスや SSL といった機能も統括しています。Windows、MacOS、Linux で利用できます。ただし、Linux は Debain 系のみです。
MAMP: Apache、Nginx、PHP、および MySQL を使用した無料の Web 開発ソリューションです。Apache または Nginx サーバーの選択が行えます。Windows、MacOS 向けです。
XAMPP: 無償で MariaDB、PHP、および Perl を含んだ、簡単にインストールできる Apache ディストリビューションです。Windows、MacOS、Linux で利用できます。

　MAMP、XAMPP は WordPress に特化していないために、WordPress を追加でインストールする必要があります。

　XAMPP による開発環境のインストールについてはXAMPP のインストールを参照してください。

　WordPress のインストールはWordPress 公式サイトからダウンロードするとよいでしょう。

WordPress テーマの作成手順

　WordPress テーマを作成するには、まず Web サイトをデザインするところから始めましょう。そのデザインは HTML で作成していきます。
　さらに HTML で作成した通りに表示されるように WordPress の仕様に沿って PHP でコーディングします。PHP は埋め込み型スクリプト言語などと呼ばれ、HTML テキストに埋め込むように編集します。

Web ページをデザインし、HTML で基礎となる web ページを作成する
WordPress の仕様に沿ってデザインした Web ページを PHP でコーディング
出来上がった WordPress テーマでサイトを作成しテスト

　出来上がった WordPress テーマはテストサイトを何度か作成してデバグすることになると思います。
　3. を何度か行いながらブラッシュアップしましょう。

　必要になるページデザインは、サイトの index ページ、カテゴリーごとの index ページ、各ページまたは記事ごとおおまかなデザインが必要になります。これらを PHP でテンプレートとして作成します。
　サイトの index ページはひとつしかありませんので、１ページのためにページデザインをすることになります。そして、カテゴリーごと、各ページごとのページデザインが必要になります。

web ページのデザイン

　WordPress テーマは汎用性のあるページデザインを定義したものです。WordPress テーマを作成する上でどのようなページデザインにするかを概ね決定しておきます。

　ページデザインはワイヤーフレームというページの全体像をラフデザインするという技法があります。詳しくはワイヤーフレームで調べてみてください。

　A4 サイズの紙を横にしてページデザインを手書きで作成してみることをお勧めします。
　A4 サイズの紙だとページの最初の表示部分だけしか入りません。しかし、ユーザーが最初に目にする部分をデザインすることは重要です。そこに最も訴求している内容をもってきます。

　そのデザインからテンプレートの基礎となる HTML と CSS でページを作成します。PHP は HTML テキストへの埋め込みによって使用しますので、基礎となる HTML ページが必要になります。

　HTML テキストはこのサイトのTemplate（雛形）の作成を利用しすれば、最初の段階は簡単に済みます。
　レスポンシグ web デザインと呼ばれる PC、タブレット、スマートフォンでも対応したページデザインが求められます。それには CSS を利用する必要があります。レスポンシブWEBデザインとレスポンシブメニューの実装を参照してみてください。

　いずれにしても、この段階でのデザインは大まかなものでよいです。実際の WordPress によるサイトを作成してみないと具体的なデザインイメージはわかないと思います。
　以降の PHP を含めたテンプレートをたたき台にしてブラッシュアップしていきます。

PHP でテンプレート作成

　次に web ページのテンプレートを PHP で作成していきます。

　WordPress には、以下のように決められたファイル名があります。
　これらのファイル名はその用途が決まっており、PHP ファイルによっては決まりのショートコードによって読み込めるようになっています。

functions.php: WordPress で骨格となる PHP ファイル
wp_*.php: wp_ で始まる名称の PHP ファイルには機能が決まったものがある
index.php: サイトまたはカテゴリーごとのホームになる index ページの定義を編集するファイル
header.php: ページのヘッダー部分を定義。ショートコード get_header(); によって読み込まれる
footer.php: ページのフッター部分を定義。ショートコード get_footer(); によって読み込まれる
sidebar.php: web ページ内のサイドに表示されるサブコンテンツの定義ファイル。ショートコード get_sidebar(); によって読み込まれる

　これらは web ページを作成する上で必要となる PHP ファイルです。
　サイト内のページを内容ごと作成するために以下のファイルが用意されています。

single.php: WordPress の機能投稿で追加した記事ページの定義ファイル。ブログやサイトのユーザーから投稿されたページの定義用ファイル。
page.php: WordPress の機能固定ページから作成されるページの定義ファイル。index ページや上記の記事のページ以外を定義したファイル。
search.php
comments.php: サイトの閲覧者のコメント一覧とコメントを投稿するためのフォームの定義 PHP ファイル; サイト内の検索結果を表示するページの定義ファイル
404.php: URL指定でページが見つからなかった場合に表示するページの定義。SEO 対策には必要

　CSS ファイルは style.css という名称のファイルがデフォルトで読み込まれるようになっています。スタイル設定ファイルは style.css ファイルという名称にすることで自動で CSS ファイルとして読み込まれます。

　以下はページの作成がどのように行うかのみの概説で、functions.php、index.php 、header.php 、footer.php 、sidebar.php についてのみ取り上げています。

functions.php

　function.php は骨格になる定義を行うための PHP ファイルです。以下の用途に使用することができます。

管理画面の設定
テーマで使用する関数やショートコードの定義による機能の追加
グローバル変数を定義

　全体のプログラムの様子が分かるように編集しておくと後での見直しに便利です。

function.php

/*
* ショートコードの定義例（フックする例です）
*/
add_action( 'my_shortcord', function() {
	...
});

index.php

　サイトまたはカテゴリーごとで最初のファイルとなるのが index.* というファイルです。WordPress においてはファイル名を指定しない場合 index.php が表示されます。

　サイトを訪れたときに最初に表示されるページのデザインを index.php に定義します。

　もしも作成した index.html があるなら、index.php にファイル名を変更します。
　ファイル名を変更した index.php の内容に header.php、footer.php ファイルの読み込み用のショートコードを加えます。

index.php

<?php get_header(); ?>
<main>
<!--
index ページの本文
-->
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

　<main> エレメントはこのエレメントに囲まれた部分がメインのコンテンツであることを示しています。

　ここでは、サブコンテンツがある場合として sidebar.php を呼び出すショートコード <?php get_sidebar(); ?> が加えてあります。
　サブコンテンツは必ずしも必要というわけではないです。

　<?php get_header(); ?> が header.php を呼び出すショートコード、<?php get_footer(); ?> が footer.php を呼び出すショートコードです。

　またカテゴリーごとにも最初のページとして index.php を用意します。

header.php

　header.php には、web ページの内容より上の部分を編集します。

　HTML では先頭の <!doctype html> から </header> ぐらいまでをこのファイル内に編集します。
　ここでは <article> エレメントの始端で終わっています。 <article> エレメントはページであることを示すエレメントで、<section> エレメントと見分けがつくように使っています。

header.php

<?php
/**
 * The header for our theme
 *
 * このファイルは <article id="contents"> までを定義しています;
 *
 * @package WordPress
 * @since 2023.4.6
 */
?>
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1" />
	<title></title>
	<meta name="robots" content="index,follow" />
	<?php wp_head(); ?>
</head>
<body>
	<header>
	</header>
<article id="contents">

　<?php wp_head(); ?> は WordPress が <head> にページ情報を補完してくれる機能です。

footer.php

　footer.php には、web ページの内容より下の部分をここに編集します。主に <footer> の定義のためのファイルです。
　ここでは都合上 </article> エレメントの終端から始まっています。

footer.php

<?php
/**
 * The footer for our theme
 *
 * このファイルは、</article> からを定義しています;
 *
 * @package WordPress
 * @since 2023.4.6
 */
?>
</article>
<footer>
	<div id="site_title_footer"><a href="">サイト名</a></div>
	<p><a href="../term_of_use.html">プライバシーポリシー</a></p>
	<div id="copyright">&copy;&nbsp;owner_name</div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

　<?php wp_footer(); ?> は </body> の前に配置します。このショートコードは、WordPress が webページを補完してくれる機能です。

sidebar.php

　ページの右または左などに表示されるサブコンテンツ用の定義です。必ず必要というわけではなく、メインコンテンツと分けるために使用します。

　HTML の <aside> エレメントを使用します。

sidebar.php

<aside>
<!--
ページのサブコンテンツ
-->
</aside>