【WordPress】functions.phpでのCSSやJSなどの外部ファイルの読み込み方

こばゆた

functions.phpを使うと様々な機能を追加できるようになります

中でもWordPressではCSSやJava Scriptなどの外部ファイルをfunctions.phpで読み込むことが推奨されています。

ということで今回はfunctions.phpでの外部ファイルの読み込み方をみていきます。

1.functions.phpの作り方

まずはコードを記述するためのfunctions.phpというファイルを作成していきます。

きなこ

簡単だね！

2.functions.phpからCSSを読み込む

こばゆた

ここからが今回の本題です！
順番に見ていきましょう

CSSを読み込む手順としては特に複雑なことはなく

1. functions.phpでWordPress関数を読み込む
2. 元のリンクを削除する

以上２つだけです。

2-1.functions.phpで読み込む

functions.phpでCSSを読み込むためには以下のWord Press関数というものを記述します。

きなこ

get_theme_file_uri()というのは画像の読み込みで使ったものと同じだね！

またesc_urlというのはエスケープ処理というものです。こちらもおまじないとして合わせて書いておきましょう。

wp_enqueue_style( 
  'style-name', 
  esc_url(get_theme_file_uri()) . '/css/ファイル名.css' , 
  array(), 
  '1.0.0',
);

※この雛形を使われる場合はパスは構造に合わせて、「ファイル名」をお使いのCSSファイルの名前に変えて使ってください。

wp_enqueue_style(
  $handle, 
  $src , 
  $depth, 
  $ver
);

まとめると$handleにわかりやすい名前をつけ、$srcのファイル名に任意のファイル名を指定すればOKです。

こばゆた

例を示すと以下の様になります。

wp_enqueue_style( 
  'my-style', 
  esc_url(get_theme_file_uri()) . '/css/style.css', 
  array(), 
  '1.0.0',
);

あとは関数にして呼び出せばOKです。

/*----------- cssの読み込み ---------*/
function my_enqueue_styles() {
  wp_enqueue_style( 
    'my-style', 
    esc_url(get_theme_file_uri()) . '/css/style.css', 
    array(), 
    '1.0.0',
  );
}
add_action('wp_enqueue_scripts', 'my_enqueue_styles');

きなこ

なんで関数にするの？

なぜ関数にするのかというと…

• WordPressの読み込みタイミングを守るため
• バグの予防のため

といった効果があるので関数で読み込むことをオススメします。

2-1.元のリンクを削除する

記入が終わったら忘れずにheader.phpに書かれているCSSのリンクを削除します。

<!-- ↓削除 -->
<link rel="stylesheet" href="<?php echo get_theme_file_uri(); ?>/css/style.css">

削除できたら、再読み込みをして表示が変わらなければ完了です。

こばゆた

これでfunctions.phpからCSSを読み込むことができました！

読み込めない場合はファイルまでの構造やファイル名があっているかやカンマやピリオド、スラッシュなどもよーく見て見ましょう。

3.functions.phpからJavaScriptを読み込む

3-1.functions.phpで読み込む

JavaScriptもCSSと同じ様にWordPress関数で読み込みます。

wp_enqueue_script(
  'script-name', 
  esc_url(get_theme_file_uri()) . '/js/ファイル名.js', 
  array(), 
  '1.0.0', 
  true,
);

※この雛形を使われる場合はパスは構造に合わせて、「ファイル名」をお使いのJSファイルの名前に変えて使ってください。

こちらは似ていますがwp_enqueue_scriptとという点が異なり「scriptを読み込む」という意味になっています。

wp_enqueue_script(
  $handle, 
  $src, 
  $depth, 
  $ver, 
  $in_footer
);

こちらもCSSの時と同じようにファイルまでのパスとファイル名を書きます。

wp_enqueue_script(
  'my-script',  
  esc_url(get_theme_file_uri()) . '/js/main.js', 
  array(), 
  '1.0.0', 
  true
);

もちろんこちらも関数にして呼び出します。

/*----------- JSの読み込み ---------*/
function my_enqueue_scripts() {
  wp_enqueue_script(
    'my-script', 
    esc_url(get_theme_file_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',
  esc_url(get_theme_file_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のリンクを削除します。

6.まとめ

/*----------- cssの読み込み ---------*/
function my_enqueue_styles() {
  wp_enqueue_style( 
    'my-style', 
    esc_url(get_theme_file_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', 
    esc_url(get_theme_file_uri()) . '/js/main.js', 
    array(), 
    '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');

こばゆた

必要に応じて上のコードを変えて使用すると便利です。