動的にcssファイルを切り替える

[shiny_cloud]

動的にcssファイルを切り替えることが目的です。

<方法１>
あるテーマの中にあるheader.phpからsytle.php(スタイルシート)を呼び出すようにしました。cssをphpで使えるようにと.htaccessには

AddType application/x-httpd-php .css

を追加。

style.php内で条件文などによりスタイルシートを切り替えたのですがIEでは動きますがFirefoxではスタイルシートとして認識されません。そもそもphpファイルは無理みたいです。

<方法２>
そこで一旦、header.phpよスタイルシートpstyle.cssを呼び出し、pstyle.cssの中身を

@import url(postyle.css.php);@import url(postyle.css);

にしました(参考：http://phpspot.org/blog/archives/2009/04/webphpcssphp.html)。

この設定でFirefoxも動くのですが切り替えるためにglobal変数を使うことができません。
($post->IDなどとしても中は空になってしまいます)

———————————————–
方法１の場合はFirefoxでphpをcssとして実行できればなんとか使えそうです。方法２の場合はGlobal変数を読みこめたらなんとかなりそうなのです。

しかし、どちらも方法がよくわりません。ご助言あればお願いします。

[KKT]

header.php 内で

<?php
  $case_css = $post->ID;
  switch $case_css{
    case 1:
      $css_file = "style1";
      break;
    case 2:
      $css_file = "style2";
      break;
    case default:
      $css_file = "style";
  }
?>

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/<?php echo $css_file; ?>.css" type="text/css" media="screen" />

とか、そんな感じでどうでしょう。
検証してませんので、微妙にエラーかも・・・

[mizube]

こんにちは。

方法1:
style.php の冒頭、charset 宣言より前に Content-Type: text/css を出力しましたか？ そうしないと PHP は text/html で出力するのでブラウザによっては期待通りに解釈しません。

<?php header('Content-Type: text/css'); ?>@charset "UTF-8";

それから PHP ファイルを CSS として出力させるには .htaccess の設定は必要ないと思います。CSS ファイルで PHP を使うためには必要ですが。

方法2:

（$post->IDなどとしても中は空になってしまいます）

の意味がよく分かりませんが、スタイル用の PHP ファイルは WordPress と分離されているので、その PHP ファイル内で $post->ID などのパラメータを扱うのはそのままでは無理っぽいです。link 要素で GET の引数を正しく与えてやればちゃんと動くと思いますよ。

<link href="http://example.com/css/style.php?mode=<?php echo esc_url($var); ?>" rel="stylesheet" type="text/css" />

あと、header.php で $post を使いたい場合は get_header() で読み込んでるんでグローバル変数 $GLOBALS[‘post’] を使う必要があったと思います（これは勘違いかも→追記：勘違いでした。ごめんなさい）。

動作は未確認なので、違っていたらごめんなさい。

[shiny_cloud]

★　kvex様、コメントありがとうございます。

実はご紹介いただきました方法は方法１と２の前にやっていました方法です(うまく動きます)。

ただMUでblogを作る度にスタイルシートを作ることになることになります。例えば、スタイルシートで共通する部分のどこかを修正する場合、すべてのスタイルシートを修正することになりメンテナンスを考えるとstyleシートの中身自体を変えた方がよいと考えています。

★　mizube様、コメントありがとうございます。
<方法１>

<?php header(‘Content-Type: text/css’); ?>@charset “UTF-8”;

このようにトップに入れても同じです。そもそもFirefoxはphpファイルをスタイルシートとしては読み込めないのです。調べましたが今のところ理由はよくわかりません。

それから PHP ファイルを CSS として出力させるには .htaccess の設定は必要ないと思います。

こちらはどういう意味でしょうか？どのようにcssとして出力するのでしょう。.htaccess は別に設定しなくてもよいならそのほうがいいのですが。単にphpをcssとして読み込もうとしてもIEもFirefoxもきちんとcssを認識しないようです。.htaccessを設定すればIEはphpをcssとして読み込んでくれます。

<方法２>

link href=”http://example.com/css/style.php?mode=&lt;?php echo esc_url($var); ?>” rel=”stylesheet” type=”text/css” />

こちらの方法は１と同じやり方ですね。Global変数を扱えないのでheader.php内で処理して引数として引き渡す。やはりPHPを読み込む部分でFirefoxではうまくいきません。IEでは.htaccessを設定するとうまくいきます。

[shiny_cloud]

<方法１>

単にphpをcssとして読み込もうとしてもIEもFirefoxもきちんとcssを認識しないようです。.htaccessを設定すればIEはphpをcssとして読み込んでくれます。

こちらですがIEはうまくいきます。失礼しました。

[mizube]

そもそもFirefoxはphpファイルをスタイルシートとしては読み込めないのです。

このようにトップに入れても同じです。そもそもFirefoxはphpファイルをスタイルシートとしては読み込めないのです。調べましたが今のところ理由はよくわかりません。

ええと、こちらの環境では、正しい方法をとれば IE でも Firefox, Opera, Chrome などでも、動作確認出来ています。

—-

こちらはどういう意味でしょうか？どのようにcssとして出力するのでしょう。.htaccess は別に設定しなくてもよいならそのほうがいいのですが。単にphpをcssとして読み込もうとしてもIEもFirefoxもきちんとcssを認識しないようです。.htaccessを設定すればIEはphpをcssとして読み込んでくれます。

PHP を CSS として出力するには

<?php header('Content-Type: text/css'); ?>

というコードをその PHP ファイルの冒頭に記述するだけです。これをしないまま単に PHP を CSS として読み込もうとすると、PHP は text/html としてコードを出力します。→ IE 以外 × (後述)

—-

根本的に PHPSPOT さんの記事は誤りです。Step1 と Step2 となっていますが、この2つは手順ではなく完全に別個の方法です。当該記事のネタ元の原文(http://www.phpro.org/articles/Embedding-PHP-In-CSS.html) を読まれれば分かると思いますよ。

まずは　.htaccess の例の指定を削除してもう一度お試しください。以下に理由を書きます。

Step1 となっているものは、 style.css など、通常は CSS 形式だった .css ファイルを PHP としてサーバーで処理させる方法で、.css が .php と同じになる方法です。 .php ファイルを text/css として出力するために必要な指定ではありません。不要です。

—-

IE 以外の主要ブラウザは、サーバーからのレスポンスヘッダをチェックし、 text/css で出力されていないファイルを無効なスタイルシートとして扱うようです。

shiny_cloud さんが Firefox で読み込まれないと誤解された理由はこのためで、実際に CSS として読み込まれていないのは .php 形式のファイルではなく PHP として動作させているのに

header('Content-Type: text/css');

を宣言していない（ために text/html で出力されている） .css 形式のファイルの方で、それなのに何故か IE は解釈してしまっている、というのがとりあえずの正解です。

.htaccess で前述の指定を行った場合、.htaccess を設置した以下のディレクトリにあるすべての .css ファイルが PHP ファイルとして処理されてしまい、そのままでは text/html で出力されることになるので、どの CSS ファイルも text/css として出力されるよう

<?php header('Content-Type: text/css'); ?>

を冒頭に記述する必要が生じてしまいます。色々面倒なので、やめた方がいいです。必要な分だけ、Step2 の方法をとればいいのですから。

—-

kvex さんの方法がうまく動作したのは、おそらく .htaccess に上記の指定をする前だったのではありませんか?　.htaccess の指定を削除した上で、もう1回トライしてみてください。それでも駄目なら、私ではちょっと理由が思い当たりません。

# type 属性で MIME Type を指定しているのに……という観点からするとどちらが正しい挙動なのか分かりませんが、主要ブラウザでいうと Opera, Safari, Chrome, Firefox は共通の振る舞い、IE のみバージョンに関係なくそれらとは異なるということで、挙動が揃っていないのが現状です。

[shiny_cloud]

★　mizube様、御丁寧なコメントありがとうございます

ええと、こちらの環境では、正しい方法をとれば IE でも Firefox, Opera, Chrome などでも、動作確認出来ています。

であるとしますと私の環境の何処かがおかしいということですね。

IE 以外の主要ブラウザは、サーバーからのレスポンスヘッダをチェックし、 text/css で出力されていないファイルを無効なスタイルシートとして扱うようです。

Firefoxのエラーコンソールを見ると
「エラー: MIME タイプが “text/css” ではなく “text/html” となっているため、スタイルシート http//hoge.hoge.com/theme/style.php は読み込まれていません。」

と出ます。確かにtext/htmlとして解釈されているため読み込んでいません。

header(‘Content-Type: text/css’);
を宣言していない（ために text/html で出力されている） .css 形式のファイルの方で、それなのに何故か IE は解釈してしまっている、というのがとりあえずの正解です。

ご指摘のように.htaccessの例の指定をはずし、header(‘Content-Type: text/css’);
を書き込みましたが状況は変化なしです。さらに.htaccessの中にある他の設定も出来る限り削除しましたが変わりません。

headerが送られていないのかもしれないと思い試しに２行設定しますと、すでにheder情報は送られているとのエラーが出るため、きちんと送られているようです。

kvex さんの方法がうまく動作したのは、おそらく .htaccess に上記の指定をする前だったのではありませんか?

はい。最初は .htaccessには例の記述はしていません。

現在、さらにいろいろ検証していますが今現在(5/24 18:45)、解決にいたっていません。

読み込んでいるphpファイルのMIME タイプを”text/css”にするが解決方法のようです。またmizube様の環境とどこが違うのかも気になるところです。同じ環境ならうまくいくはずだと思いますので。

[mizube]

heteml, さくら, XREA, ローカルの XAMPP でテストしましたが、いずれのサーバーでも動作しています。PHP のバージョンは、意味のない情報かもしれませんが、いずれも PHP5.2.6 以上です。

すこし気になるのは、

headerが送られていないのかもしれないと思い試しに２行設定しますと、すでにheder情報は送られているとのエラーが出るため、きちんと送られているようです。

という点。1行設定しただけの場合はエラーが出ないということですか? うーん。

header で Content-Type: text/css がちゃんと送られているかの確認は出来ますか? 具体的には Firefox なら Firebug 拡張の接続タブ等で style.php のヘッダ情報の Content-Type をチェックしてみてください。

もし text/css となっている場合は style.php がスタイルシートとして読み込まれているはずなので、link 要素の URL が正しいか、@import している場合にはその URI や CSS のセレクタやプロパティなどが　PHP コードの混在が原因でおかしくなっていないかを確認してください。

text/html となっている場合は、 header() 関数を使用した際の <?php の開始タグの前にスペースや改行などの空白文字が含まれていないか確認してください。1文字でも含まれると、text/html になってしまいます。(ただ、これだと前述のエラーがちゃんと出ているはずなんですよね……)

とりあえず、一旦、 style.php の内容を以下と差し替え、その他のスタイルシートは切っててみてください。背景がオレンジ色になれば読み込まれているということになります。

<?php header('Content-Type: text/css'); ?>@charset "UTF-8";

body {
    background: #f93 none;
    color: #000;
}

# ……私も何か見落としているのでしょうか。うーん。

[shiny_cloud]

★　mizube様、お手数おかけします。

heteml, さくら, XREA, ローカルの XAMPP でテストしましたが、いずれのサーバーでも動作しています。PHP のバージョンは、意味のない情報かもしれませんが、いずれも PHP5.2.6 以上です。

当方、xreaにて動作させています。

まず、

header で Content-Type: text/css がちゃんと送られているかの確認は出来ますか? 具体的には Firefox なら Firebug 拡張の接続タブ等で style.php のヘッダ情報の Content-Type をチェックしてみてください。

ですが、記載いただいた背景がオレンジ色になるstyle.phpを用意して実行させると

レスポンスヘッダ
Date Tue, 25 May 2010 07:47:30 GMT
Server Apache
Content-Type text/html
Connection close
Transfer-Encoding chunked

となり、確かにContent-Typeはtext/htmlとなっています。

いろいろヒントを探していたのですがhttp://sb.xrea.com/showthread.php?t=14556が参考になり解決しました。やったのは以下の２点です。

１、WordPressをインストールしたトップのディレクトリーの.htaccess変更

[変更前]
<FilesMatch “\.php$”>
AddHandler application/x-httpd-phpcgi .php
</FilesMatch>

[変更後]
AddHandler application/x-httpd-phpcgi .php

＊プラグインの削除ができない対応で入れていたのですがこれがよくなかったようです。

２、テーマディレクトリーに.htaccessを追加

AddHandler application/x-httpd-php .php

以上１と２を行うことで下記のようになります。

レスポンスヘッダ
Date Tue, 25 May 2010 08:17:41 GMT
Server Apache
Connection close
Content-Type text/css /
Content-Encoding gzip
Content-Length 5432

きちんとContent-Typeがtext/cssに変わりました。

今回はこの解決まで数日かかってしまいました。

mizube様にはいろいろ検証、コメントいただき感謝しております。ありがとうございます。

[mizube]

shiny_cloud さん

なるほど、XREA で WordPress を運用している場合だとそういう可能性もありましたね。
こちらでももう少し検証する余地がありました。申し訳ありません。
ともあれ解決したようで何よりです。

# 恥ずかしながら特定の条件下で header 関数が今回の制限を受けることを初めて知りました。この辺り、もう一度確認・勉強する必要がありそうです。よい機会を与えていただきありがとうございます。