WordPressでCSSファイルをインラインで読み込む方法

WordPressでCSSファイルをインラインで読み込む方法のアイキャッチ画像

今回は、WordPressでCSSファイルをインラインで読み込む方法を紹介します。

PageSpeed Insightの点数を上げるために、CSSをインラインで読み込みたいという人もいるでしょう。

PHPファイルに直書きするという方法もありますが、Sassを使いたいという人には不向きです。

WordPressでCSSファイルをインラインで読み込む方法

テーマフォルダ直下にstyle.cssを作ると思いますが、これはテーマ情報を書くために使い、実際のスタイルは別のCSSファイルを作成して、そこに記述しましょう。

今回は、cssフォルダを作成して、その中にtheme.cssを入れているとします。

/css/theme.cssこのようなディレクトリ構造ですね。

そして、header.phpの中に、以下のようなコードを書きます。

<?php
ob_start();
require_once( get_template_directory() . "/css/theme.css" ); //ob_start()で出力させずに変数に格納する
$style = ob_get_contents();
ob_end_clean();
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<!-- 省略 -->
<style>
<?php echo $style; ?>
</style>
<?php wp_head(); ?>
</head>

これで外部ファイルのCSSを、インラインで出力することができます。

コードの解説

ここからは、コードの解説です。上のコードを見て分からないところがあれば一読してください。

特に難しいことはしていません。

get_template_directory()

get_template_directory()これは現在のテーマのディレクトリへの絶対パスを取得する関数です。URLではなく、パスを取得します。

特定のファイルをincludeする時は、get_template_directory_uri()ではなくget_template_directory()を使います。

get_stylesheet_directory()という関数もありますが、これは子テーマを有効化していると子テーマのパスを取得してしまいます。

ob_start()、ob_get_contents()、ob_end_clean()

<?php
ob_start();
require_once( get_template_directory() . "/css/theme.css" ); //ob_start()で出力させずに変数に格納する
$style = ob_get_contents();
ob_end_clean();
?>

通常、require_onceを使うとそこにコードが出力されてしまいますよね。

ob_start()ob_end_clean()を使うことで、一旦出力させず溜めておくことができます。これをバッファリングと言います。

溜め込んだコードはob_get_contents()で取得して、変数に代入することができます。

あとは、$styleechoするだけです。簡単ですね。