【WordPress】get_template_part();を使ってCSSをインライン出力する方法

公開日: 開発情報・技術情報
【WordPress】get_template_part();を使ってCSSをインライン出力する方法

この方法は【ha-Basic】テーマ バージョン3.0から採用しています

通常WordPressでは「style.css」などに書かれたデザインコードを「enqueue_style();」を使ってリンクとして出力しています。

もちろんこれが王道というか常套手段というか、当たり前のお作法なのですが、CSSはhtmlのheadで出力されるので、Google PageSpeed Insightsのページ解析などで改善の指摘をされることがあります。

これに対する主な対策としては「CSSを先読みさせる(プリロード)」、「CSSをインライン出力させる」方法があり、また同時にコメントや改行を除いた「圧縮したCSS」を作成してから読み込ませるという手法もあります。

旧バージョン(3.0よりも前)の【ha-Basic】でも、

  1. PHPを使って圧縮したCSSファイルを用意する
  2. 圧縮したCSSを、PHPを使ってインライン出力する

という手法を取り、インライン出力の処理は都度行われるものの、負荷軽減のため圧縮前のCSSに変更があったら圧縮ファイルを作り直すようにしていました。

テーマの更新にあたり、子テーマやテーマの追加CSSで変更することがほとんどで、親テーマのCSS自体に直接変更を加えることが少ない点から、あらかじめ圧縮したCSSを作成しておけば、圧縮の処理は必要ないのでは?また、インライン出力にしてももっと効率的な方法がないのか?という疑問を解決するために、バージョン3.0では以下のようにしました。

  • 圧縮したCSSはあらかじめ作っておく
  • get_template_part();を使って直接的にインライン出力する

本記事は【ha-Basic】で行っている技術情報ではありますが、自作テーマを作られている方の参考になればと考え、公開しますので、参考になれば幸いです。

圧縮したCSSファイルを用意する

まずWordPressのget_template_part();は、PHPで書かれたものをそのまま出力(処理)する関数ですので、通常使う「.css」拡張子では動作しませんから、インライン出力させるためのファイルは、「.php」拡張子で作成します(今回は例としてstyle.phpというファイル名で親テーマのテーマフォルダ直下へ設置していることを前提にしています)。

また、コメントや余分な改行をなくした圧縮コードを作る必要があります。これはいちいち自身で作成するのは大変ですから、外部ツールを使ってパパっと作ります。

CSS Minifier (スタイルシートの圧縮)

今のCSSをそのままコピーするだけで簡単に圧縮コードを作ってくれますので大変便利です。

圧縮したコードは先ほどの「.php」拡張子で作ったファイルへ貼り付けておきます。

get_template_part();を使ってインライン出力する

テーマによって異なりますが、WordPressの作法?に従って現状のCSSが出力されているなら、テーマのfunctions.phpへenqueue_styleで記述、もしくはheader.phpに<link lel…で直接書かれているので、既存のCSS読み込みをコメントアウトするなどして停止します。

この段階でサイトを表示してみてぐちゃぐちゃになっていれば、停止できています。そうでない場合には別の方法で出力されているか、キャッシュが残っているので、前者であれば再確認、後者であれば「Ctrl」+「F5」でクリアしてみてください。

次に以下のコードをテーマのfunctions.phpへ追加します。

if ( !function_exists( 'hab_style_php_output' ) ):
function hab_style_php_output(){
echo '<style class="style-css">';
echo get_template_part('style');
echo '</style>';
}
add_action('wp_head', 'hab_original_css_output',2);
endif;

style.phpがテーマフォルダ直下にない場合には修正が必要です。

これでもう一度サイトを表示させてみます。元通りの表示になれば完了です。

うまくいかない場合には以下を確認ください。

  • キャッシュをクリア(「Ctrl」+「F5」)してみる
  • style.phpは親テーマのテーマフォルダ直下にあるか?
  • もともとのスタイル読み込みコードは確実になくなっているか?

この変更によってどこまでの効果が得られるのかは、はっきり言って不明です。ただ1つ言えるのは、ページ表示時に動くものが少なくなる(対策により、特定ファイル(style.php)を呼び出しているだけ)ので、サーバーへの負担が減ることです。微々たるものかもしれませんが、こうして少しずつ余計な処理を減らすことで、たくさんのアクセスがあるサイトでもきちんと処理される可能性が上がる(サーバーダウンを防ぐ)と思います。

後述:2021年5月10日現在、【ha-Basic】3.0で運営している自身管理のサイトでは特に問題も発生していませんし、Google Search Consoleなどからも特に不具合の指摘はありませんが、今後何かが発生した場合には元の仕組みに戻す可能性はありますが、最終的にhtml上では何も問題がありませんので恐らく大丈夫であろうと考えています。

  •  白黒ハチワレ猫の【モモ】とのんびり暮らしながらフリーランスでサイト制作のお手伝いをしています。
    ブログツールでありながら本格的なウェブサイトに必要な機能を追加できるWordpressの良さを活かした楽しく便利なサイト作りのお手伝いをさせていただいております

QR Code

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

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

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

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