Help us understand the problem. What is going on with this article?

テーマに正しくjsファイル、スタイルシートを読み込ませる方法

結論

cssファイルを読み込むにはwp_enqueue_style、
jsファイルを読み込むにはwp_enqueue_scriptを使用する。

functions.php
function test_scripts() {
  wp_enqueue_style( 'main-style', get_template_directory_uri().'/css/main.css' ); // cssファイルを読み込む
  wp_enqueue_script( 'main-script', get_template_directory_uri().'/js/main.js'); // jsファイルを読み込む
}

add_action( 'wp_enqueue_scripts', 'test_scripts' );

使用方法

wp_enqueue_style( $handle, $src, $deps, $ver, $in_footer );
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

wp_enqueue_style , wp_enqueue_scriptとも関数の規則は同じです。

$handle

スタイルの名前。
ユニークでないければならない。
既存の名前を入れると、キューに追加されない。

$src

スタイルシート、スクリプトファイルまでのURL。
外部ファイルを読み込むことも可能。その場合は絶対パスで入力する。

ちなみに内部ファイルを読み込む際、以下の関数は頻出度が高く、覚えておくこと必須。

get_template_directory_uri(); // 親テーマのディレクトリを取得
get_stylesheet_directory_uri(); // 子テーマのディレクトリを取得
get_stylesheet_uri(); // 子テーマのstyle.cssを取得

詳しくはcodexを見ると良い。
わかりやすく、書かれている。

関数リファレンス/get template directory uri
関数リファレンス/get stylesheet directory uri
関数リファレンス/get stylesheet uri

$deps

このスタイル・スクリプトを読み込む前に、読み込ませたいスタイル・スクリプトの$handleを配列形式で記入する。

$ver

バージョン番号を指定できる。デフォルトはfalseになっている。

$in_footer

デフォルトはfalse。
trueの場合、</body> 終了タグの前に配置。
falseの場合、<head> に置かれる。

終わりに

正直、codexを見れば全て書かれている。
関数リファレンス/wp enqueue style
関数リファレンス/wp enqueue script
しかし、いちいち開くのが億劫だ。高頻出関数の引数くらい覚えておきたいという願いを込めてメモ✍️

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした