この Hakoniwa 公式サイトはブロックテーマで初めて作った会員サイトです。

会員別で製品のライセンス管理などができます。が、今のところ会員用メニューは一部非公開で、会員登録してログインしてもメールアドレス変更機能しかありません。（もうちょっとしたら公開できると思います）

クラシックテーマ/ブロックテーマ問わず、会員サイトを作る際は気を配らなければならない箇所が多く、そこそこの難易度がありボリュームも多いです。

クラシックテーマを使った会員制サイトは サポトピア で既に経験済みですが「ブロックテーマで会員制サイトを作って運用している」という経験は、今後の制作活動に大いに役立つだろうと考えています。

これからはブロックテーマを使ってブログではない、何かしらのシステムを含んだウェブサイトを作る機会も増えてくるかもしれないので「ああ〜、前はこんなことやってたり考えたりしたな」と振り返るため、このページにメモします。

「随時更新＆本ページ公開時点でのやりかたや考え方」という程度の情報なので、たいしてまとまっていません。あらかじめご了承ください。

子テーマを作る

会員制サイトを作るにあたり、できればプラグインの導入のみで完結できればと思ったのですが、プラグインを介したテンプレートやテンプレートパーツやパターンの読み込みについて知識があまりなく、細部まで凝った作り込みをしたかったので、子テーマを作りました。

テンプレートパーツ作成

特定の投稿タイプ用（マニュアル）のテンプレートパーツを テンプレートフォルダ/parts 配下に作成。

テンプレート作成

特定の投稿や固定ページ用（ログイン、Webhook、パスワード紛失、マイページ など）のテンプレートを テンプレートフォルダ/templates 配下に作成。

パターン作成

パターンファイルは PHP プログラムが動くので、Stripe との連携やログイン中のユーザーが持つステータスなど、動的な表現が必要なものをパターンとして テンプレートフォルダ/patterns 配下に作成。作成したパターンは主にテンプレートで読み込む。

<!-- wp:template-part {"slug":"header-small-dark","tagName":"header"} /-->
<div class="wp-block-group p-4">
    <!-- wp:pattern {"slug":"abc/webhook"} /-->
</div>
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

プラグインを作る

子テーマに含めてもよかったんだけど、他の制作案件での再利用も考慮して「会員ページにログインできるブロック」を開発し、プラグイン化しました。

会員ページログイン

未ログイン時は「ログイン/登録」と表示し、ログインページや会員登録ページへ遷移。ログイン後はユーザーが設定したロゴを表示＆ロゴをクリックするとマイページへ遷移。

ブロックに対してフックする

ブロックテーマということでページの大半がブロックで作られているため、render_block を使ってレンダリング前にカスタマイズ。

さらに特定のブロックに対してフックしたい場合は render_block_{$this->name} を使う（こっちの方がよく使う）。

フックしたいブロックに何らかのクラスを付けて、そのクラスの値で条件分岐させる、など工夫すると「ページ上の◯◯ブロックすべてにフックが効いてる！意図してないよ！」なんてことを回避できる。

他の方法として、テンプレートパーツやパターンやそれらを構成するブロックに対して何かをしたければ Block Hooks の hooked_block_types を使うことができるんだけど、ブロックのネストが深い（例えば「グループブロック→グループブロック→グループブロック→ナビゲーションブロック」とか。全然よくあるケース）場合は、工夫したロジックが求められた。

そして、Block Hooks は特定のブロックを追加するために用意されているっぽいのですが、目的にあったブロックがなかったので自作ブロックを開発して対応しました。

というわけで、クラシックテーマと比較してカスタマイズの手法が大きく異なると思ったのが、この「ブロックに対してフックする」という工程。

例えば、クラシックテーマではフッター付近に何かコンテンツを追加したいときは「footer.php」ファイル中に do_action を追加して、フックできる余地をのこすなどで対応できた。

ブロックテーマはテンプレートやテンプレートパーツが html なので、テンプレートファイル内でテーマ特有の do_action を追加しても基本的に動かない（はず）。パターンは PHP なので do_action が使えるかなと試したけど、動作しませんでした。

先述した Block Hooks を使えばテンプレートやテンプレートパーツにフックできるので、上記の「フッター付近に何かコンテンツを追加する」というのはできると言えばできます。

ブロックテーマをカスタマイズするなら「ブロックに対してフックする」を数多くこなして慣れていくのが必要だな〜と感じています。

フルサイト編集について

このように書き出してみると「フルサイト編集はウェブサイトの全てをブロックエディター編集 または 管理できる」みたいな文言はわりと見かけるけど、当たっているとも間違っているとも言えないです。

ブロックテーマを使って何がしたいのか、どんなコンテンツを提供するのか・・・要件によってテンプレートやパターンやプラグインを作ったり PHP を書いたりなど、ブロックエディターで完結するための前準備が必要なこともある、というのは留意したい点です。

この辺の考え方は、クラシックテーマでもブロックテーマでも共通していますね。