Anonim

主要なCMSコミュニティが主張するように、インターネットの25%はWordPressを使用しています。 トレンドを見ると、私たちはそれらを信じるしか選択肢がありません。ほぼ2 番目のブログと4 番目のサイトごとに、最も強力でユーザーフレンドリーなCMSを使用しているようです。 これを楽しみにして、人々と開発者はサイトをWordPressプラットフォームに移行し始めました。

甘くてシンプルなウェブサイトを複雑で高性能なCMSサイトに変換しようとするこの努力で、人々は非常に基本的なステップにこだわって質問をしています: 愛のために、この外部JavaScript(.js)ファイルを取得するにはこのWordPressテーマで作業していますか? あなたも同じ質問をしていますか? アミゴス、あなたはついに正しい場所にいます:私はこのタスクを達成するために可能な限り簡単な方法を通してあなたを一歩ずつ導くためにここにいます!

WordPressがすべてインストールされ、外部JSが準備されて起動したと仮定して、ファイルをインクルードするタスクを始めましょう!

注:このチュートリアルでは次のファイル(testrun.js)を使用しており、現在取り組んでいるテーマはWordPressのTwenty Sixteenです。

alert( 'Hello');

さぁ、始めよう!

すべてのスクリプトとスタイルシートは、 functions.php内からロードされます。 これは、WordPress自体または使用されているプラ​​グインによってロードされる他のスクリプトとの競合を避けるために、WordPress内でそれらをロードする正しい方法です。 WordPressに含まれるすべてのファイルを管理させる場合、このファイルをファイルのヘッダー(開始)またはフッター(終了)部分に含めることを知らせる必要があります。 各テンプレート/テーマには独自のfunctions.phpがあるため、含まれるすべてのファイルを含む関数の正確な名前を一般化するのは困難です。 私はテーマとして26を取り上げているので、以下は私のfunctions.phpのスナップショットです(ファイルを含めるために使用されます)。 あなたのものはある程度これに似ているべきです:

wp_enqueue_script関数は、スクリプトがまだ含まれていない場合、およびすべての依存関係が登録されている場合、スクリプトの依存関係に従って適切なタイミングでスクリプトファイルを生成されたページにリンクします。 wp_register_script()関数を使用して以前に登録されたハンドルにスクリプトをリンクするか、この関数にスクリプトのリンクに必要なすべてのパラメーターを提供することができます。

wp_enqueue_script($ handle、$ src、$ deps、$ ver、$ in_footer)は次のパラメーターを取ります:

$ handle

(文字列)(必須)スクリプトの名前。

$ src

(string | bool)(オプション)WordPressのルートディレクトリからスクリプトへのパス。 例:「/js/myscript.js」。

デフォルト値:false

$ deps

(配列)(オプション)このスクリプトが依存する登録済みハンドルの配列。

デフォルト値:array()

$ ver

(string | bool)(オプション)スクリプトのバージョン番号を指定する文字列(ある場合)。 このパラメーターは、キャッシュに関係なく正しいバージョンがクライアントに送信されるようにするために使用されるため、バージョン番号が使用可能であり、スクリプトにとって意味がある場合に含める必要があります。

デフォルト値:false

$ in_footer

(bool)(オプション)スクリプトを前にキューに入れるかどうか または前 。 デフォルトは「false」です。 「false」または「true」を受け入れます。

デフォルト値:false

このチュートリアルでは、wp_register_script()関数を無視できます。 私たちの目的は、外部JSのみを含めることです。 それなしでも問題なく動作するはずです!

したがって、スクリプトに「テスト」という名前を付けたい場合、このパラメーター($ handle)は実際のファイルの名前である必要はなく、ファイルはjqueryに対して外部依存関係があり、バージョンは1.0であり、ページがロードされる前にロードされます私の機能は次のようになります:

wp_enqueue_script( 'tutorial'、get_template_directory_uri()。 '/js/testrun.js'、array( 'jquery')、 '1.0'、false);

お気付きの場合は、 get_template_directory_uri()を使用しているため、関数の後に連結される文字列、つまり「 /js/testrun.js 」は、実際にはテンプレートの インデックスファイルに対するファイルのパスです。

したがって、jsファイルのソースである$ src属性は、 get_template_directory_uri()。 'path_to_js_wrt_index_of_template'になります。

したがって、最終functions.phpは次のようになります。

ちょっと待って、もうすぐ終わります! これを今すぐ保存して、Webサイトを更新してください。JSが機能していることがわかります。 これが私のものです:

$ in_footerオプションをfalseに設定しているため、スクリプトはページがロードされる前にロードされますが、依存関係として追加されたJQueryがロードされた後です!

そして..出来上がり! WPテーマに外部カスタムJSファイルを正常にインクルードしました。

ハッピーコーディング!!

参照:エンキュー機能:WordPress Codex

カスタム外部jsをワードプレスに追加する最良の方法は何ですか