テーマ開発・しあげ

テーマのしあげと、ここから先の道

シマエナガ堂テーマの完成チェックと身だしなみ(スクリーンショット・style.cssのプロフィール欄)、そしてブロックテーマ・公式ハンドブックなど、この先の学びの地図を渡します。

トップ・会社案内・お知らせ・カテゴリ・404・商品——企業サイトに必要なページが、すべて自作テーマで動いています。最終レッスンは、テーマとしての身だしなみを整える仕上げと、このコースの先にある道の案内です。

仕上げ1:テーマのスクリーンショット

「外観」→「テーマ」の一覧で、自作テーマだけ画像なしの灰色になっていませんか。テーマフォルダにscreenshot.pngという名前の画像(推奨1200×900px)を置くだけで、一覧にサムネイルが表示されます。

トップページを撮って、その名前で保存するだけ。それだけで一覧の「顔」が締まります。比率が推奨の4:3からずれていても表示自体はされる(余白ができるだけ)ので、まずは置くことを優先してください。

これで、テーマフォルダは完成形のこの姿に。2ファイルから始めたフォルダが、ここまで育ちました。

shimaenagado/
├── 404.php
├── archive-shohin.php
├── category.php
├── footer.php
├── front-page.php
├── functions.php
├── header.php
├── home.php
├── index.php
├── page.php
├── screenshot.png   ← 最後の1枚
├── single-shohin.php
├── single.php
└── style.css

仕上げ2:style.cssのプロフィール欄も仕上げる

最初のレッスンで書いたstyle.css先頭のコメントは、実は今も現役です。テーマ一覧では、さきほど置いたスクリーンショットの下に、このコメントのDescription:Author:がそのままプロフィール文として表示されています。

/*
Theme Name: シマエナガ堂
Author: あなたの名前
Description: 雑貨店シマエナガ堂のオリジナルテーマ。企業サイトの定番構成(トップ・会社案内・お知らせ・商品)を、クラシックテーマの型で実装。
Version: 1.1
*/

しあげのタイミングで見直したいのはこの2点です。

  • Description——開発初期に書いた仮の説明のままになっていないか。今の完成形に合わせて、一言で書き直す
  • Version——大きく仕上げた区切りなので、1.0から1.1のように上げておく。「どの区切りで何が変わったか」を、あとから自分でも追いやすくなります

スクリーンショットが「顔」なら、このコメントは「自己紹介文」。両方そろって、テーマ一覧の中で恥ずかしくない1枚になります。

仕上げ3:完成チェックリスト

納品前のプロも使う観点で、自分のテーマを点検してみましょう。

  • 全ページを実際にクリックして回った(トップ→会社案内→お知らせ→カテゴリ→詳細→商品→404)
  • wp_head()wp_footer()がある(管理バーが出る=OK)
  • タイトルタグがページごとに変わる(title-tagサポート)
  • CSSはwp_enqueue_styleで読みこんでいる(手書きlinkが残っていない)
  • カスタムフィールドの出力をesc_html()で消毒している
  • 記事が0件のときに崩れない(ループの外側の見出しなどが変にならないか)
  • スマホ幅で見て破綻していない(余裕があればメディアクエリで調整)

ここから先の道

シマエナガ堂で身につけた型は、そのまま実務の土台です。次に進むならこの3方向。

1. 公式Theme Handbookを読む

WordPress公式のテーマ開発ハンドブックは、このコースで学んだ内容の完全版辞書です。中でも「Template Hierarchy」のページは、このコースで学んだテンプレート階層の図解版——迷ったときに立ち返る地図として、ブックマークしておく価値があります。条件分岐タグ・国際化など、「次の一歩」が全部載っています。英語ですが、ブラウザ翻訳で十分読めます。

2. SCF(ACF)で管理画面を作りこむ

カスタムフィールドのレッスンで触れたSCF(Secure Custom Fields)を導入すると、クライアントに渡せるレベルの編集画面が作れます。「実務のWordPress案件」にいちばん近い次の一歩です。調べものは、情報量の多い旧名の「ACF」で検索すればOK(使い方はほぼ共通)です。

べんりワザACFとSCF、どっちを入れればいい?名前が2つあるのはなぜ?という疑問は、べんりワザのこの記事で解決できます1

3. ブロックテーマの世界をのぞく

このコースで学んだのはクラシックテーマでした。いまのWordPressには、テンプレートまでブロックで組むブロックテーマ(theme.json+HTMLテンプレート)という新方式があります。テンプレートファイルはPHPではなくHTMLベースのマークアップになり、style.cssのコメントが担っていた役割の一部をtheme.jsonが肩代わりして、色・余白のルールを一括管理します。考え方(テンプレート階層・テーマサポート)は共通なので、クラシックを理解した今なら、両者の違いも「進化の理由」として読めるはずです。

このレッスンのまとめ

  1. screenshot.pngをテーマフォルダに置くと、テーマ一覧にがつく
  2. style.cssDescriptionVersionも仕上げのタイミングで見直す——一覧に出る自己紹介文
  3. 仕上げはチェックリスト点検——特にwp_head/wp_footer・enqueue・エスケープ・記事0件は実務でも見られる観点
  4. 次の道は公式ハンドブック・ACF・ブロックテーマの3方向。まずは題材を変えてもう1周が最短の復習

やってみよう:シマエナガ堂テーマを完成させる

最後の仕上げです。

  1. トップページのスクリーンショットを撮り、screenshot.pngとしてテーマフォルダに保存する
  2. 「外観」→「テーマ」で、自作テーマに顔がついたことを確認する
  3. 上のチェックリストを上から順に点検する(1つでも直せたら上出来)
  4. 完成したサイトを、トップから404まで通しでクリックして回る

おつかれさまでした。あなたはもう「テーマを使う人」ではなく、テーマを作れる人です。ここで作った型を持って、自分の題材でもう1周してみてください。

よくある質問

自分で作ったWordPressテーマを配布したり販売したりしてもいいですか?
WordPressテーマはPHP部分がWordPress本体のライセンス(GPL)を引き継ぐため、配布するならGPL(またはGPL互換)で公開するのが原則です。自分だけで使う分には気にしなくて大丈夫ですが、公式テーマディレクトリへの登録や販売を考えたときに出てくるルールとして覚えておくとよいです。
この先テーマを改造したいとき、直接ファイルを書きかえていいですか?
自分ひとりで使うテーマなら直接編集で問題ありません。人に配ったり、あとで元のテーマ本体を差し替える可能性があるなら、変更点だけを別フォルダにまとめる「子テーマ」という仕組みを使うと、変更が消えずに済みます。
完成したテーマを公式のテーマディレクトリに登録できますか?
できます。WordPress.org公式のテーマディレクトリには誰でも申請でき、審査(コーディング規約・セキュリティ・GPL準拠など)を通れば無料で公開できます。このコースで身につけた型(テンプレート階層・エスケープなどの基本)は、その審査観点ともかなり重なっています。