🧠 概要：
概要
この記事は、WordPress初心者がHTMLブロックに依存して記事を作成してきた結果、直面した課題とその解決策を述べています。著者はカスタムHTMLの使用に偏った運用が問題を引き起こし、効率的な開発方法としてWpCodeプラグインを導入する過程を共有しています。最終的には、構造化されたアプローチの重要性を強調し、他の初心者に対する警鐘を鳴らしています。
要約の箇条書き
- 自サイトで脳トレコンテンツをWordPressで作成中に問題に気づく。
- カスタムHTMLブロックだけで記事を書くことが間違いであると認識。
- 複雑なロジックの実装ができず、互換性の問題の可能性を感じる。
- ChatGPTからWpCodeプラグインを推奨され、導入を検討。
- WpCodeによるスニペット管理で、記事内HTMLを整理できるメリットを発見。
- しかし、PHPスニペットの制約により、JS/CSSの効きが悪くなる問題に直面。
- 複雑なツールを構築する際は、コードを分割して使う重要性を理解。
- 一度は42記事を悪戦苦闘した経験から、初心者の思い込みに警鐘を鳴らす。
- プラグインを使い、設計を整えて分割・整理することの長期的な利点を提案。
こんにちは。ある日、脳トレ系のWebコンテンツをWordPressで更新していた時、ふと大事なことに気づいてしまいました。
カスタムHTMLだけで完結させようとしていた私の過ち
私の運営しているサイト（https://brainmuster.com）では、ChatGPTの力を借りて毎回「脳トレ」を実装しています。
ところが、これまではずっと、ブロックエディターの中のカスタムHTMLブロックだけでコードを完結させようとしていました。
<style>...</style><script>...</script><div id="unique">...</div>といった感じで、すべて1つのHTMLブロックにまとめるよう、ChatGPTにも指示していました。
その結果、複雑なロジックが必要なゲームは実装できず、コードも読みづらく、しかも将来的に互換性の問題が出る可能性が……。
ChatGPT「それ、推奨されない方法ですよ」
と言われたのが、転機でした。
解決策：WpCodeというプラグインの存在
そんなとき、AIから勧められたのが「WpCode」。
このプラグインを使えば、PHP・HTML・CSS・JavaScriptをスニペットとして登録し、ショートコードで記事内に呼び出すことができます。
-
複数のコードを分離して管理できる
-
記事内のHTMLがすっきり
-
他コードとの干渉も減らせる
といったメリットがあり、まさに理想的な運用方法だと感じました。
WpCodeのスニペット、思ったより難しい
しかし、すぐに問題も。特に「ユニバーサルスニペット」はPHPがメインであり、JavaScriptやCSSを直接記述できるわけではないという事実に、途中で気づきました。
最初の脳トレ2〜3本はうまくいったのに、
-
JSのイベントが効かない
-
デザイン崩れる
-
モバイルでバグる
といった現象が頻発。
これは、PHPでHTML/JS/CSSをechoしているだけであり、本質的には「混ぜ書き」できないということを理解しました。
PHPはスープ、JSやCSSは具材。混ぜる場所は選ぶ必要があるのです。
教訓：複雑な構成は分割が正解
WpCodeは便利ですが、万能ではありません。
複雑なゲームやツールを構築したいなら、以下のように使い分けるのがベストです：
-
PHPスニペット → ロジック処理
-
JS/CSSスニペット → 表示や動作の制御
-
HTMLテンプレート → レイアウトや構造
それをショートコードで統合するイメージです。
最後に：初心者にありがちな思い込み地獄
私は42記事分、カスタムHTMLだけでどうにかしようとしていました。今思えば、独学ゆえの思い込みと、誰にも相談できなかった孤独が原因だったと思います。
もし今、あなたが「HTMLブロックで詰まっている」「JavaScriptが動かない」と悩んでいるなら、WpCodeという選択肢を検討してみてください。
設計を整えて、分割して、整理して。最初は面倒でも、長期的にはその方が絶対にラクです。
同じミスを繰り返さないために、この記事がヒントになればうれしいです。
🔗関連リンク
Views: 0
