ebicology(えびころじー)

jsもcssもenqueue(ｴﾝｷｭｰ)しよう！

ｴﾝｷｭｰ!ﾃﾝｷｭｰ!!
寒いですね季節も心も。

テーマを作る時に「あれどうやって書くんだったっけ」とよく忘れる事なのでメモします。
<head></head>内にcssやjsファイルを読み込む時はheader.phpに直接書かず、functions.phpを使ってenqueueで読み込みます。

ついでにデフォルトのjQueryライブラリは読み込まず、google CDNからライブラリを読む様にしておきます。

まずは結果

functionsに下記を記入。

function add_headfiles() {
// WordPressデフォルトのjquery.jsを読み込まない
wp_deregister_script('jquery');
// Google からjQueryライブラリ3.2.1を読み込む
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
//テーマフォルダ内のcommon.jsを読み込み</body>前に置く
wp_enqueue_script('jsc', get_template_directory_uri().'/js/common.js', array(), 'false', 'true' );
// テーマフォルダ内のprint.cssを読み込む
wp_enqueue_style('print', get_template_directory_uri() . '/css/print.css', "", 'false', 'print' );
}
add_action('wp_enqueue_scripts', 'add_headfiles');

これでこうなります。

  • WordPressデフォルトのjquery.jsを読み込まず、Google CDNのjQueryライブラリを読み込む
  • 「wp-content/themes/テーマフォルダ/js/common.js」を読み込む
  • 「wp-content/themes/テーマフォルダ/css/print.css」を読み込む

HTML出力内容（いろいろ省略）

<html lang="ja">
<head>
<link rel='stylesheet' id='sample-style-css'  href='https://example.com/wp-content/themes/sample/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='print-css'  href='https://example.com/wp-content/themes/sample/css/print.css' type='text/css' media='print' />
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
</head>
<body>
コンテンツの中身いろいろ
<script type='text/javascript' src='https://example.com/wp-content/themes/sample/js/common.js'></script>
</body>
</html>

各詳細

デフォルトのjQueryライブラリは読み込まず、google CDNからライブラリを読む

function add_headfiles() {
// WordPressデフォルトのjquery.jsを読み込まない
wp_deregister_script('jquery');
// Google からjQueryライブラリ3.2.1を読み込む
wp_enqueue_script('jquery','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
}
add_action('wp_enqueue_scripts', 'add_headfiles');

提供されているGoogleのバージョン番号確認はこちら
「Google Hosted Libraries」

CDNに関してはこちらのサイトがとてもわかりやすかったです。

外部リンク

JSファイルの読み込み

function add_headfiles() {
//テーマフォルダ内のcommon.jsを読み込み</body>前に置く
wp_enqueue_script('jsc', get_template_directory_uri().'/js/common.js', array(), 'false', 'true' );

}
add_action('wp_enqueue_scripts', 'add_headfiles');

関数リファレンス/wp enqueue script（WordPress Codex）によりますと、jsファイルの読み込みはこちらの形式で記述します。

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>
$handle スクリプトのハンドル。？が含まれていると？より後ろの部分はURLの後ろに追加される
※例えばハンドルが「jsc?20171120」だったらjsファイルのURL末尾に「/js/common.js?amp;20171120’」と付きます。
$src  スクリプトの URL
$deps  このスクリプトより前に書き込まれて欲しいスクリプトがあれば、そのスクリプトのハンドルを記述しておく
$ver  スクリプトのバージョン番号。指定しなければfalseになる
$in_footer trueの場合、 </body>の前に配置される。（通常はfalseで<head> に置かれる）

CSSの読み込み（style.cssの後に読み込まれる）

function add_headfiles() {
// テーマフォルダ内のprint.cssを読み込む
wp_enqueue_style('print', get_template_directory_uri() . '/css/print.css', "", 'false', 'print' );
}
add_action('wp_enqueue_scripts', 'add_headfiles');

関数リファレンス/wp enqueue style（WordPress Codex）によりますと、こちらの形式で記述します。

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
$handle CSSのハンドル。？が含まれていると？より後ろの部分はURLの後ろに追加される
$src  CSSの URL
$deps このCSSより前に読み込まれて欲しいCSSがあれば、そのハンドルを記入しておく
$ver  CSSのバージョン番号。初期値はfalse
$media 初期値は’all’（’all’、’screen’、’handheld’、’print’）

気をつけたいこと

ハンドルに「jquery」とか「common」とかデフォルトで使われているものがあると表示されなくなるので注意が必要。

エンキュー・デキュー

エンキュー（enqueue）：キューにデータを格納すること。

カイトがデータで箱がキューならこれは「エンキュー」

デキュー（dequeue）：キューからデータを取り出すこと。

カイトがデータで枠がキューなら
これは
デキュー！

Comments

コメントを残す