【WordPress】functions.phpでCSSやJSを読み込む（ページごとの条件分岐も）

WordPresで、CSSやJavaScriptファイルをfunctions.phpにて読み込むと、一元管理できて簡単です。

今回は、そのやり方の基礎から、functions.phpにて、条件分岐を使って、ページごとに読み込むファイルを選択するやり方も共有します。

WordPressでfunctions.phpでCSSやJSを読み込む

基本的なやり方は下記になります。

functions.phpに下記を記述。

<?php

function enqueue_scripts()
{
    // CSS
    wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/assets/css/style.css', array(), '', 'all');

    // JS
    wp_enqueue_script('index-js', get_stylesheet_directory_uri() . '/assets/js/index.js', array( 'jquery' ), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

jQueryを追加したい場合は下記になります。

<?php

function enqueue_scripts()
{
    // CSS
    wp_enqueue_style('main-css', get_stylesheet_directory_uri() . '/assets/css/style.css', array(), '', 'all');

    // JS
    wp_deregister_script('jquery');
    wp_enqueue_script('jquery', 'https://code.jquery.com/jquery-1.12.4.min.js', array(), '1.12.4');
    wp_enqueue_script('index-js', get_stylesheet_directory_uri() . '/assets/js/index.js', array( 'jquery' ), '', true);
}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

 

条件分岐で読み込むファイルを選択する

<?php

function enqueue_scripts()
{
    // 共通ファイルを読み込み
    ...

    // TOPページのみ読み込むファイル
    if (((is_front_page() && is_home()) || (is_front_page() && ! is_home())) && ! is_paged()) {
        wp_enqueue_style('style', '/assets/css/top.css');
    }

    // 固定ページのみ読み込むファイル
    if (is_page('1')) {
        wp_enqueue_style('style', '/assets/css/aaa.css');
    }

}
add_action('wp_enqueue_scripts', 'enqueue_scripts');

 

ページごとの条件分岐を使用できます。

以上です!