ここでは、WordPressのテーマ内でスタイルシートやJavaScriptの読み込みリンクを追加する方法についてお話します。
スタイルシートやJavaScriptの読み込みを追加する方法
jQueryやBootstrap、Font Awesomeなどを自分の使用しているWordPressテーマに導入したいときってありますよね。このようなときに、head内に直接読み込みコードを記入するのも良いですが、functions.phpで関数を使って読み込ませた方がスマートです。ここではその方法についてお話します。
※ちなみに、WordPressは初期設定ですでにjQueryが実装されています。特に必要がなければ最初から実装されているjQueryを使いましょう。
ここでご紹介する方法はfunctions.phpを編集する方法です。良かったらfunctions.phpを編集する前に下記の記事もご参照ください。
2017.11.27プラグインを使わずにWordPressをカスタマイズする場合、「functionsファイルにこのコードを追加しましょう」みたいなことが書かれていることがよくあります。このように何でもかんでもfunctions.phpにコードを追加しているとコードの量が多くなっ...
CSSファイルの読み込み方法
下記はfunctions.phpに記入するコードです。
PHP
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
wp_enqueue_style( 'bootstrap-css', get_template_directory_uri().'/css/bootstrap.min.css' ); |
wp_enqueue_style( 'style', get_stylesheet_uri() ); |
add_action( 'wp_enqueue_scripts', 'add_files' ); |
具体的に読み込みコードを書くとこんな感じになります。$src以降は省略してあります。
ファイルのパスの書き方
テーマの基本スタイルシートを読み込む場合
テーマで使用されるスタイルシートの読み込みは下記のような関数を使います。
この場合は、関数なのでクォーテーションマーク「’」は必要ありません。
外部のCDNを読み込む場合
普通にファイルのパスを記入します。例えば、Bootstrapの読み込みの場合はこんな感じになります。
テーマフォルダ内にあるファイルを読み込む場合
get_template_directory_uri().がテーマフォルダ直下のURLになりますので、それに続く形で記入します。
get_template_directory_uri().'/フォルダ名/ファイル名.css' |
JavaScriptファイルの読み込み方法
次は、JavaScriptファイルの読み込み方法について見ていきましょう、やり方は、CSSファイルの読み込み方法とほとんど変わりません。下記のコードをfunctions.phpに記入します。
PHP
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
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
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ファイルを読み込ませる方法でした。
