CSSインライン化

◯やりたいこと

 複数あるCSSファイルの中身だけを取り出して、

 HTMLに吐き出す

 

◯方法

 WordPressのfunctions.phpに関数を追加する

 

◯記述内容

 ・wp_add_inline_style($trigger, $data)

  dataにCSSコードを指定することでインラインに吐き出せる

 ・get_stylesheet_uri()

  使用中テーマのCSSを取得する

CSSインライン化 記述例

function put_inline_style() {
	wp_register_style( 'style', false );
 	wp_enqueue_style( 'style' );

	// テーマスタイルの読み込み
	$css = file_get_contents( get_stylesheet_uri(), true );
	// 他にCSSファイルが複数存在する場合もここで読み込み、for loopなどで対応
    
    
	wp_add_inline_style( 'style', $css );
}

add_action( 'wp_enqueue_scripts', 'put_inline_style' );

JavaScriptのDeferまわり1/2

◯やりたいこと

 JavaScriptロード時のレンダリングブロックを最小限にする

 

◯方法

 JavaScriptタグにdeferを付与する

 

◯対象

 Googleの広告タグ以外のScript

 

◯記述内容

<script defer src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

JavaScriptのDeferまわり2/2

◯懸念事項

 Deferロードしたライブラリと依存関係のあるインラインScriptが存在する場合、

 インラインScriptが先に実行されてしまいエラーとなる

 

◯たとえば

 jQueryに依存したカルーセル・スライダーなどのScriptを読み込み

 インラインで初期化処理をしている

 

◯解決策

 

<script defer>
  window.addEventListener("load", () => {
    $(document).ready(function() {
      $("a .page-numbers").each(function() {
        var replace = null;
        var replace = $(this).attr('href').split('?');
        var replace = $(this).attr('href', str[0])
      });
    });

  })
</script>

トラブルシュート

◯Defer属性を付与したらスタイルが崩れる

 崩れた内容を調査し、どのScriptが影響したかを特定する

 →Deferが原因でStyleが崩れることはあまりなく、ほとんどはそれに付随したインライン処理によるものが多い

CSS&JavaScript Tips

By ohoshi

CSS&JavaScript Tips

  • 130