「SWELLやCocoonは気に入っているけど、トップページだけはChatGPTで作ったデザインを乗せたい」——そんな声から生まれたWordPressプラグインがMoteRakuです。テーマを乗り換えると投稿一覧やSEO周りの設定をやり直す手間が発生しますが、MoteRakuは今のテーマを残したまま「ページ単位」でAIデザインを差し込めるのが特徴。今回は実際にCocoonテーマの上でMoteRakuを動かし、投稿ページは既存テーマのまま、ヘッダー・フッターとトップページだけをAIデザインに差し替える検証をしてみました。
公式サイトでは「最短10分、4ステップ」で使い始められるとうたわれています。①カツプロへの無料会員登録、②プラグインのインストール、③固定ページにHTML/CSSを貼る、④公開、という流れで、案内ページもガイド付きなので迷いにくい作りでした。プラグイン自体はテーマファイルやfunctions.phpを一切触らずに管理画面だけで完結し、コーディングの知識がなくても、ChatGPTなどが出力したHTML/CSSをそのままコピー&ペーストするだけで形になります。
投稿はCocoonのまま、ヘッダー・フッターだけAIデザインに
まず「MoteRakuページ」という専用の投稿タイプで、ヘッダー用とフッター用の2ページを作成します。編集画面はHTML欄とCSS欄が並ぶだけのシンプルな作りで、{MENU}や{SITE_NAME}のようなタグを置くと実際のメニューやサイト名に自動で置き換わります。右側の「MoteRaku 反映先」パネルで「共通ヘッダーに使う」「共通フッターに使う」をONにし、さらに「記事などテーマ表示ページにも差し込む」もONにするだけで、Cocoonの投稿一覧・個別記事にもそのままヘッダー/フッターが反映されました。
実際にCocoonの投稿一覧ページを開くと、記事カードやサイドバーのウィジェット（検索・アーカイブ・カテゴリー）はCocoonそのままに、ヘッダーとフッターだけが自作デザインに切り替わっているのが確認できました。テーマ側の元のヘッダー/フッターは自動で非表示になるため、二重表示になる心配もありません。
トップページだけ丸ごとAIデザインにすることも可能
固定ページ側で「このページをMoteRakuで表示」にチェックすると、そのページだけテーマを完全にバイパスして白紙のHTML/CSSキャンバスとして表示されます。反映先を「フロントページに使う」にすれば、トップページだけAIが作ったデザイン、記事に進むとCocoonの通常表示、という使い分けが完成します。
上記の利用方法
- MoteRakuを有効化する
- ヘッダー用・フッター用のMoteRakuページを作り、HTML/CSSを貼る
- 反映先パネルで「共通ヘッダー」「共通フッター」＋「テーマ表示ページにも差し込む」をON
- トップページ用にもう1ページ作り、「MoteRakuで表示」＋「フロントページに使う」をON
- 公開して見た目を確認する
まとめ
既存テーマを丸ごと乗り換えなくても、「トップページやヘッダー・フッターだけ理想のデザインにしたい」というニーズにMoteRakuはうまく応えてくれる印象です。どのステップも管理画面のクリックとHTML/CSSの貼り付けだけで完了し、想像していたより手軽でした。SWELLやCocoonの資産をそのまま活かしながら部分的にAIデザインを差し込みたい方は、公式サイトから試してみてはいかがでしょうか。
公式サイト https://moteraku.com/