WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。WEMOブロックエディター完全対応のWordPressテーマ「SWELL」をリリースしました!コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。ホームWEMOについて人気記事一覧フロントエンドHTMLCSS/SassJavaScriptSVGバックエンドPHPサーバーWordPress基礎知識カスタマイズプラグインちょいメモ集WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。2019.08.16webサイトでcssやjsファイルを読み込む時、普通ならheadタグ内にlinkタグなどを記述しますが、WordPressではwp_enqueue_style()やwp_enqueue_script()といった関数を使用してファイルを読み込むことが推奨されています。WordPressを使用する上で必須知識となるこれらの関数の具体的な使い方や引数の種類と意味を整理し、ファイルの読み込み位置を分ける方法やフロント側・管理画面側でのファイルの読み込み方の違いなどをメモしていこうかと思います。目次どうしてファイルの読み込みにwp_enqueue_styleやwp_enqueue_scriptを使うのかこれらの関数には、読み込むファイルを区別するための「ハンドル名」を指定する必要があるのですが、このハンドル名をしっかり付けることによって、CSSやJavaScriptの重複読み込みを回避することができます。head内でファイルを読み込むか、body閉じタグ前で読み込むかを指定することもでき、複数箇所でファイルを読み込む必要がある場合でも、記述場所はfunctions.php内で統一されるため、読み込むファイルを一元管理できます。あとは単純に、WordPressの公式で推奨されているんだから大人しくそうしましょうよ、って話。基本的な使い方まず第一に気をつけなくてはならないのは、wp_enqueue_styleやwp_enqueue_scriptはこれら単体では使えないということです。WordPressの「ファイル読み用のアクション」に「フック」させて使います。いわゆる「アクションフック」などと呼ばれているものですね。WordPressには様々な「アクションフック」というものが用意されています。WPオブジェクトが設定された時、プラグインが読み込まれた時、テーマ設定が初期化された時、WordPressが完全に読み込まれた時、などなど、様々な段階で、それ専用の「アクション」が実行されます。そのアクションフックの中で、ファイル読み込み用の「wp_enqueue_scripts」アクションというのがあり、wp_enqueue_styleとwp_enqueue_scriptは基本的にこいつにフックして使用します。wp_enqueue_script('好きなハンドル名','読み込みたいjsファイルまでのパス');}//上記のファイルの読み込みに関する記述をまとめた関数を、「wp_enqueue_scripts」アクションにフックさせる。細かいことは気にせず、まずは実際の使い方を見て慣れましょう。テーマディレクトリ直下のstyle.cssと、jsフォルダ内のscript.jsという2つのファイルを読み込みたい場合。'add_files');wp_enqueue_styleやwp_enqueue_scriptの引数の意味wp_enqueue_styleとwp_enqueue_scriptについて、改めて詳しく見ていきます。$media);引数は5つまで指定できます。$handleスタイルシートのハンドル名を指定。なし$srcスタイルシートへのパスを指定。false$deps依存する(このスタイルシートより前に読み込まれる必要がある)他のスタイルシートのハンドル名を配列で指定する。falseを指定する。array()$ver任意のバージョンを指定。ファイル名にクエリパラメータとして追加され、ブラウザキャッシュ対策にもなる。false$mediamedia属性に関する指定。allwp_enqueue_script先ほど出てきたスクリプトを読み込むためのwp_enqueue_script()は、引数でwp_head()かwp_footerのどちらで読み込むかを指定できます。$in_footer);引数はこちらも5つ。$handleスクリプトを区別するハンドル名を指定。なし$srcスクリプトへのパスを指定。false$deps依存する(このスクリプトより前に読み込まれる必要がある)他のスクリプトのハンドル名を配列で指定する。falseを指定する。array()$ver任意のバージョンを指定。ファイル名にクエリパラメータとして追加され、ブラウザキャッシュ対策になる。false$in_footerスクリプトの読み込み位置を指定。trueにするとwp_footer()で読み込める。false第5引数だけ、wp_enqueue_styleの場合と意味合いが異なりますね。trueに指定するだけで、wp_enqueue_scriptでのスクリプトの読み込みはwp_footer()で行われるようになります。true);array()の部分は依存関係を特に指定しないということなので、falseでも良いです。第3、第4は省略して最後の引数をtrueにするだけでよい、という記事を見かけたのですが、私はそれでは読み込み位置は変わりませんでした。true);CSSをwp_footer()で読み込ませるには?CSSの場合、wp_enqueue_style()には$in_footerのような引数がないので、スクリプトと同じようにはいきませんね。wp_enqueue_styleを直接wp_footer()にフックすることで対応できます。'add_css');スタイルシートをwp_footer()で読み込んでしまうと、スタイルが適用される前の純粋なHTML構造がそのまま表示される時間ができてしまいます。ファーストビューの部分、つまりスクロールせずに最初から見える部分に関するスタイルシートはwp_footer()で読み込ませないようにしましょう。管理画面でファイルを読み込みたい場合のフック先ここまで、アクションフックは基本的に「wp_enqueue_scripts」アクションを利用してきましたが、これはフロント側(ユーザーが見ることのできるサイトの表示側)で実行されるアクションになります。管理画面でのファイルの読み込みはこれとは別に、「admin_enqueue_scripts」というアクションがあります。使い方は全く同じなので、説明は省きます。ログイン画面でのファイルの読み込みも、「login_enqueue_scripts」という専用のアクションがるので、必要がある場合はこちらを利用してください。第1引数または第4引数でファイルの更新日をクエリパラメータとして指定することで、ブラウザのキャッシュ対策ができます。ファイル更新時にいちいちキャッシュクリアして更新する必要がなくなるので便利です。詳しくは下記記事でまとめましたので、参考にしてみてください。あわせて読みたいWordPressで読み込むCSSやJSファイルにクエリパラメータを付与し、ブラウザキャッシュは有効のまま変更...CSSなどを変更してクライアントに確認してもらう時、「変わってませんよ?」と言われ、「すみません、キャッシュです。@ddryo_loosホームWordPress基礎知識WordPressでファイルを読み込むためのwp_enqueue_styleとwp_enqueue_scriptの使い方と引数の意味を理解しておこう。