[WordPress] functions.php上で外部CSS/JSを読み込みたい

公開日:2018/09/04 更新日:2019/07/31

やりたいこと

外部CSS/JSの読み込みをheader.phpに直接定義するのではなく、functions.php上で行いたい
よく使うメールフォームプロ、Font Awesome、bxSliderのインクルードをサッと書きたい
印刷レイアウト用のCSSは、諸々の外部インクルードの最後に読み込ませたい

サンプルコード

function enqueue_my_scripts() {
    // mailform
    if( is_page('contact') ) {
        wp_enqueue_style('mailformpro_css', get_stylesheet_directory_uri() . '/mfp.statics/mailformpro.css');
    }
    
    // Font Awesome
    wp_enqueue_style('Font_awesome_css', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
    
    // bxSlider
    wp_enqueue_style('bxSlider_css', get_stylesheet_directory_uri() . '/js/bxslider/css/jquery.bxslider.css');
    wp_enqueue_script('bxSlider_js', get_stylesheet_directory_uri() . '/js/bxslider/js/jquery.bxslider.js', array('jquery'), false, false );
    
    // javascript
    wp_enqueue_script('functions_js', get_stylesheet_directory_uri() . '/js/functions.js', array('jquery'), false, false );
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts');

function enqueue_my_scripts_after() {
    wp_enqueue_style('style_print_css', get_stylesheet_directory_uri() . '/style_print.css', array(), false, 'print');
}
add_action('wp_enqueue_scripts', 'enqueue_my_scripts_after', 11 );

仕組み、解説、補足など

add_actionの第3引数で読み込み優先度の指定ができる

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。