つい先程ハマった件をちょっと書いておきます。

私が普段WordPressを使ったWebサイトの制作作業をする時、以下のような手順で行います。（多くの場合こんな感じだと思いますが。）

1. 作業用PC（Mac OSX Snow LepardやLion）に構築してあるローカルWebサーバーにWordPressをインストール
2. ローカルで制作作業
3. 公開用のWebサーバーにWordPressをインストール
4. テーマファイ等をアップロードし、データベースのデータを移行

現在制作中の、WordPressで制作しているWebサイトは、いつもと作業手順が異なっています。

1. 公開用のWebサーバー上にまずWordPressをインストール
2. 公開用サーバーのデータベースからデータをエクスポートし、ローカルにデータをインポート
3. 全てのファイルをローカルにダウンロード

そこでハマりました。

WP管理画面のレイアウト崩れ

管理画面にログインするとレイアウトが崩れてしまっていました。loadstyles.phpがCSSをうまく出力できていないようです。

崩れたWP管理画面レイアウト

XREAやCoreserverなどでよくあるというのは知っていましたが、ローカル環境はPHPもモジュール版で動いているし、どこに問題があるのかを探るのに1時間程かかってしまいました。

日本語が文字化けするのは、UTF-8のBOMが問題

実はこの件の少し前にも、ダウンロードしたテーマファイルに含まれている日本語が文字化けを起こす、ということがありました。これの時はそれほど時間が掛からず解決出来ました。

これはUTF-8で保存されたファイルがBOM（Byte Order Mark）を含むか含まないかという問題です。WindowsのTeraPadでいうUTF-8とUTF-8Nの違いですね。ちなみにMacのmiだと、インストールしたままの標準状態でBOMを追加しない設定になっています。

恐らくFTPでのダウンロード時に勝手に変換されたようです。それで、miで開いて保存し直すと問題が文字化けの問題は解決されました。

loadstyles.phpも同じように対処したら直りました

ただ、上記のUTF-8のBOMの件が今回の件にも絡んでいるというのは考えていませんでした。

Content-Typeを確認したり、.htaccessファイルでCGIモードとモジュールモードを何度も切り替えてみたりしたのですが、全然直らず。すごく困りました。

ここで、ブラウザの問題もあるかなと思い、いつも使っているChromeではなく、試しにFirefox、Safariなど別なブラウザで開いてみました。すると、なぜか正常に表示されました。つまりChromeだけの現象です。

で、いろいろ考えたのですが全く判らず、散々悩んだ挙句に「これじゃないよな」と思いながら何となく上記のUTF-8の件の対処をしてみたところ・・・直りました。

こんなところにも文字コードの問題が発生するとは！という感じで、解決出来て小躍り（笑）

今後、同じような状況になる場合は少ないと思いますが、FTPでダウンロードをする場合には文字コードにも気を付ける必要がありそうですね。