WordPressのテーマ開発といえば、PHPとHTMLが混在した「見通しの悪いコード」になりがちです。特に大規模なサイトや、React/VueなどのモダンなJSフレームワークに慣れたエンジニアにとって、従来のWordPress開発はストレスの溜まる作業ではないでしょうか。
今回は、そんな悩みを解決するRoots社のスターターテーマ**「Sage（セージ）」**を紹介します。
**「Sage 10」は、Laravelでおなじみのテンプレートエンジン「Blade」を採用し、ビルドツールに「Bud.js」**を搭載しています。これにより、コンポーネント指向で、かつ爆速な開発体験が可能になります。
実際に私がプロジェクトで導入して感じたメリットと、構築手順をまとめました。
なぜ今、Sageなのか？（導入のメリット）
従来のテーマ開発と比べて、以下の点が圧倒的に優れています。
- Bladeテンプレート:
<?php ... ?>を書かずに、@ifや@foreachでスッキリ記述できる。 - コンポーネント指向: ヘッダーやカードUIなどをパーツ化（
@include）しやすく、再利用性が高い。 - 最新のフロントエンド: Webpackの後継であるBud.jsにより、HMR（ホットモジュールリプレースメント）が効き、保存した瞬間にブラウザが更新される。
- Tailwind CSSとの親和性: 設定なしで最初からTailwindが使えるオプションがある。
1. 環境構築（インストール）
SageはComposerを使ってインストールします。 ※前提として、ローカル環境（DockerやLocal by Flywheelなど）でWordPressが動いている必要があります。
テーマディレクトリ（wp-content/themes/）に移動し、以下のコマンドを実行します。
Bash
# テーマ名を「my-sage-theme」とする場合
composer create-project roots/sage my-sage-theme
インストール中に、「Tailwind CSSを使いますか？」などの質問対話が表示されます。私は開発効率を優先して全て「Yes」にしています。AIとの親和せいもものすごく高いので。
【ここにComposerのインストールが完了したターミナル画面のスクショを貼る】 キャプション：対話形式でオプションを選べるので、初期設定が非常に楽です。
依存パッケージのインストール
テーマフォルダに入り、Node.jsのパッケージをインストールします。
Bash
cd my-sage-theme
yarn install
# または npm install
開発サーバーを立ち上げるには以下のコマンドです。
Bash
yarn dev
これで、http://localhost:3000 などでプロキシサーバーが立ち上がり、ファイルの変更を即座に検知してくれるようになります。
【ここに「yarn dev」でビルドが成功し、Readyと表示されている画面のスクショを貼る】 キャプション：Bud.jsによるビルド画面。エラーが出た場合はNodeのバージョンを確認しましょう。
2. Bladeテンプレートの威力
Sageの最大の魅力はBladeテンプレートです。 例えば、従来のWordPressで記事ループを書くとこうなります。
従来の index.php
PHP
<?php if ( have_posts() ) : ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<div class="content"><?php the_content(); ?></div>
</div>
<?php endwhile; ?>
<?php endif; ?>
これが、Sage（Blade）だとこう書けます。
Sageの index.blade.php
Blade
@extends('layouts.app')
@section('content')
@while(have_posts()) @php(the_post())
@include('partials.content-'.get_post_type())
@endwhile
{!! get_the_posts_navigation() !!}
@endsection
圧倒的に可読性が高いのが分かります。HTMLの中にPHPのロジックが埋もれることがありません。
【ここに実際のエディタ画面（VS Code等）でBladeファイルを開いているスクショを貼る】 キャプション：シンタックスハイライトも効くため、ミスの発見も早くなります。
3. ハマりポイントと解決策
導入時にいくつか躓いた点（ハマりポイント）を共有します。
公開ディレクトリの設定
Sage 10からは、ビルドされたアセットが public ディレクトリに出力されます。Webサーバーの設定によっては、パスが正しく読み込まれないことがあります。 特にDocker環境（WordMoveなど）を使っている場合、wp-config.php や bud.config.js のプロキシ設定（proxy と serve のURL）を正しく合わせる必要があります。
JavaScript
// bud.config.js の例
app
.setUrl('http://localhost:3000')
.setProxyUrl('http://my-site.local') // ローカルのWPアドレス
まとめ：WordPress開発を「エンジニアリング」に戻そう
Sageを導入することで、WordPress開発は「古いPHPの修正作業」から「モダンなWebアプリケーション開発」へと進化します。
学習コストは多少ありますが、保守性や開発スピードの向上を考えれば、投資する価値は十分にあります。これからWordPressでオリジナルテーマを作るなら、ぜひSageを試してみてください。
