WordPressで脳トレ系ゲームを作るのは、初心者には難しかった・・・。
今回は、「カスタムHTMLじゃ管理が大変だし、wpcodeのショートコードでスマートにできないかな？」と考えた私が、見事に迷子になって泣いた話をシェアします。
最初はうまくいっていたのです。4つ目までは。
でもそこから先はエラーと地獄のモバイル非対応まつりで、気づけばコードと心がバグってました。
この記事は、同じようにWordPressでJavaScriptやCSSを使ったコンテンツを動かしてて、**「ショートコード化したいけどうまくいかない！」**と悩んでいる人向けです。
見出し1：なぜカスタムHTMLからwpcodeショートコード化に挑戦したのか？
元々は、WordPressのブロックエディターでカスタムHTMLを使って、脳トレゲームを表示していました。見た目や動作には特に問題はなかったのですが、管理面でどんどん煩雑になっていったのです。
ゲームの数は、43個。
1つずつHTMLを書くのは非効率すぎるし、将来的なメンテナンスも絶対ムリだと思いました。
そんなときにChatGPT先生（無責任なアドバイザー）に「カスタムHTMLはやめた方がいい」と言われ、「じゃあ、共通スニペットとPHPでショートコード化すればいいじゃん！」とアドバイスを受ける。
最初の4つまでは意外とスムーズにすすみました。
でも、そこからが本当の地獄でした。
共通スニペット作戦が大失敗【JavaScriptもCSSも噛み合わない】
「ゲームが43個もあるなら、共通のJavaScriptとCSSを用意して、それぞれの脳トレのPHPスニペットを短くすれば管理がラクになるはず！」
この発想自体は、たぶん間違ってはいなかったと思います。理屈の上では。
ChatGPTに全43個の脳トレのコードをテキストで渡して、共通スニペットを自動生成してもらいました。
ここまでは、ちょっとした勝利感すらありました。
が、現実はそう甘くなかった。
実際にスニペットを適用してみると、
- うまく動かない
- デザインが崩れる
- モバイル表示がとんでもなくズレる
- そもそも共通化できないくらい、各ゲームがバラバラな作り
という、**四重苦（コード界の四天王）**が次々に襲来。
「え、もうこのゲームだけ特例でいいかな…」と折れそうになる場面も何度もありました。
しかも、1つのPHPスニペットをちゃんと完成させるのに1時間以上かかる。
そして完成しても、WordPress側で動かすと謎の不具合が出たりして、結局戻す…という悲しみのループ。
最終的には、「どうやっても無理な脳トレ」がいくつも出てきて、「これはもう、理想じゃなくて現実を見よう」と決断することになりました。
共通スニペットは“最初”に作れ！【後から整理は無理ゲー】**
今回の一連のカオスから得た最大の教訓がこれです。
共通化は、最初にやらないと死ぬ。
なんとなく予想はしてたけど、現実は予想より10倍厳しかった。
今回の脳トレゲームたちは、HTML・CSS・JavaScriptの構造も見た目も動作もバラッバラだったので、「あとから共通化」しようとしても、コードがかえって複雑になって破綻する。
「そもそも最初から共通の設計にしておけば、デザインも挙動も揃って、管理しやすかったのに…」
って、後になって気づく。そう、後になってしか気づけないのです。これが発達障害ASDとIQ67の私の悲しい末路。
特に、音が鳴るタイプのゲームとか、レスポンシブ対応が絡むものは、CSSとJavaScriptの兼ね合いが地獄級にむずかしくて、「むしろカスタムHTMLの方がマシだったのでは？」という。
これはもう完全に構成ミス。
「最初から共通スニペットありき」で作るべきだった。（ちゃんと似た構造のコンテンツを量産する場合）
後から合わせようとしても、逆に全部壊れる。
例えるなら、最初に設計図なしで家を43軒建ててから、「共通の電気配線にしたいなぁ」とか言い出す大工さん。
そういう意味では、今回の失敗はコードというより「戦略ミス」でした。
…って書いてる時点で、すでにちょっと立ち直ってきてる自分がいます。不思議なものです。
１日一人見に来てくれるかどうかの末期脳トレサイトなので・・・。
結局カスタムHTMLに戻すという結論【最初の方法が最適だった説】
あれこれ試した結果、私はカスタムHTMLで脳トレゲームを埋め込むという、最初にやってたやり方に戻ることにしました。
動いてるから！問題ない。
下手にショートコード化してバグらせるくらいなら、そのまま使った方がストレスも少ない。
最初の4つくらいはショートコード化に成功しましたが、それ以降は明らかに「スニペットの悪夢」状態になってたので、もうこれ以上ムリしない方がいいと判断。
もちろん、管理やコードの整頓って大事です。でもそれよりも**「壊れないで動くこと」と「ストレスなく更新できること」**の方が、今の自分には重要でした。
結果的に、この経験から学べたのは──
- WordPressでJavaScript系のアプリやゲームを作るなら、最初に共通スニペットと構造の型をしっかり作っておくこと。
- 途中でやり方を変えるのは、労力に見合わないことが多い。
- そして何より、「動いてるなら、それでいい」って割り切ることも大事ということです。
まとめ：やらかして学んだ、WordPressと脳トレ開発のリアル
今回のチャレンジで得たことをまとめておきます。
- wpcodeを使ったショートコード化は、理論上は便利だけど、複雑なゲームや動的要素が多いと逆に管理が大変になる。
- 最初にJavaScriptやCSSの共通ルールを決めてからゲームを作るべきだった。後からの統一はかなり厳しい。
- 失敗も経験のうち。うまくいかなかったからこそ、何が必要だったのかがハッキリ見えてきた。
正直、「時間返して」って気持ちもあるけど、今は少しスッキリしています。
この経験が、同じように悩んでる誰かのヒントになったら嬉しいです。
そして、あなたも私と同じ失敗ルートを辿らないことを祈っています。
コメント