多言語化プラグインWPMLとW3 Total CacheでCSSが適用されない

Published on:
Last updated:

This post is also available in: 日本語 (Japanese)

多言語化プラグインWPMLを使っているのですが、日本語だと正常にCSSが適用されているのに、英語言語版に切り替えるとCSSが一切適用されなくなってしまっていました。
本記事はその時の対策メモです。

WPML使って多言語化したらCSSが適用されない。原因はW3 Total CacheのMinify。

HTMLソース(画面右クリック>ページのソースを表示)を見て確認するとCSSの参照URIが、日本語表示だと

https://www.amelt.net/Minify済みのCSSのディレクトリ

で表示されているのに、WPMLで英語言語版にすると

https://www.amelt.net/en//https://www.amelt.net/Minify済みのCSSのディレクトリ

になっていました。

CSSが適用されない原因はW3 Total CacheのMinifyだった

w3totalcache

w3totalcache



結局、WPMLの多言語化でCSSが適用されない原因は、W3 Total CacheでCSSをMinifyする設定をしていて、URIが書き換えられていたのが原因でした。

なので、まずW3 Total Cacheの設定画面からキャッシュを削除して、Minifyを停止する必要があります。

その後、CSSが正常に適用されていることを確認してください。
もし、CSSが依然として適用されていないのならば、まだブラウザなどにキャッシュがどこかに残っているか、そもそもW3 Total Cacheが原因でないかもしれません。

おすすめのWordpressを高速化/軽量化するためのプラグイン

WP Minify

http://wordpress.org/plugins/wp-minify/

このプラグインでCSSやJSをMinify化しても、WPMLでの多言語化で問題はありませんでした。

About
Kuniyoshi Takemoto is the founder of Amelt.net LLC, and editor of this blog(www.amelt.net).Learn more and follow me on LinkedIn.