🔰はじめての方へ

【WordPress】管理画面エディタとVSCode+FTP、両方使う落とし穴

WordPress編集 Wordpress
記事内に広告が含まれています。
スポンサーリンク

WordPressでテーマをカスタマイズしていると、テーマファイルを直接編集 する場面が出てきます。

そのときに使うのが、

  • WordPress管理画面の「テーマファイルエディタ」
  • ローカル環境の VSCode で編集 → FTP(FileZillaなど)でアップロード

の2つの方法です。

WordPressはテーマのカスタマイズが管理画面から簡単に行えたり、プラグインが充実しているので、FTPを使用してアップロードを行うようなことはしなくても何とかなります。

ほとんどの方が、テーマファイルエディタを使用してCSSを追加するようなやり方をしているのではないかと思います。

私は、オリジナルページを今回作っているのですが、オリジナルページを作成する前は、WordPress管理画面のテーマファイルエディタを使用して、CSSをいじったりしていました。

※ オリジナルページの作成については別記事にまとめているのでご参照ください!
【WordPress】オリジナルのページを作成/作成方法

今回、WordPressでオリジナルのページを作成するために、VScodeやcursorといったテキストコードエディタを使用して、GitHubでの管理をしながら編集することにしました。

そこで一つの疑問が・・・

わたし
わたし

WordPress管理画面で編集したCSSが、ローカルの style.css と違う!!
このままFTPでローカルの古いファイルを、サーバーにあげたら死ぬやつや・・・

これはどうしたらいいのか、

それぞれのメリット・デメリットや注意点をまとめてみたので参考にしていただけたら幸いです!

※ 今回使用したテキストコードエディタは主にcursorなのですが、ここでは「VScode」と記述しています。


管理画面の「テーマファイルエディタ」で編集する方法

WordPress管理画面の 「外観」→「テーマファイルエディタ」 から直接PHPやCSSを修正できます。

メリット

  • ブラウザからすぐに編集できる
  • 更新すれば即時反映されるので確認が早い

デメリット

  • PHPの書き間違いでサイトが真っ白(Fatal error)になりログインできなくなるリスクあり
  • バックアップが残らない(プラグインを使用すれば可能)
  • 複数人で作業する場合に「誰がどこを編集したか分かりにくい」

👉 手軽だけど、本番環境でいきなり使うのはちょっと危険です。


VSCode+FileZilla(FTP)で編集する方法

ローカルにテーマファイルを置き、VSCodeで編集 → FTPでサーバーにアップロード します。

メリット

  • ローカルにファイルが残るので安心
  • VSCodeの補完やエラーチェックで書き間違いを防げる
  • GitHubなどと組み合わせれば、履歴管理や復元が簡単

デメリット

  • 修正するたびにアップロード作業が必要
  • 確認までにひと手間かかる
わたし
わたし

ちょっとめんどくさいけど、子テーマ用のGitHubリポジトリを作成して組み合わせれば、「このスタイル全部やり直したい!」などといった大幅な修正も、履歴が残るから便利!

👉 少し手間は増えますが、安全性と管理しやすさは圧倒的にこちらが上です。


実際に起きた「style.cssが反映されない」問題

私の場合、最初は管理画面エディタでCSSを編集していたのですが、途中からVSCode+FileZillaに切り替えました。

すると…

  • 管理画面で編集したCSS
  • ローカルで編集したCSS

がバラバラになってしまい、どっちが最新か分からなくなる 状況が発生。

最終的に、管理画面で書いたコードをコピペしてローカルにまとめ直し、FTPでアップロードして同期 することで解決しました。


今後のベストな運用方法

  • VSCodeで編集 → GitHubで管理 → FTPでアップロード を基本にする
  • GitHubで管理するまでもないサイトは、管理画面エディタを使用(必ずバックアップを取る!!
  • GitHubで管理中の場合、管理画面エディタは「緊急でちょっと直したい時」だけ使う
  • 管理画面で触ったら、必ずローカルにも反映して同期を取る

これで「ファイルが最新か分からない」「エラーで真っ白になった」といったトラブルを避けられます。


まとめ

  • 管理画面エディタ → 手軽だけど危険(本番で直編集は避けたい)
  • VSCode+FTP → 少し手間だけど、安全で管理もしやすい

👉 個人的には、普段はVSCode+FTP+GitHub管理、緊急時だけ管理画面エディタ が一番安心だと思いました。


✍️ 今回のようにテーマカスタマイズをしていると「反映されない」とか「どっちのファイルが最新?」みたいな問題がよく出るので、備忘録として残しておきます。

オリジナルページ関連の記事を載せておきますので、興味ある方はご覧ください!

オリジナルページ作成するのも少し大変でした・・・