WordPressでサイト制作をしていくと、「自分でテーマを作りたい！」と思う時が必ず来ます。
最初は無料テーマとプラグインで満足していたものですが、いつしか、CSSはもちろん、テンプレートファイルを直に変更するようになったりします。
このレベルまで達したら、いっそのこと、オリジナルテーマを自作することをお勧めします。
他人が作ったテーマをカスタマイズしたことがあるなら、意外と簡単に作れるものです。
一度作ってしまえば、このテーマを案件ごとにカスタマイズしていくことになると思います。
カスタマイズする元のテーマが自作したオリジナルテーマになるだけで、基本的に、今までと作業は変わらないかもしれません。
しかし、自分で作ったモノですから、他人が作ったテーマをカスタマイズするよりも、作業効率が格段にアップします。
そして何よりも、WordPressのことをより深く理解できるようにります。
オリジナルテーマに必要なファイルをそろえる
テーマを構成するのに必要なファイルは、「style.css」と「index.php」の2つです。
このどちらかがないと、「壊れているテーマ」としてエラーになります。
「style.css」と「index.php」があれば、テーマを有効化できるようになりますが、これだけでは、WordPressの機能を十分に使うことができません。
ボクが思う必要最低限のファイル構成はこんな感じです。
wp-content
∟ themes
∟ org-theme
∟ footer.php … 共通フッター
∟ functions.php … テーマのための関数用ファイル
∟ header.php … 共通ヘッダー
∟ index.php … ここでは主に一覧用のテンプレート（必須）
∟ singular.php … 固定ページ・個別投稿ページ用共通テンプレート
∟ style.css … テーマの情報（必須）
∟ theme-style.css … デザイン用スタイルシート※テーマ名を「自作テーマ」フォルダ名を「org-theme」にしました。
テーマを構成するファイル
構成するファイルを簡単に説明します。
style.css
テーマの情報を記述します。
■style.css
/*
Theme Name: 自作テーマ
Author: Office01
Author URI: https://www.bossraku.com
Description: 最小限のテーマ
Version: 1.0
*/- Theme Name … テーマの名前
- Author … テーマの作成者
- Author URI … 作成者のURL
- Description … テーマの説明
- Version … テーマのバージョン
必要なのは「Theme Name」だけで、他は自己満足的に記述しています。
ここでスタイルをあてることもできますが、デザイン用のCSSは別にして、ここではテーマの情報だけに留めておきました。
index.php
「index.php」の役割は、通常ならトップページですが、WordPressでは少し違います。
「style.css」と「index.php」の2つさえあれば、テーマは動くわけですが、それは「index.php」が様々な役割を果たしてくれるからです。
今回のテーマでは「singular.php」という固定ページ・個別投稿ページ用の共通テンプレートを用意したので、「index.php」は一覧系の役割を担います。
- category.php
- tag.php
- date.php
- search.php
- archive.php
など、一覧を表示するテンプレートはたくさんあります。
該当するテンプレートが無い場合、最終的に「index.php」が使われます。
それぞれのテンプレートを用意すれば、「index.php」は使わないこともありえます。
裏を返せば、必要なテンプレートだけを用意して、他は「index.php」に任せちゃえばいいのです。
header.php / footer.php
共通のヘッダー・フッターです。
singular.php
「固定ページ」「個別投稿ページ」共通のテンプレートです。
- page.php … 固定ページ
- single.php … 個別投稿ページ
このように、2つ用意するテーマが多いですが、デザインやレイアウトが大きく異なるということは、そんなにありません。
というわけで、共通テンプレートにしてしまいました。
多少の違いは、if文でどうにかできるレベルだったりするので、経験上、問題が起こったことはありません。
ただ、デザインを大きく変えたテーマを作りたいという場合は話は別です。
functions.php
テーマに使用する関数等を記述するファイルです。
関数などを使わなければ、特に必要はありません。
よく使われるであろう基本的なものを記述してみました。
■functions.php
<?php
//タイトルタグを生成
add_theme_support('title-tag');
//管理画面で「外観」->「メニュー」を使えるようにする
add_theme_support('menus');
//アイキャッチ画像を使えるようにする
add_theme_support('post-thumbnails');
//テーマをブロックエディタに対応させる
add_theme_support('wp-block-styles');
?>見れば大体わかると思いますが、わかりにくそうなものだけ少し補足します。
add_theme_support(‘title-tag’)
サイトのタイトルタグを自動生成してくれる関数です。
以前は「header.php」で「wp_title()」を使ってタイトルを表示していました。
<title><?php wp_title('');?></title>最近では、この「add_theme_support(‘title-tag’)」使うことが多いです。
them-style.css
デザイン専用のスタイルシートです。
もちろん、好きなファイル名にしてもらっても構いません。
こちらで自分の好きなようにデザインにしてください。
最後にまとめ
必要最小限なテーマの作り方の基礎を紹介しました。
こんな単純なサイトはありませんので、もっと肉付けをしなければなりません。
ただ、構造・仕組みなどテーマへの理解が、より深まったと思います。
この記事を書いていて自分でもよい復習になった気がします。