【悲報】別のWPサイトのCSSを上書きしてしまう…Σ(ﾟдﾟlll)ｶﾞｰﾝ

幸いベースのCSSは同じだったのでこれくらいで済みましたが、ミスって「hitfilm…?」というワードプレスサイトのレイアウトがくぢゃくぢゃになりました。

1. トップバーの背景色が異なる
2. 見出し領域がぐちゃぐちゃ
3. 検索フォームが短くなってる
4. 広告のマージンもおかしい
5. パンくずリストがない
6. サイトタイトルがない
7. …

正解は下図です。

 

 

原因

最初は何でおかしいのか分からなかったんですが原因はFilezillaの操作ミスでした。ただ、詳しい原因の前にサイト運営のバックグラウンドをちょっとだけ紹介しておきます。

下図がFilezillaの設定画面で右の領域がリモートサイト側でリアルに公開されているサイトのテーマフォルダが表示されています。一方、左側にはローカルサイト側、つまりPC内のフォルダが表示されています。

ワードプレスをざっくり説明すると、ワードプレスはサイトデザインと記事は別々に管理されていてテーマフォルダとはサイトデザインを司るCSS(カスケーディング・スタイル・シート)やPHPファイルが保存されたフォルダのことです。

さらにローカルサイト側のフォルダはExpression Web 4(EW4)とリンクさせているのでEW4で編集してアップロードするとリアルサイトに反映されるようになっています。EW4の操作はUNDOですぐに戻せる簡単な修正を行う時などにこの仕組みを使ってました。

原因はローカルサイト側Ａとリモートサイト側Ａがちゃんと接続していなければいけないのにローカルサイト側だけサイトＢのテーマフォルダになっていることに気付かずにリモートサイトＡのindex.cssをダウンロードしてサイトＢのCSSファイルに上書きし、その上書きしたCSSファイルを修正して今度はサイトＡにアップロードして上書きしたためにＡとＢのCSSファイルが書き換わってしまったというでした。

直前にFilezillaでサイトマネジャーで設定していてその画面を閉じる時に「接続」をクリックすればこの画面を閉じると自動で設定変更した内容で接続されるんですが、ミスった時はOKを押して画面を閉じて接続するのを忘れていた今回のようなミスが起こったということみたいです。

流石にテーマ作成の時にこのような仕組みは使いませんがまさかこんな失敗をするとも思ってませんでした。ミスってもこのような状況に陥らないような仕組みを構築する必要があります。尚、バックアップしていたCSSファイルを利用して1時間ほどで元に戻せました。