独自のcssを追加

2022.01.15 2022.01.16 篠原隆司

アフィリエイト広告を利用しています

このページの内容が役に立ったら X (旧twitter) でフォローして頂けると励みになります
挨拶や報告は無しで大丈夫です

こちらでjavascript版を作ったので、ついでにcss版も用意しておきます。

使い方

functions.php に追記

// 管理画面以外なら
if ( ! is_admin() ) {

    // アクションをセット
    add_action('wp_enqueue_scripts', function(){

        // テーマディレクトリ直下に example.css を作成した場合
        aulta_wp_enqueue_style('example');

        // テーマディレクトリ直下に example/example2.css を作成した場合
        aulta_wp_enqueue_style('example/example2');
    });
}

cssを登録する関数

functions.php に追記

/**
 * cssを登録する
 *
 * @param string $handle テーマディレクトリ直下からファイルまでのパスで、拡張子を外したもの
 * @see https://aulta.co.jp/technical/wordpress/techniques/add-your-own-css
 */
function aulta_wp_enqueue_style ($handle, $deps = null){
    $src = get_stylesheet_directory_uri() . '/' . $handle . '.css';
    $version = filemtime(get_stylesheet_directory() . '/' . $handle . '.css');
    wp_enqueue_style( $handle, $src, $deps, $version );
}

※@see は本ページのURLです。忘れたときに参照できるよう残しておくと便利です。

補足説明

if ( ! is_admin() ) { }

if ( ! is_admin() ) で、管理画面以外ってしてます。
管理画面じゃないとき・・・つまりフロント側のページのときに追加したいからですね。

ちなみに似た関数で is front page() ってのがあります。
「フロントだからこっちじゃん！」って騙されがちになりがちですが全然意味が違うものなので注意です。

add_action('wp_enqueue_scripts', '' )

「wp_enqueue_scripts？・・・scripts？」ってなりそうですが、Codexでは scripts です。