例えばWordPressのプラグインなんかを作っていて、CSSで変数を使いたいなんて時があります。
読み込みをPHPファイルにする。
まずはCSSファイルの拡張子を.php
にして、CSSを読み込ませていた部分をPHPのファイルに変更します。
HTMLならこんな感じ。
<link rel="stylesheet" type="text/css" href="sample.php" />
WordPressのwp_enqueue_style
でCSSファイルを読み込ませている場合も拡張子を変えるだけです。
<?php wp_enqueue_style( 'sample-css', PLUGIN_URL . '/css/sample.php' );
このままでは、text/htmlとかで読み込まれてしまうためCSSとして動作しません。
PHP化したCSSをCSSとして読み込んでもらう
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の関数を使いたい場合はWordPressのwp-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ノウハウだとは思ってませんのであしからず....
[参考]
- 作者: 大藤幹,北川貴清,きむらあつとし,境祐司,高橋としゆき,錦織幸知,長谷川広武,矢野みち子
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2015/07/02
- メディア: 単行本
- この商品を含むブログ (1件) を見る