【CSS読み込み】wp_register_style、wp_enqueue_style、add_actionを組み合わせて使用し、funtions.php経由でCSSを読み込もう

分かりやすさ重視で詳しく説明していない為、多少意味合いが違うものがありますがあらかじめご了承ください。

まず簡単に、今回の場合のそれぞれの関数の役割を説明します。

1. add_action()　　　：第1引数のタイミングで、第2引数の関数を実行
2. wp_register_style()：読み込むCSSを定義 ＋ オプション
3. wp_enqueue_style()：読み込むwp_register_styleを指定し、実行

　

少し難しいかもしれないので、難しかったら下記のようにイメージしてみてください。

• wp_register_style()がCSSファイル
• wp_enqueue_style()でそのCSSファイルを指定し読み込む
• add_action()は常に実行しているので気にしない

　

もう少し具体的に記述します

_{↓functions.php}

function 関数A(){
    wp_register_style(ニックネームA, CSSファイル);
}
add_action(実行タイミング,関数A);

_{↓CSSを読み込ませたいphpファイル}

wp_enqueue_style(ニックネームA);

まず、add_actionの実行タイミングについてですが、今は「WEBページを更新するたびに毎回読み込むもの」と思っていてください。その為関数Aも常に実行されているイメージです。

その上でwp_register_style()でCSSファイルを指定し、wp_enqueue_style()でニックネームAを呼ぶことでCSSファイルを読み込んでいます。

　

ここまで理解できればこれからの内容が結構わかると思います

　

完成したコード

_{↓functions.php}

add_action('init', function() {
    wp_register_style('unique_handle_name',get_template_directory_uri() . '/css/style.css');
});

_{↓CSSを読み込ませたいphpファイル}

<?php
//基本的にファイル一番上に記入？？
wp_enqueue_style('unique_handle_name');

add_action()の第2引数で関数を読み込むと言いましたが、第2引数で直接関数を読み込ませてます。

add_action()のinitは「WEBページを更新すると、一番最初に読み込む」というイメージです。詳しく知りたい方は「関数リファレンスadd_action()の→プラグイン API/アクションフック一覧」をご覧ください。

他は先程説明した通りです。

　

get_template_directory_uri() . '/css/style.css'

ちなみに↑こちらは省略/wp-content/テーマ名/css/style.cssとなります

　

完成したコード（複数ファイル定義 ＆ 1つで3つ同時読み込み)

_{↓functions.php}

add_action('init', function() {
    wp_register_style('unique_handle_name1',get_template_directory_uri() . '/css/style1.css');
    wp_register_style('unique_handle_name2',get_template_directory_uri() . '/css/style2.css', ['unique_handle_name1']);
    wp_register_style('unique_handle_name3',get_template_directory_uri() . '/css/style3.css', ['unique_handle_name2']);
});

_{↓CSSを読み込ませたいphpファイル}

<?php
//3つのCSSファイル同時読み込み
wp_enqueue_style('unique_handle_name3');

//2つのCSSファイル同時読み込み
wp_enqueue_style('unique_handle_name2');

仕組みはこうです。

unique_handle_name1
↑unique_handle_name2が読み込み
    ↑unique_handle_name3が読み込み
        ↑wp_enqueue_styleでunique_handle_name3を読み込み