トップ・会社案内・お知らせ・カテゴリ・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つあるのはなぜ?という疑問は、べんりワザのこの記事で解決できます13. ブロックテーマの世界をのぞく
このコースで学んだのはクラシックテーマでした。いまのWordPressには、テンプレートまでブロックで組むブロックテーマ(theme.json+HTMLテンプレート)という新方式があります。テンプレートファイルはPHPではなくHTMLベースのマークアップになり、style.cssのコメントが担っていた役割の一部をtheme.jsonが肩代わりして、色・余白のルールを一括管理します。考え方(テンプレート階層・テーマサポート)は共通なので、クラシックを理解した今なら、両者の違いも「進化の理由」として読めるはずです。
このレッスンのまとめ
screenshot.pngをテーマフォルダに置くと、テーマ一覧に顔がつくstyle.cssのDescriptionとVersionも仕上げのタイミングで見直す——一覧に出る自己紹介文- 仕上げはチェックリスト点検——特にwp_head/wp_footer・enqueue・エスケープ・記事0件は実務でも見られる観点
- 次の道は公式ハンドブック・ACF・ブロックテーマの3方向。まずは題材を変えてもう1周が最短の復習