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

概要説明

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

functions.php
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*----------------------------------------------------
ヘッダーからフッターに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');
}
/*---------------------------------------------------- ヘッダーからフッターに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'); }
/*----------------------------------------------------
 ヘッダーからフッターに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
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
/*----------------------------------------------------
ヘッダーからフッターに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');
}
/*---------------------------------------------------- ヘッダーからフッターに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'); }
/*----------------------------------------------------
 ヘッダーからフッターに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. 出力ソースの絶対パスを相対パスに一括で書き換える

  2. WordPressの絵文字機能を無効にしてページ表示を高速化

  3. WordPressのpost_typeを指定してビジュアルエディタを無効にする

サイドバー

よく使うカスタマイズ

最近の記事

アニメの名言集

ホントに大事なモンってのは
もってる奴よりもってねー奴の方が
しってるもんさ

銀魂
by 坂田銀時

Profile

PAGE TOP
Amazon プライム対象