functions.phpを使うと様々な機能を追加できるようになります
- サムネイル画像を記事に追加
- ナビメニューの追加
- カスタム投稿の設定
などの機能を追加できる様になります。
中でもWordPressではCSSやJava Scriptなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。
ということで今回はfunctions.phpでの外部ファイルの読み込み方をみていきます。
今日のテーマ
- functions.phpでCSSやJavaScriptのファイルを読み込めるようになる
- fontawesomeなどのファイルも読み込めるようになる
1.functions.phpの作り方
まずはコードを記述するためのfunctions.phpというファイルを作成していきます。
- functions.phpファイルを作成する
- 書き出しを書いておく
- 必要に応じて中身を書く
- STEP1functions.phpファイルを作成する
sを忘れないように！ - STEP2書き出しを書く
このファイルにはphpしか書かないので書き出しのみ書いて、閉じタグは無くても問題ありません。 - STEP3必要なコードを記入する今は何も書く必要はありませんがこれからは<?php 以下にコードを書いていきます。
簡単だね！
2.functions.phpからCSSを読み込む
ここからが今回の本題です！
順番に見ていきましょう
CSSを読み込む手順としては特に複雑なことはなく
- functions.phpでWordPress関数を読み込む
- 元のリンクを削除する
以上２つだけです。
2-1.functions.phpで読み込む
functions.phpでCSSを読み込むためには以下のWord Press関数というものを記述します。
またget_template_directory_uri()というのは画像の読み込みで使ったものと同じですね。
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/ファイル名.css' , array(), '1.0.0',);※この雛形を使われる場合はパスは構造に合わせて、「ファイル名」をお使いのCSSファイルの名前に変えて使ってください。
wp_enqueue_style($handle, $src , $depth, $ver);ちなみに”enqueue”はエンキューと呼び、( )内のパラメータには以下のものが入ります。
| パラメータ | 内容 |
|---|---|
| $handle | 読み込むスタイルシートの名前(必須)を記入する。名前は基本的にわかれば自由でOK |
| $src | スタイルシートのパスや外部のスタイルシートのURL(必須) |
| $depth | このスタイルシートより前に読み込まれる必要があるスタイルシート。ない場合は空欄でも可(省略可) |
| $ver | スタイルシートのバージョン(省略可) |
まとめると$handleにわかりやすい名前をつけ、$srcのファイル名に任意のファイル名を指定すればOKです。
例を示すと以下の様になります。
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0',);あとは関数して呼び出せばOKです。
/*----------- cssの読み込み ---------*/
function my_enqueue_styles() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0',);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');なんで関数にするの？
なぜ関数にするのかというと…
- 「WordPressのタイミングを守る」ため
- ちゃんと読み込まれない or バグの元となるため
というわけで絶対に関数を使いましょう！
2-1.元のリンクを削除する
記入が終わったらheader.phpに書かれているCSSのリンクを削除します。
<!-- ↓削除 -->
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/style.css">削除できたら、再読み込みをして表示が変わらなければ完了です。
これでfunctions.phpからCSSを読み込むことができました！
読み込めない場合はファイルまでの構造やファイル名があっているかやカンマやピリオド、スラッシュなどもよーく見て見ましょう。
3.functions.phpからJavaScriptを読み込む
3-1.functions.phpで読み込む
JavaScriptもCSSと同じ様にWordPress関数で読み込みます。
wp_enqueue_script('script-name', get_template_directory_uri() . '/js/ファイル名.js', array(), '1.0.0', true);※この雛形を使われる場合はパスは構造に合わせて、「ファイル名」をお使いのJSファイルの名前に変えて使ってください。
こちらは似ていますがwp_enqueue_scriptとという点が異なり「scriptを読み込む」という意味になっています。
wp_enqueue_script($handle, $src, $depth, $ver, $in_footer);| パラメータ | 内容 |
|---|---|
| $handle | JavaScriptファイルのハンドル名 |
| $src | JavaScriptファイルのパス |
| $depth | このJavaScriptファイルより前に読み込まれる必要があるJavaScriptファイル。ない場合は空欄でも可 |
| $ver | JavaScriptファイルのバージョン |
| $in_footer | 読み込み位置の設定。<head>に配置する場合はfalse、</body>直前に配置する場合はtrueを指定 |
パラメータも似たような感じですがこちらに関してはパラメータの省略はしない方が良いです。
正しく読み込まれない可能性があります。
こちらもCSSの時と同じようにファイルまでのパスとファイル名を書きます。
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);もちろんこちらも関数にして呼び出します。
/*----------- JSの読み込み ---------*/
function my_enqueue_scripts() {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');3-2.元のリンクを削除する
書き終えたらfooter.phpにあるJavaScriptファイルを削除し、無事動けば完了です！
4.jQueryを読み込む
jQueryで作成したファイルを読み込む場合は一工夫必要になってきます。
4-1.スクリプトを読み込むコードに手を加える
WordPressでは jQueryはあらかじめ同梱されているので、基本的には「正しい方法で読み込む」だけでOKです。
やりかたは通常のJavaScriptを読み込むコードと同じですがarrayの( )内に’jquery’と記述してやるだけですがjqueryの’q‘が小文字なのに注意です。
wp_enqueue_script(
'script-js',
get_template_directory_uri() . '/js/main.js',
array('jquery'), // ←'jquery'を追加
'1.0.0',
true
);わかりやすい様に縦に並べました。
もちろんこの様に書いても動くのでお好きな方で書いてください。
4-2.jsファイルに手を加える
おそらく以下の様にjsファイルには$(function()から書かれていると思います。
jQueryの書き方はその様に習いましたからね…
$(function(){
$(window).click(function(){
・・・・・略・・・・・・・
})
});ですがWord Pressでは他の機能との衝突を防ぐため”$”を使ってjQueryが書かれていると動きません。
それを解決するには解決するには以下の２パターンがあります。
①”$”を全て”jQuery”にする
jQuery(function(){
jQuery(window).click(function(){
・・・・・略・・・・・・・
})
});②jQuery(function($){});で全てを囲む
jQuery(function($){
$(function(){
$(window).click(function(){
・・・・・略・・・・・・・
})
});
});量にもよりますが一個一個ポチポチ変更するより②の方が簡単ですのでおすすめです。
これで実際に動くか確認できれば完成です。
5.functions.phpからFont Awesomeを読み込む
外部スタイルシートでよく使うものの例としてFont Awesomeを使う場合はがありますが、Font Awesomeの場合は以下のコードをfunctions.phpに書きます。
/*----------- fontawesomeの読み込み ---------*/
function my_enqueue_icons() {
wp_enqueue_style('icon', 'https://use.fontawesome.com/releases/v5.10.2/css/all.css');
}
add_action('wp_enqueue_scripts', 'my_enqueue_icons');※FontAwesomeのバージョンは適宜変えてください。
こちらも記入が終わったら、header.phpにあるFont Awesomeのリンクを削除します。
5.まとめ
1.functions.phpを作成する
2.外部ファイルを読み込む
/*----------- cssの読み込み ---------*/
function my_enqueue_styles() {
wp_enqueue_style( 'my-style', get_template_directory_uri() . '/css/style.css', array(), '1.0.0',);
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');
/*----------- JSの読み込み ---------*/
function my_enqueue_scripts() {
wp_enqueue_script('my-script', get_template_directory_uri() . '/js/main.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_enqueue_scripts');
/*----------- fontawesomeの読み込み ---------*/
function my_enqueue_icons() {
wp_enqueue_style('icon', 'https://use.fontawesome.com/releases/v5.10.2/css/all.css');
}
add_action('wp_enqueue_scripts', 'my_enqueue_icons');必要に応じて上のコードを使用すると便利です。
コメント