たった一度の設定でテーマ更新時も安心！WordPressでCSSやJSコードを手間なく読み込む方法

2021.09.15

WEB / プログラミング / IT系

こんにちは！あますた(@amaguristar)です。

WordPressを利用してるとちょっとした手直しや自分好みのアレンジでCSSやJSコードを書く機会も多いのではないでしょうか？

そんな時はおそらくテーマのヘッダファイルを編集して「css」や「JS」を読み込んでると思います。

この方法だとテーマを更新すると設定も消えてしまい毎回書き直しますよね？(仮に子テーマを作成しても同様)

「更新のたびに毎回書き直すのが面倒」

そんな方は是非今回紹介する方法を試して下さい。

この方法を使えば仮にテーマを変えたとしてもいちいち「css」や「JS」をテーマのヘッダに追加する必要はありません。

注意！
当然、別のテーマに変更した場合は読み込まない設定も可能

やり方は簡単！プラグインとして設定する

どうするのかというと、プラグインとして読み込ませるだけ。

プラグインと聞くと「なんだか難しそう」と思う方もいると思いますが、とても簡単。

プラグインの簡単な作り方↓↓↓
>> https://amamemo.com/memo/13064

プラグインの作り方は上記記事に分かりやすく書いてあるので任せるとして、具体的にWordPressにどうやってCSSやJSを読み込ませるか説明。

wp_enqueue_style
wp_enqueue_script

上記関数を利用すると簡単に読み込むことが可能。

それぞれの関数をざっと説明すると、

wp_enqueue_style

wp_enqueue_style( $handle, $src, $deps, $ver, $media )

`$handle`	登録したcssを識別するためのハンドル名	必須
`$src`	cssのURLを設定
`$deps`	スタイルシートのハンドルを配列で設定すると、読み込み順を設定可能
`$ver`	任意のバージョンを設定。cssのURLにパラメータとして追加
`$media`	スタイルシートのメディアを指定(※)

※ 詳細は下記リンク先参照↓↓↓
>> https://www.w3.org/TR/CSS2/media.html#media-types

スタイルシートを読み込む関数。基本的に「$handle」と「$src」のみ設定すれば利用可能。

参考サイト↓↓↓
>> https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_style

wp_enqueue_script

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

`$handle`	登録したスクリプトを識別するためのハンドル名	必須
`$src`	スクリプトのURLを設定
`$deps`	スクリプトのハンドルを配列で設定すると、読み込み順を設定可能
`$ver`	任意のバージョンを設定。スクリプトのURLにパラメータとして追加
`$in_footer`	true: `</body>`タグの直前でスクリプトを読み込む false: `</head>`の直前でスクリプトを読みこむ	デフォルトはfalse

スクリプトを読み込む関数。基本的に「$handle」と「$src」のみ設定すれば利用可能。

参考サイト↓↓↓
>> https://wpdocs.osdn.jp/関数リファレンス/wp_enqueue_script

実際にプラグインを作成

サクッと読み込みプラグインを作成。

// CSSファイルを読み込む
function add_files() {
 // サイト共通のCSSの読み込み
 wp_enqueue_style( 'ctk-maincss', "https://tsuredure.info/css/ctk-template.css", "", '20210913' );
}
add_action('wp_enqueue_scripts', 'add_files');

仮に上記をプラグインファイルに書き込み有効可した場合、