サーバーからWordPressのファイルをダウンロードしたら、UTF-8には要注意

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

私が普段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管理画面レイアウト

崩れた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でダウンロードをする場合には文字コードにも気を付ける必要がありそうですね。

スポンサードリンク

twitterまたはFacebookでもコメントして頂けます