今回は、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()で取得して、変数に代入することができます。
あとは、$styleをechoするだけです。簡単ですね。
