みなさま、お久しぶりです!
くじらあたまの王様です!🦤
最近は、クライアント様ご自身でも更新しやすいように、すべてWordPressのブロックエディタで構築する案件が増えてきました。
そこで今回は、Local環境を使って、フルサイト編集(FSE)ベースのオリジナルテーマ作成にチャレンジしてみました。あわせて、自分なりの手順も整理してみようと思います!
今回のゴール
・一般的な企業サイトをWordPressのブロックエディタのみで構築
・見た目よりも「構造・仕組み重視」で進行
・「Local」を使って構築
※今回は、Localのインストールが完了している前提で進めていきます。
Localとは…
「Local」は、WordPressの開発環境をローカルに簡単に構築できるツールで、テーマ開発やテストにも便利です。
詳しくは、公式サイトをご確認ください。

Localを使ってWordPressサイトを作成する
今回は、Localをインストール済みの状態からスタートします。
①左下の「+」マークをクリック

②「Create a new site」を選択し、「Continue」をクリック

③サイト名を入力(今回は「TEST-FSE」にしてみました)
④「Continue」をクリック

⑤「Preferred」を選択し、「Continue」
PHPのバージョンなどを変更したい場合は「Custom」を選びましょう

⑥WordPressのログイン情報(ユーザー名・パスワード)を設定
⑦「Advanced options」から「Select Language」を日本語に設定
⑨「Add Site」をクリック!


ローカル環境が完成しました!🎉

「Open site」をクリックすると、作成したWordPressサイトをブラウザで確認できます。
現状はこんな感じです!

まだ何もカスタマイズしていない状態なので、デフォルトテーマ「Twenty Twenty-Five」が反映された状態になっています。
ここから、どんどんカスタマイズしていきます!
「WP Admin」ボタンをクリックすれば、WordPressのログイン画面へ移動できます。
先ほど設定したユーザー名とパスワードでログインしましょう。


WordPressでオリジナルテーマを作成する
プラグイン「Create Block Theme」を追加
まずは、テーマを作成・管理しやすくしてくれるプラグイン「Create Block Theme」 を追加します。
①管理画面から「プラグイン」>「プラグインを追加」へ

②「Create Block Theme」で検索
③「今すぐインストール」→「有効化」

インストールが完了したら、
「外観」>「ブロックテーマを作成」へ進みます。

【このプラグインでできること】
・テーマのエクスポート
・新しい空のテーマを作成
・既存テーマの複製
・子テーマの作成
今回は、新しくオリジナルの空テーマを作成したいので、「新しい空のテーマを作成する」をクリックします。

テーマ名だけ入力すればOKです(他の項目は任意)。
今回は「test-theme」としてみました!
「空のテーマの作成と有効化」をクリックすると、オリジナルテーマが作成され、自動的に有効化されます。

「外観 > テーマ」で確認すると、作成したテーマがちゃんと有効になっているはずです。

サイトを表示してみると、デフォルトテーマから変更されており、見た目が少し変わっているのがわかります。

オリジナルテーマのファイル構成を確認してみる
Localの画面にある「Site folder」をクリックすると、ローカルに作成されたサイトのフォルダが開きます。

その中の wp-content > themes フォルダに移動すると、先ほど作成したテーマが追加されているのが確認できます。

【 test-theme の初期ファイル構成】
test-theme/
├── parts/
│ ├── footer.html
│ └── header.html
├── templates/
│ └── index.html
├── readme.txt
├── screenshot.png
├── style.css
└── theme.json
まだカスタマイズしていないのでファイル数は少ないですが、基本構成はこのようになっています。
従来の「クラシックテーマ」では .php ファイルをたくさん用意していたと思いますが、
ブロックテーマでは .html ファイルに置き換わっています!
最初はちょっとびっくりしますよね…!
次回予告
今回は、Localを使ってローカル環境を整え、空のオリジナルテーマを作成するところまで進めました。
次回は、theme.json
を使って、WordPressブロックテーマの見た目を整えていきます!お楽しみに!
作業が終わったら…
Localでの作業が終わったら、「Stop site」ボタンをクリックして、サイトを停止しておきましょう。

起動したままにしておくと、PCのメモリやCPUリソースを継続的に消費してしまい、パフォーマンスに影響を与える可能性があります。
作業が終わったら、忘れずに停止しておくのが安心です!