WordPressでヘッダーからフッターにCSS、javascriptの読み込みタグを移動させる

概要説明

PageSpeed Insightsの対応などでよく使うカスタマイズ。ファーストビューで必要なものだけヘッダーで読み込み、後でゆっくり読み込んでも良い処理はフッターで処理をさせることができるようになります。ファーストビューの表示速度が向上します。

functions.php
/*----------------------------------------------------
 ヘッダーからフッターにCSS読み込みを移動させる
----------------------------------------------------*/
if ( !function_exists( 'move_header_css' ) ){

    // ヘッダーのCSSを非表示にする
    function move_header_css() {
        wp_dequeue_style('wp-block-library');
        // wp_deregister_style('wp-block-library'); 
    }
    add_action('wp_enqueue_scripts', 'move_header_css');

    //フッターで非表示にしたCSSを読み込ませる
    function move_footer_css(){
        wp_enqueue_style('wp-block-library');
        // wp_register_style('wp-block-library', '/wp-includes/css/dist/block-library/style.min.css')
    }
    add_action('wp_footer', 'move_footer_css');

}

scriptタグも同様の内容で移動が可能

functions.php
/*----------------------------------------------------
 ヘッダーからフッターにjavascript読み込みを移動させる
----------------------------------------------------*/
if ( !function_exists( 'move_header_script' ) ){

    // ヘッダーのjavascriptを非表示にする
    function move_header_script() {
        //wp_dequeue_script('jquery-core');
        wp_deregister_script('jquery-core'); 
    }
    add_action('wp_enqueue_scripts', 'move_header_script');

    //フッターで非表示にしたjavascriptを読み込ませる
    function move_footer_script(){
        //wp_enqueue_script('jquery-core');
        wp_register_script('jquery-core', '/wp-includes/js/jquery/jquery.js'); 
    }
    add_action('wp_footer', 'move_footer_script');

}

不要な読み込みを削除したい場合

フッター側の読み込み処理の記述を行わなければ削除だけの対応になります

wp_register_style() と wp_enqueue_style()の違い

wp_register_style() 、wp_enqueue_style() どちらで定義を追加しているかによって解除方法が変わります。消えないなと思ったらどちらか試してみると消えると思います。これで消えない場合はソース内にハードコーディングしている可能性が高いです。

WordPress Developer Resources

関連機能

  1. WordPress 永続オブジェクトキャッシュAPC設定を設定して高速化 (エックスサーバー)

  2. WordPress ショートリンク shortlink 短縮URLをソース内から削除する

  3. WordPressで特定のCSS や JS を読み込ませないようにする

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

人の偉さはわかりづらい
だからああやって着飾って
見た目でわかるようにするんだ

葬送のフリーレン
by フランメ

Profile

PAGE TOP
Amazon プライム対象