2022年03月27日

Actionフック：wp_enqueue_scripts

アクションフックの wp_enqueue_scripts は、WordPressが<head>タグを生成する直前にフックされます。

JavaScriptファイルやCSSファイルの読み込みに利用されます。

1.このアクションフックの基本形

基本系は下記になります。

function ○○(){
  wp_enqueue_script();   // JavaScriptファイルの読み込み
  wp_enqueue_style();    // CSSファイルの読み込み
}
add_action('wp_enqueue_scripts', '〇〇' );

■アクションフック：wp_enqueue_scripts に参照変数はありません。

■2行目：wp_enqueue_script()でJavaScriptファイルの読み込みます(関数)

5行目のアクションフック：wp_enqueue_scriptsと同じ名前になっていますが別物です。

■3行目：wp_enqueue_style()で、CSSファイルを読み込みます。

事例

下記はこのサイトで設定しているアクションフック：wp_enqueue_scriptsです。

function theme_setting() {
	wp_enqueue_script('jQuery'      , 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js');											// jQuery
	wp_enqueue_script('jQuery-ui'  , 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js');								    // jQuery-uiライブラリ
	wp_enqueue_style ('jquery-css' , 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css');	// jQuery-uiのCSS

	wp_enqueue_script('slick'          , 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js');	 		    // slickライブラリ
	wp_enqueue_style ('slick-css'     , 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css');					// slickのCSS
	wp_enqueue_style ('slick-theme' , 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css');		// slickのテーマCSS

	wp_enqueue_script('my_js'          , esc_url(get_stylesheet_directory_uri()).'/js/my_jquery.js');                              // jQueryプログラム
	wp_enqueue_style ('bootstrap3'		,	'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css');	// Bootstrap3のCSS
	wp_enqueue_style ('fontawesome'	,'https://use.fontawesome.com/releases/v5.6.1/css/all.css');                         //fontawesome		
	wp_enqueue_style ('stylesheet'     , esc_url(get_stylesheet_uri()));                                                                 	// テーマのスタイルシート 
	wp_enqueue_style ('dashicons');									                                                                                    // dashアイコン

	wp_enqueue_script('prettify'		, esc_url(get_stylesheet_directory_uri()).'/prettify/prettify.js');								// Google シンタックスハイライト
	wp_enqueue_style ('prettify'		, esc_url(get_stylesheet_directory_uri()).'/prettify/doxy.css');								// Google シンタックスハイライトCSS
	?>
	<script>
		window.addEventListener("load", function() {PR.prettyPrint();});// デバイスにシンタックスハイライトの実行を指示
	</script>
	<?php
}
add_action('wp_enqueue_scripts', 'theme_setting');

■上記で利用しているget_stylesheet_directory_uri()は、現在のテーマで使われているスタイルシートがあるディレクトリのURLを取得する関数です。

■上記で利用しているget_stylesheet_uri()は、現在のテーマで使われているスタイルシートのURLを取得する関数です。

■16～22行目は、Googleのシンタックスハイライトをこのアクションフックの中で起動する為の特殊な処理です。気にしないでください。