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

souce-wordPressIncludeCss-thumbnail
WEB / プログラミング / IT系

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

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

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

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

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

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

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

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

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

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

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

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

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

  • wp_enqueue_style
  • wp_enqueue_script

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

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

wp_enqueue_style

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

$handle登録したcssを識別するためのハンドル名必須
$srccssの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_footertrue: </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');

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

実際に読み込まれたcss
実際に読み込まれたcss

上記の様に読み込まれます。

POINT!
JSも同様に読み込み可能

まとめ

意外と簡単に実装できたと思います。当然プラグインを作成せず、テーマのfunction.phpにコードを書き込んでも同様の結果になります。

その場合はテーマのアップデートの度にコードを追加する必要があるので、個人的にはプラグインにした方がプラグインの「有効/無効」でcssやJSを適用するか切り替え可能なのでおすすめです。

POINT!
子テーマを作成してた場合でもプラグインにした方が便利

そこまで難しくないのでぜひ一度試してみてはいかがでしょうか?

あますた

935 views

電気工学科卒の元プログラマの現飲食店オーナー。間に不動産管理、営業等も経験。ここでは、自分の経験とお客様に聞いた話を基に、役立つ情報を発信していこうと思いま...

プロフィール

ピックアップ記事

関連記事一覧

  1. この記事へのコメントはありません。

CAPTCHA


ABOUT

”わくわく”や”驚き”等、『心の栄養』を与えられる、『楽しい』でつながるWebメディアを目指します。
ABOUT

最新記事