数年ぶりにwordpressの自作テーマを作成した。
今回の方針はシンプルかつ超軽量。自分しか使うことがないため、とにかく軽く不要なものは一切入れていない。Gutenbergの良さをほぼ活かしきれていない気がするけど気にしない。
元々はnuxt.jsでヘッドレス化するために色々準備していたけれど、ドメインやらなんやらで面倒になって通常テーマで軽いの自作しようって流れ。後悔はしていない。
白紙の状態から作成
子テーマではなく、完全な白紙状態から作成した。UNDERSCORESのようなスターターキットも使用していない。時代的にも場末の個人ブログにコメント機能は完全に不要なため（少なくともうちのブログでは）、潔くオミットした。サイト内検索もほぼ利用されていなかったためオミット。
管理画面からCSSを編集することもないため、SCSSで作成しcompressed出力にした。
デザインはadobe XDが有料になったため、Figmaで作成。
Figmaが凄すぎた。無料なのにXDとほぼ同様のことができる。ブラウザ上で動くのでインストールは不要。そのかわりに、サインインが必要。
全体の作業フロー
- まずはFigmaでデザインを作成。一覧系と個別系ページの2つに、スマホとタブレットの2パターンほど。
- xamppやdockerで開発環境を作成。
- wordpressのテーマフォルダ内に自作のテーマフォルダと必須ファイル（後述）を作成。
- ひたすらphpとscssをコーディングする。
wordpressのテーマファイルは下記のみを利用。
自作するために割りと必要最小限の構成かと思われる。*は必須ファイル。
index.php *
必須ファイル。投稿一覧系のテンプレートとして汎用的に利用。
functions.php *
必須ファイル。wordpressで利用する機能を追加したり削除したりするほか、自作の関数を作成している。今回作った関数は、関連記事の表示に関するものと、カテゴリとタグの一覧を生データで取り出してレンダリングするための関数。OGP関連のタグ出力（一部のページで利用）も自作した。
style.css *
必須ファイル。今回SCSSでコンパイルして出力しているため、冒頭のお決まりフォーマットを残してコンパイルする必要がある。この場合下記のように一行目の末尾に「!」を追加する形となる。が、もしかしたらコンパイラで変わるかもしれない。テーマ名とか作者名とかは、公開するわけじゃないので内容は適当につければOK。
/*!
Theme Name: テーマ名
Author: 作成者名
Description: テーマ説明
*/screenshot.png
必須ではないが、テーマ管理画面で区別がつきやすいため一応用意。
上記以外のテーマ関連ファイル
header.php ・・・ ヘッダ用テーマファイル
footer.php ・・・ フッタ用テーマファイル
page.php ・・・ 固定ページ用テーマファイル
single.php ・・・ 個別投稿ページ用テーマファイル
404.php ・・・ 存在しないページのテーマファイル
