ここでは、WordPressのテーマ内でスタイルシートやJavaScriptの読み込みリンクを追加する方法についてお話します。
コンテンツ
スタイルシートやJavaScriptの読み込みを追加する方法
jQueryやBootstrap、Font Awesomeなどを自分の使用しているWordPressテーマに導入したいときってありますよね。このようなときに、head内に直接読み込みコードを記入するのも良いですが、functions.phpで関数を使って読み込ませた方がスマートです。ここではその方法についてお話します。
※ちなみに、WordPressは初期設定ですでにjQueryが実装されています。特に必要がなければ最初から実装されているjQueryを使いましょう。
ここでご紹介する方法はfunctions.phpを編集する方法です。良かったらfunctions.phpを編集する前に下記の記事もご参照ください。
CSSファイルの読み込み方法
下記はfunctions.phpに記入するコードです。
PHP
function add_files() {
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
「add_files」のところは任意の関数名に変更して大丈夫です。その場合、３行目の名前も変えてくださいね。
カッコの中にある$handle, $src, $deps, $ver, $mediaの部分にそれぞれ値を当てはめていきます。$handle以外は省略可能です。少し難しそうに感じるかもしれませんが、下記の表を見ながら当てはめていけば大丈夫です。
| 引数 | 説明 |
|---|---|
| $handle | 任意の名前を付けます（必須）。そのままファイル名で良いと思います。 |
| $src | ファイルのURLを記入します。 |
| $deps | このファイルよりも先に読み込まれるべきファイルがあれば、そのハンドル名を記入します。 |
| $ver | バージョン番号。分からなければ省略しましょう。 |
| $media | media属性を指定。初期値はallです。 |
引数と引数は、カンマ区切りで記入します。引数をに値を入れるときは、クォーテーションマーク「’」でくくりましょう。ただし、WordPressのコードには必要ありません。
具体例
PHP
//スタイルシートの読込
function add_files() {
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.min.css' );
wp_enqueue_style( 'fontawesome', 'https://use.fontawesome.com/releases/v5.0.13/css/all.css' );
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
具体的に読み込みコードを書くとこんな感じになります。$src以降は省略してあります。
ファイルのパスの書き方
テーマの基本スタイルシートを読み込む場合
テーマで使用されるスタイルシートの読み込みは下記のような関数を使います。
get_stylesheet_uri()
この場合は、関数なのでクォーテーションマーク「’」は必要ありません。
外部のCDNを読み込む場合
普通にファイルのパスを記入します。例えば、Bootstrapの読み込みの場合はこんな感じになります。
'https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css'
テーマフォルダ内にあるファイルを読み込む場合
get_template_directory_uri().がテーマフォルダ直下のURLになりますので、それに続く形で記入します。
get_template_directory_uri().'/フォルダ名/ファイル名.css'
JavaScriptファイルの読み込み方法
次は、JavaScriptファイルの読み込み方法について見ていきましょう、やり方は、CSSファイルの読み込み方法とほとんど変わりません。下記のコードをfunctions.phpに記入します。
PHP
function add_files() {
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
先ほどと同じように「add_files」の部分は任意の関数名に変更可能です。その場合は、３行目にある名前も変更してください。それではカッコ内の引数の意味を見ていきましょう。
| 引数 | 説明 |
|---|---|
| $handle | 任意の名前を付けます（必須）。そのままファイル名で良いと思います。 |
| $src | ファイルのURLを記入します。 |
| $deps | このファイルよりも先に読み込まれるべきファイルがあれば、そのハンドル名を記入します。 |
| $ver | バージョン番号。分からなければ省略しましょう。 |
| $in_footer | 値をtrueにすると、body終了タグの前で読み込まれます。 |
具体例
PHP
//JavaScriptの読込
function add_files() {
wp_enqueue_script( jQuery, get_template_directory_uri().'/js/jquery-3.3.1.js' );
wp_enqueue_script( popper, get_template_directory_uri().'/js/popper.min.js', '', '', true );
wp_enqueue_script( bootstrap-js, get_template_directory_uri().'/js/bootstrap.min.js', '', '', true );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
上記がJavaScriptを読み込んだときの具体例です。
CSSとJavaScriptファイルを一緒に読み込む方法
上記で説明した方法の合わせ技です。スタイルシートとJavaScriptを一緒に読み込ませたい場合はこちらの方が効率的ですね。
PHP
function add_files() {
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
}
add_action( 'wp_enqueue_scripts', 'add_files' );
以上がCSSやJavaScriptファイルを読み込ませる方法でした。
