【Ha-Basic】 How to output CSS inline by theme

【ha-Basic】テーマでCSSをインライン出力する方法

公開日: カスタマイズ
【ha-Basic】テーマでCSSをインライン出力する方法

なんのこっちゃ??と思われるかも知れませんね。WordPressのテーマの多くはヘッダー(header.php)内に

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">

というようなタグを使ってテーマ内の「style.css」を読み込むようになっています。これを外部CSSといい、直接ヘッダー内にズラズラとCSSのコードを書くよりもメンテナンスしやすい設計になっています。

が、これが時にGoogle PageSpeed Insightsなどで「htmlソースの中に直接記述するように!(これをインライン表示といいます)」と指摘されることがあります。これに対応するため今回は【ha-Basic】テーマでCSSをインライン化する方法を紹介します。

尚、これを行ったからといって必ずしもGoogle PageSpeed Insightsのスコアが改善される保証はありませんし、テストした感覚では体感的にサイトの表示速度が上がるわけでもないので、どうしてもインライン化したいという場合にのみ設定してみてください。

とどのつまりこれを行うよりも

  • 不要なプラグインを削除して余分なCSSやスクリプトを読み込まなくする
  • 広告コードを外す
  • ブログパーツなど外部のスクリプトを使うものを使わない

ようにする方がよっぽど高速表示できますので、まずはそちらで徹底的に無駄の排除を行ってくださいね。

【ha-Basic】のfunctions.phpへ追記してCSSをインライン表示させる

【ha-Basic】テーマは通常の「style.css」の他、色の指定をするための「a-color-style.css」、カスタマイズするための「a-insert-css.css」という3つのファイルがあり、ヘッダー内でもこの順番で読み込むようにして

  • 通常のCSS(テーマデフォルトのCSS)を適用する
  • 通常のCSSの後に「a-color-style.css」を読み込んで、通常のCSSの色指定を上書きする
  • 「a-color-style.css」の後に「a-insert-css.css」を読み込んで、前2つのCSSと被る部分は上書き、ないものはそのまま適用する

という形になっています。以下のコードはそれぞれのCSSファイルを前述した順番でインライン表示するためのコードになりますのでそのまま「a-insert-functions.php」へ追記します。

/*** CSSをインラインで追加 ***/
function output_inline_style() {
// CSSスタイルファイルをキューに追加
wp_register_style( 'style', false );
wp_enqueue_style( 'style' );
// style.cssファイルを読み込み
$css = file_get_contents( get_stylesheet_uri(), true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'style', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_style' );

/**
* a-color-style.cssをインラインで追加
*/
function output_inline_color_style() {
// CSSスタイルファイルをキューに追加
wp_register_style( 'a-color', false );
wp_enqueue_style( 'a-color' );
// style.cssファイルを読み込み
$css = file_get_contents( get_template_directory_uri().'/a-color-style.css', true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'a-color', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_color_style' );

/**
* a-insert-css.cssをインラインで追加
*/
function output_inline_insert_style() {
// CSSスタイルファイルをキューに追加
wp_register_style( 'a-insert', false );
wp_enqueue_style( 'a-insert' );
// style.cssファイルを読み込み
$css = file_get_contents( get_template_directory_uri().'/a-insert-css.css', true );
// インラインにCSSの内容を出力
wp_add_inline_style( 'a-insert', $css );
}
add_action( 'wp_enqueue_scripts', 'output_inline_insert_style' );

終わったら一度サイトを表示して右クリックし、「ソースの表示」をクリックして、ソース内にCSSのコードがそのまま表示されているかを確認してください。
※もしも表示されないときはキャッシュをクリアしてみてください

ヘッダー内に記述されているリンクタグをコメントアウトする

テーマヘッダ「header.php」の42行目付近から記述されている

<link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-color-style.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-insert-css.css">

を以下のようにコメントアウトします。

<!--link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>"-->
<!--link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-color-style.css"-->
<!--link rel="stylesheet" href="<?php echo get_template_directory_uri() ?>/a-insert-css.css"-->

※連続した行ではありませんのでそのままコピペせず1行1行確認しながら行ってください

これで3つのCSSへのリンク読み込みが解除され、CSSコードがすべてインライン表示されるようになります。

簡単ですが以上が【ha-Basic】テーマでCSSをインライン化する方法になります。この記事は一応インライン化したらどうなるかなぁとテストで設定したコードですので、冒頭でも書きましたが、これを行ったからといって必ずしもGoogle PageSpeed Insightsのスコアが改善される保証はありませんし、テストした感覚では体感的にサイトの表示速度が上がるわけでもないので、どうしてもインライン化したいという場合にのみ設定してみてください。

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

QR Code

このページはモバイル端末でもご覧いただけます

左のQRコードを読み取っていただくと、このページのURLが表示され、簡単にアクセスできます。ぜひモバイル端末でもご覧ください。

WordPressのカスタマイズ・不具合対応などご相談ください

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。