WordPressでCSSをフッター(wp_footer)で読み込む方法

2018.03.26 WordPress
WordPressでCSSをフッター(wp_footer)で読み込む方法

WordPressテーマではwp_register_styleでCSSを登録し、wp_enqueue_styleを使ってwp_headでCSSを読み込むようになっています。

しかし、JavaScript/CSSの読み込みはコンテンツのレンダリングをブロックしてしまうため、複数のファイルを読み込むような構成になっている場合に、ページ表示速度が著しく遅くなってしまうことがあります。

最近では以前にもましてページ表示速度がSEO的にも重要になってきているため、こうした表示の遅れは改善したいところです。

Googleが提供しているPageSpeed Insightsでは、Webページの表示速度のチェックと改善方法の提案をしてくれますが、head内でCSS/JavaScriptを読み込んでいると間違いなく「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という改善案を提示されます。

つまり、「ファーストビューの表示に関係ないJavaScriptやCSSは後で読み込んだ方がページの表示に邪魔になりませんよ」ということですね。

しかしWordPressの場合、標準ではCSSはすべてwp_headで読み込まれる仕様になっています。

ということで今回は、WordPressでCSSをフッター(wp_footer)で読み込む方法についてご紹介します。

なおここでは、

  • header.css(ヘッダーエリア用CSS)
  • sidebar.css(サイドバーエリア用CSS)
  • footer.css(フッターエリア用CSS)

という3つのCSSを読み込む場合を例として話を進めたいと思います。

WordPressでCSSをフッター(wp_footer)で読み込むソースコード

完成したソースコードがこちら。functions.phpに追記してください。

/* CSSの読み込み
---------------------------------------------------------- */
function register_stylesheet() {
wp_register_style('header', get_template_directory_uri().'/header.css');
wp_register_style('sidebar', get_template_directory_uri().'/sidebar.css');
wp_register_style('footer', get_template_directory_uri().'/footer.css');
}
//style.cssのみヘッダーで読み込む
function add_stylesheet() {
register_stylesheet();
wp_enqueue_style('header', '', array(), '1.0', false);
}
add_action('wp_enqueue_scripts', 'add_stylesheet');
//残りのCSSをフッターで読み込む
function prefix_add_footer_styles() {
wp_enqueue_style('sidebar', '', array(), '1.0', false);
wp_enqueue_style('footer', '', array(), '1.0', false);
};
add_action( 'wp_footer', 'prefix_add_footer_styles' );

スクロールせずに見えるコンテンツであるヘッダーに関するスタイル指定をしたheader.cssのみをwp_headで読み込み、その他はフッターのwp_footer関数にて読み込むようになっています。

なお、wp_register_styleとwp_enqueue_styleについては下記の記事で書いていますので、よかったら読んでみてください。

参考ページ:wp enqueue script – How to load css in the footer – WordPress Development Stack Exchange

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

ブログ集客メール講座登録フォーム

「売上が不安定で、月末になるといつも不安……」
「営業が苦手で新規開拓がうまくいかない……」
「Webが苦手でブログをうまく活用できない……」

個人起業家・フリーランスのあなた、こんなお悩みはありませんか?

実は僕も、独立して最初に直面したのが「集客」の壁でした。

しかし今は、1年の大半をベトナムで過ごしながら、フリーランスのWebディベロッパーとして生計を立てています。

僕がなぜ、時間・場所・人間関係に縛られずに暮らせるようになったのか?

その答えは「ブログ」にあります。

今なら、「初心者の人が成果を上げるため」のブログ集客ノウハウを、メール講座限定でお伝えします。

興味のある人は、今すぐ以下から登録【無料】を!

ブログ初心者が生き残るためのブログ集客メール講座

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら