読者です 読者をやめる 読者になる 読者になる

かもメモ

自分の落ちた落とし穴に何度も落ちる人のメモ帳

CSS内でPHPの変数を使いたい。

CSS PHP WordPress

例えばWordPressプラグインなんかを作っていて、CSSで変数を使いたいなんて時があります。

読み込みをPHPファイルにする。

まずはCSSファイルの拡張子.phpにして、CSSを読み込ませていた部分をPHPのファイルに変更します。
HTMLならこんな感じ。

<link rel="stylesheet" type="text/css" href="sample.php" /> 

WordPresswp_enqueue_styleCSSファイルを読み込ませている場合も拡張子を変えるだけです。

<?php
wp_enqueue_style( 'sample-css', PLUGIN_URL . '/css/sample.php' );

このままでは、text/htmlとかで読み込まれてしまうためCSSとして動作しません。

PHP化したCSSCSSとして読み込んでもらう

PHP化したCSS sample.phpの先頭にheaderを書いてCSSとして読みこむようにします。

<?php
  header('Content-Type: text/css; charset=utf-8');
  include_once( 'config.php' ); // 設定の有るファイルを読み込むとか?
?>
/* sample.php 以下は普通のCSSを書けばOK */
html {
  font-size: 62.5%;
  line-height: 1.4;
  color: <?php echo $base_color; ?>; /* PHPの変数が使える! */
  background-color: <?php echo $base_bg_color; ?>
}

これで、PHPの変数が使えるCSSができました。
簡単でーす✌('ω'✌ )三✌('ω')✌三( ✌'ω')✌

WordPressの関数を使えるようにする

CSS内でプラグインのパスを取得したいとか、WordPressの関数を使いたい場合はWordPresswp-load.phpを読み込んであげればOKです。

<?php
  // CSSファイルからの相対パスで wp-load.php の読み込みを指定
  include_once(dirname( __FILE__ ) . '/../../../../wp-load.php');
  header('Content-Type: text/css; charset=utf-8');
  define( 'PLUGIN_URL', plugins_url( 'my_plugin_name', __FILE__ ) );
?>
@font-face {
  font-family: 'My-Web-Font';
  src: url('<?php echo PLUGIN_URL; ?>/fonts/font-name.eot')
  src: url('<?php echo PLUGIN_URL; ?>/fonts/font-name.eot??#iefix') format('embedded-opentype'),
       url('<?php echo PLUGIN_URL; ?>/fonts/font-name.woff') format('woff'),
       url('<?php echo PLUGIN_URL; ?>/fonts/font-name.ttf') format('truetype'),
       url('<?php echo PLUGIN_URL; ?>/fonts/font-name.svg#font-name') format('svg')
}

こんな感じでWordPressの関数も使えるようになります!
プラグイン内のwebfontなら相対パスにすれば済む話ですが...  
 
パフォーマンス的にもGoodノウハウだとは思ってませんのであしからず....


[参考]

プロとして恥ずかしくない 新・CSSデザインの大原則

プロとして恥ずかしくない 新・CSSデザインの大原則