[wp]functions.phpでcss、jsを読み込ませる方法と注意点

見事に引っかかった。

はじめに
こうする
複数ファイルを指定する場合は気をつける
1. だめな例
別ファイルに逃がす

はじめに

各ページごとにcss、jsをファイル別で用意していたり、jsライブラリを読ませたりすることがある。

全部書いちゃうような男気コーディングならともかくとして、普通は条件分岐で振り分けるのでheader.php内の記述が多すぎてよくわからないことになる。だから、別ファイルにまとめておいてincludeしちゃうのがひとつ。でもそのあたりのことはwp側で用意されていて、functions.phpで管理することができる。

ということで、functions.phpでページ別にcssやらjsやらを指定する方法。

こうする

function add_headFiles() {
    if(is_admin()) return;
    if (is_home() || is_front_page()): 
        wp_enqueue_style('index', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array()); 
    endif;
    if (is_page('form'): 
        wp_enqueue_style('form', get_template_directory_uri() .'/css/form.css?'.date('Ymd'), array());
        wp_enqueue_script('form', 'https://yubinbango.github.io/yubinbango/yubinbango.js', array());
    endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');

通常の組み込み感覚からすればやってることは変わらないんだけど、管理画面の方も指定できるところに違いがある。

複数ファイルを指定する場合は気をつける

function add_headFiles() {
    if(is_admin()) return;
    if (is_home() || is_front_page()): 
        wp_enqueue_style('index', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array());
        wp_enqueue_style('slick','https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array()); 
        wp_enqueue_style('slick-theme','https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array()); 
        wp_enqueue_script('slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array()); 
    endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');

複数といっても、cssとjsを1個ずつ指定するなら問題ない。

cssまたはjsを複数指定する場合には、第一パラメータを違うものにする必要がある（index、slick、slick-themeのところ）。

だめな例

function add_headFiles() {
    if(is_admin()) return;
    if (is_home() || is_front_page()): 
        wp_enqueue_style('index', get_template_directory_uri() .'/css/index.css?'.date('Ymd'), array());
        wp_enqueue_style('slick','https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', array()); 
        wp_enqueue_style('slick','https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css', array()); 
        wp_enqueue_script('slick', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array()); 
    endif;
}
add_action('wp_enqueue_scripts', 'add_headFiles');

「slick」のcssが2つある。被った場合は読まれない。

別ファイルに逃がす

functions.phpの出番は多いので、何でもかんでも書いてると読むのがしんどい。

だから、別ファイルに書いてincludeするのがいい。

require_once locate_template('function/head.php', true);