今回はちょっとトリッキーな方法です。
ワードプレスでcssをPHP化する方法です。
おそらく一般的にはstyle.cssに
@import url(‘../custom/style.css’);
とか
header.phpに直接記入したりするんですが、今回はCSSをPHP化して使ってみようという試みです。
なぜ、PHP化にこだわったかというとマルチグログを作成していた際に各ブログ用にCSSを作るのが面倒だったというのが今回のネタなんです。
できたら自動で生成できないものかと考えました。
スポンサーリンク
PHPにしてしまったら楽なのに～と思い、調べましたよ。
そして見つかりました。
CSSをPHP化するのはすぐできたんですがワードプレスで自分のやりたいことはなかなかうまく行かなかったです。
それで試行錯誤の上コレでいけるっ！ということになったので忘れないように書いておきます。
ステップ1 cssをphp化する
まずcssをphp化するには拡張子.phpでファイルを保存します。sample.phpとしておきましょうか。
先頭に
1 2 | <?php header('Content-Type: text/css; charset=utf-8'); ?> @charset "UTF-8"; |
と記述します。
これでcssをphp化完了です！！
必要に応じてcssのプロパティを記述していけば良いです。
例えばこんな感じにしましょうか。上記の記述の下に書き入れます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | a img {border:none;} .post { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; } #nav li a, #nav li a:link { color: #262626; display: block; margin: 0px 5px 0px 5px; padding: 7px 10px; text-decoration: none; font-size: 1.1em; font-weight: bold; font-family: Arial, Helvetica, Sans-serif; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } #content h5 { border-bottom: 1px dotted #006; border-left: 5px solid #006; padding-left: 5px; margin-top: 5px; margin-bottom: 15px; background: url(images/eventbar.gif) no-repeat; } |
ステップ2 php化したcssを読み込む
今度はワードプレスのfunctions.phpにスタイルシートを読み込ます設定をします。
1 2 3 4 5 6 7 8 9 10 | function add_phpcss() { $data = array( 'class'=>'press', 'url'=> get_bloginfo('template_url'), 'color'=> '#F00', 'charset'=> get_bloginfo('charset'), ); echo '<link rel="stylesheet" href="' . get_bloginfo('stylesheet_directory') . '/css/sample.php?' . http_build_query($data). '" type="text/css" />'; } add_action('wp_head', 'add_phpcss'); |
こんな感じです。それで仮にclassとかurl、color、charsetなんかにしていますが、取得したい名前にしておきます。好きに変えてください。
それで => の後は取得したい値を記述します。A => B,は追加しても良いです。今、4つありますが、2つでも10個でも取得に応じて追加したら良いです。
header.phpに直接書く場合はこんな感じですね。
1 2 3 4 5 6 7 8 9 | <?php $data = array( 'class'=>'press', 'url'=> get_bloginfo('template_url'), 'color'=> '#F00', 'charset'=> get_bloginfo('charset'), ); ?> <link rel="stylesheet" href="<?php bloginfo('template_directory');?>/css/sample.php?<?php echo http_build_query($data) ;?>" type="text/css" /> |
ステップ3 php化したcssにphpを記述する
そしてまたsample.phpのcssを開いて
@charset “UTF-8”;の下に
1 2 | <?php $data = $_SERVER['QUERY_STRING']; parse_str($data);?> |
と記述します。
それで下に記述したcssを先程取得した名前に$をつけて表示させます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | // <?php echo $charset;?> a img-<?php echo $class;?> {border:none;} .post { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid <?php echo $color;?>; } #nav li a, #nav li a:link { color: #262626; display: block; margin: 0px 5px 0px 5px; padding: 7px 10px; text-decoration: none; font-size: 1.1em; font-weight: bold; font-family: Arial, Helvetica, Sans-serif; text-transform: uppercase; text-shadow: 0 1px 0 #fff; } #content h5 { border-bottom: 1px dotted #006; border-left: 5px solid #006; padding-left: 5px; margin-top: 5px; margin-bottom: 15px; background: url(<?php echo $url;?>/images/eventbar.gif) no-repeat; } |
こんな感じで書いていけばかなり効率良くできますが、負荷がかかるのと無理矢理感が否めませんね。
ただし、コレは使えますね。
まとめ
php化したcssに直接書いたらいいんじゃないの？って思われるかもしれないのですが、実はワードプレスの関数とかは指定の場所でしか有効では無いので、header.phpかfunctions.phpなどのところでした値を取得できないのです。
それでphpのパラメータを取得する方法を思いついたのです。
私がしたかったのはマルチブログの小テーマのディレクトリ名を取得した値をcssにいれて運用しようと思ったんですね。
それでいろいろとやってなんとか出来ました。
まず小テーマのfunction.phpに
1 2 3 4 5 | function getDirNames() { global $blog_id; $sub_blog = get_blog_details($blog_id); echo trim($sub_blog->path, '/'); } |
を入れてブログIDからオブジェクトを読み取ります。
それを上記と同様に記したfunctions.phpにパラメーターに含めて取得したということなんです。
他にも色々と利用方法有りそうですね。
