🐘
【PHP】サーバーのIPアドレスでローカル環境と本番環境を判定して、CSSの主力方法を調整する
WordPressサイトで、Sassで記述したスタイルをstyleタグ(インライン)でまとめて出力するようにしたのでメモ。
そもそも<link rel="stylesheet" ...>
で読み込むとPSIやLighthouseで、レンダリングを妨げるリソースとして怒られてしまいます。この点、styleタグで主力すれば、この警告は解消されました。
しかし、ローカル環境で開発している時に、styleタグで出力すればdevツールを使っても、どこにそのスタイルが書かれているか分からない(ソースマップが機能しない)ので、開発時にはとても非効率です。
なのでPHPでサーバーのIPアドレスを特定して、下記のようにCSSの出力方法を変えてみました。
- ローカル環境なら通常通り、
<link>タグ
でcssファイルを読み込む - 本番環境(ローカル以外)なら
styleタグ
でまとめてインラインで出力
<?php
$ip = '';
// PHP環境変数があるか確認
if (getenv('SERVER_ADDR') !== false) {
// 現在のスクリプトが実行されているサーバ ーのIPアドレス
$ip = $_SERVER['SERVER_ADDR'];
}
// ローカル環境
if (false !== strpos($ip, '::1')) {
// 予め定義した、通常通り<link>タグでCSSファイルを読み込む関数
load_css_file();
// 本番環境
} else {
// インクルード処理をバッファリング(出力させず溜める)
ob_start();
require_once "{$base_uri}/assets/css/style.css";
// テンプレートごとのスタイルを読み込んで合体
if(is_front_page()) {
require_once "{$base_uri}/assets/css/front-page.css";
}
if(is_page('contact')) {
require_once "{$base_uri}/assets/css/contact.css";
}
$style = ob_get_contents();
ob_end_clean();
echo "<style>{$style}</style>";
}
?>
Discussion