【Autoptimize】JavaScript・CSSファイルの読み込み位置を任意の場所に変更する方法

WordPressのAutoptimizeプラグインでは、JavaScript、CSSのファイルをそれぞれ最適化・結合し、一つのファイルとして読み込むことができます。

その結合したJavaScriptファイルは</body>タグの直前（設定で</head>タグお直前に変更可能）、CSSのファイルは<head>タグの直後で読み込みますが、今回は、それらの読み込み位置を任意の場所に変更する方法となります。

【Autoptimize】JavaScriptファイルの読み込み位置を変更する方法
【Autoptimize】CSSファイルの読み込み位置を変更する方法

【Autoptimize】JavaScriptファイルの読み込み位置を変更する方法

Autoptimizeで結合したJavaScriptファイルは、プラグインの独自フックautoptimize_filter_js_replacetagを利用することで、読み込み位置を変更できます。

以下、フックの例となりfunction.phpに記述します。例では、HTML内に追加した任意のタグ<injectjs />を<script>タグに置換して、結合したJavaScriptファイルを読み込んでいます。

function my_js_replacetag($replacetag) {
        return array("<injectjs />","replace");
}
add_filter('autoptimize_filter_js_replacetag', 'my_js_replacetag');

autoptimize_filter_js_replacetagフックでは、指定したタグの直前・直後・置換のいずれかで、JavaScriptファイルを読み込む位置を設定できます。

それらの設定はフックのコールバック関数で返す配列で次のように指定します。

配列の最初の要素にタグを指定（指定したタグが複数ある場合は、最初のタグに対して処理を行います）
配列の2番目の要素に、"before" "after" "replace" のいずれかを指定（beforeは直前、afterは直後、replaceは置換）

【Autoptimize】CSSファイルの読み込み位置を変更する方法

Autoptimizeで結合したCSSファイルは、プラグインの独自フックautoptimize_filter_css_replacetagを利用することで、読み込み位置を変更できます。

以下、フックの例となりfunction.phpに記述します。例では、</head>タグの直前で結合したCSSファイルを読み込んでいます。

function my_css_replacetag($replacetag) {
	return array("</head>","before");
}
add_filter('autoptimize_filter_css_replacetag', 'my_css_replacetag');

autoptimize_filter_css_replacetagフックでは、指定したタグの直前・直後・置換のいずれかで、CSSファイルを読み込む位置を設定できます。

それらの設定はフックのコールバック関数で返す配列で次のように指定します。

配列の最初の要素にタグを指定（指定したタグが複数ある場合は、最初のタグに対して処理を行います）
配列の2番目の要素に、"before" "after" "replace" のいずれかを指定（beforeは直前、afterは直後、replaceは置換）