MEDIAWordPressアドセンスSearchConsoleアナリティクスレンタルサーバードメインWordPressにJavaScriptを読み込むwp_enqueue_scriptの使い方2019.08.08WordPress使い方WordPress関数HOMEWordPressWordPress使い方WordPressにJavaScriptを読み込むwp_enqueue_scriptの使い方WordPressにはJavaScriptをテーマに読み込むときの関数が用意されています。今までJavaScriptを読み込むときはWordPressテーマのheadやbody直上に直接コードを記述していることが多かったのですが、推奨されている関数を使うことでWordPressに対応させた読み込みをすることができます。勉強も兼ねてアウトプットしてるのでポンコツな内容があったらすいません。JavaScriptの読み込み順序をコントロールWordPressにJavaScriptを読み込むWordPressにJavaScriptを読み込む場合の記述方法としては冒頭で触れたようにテーマのheader.phpのheadに配置したり、footer.phpのbody閉じタグの直上に直接書いて読み込むことも多いかと思います。JavaScriptを直接書く場合の読み込み方法でも間違えではありません。WordPressでJavaScriptを読み込むならWordPressの関数を使用することで、WordPressにベストなJavaScriptの読み込みをすることができるのです。ここからはそんなWordPressにベストなJavaScriptを読み込む関数や書き方が分かるように使い方を説明していきます。)スクリプトをwp_enqueue_script()を使用することでファイルを登録し、読み込みをしてキューに追加します。「enqueue(エンキュー)」は「キュー(待ち行列)」に並ばせるという意味です。アクションフックで読み込むことができます。アクションフックはWordPressの特定のタイミングで「独自の関数」を使って何らかの処理をするための仕組みです。wp_enqueue_scriptは依存関係などを考慮してスクリプトをインクルードしてくれます。このようなJavaScriptの読み込みをWordPress関数で処理する使い方ができるのですが、wp_enqueue_scriptは良い面で管理やレンダリングにおいても直接記述する場合との違いがあります。JavaScriptを直接書くときとの違いJavaScriptを直接テーマのheadに記述した場合には、ブラウザのレンダリングをスクリプトの処理待ちによってレンダリングブロックしてしまう可能性があります。その反面WordPressのwp_enqueue_scriptの場合は、無駄な読み込みを制御することができたり重複しないようにすることで読み込みができるようになります。一言で言えば「パフォーマンスの良い読み込み」を実現します。この違いに対してもWordPressがwp_enqueue_scriptを使ってスクリプトの読み込みを推奨してることなのだとも思っています。Advertisementwp_enqueue_scriptで読み込む書き方WordPressでwp_enqueue_scriptを使うときの書き方はJavaScriptの読み込みに必要なパラメータ(引数)を追加して書いていきます。)$handle第1引数:スクリプトのハンドル名。登録済みの名前があるとキューに追加されないです。$src第2引数:.jsファイルの場所までのURL$deps第3引数:初期値はarray()。該当のJavaScriptの読み込み前に読んでおくスクリプト$handleを配列形式で渡します。$ver第4引数:初期値はfalse。バージョン番号を指定できます。確実に読み込ませたいときに使用できます。$in_footer第5引数:初期値のfalseで<head>タグ内で読み込みます。trueにするとフッターで読み込みます。);出力結果の画像は以下です。上記のコードの書き方はwp_enqueue_scriptの引数に$handleと$srcを書いてます。‘xx-script’$handle:第一引数にスクリプトの名前を書きます。‘/js/xx.js’$src:第二引数にテンプレートのディレクトリを取得します。get_template_directory_url()を使用してテーマディレクトリまでのURLを指定してます。);add_actionでアクションフックさせます。WordPressで読み込むJavaScriptの設置場所WordPressの関数で書いたJavaScriptをテーマのどこの場所に設置するかについてです。wp_enqueue_script()読み込む設置場所はテーマのfunctions.phpに記述して配置します。wp_enqueue_script()の設置場所はfunctions.phpですが、読み込んでから出力されるスクリプトの出力設置場所がWordPressテーマのhead内かbody内のどちらかの場所に設置するかによってwp_enqueue_script()で読み込む書き方が少し変わります。wp_enqueue_scriptでheadに読み込みfunctions,phpに書いたwp_enqueue_script()で出力するスクリプトをテーマのheadで読み込みたい場合です。数日前に試しにエックスサーバーのWebフォントを遊んでるブログに読み込んだときのコードですが、読み込めたのでheadで読み込む書き方として。);上記のコードでJavaScriptの読み込みはheadタグ内にスクリプトのコードが出力されます。ハンドルの名前とファイルまでのURLが変わったくらいです。wp_enqueue_scriptでfooterに読み込み次にfooterで読み込みの場合です。);Advertisementwp_enqueue_script()の第五引数をtrueにします。するとfooterで読み込んでくれました。JavaScriptの読み込み順序をコントロール読み込むファイルについて「はじめにスクリプトを動作させたいので、他のスクリプトを先に読み込みたい」という場合はどうするんだろうと思った場合がわからなかったので調べたらすぐに情報があったので理解するのに助かりました。);上記コードはone-scriptをキューに追加してからtwo-scriptを追加してます。)にして順番で読み込めるようになります。このときにハンドル名の間違いがあるとone.jsに続くtwo.jsも読み込まれなくなるので注意が必要です。WordPressにJavaScriptの読み込みをwp_enqueue_scriptでする使い方について説明しながら実際にコードを書いていたのですが、理解はできても細かい書き方でミスることがあったのでもっと勉強しておこうと思えた今回の投稿でした。投稿一覧WordPressとWeb関係のことを趣味的に学んでます。独学なので記事で間違ってることがあればご指摘ください。記事が少しでも誰かの参考になればと思います。2019.02.20Webサーバーやコンピューター全般で使われる「ディレクトリ」についてです。2019.11.19あえてwordpressテーマのインストールを失敗してしまう方法を試してみました。WordPress.。