WordPressにJavaScriptをロードする方法を知りたいですか？

すべて ワードプレスのテーマ 通常、PHP、HTML、CSS、および JavaScript ファイルで構成されます。 JavaScript は、開発者の間で人気のあるプログラミング言語です。 ワードプレスのテーマ. これは、HTML ページをインタラクティブにする言語であり、サーバーとの対話も可能にします。

あなたのウェブサイトでそれを使用する方法を知っていることは大きな利点になります。

JavaScriptを実際に使用するには、WebサイトにJavaScriptをロードする方法を知る必要があります。

しかし、前に、WordPressをインストールしたことがない場合は、 WordPressのブログ7の手順をインストールする方法 et あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法 

それから私たちがここにいる理由に戻りましょう。

JavaScriptのワードプレスをロードする方法

一歩下がって、WordPressがスクリプトとスタイルをロードする方法を最初に見てみましょう。 JavaScriptファイルを作成するときに、ヘッダーセクションまたはフッターでページに追加できることを学びました。

チュートリアルもご覧ください CSS、HTML、Javascriptファイルを圧縮する方法

WordPress もまったく同じことを行いますが、これらのスクリプト タグを単にヘッダー ファイルやフッターにドロップすることはできません。 ワードプレスのテーマ。 WordPress は「」と呼ばれるスマート読み込みメカニズムを使用しています。 エンキュー '。

このメカニズムは、依存関係に意味を与えるために必要です。 WordPressテーマ用のjQueryコードを記述している場合、jQuery自体を最初にロードする必要があります。

jQueryプラグインに依存するコードを記述します。 この場合、最初にjQueryをロードし、次にjQueryプラグイン、次にコードをロードする必要があります。

スクリプトを「キューに入れる」方法（キューに追加）

WordPress テーマ フォルダまたは WordPressのプラグイン. jQuery に依存するスクリプトを含めるための完全なコードを次に示します。

関数のmy_theme_scripts（）{

 wp_enqueue_script（ 'my-script'、get_template_directory_uri（）。 '/ js / my-script.js'、array（ 'jquery'）、 '1.0.0'、true）;

}

add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

まず第一に、関数は「 夢中 WordPressで（フックワードプレスを使用して）。 関数の最初の引数 add_action（） これらのスクリプトを配置する場所をWordPressに指示します。

• 公共の場で
• ダッシュボード上

「 wp_enqueue_scripts 「パブリックスペース」に使用すると、「 admin_enqueue_scripts それらはダッシュボードにロードされます。

関数で« add_action 使用できます wp_enqueue_script 必要なスクリプトを追加するには。 この関数は、必須パラメーターと4つのオプションパラメーターを受け取ります。

• 最初のパラメーターは、スクリプトの名前です。 必要なものを選択できますが、必ず一意の名前を使用してください。
• XNUMX 番目のパラメーターには、WordPress テーマまたは WordPressのプラグイン.
• XNUMX番目のパラメーターには、依存関係の配列が含まれています。 上記の例では、jQueryは依存関係であると述べました。 すべての依存関係は、問題のスクリプトの前にロードされます。
• 4番目のパラメーターはバージョン番号です
• XNUMX番目で最後のパラメーターは、スクリプトをヘッダーとフッターのどちらにロードするかを示します。 フッターにロードするには「true」を使用し、ヘッダーにスクリプトをロードするには「false」を使用します（このパラメータを入力することもできません).

依存関係

WordPressはjQueryのコピーを提供しているため、面倒なことなく依存関係として追加できます。 WordPressが提供する他のjQueryスクリプトとプラグインは多数あります。 コードがそれらのXNUMXつに依存している場合は、コピーのXNUMXつを使用する必要はなく、依存関係として追加するだけです。 がここにあります オファーをワードプレススクリプトのリスト.

複数の独立したスクリプトを含める場合は、まったく同じ方法でそれらを依存関係として追加できます。 以下の例を見てください。

関数のmy_theme_scripts（）{

 wp_enqueue_script（ "my-base script"、get_template_directory_uri（）。 '/ js / my-base-script.js'、array（ 'jquery'）、 '1.0.0'、true）;

 wp_enqueue_script（ "my-script-extension"、get_template_directory_uri（）。 '/ js / my-script-extension.js'、array（ "my-script-base '）、' 1.0.0 '、true）;

}

add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

最初のスクリプトはjQueryに依存するため、次のスクリプトもjQueryに依存します。 そのため、両方の依存関係としてjQueryを追加する必要はありません。 これにより、依存関係の管理が容易になります。

条件付きロード

すべてのページでスクリプトを使用したい場合もありますが、特定のページでスクリプトをロードしたい場合もあります。 これは、ダッシュボードにスクリプトを追加することを検討する場合に特に当てはまります。 良い例は ショートコードの使用。 ショートコードを使用すると、ユーザーはいくつかの簡単なトリックを使用して、ビジュアルテキストエディターで高度な表示を作成できます。

関数のmy_theme_scripts（）{

 wp_register_script（ 'my-script'、get_template_directory_uri（）。 '/ js / my-script.js'、array（ 'jquery'）、 '1.0.0'、true）;

 wp_enqueue_script（ 'my-script'）;

}

add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

WordPressがスクリプトについて学習できるようにスクリプトを保存しましたが、「 エンキュー 」。 この方法では、このページでショートコードが使用されている場合にのみ、スクリプトがページに追加されます。

条件付きのスクリプトをロードする別の方法は、条件付き関数を使用することです。 カテゴリのすべてのアーカイブページにスクリプトをロードする場合は、関数を使用できます is_category（）.

たとえば、ユーザーが記事に追加できる画像のカルーセルを次のように作成できます：[カルーセルID = '42,124,123,331,90、XNUMX ']。 IDで指定された画像を使用して、記事ページにカルーセルが作成されます。

これを行うには、ファイルを作成する必要があります " carousel.js これはjQueryに基づいています。 そこに到達するためのコードは次のとおりです（カルーセルは作成されませんが、ロードプロセスがどのように発生するかを確認できます）。

add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

関数のmy_theme_scripts（）{

 wp_register_script（ 'my-carousel'、get_template_directory_uri（）。 '/ js / my-carousel.js'、array（ 'jquery'）、 '1.0.0'、true）;

}

add_shortcode（ 'carousel'、 'my_carousel'）;

my_carousel関数（$ args）{

 $ atts = shortcode_atts（配列（

 'Ids' => "、

 ）、$ Atts、 'カルーセル'）;

 wp_enqueue_script（ 'my-carousel'）;

 //カルーセルをここに表示するコード

}

スクリプトの取り外しと交換

これは一般的なシナリオですが、スクリプトの削除または置換が必要になる場合があります。 プラグインによってスクリプトが追加される状況に陥りました（ただし、テーマでは使用されません）互換性の問題を引き起こしていました。 エラーが完全に消えたので、「撤回」が最良の選択肢でした。

何かをテストして新しいバージョンとの互換性があることを確認する場合は、jQueryを新しいバージョンに置き換えることもできます。

これらの状況では、機能 wp_deregister_script（） "そして" wp_dequeue_script（） 便利です。 WordPressに既に追加されているコードを編集する方法は次のとおりです。

関数のmy_theme_scripts（）{

 wp_deregister_script（ 'jquery'）;

 wp_enqueue_script（ 'jquery'、get_template_directory_uri（）。 '/ js / jquery3.0.0.js'、array（）、 '3.0.0'、true）;

 wp_enqueue_script（ 'my-script'、get_template_directory_uri（）。 '/ js / my-script.js'、array（ 'jquery'）、 '1.0.0'、true）;

}

add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

最終的な考え

WordPressにアップロードするこの方法は、スクリプトをモジュール方式で追加できるため、優れています。 これにより、依存関係がモジュール方式で追加されるようになります。

プレミアムWordPressプラグインもご覧ください  

他にも使えます WordPressのプラグイン モダンな外観を与え、ブログやウェブサイトの取り扱いを最適化します。

ここでは、そのためのプレミアムWordPressプラグインを提供しています。

1。 プレミアムSEOパック

プレミアムSEOパックは WordPressのプラグイン これにより、SEO が最適化され、CSS が圧縮され、Web サイトの読み込み速度が向上します。

プラグインを使用すると、数回クリックするだけでWebサイトのデザインを管理することもできます。 その機能には、CSSとJSの圧縮、ビデオとスニペットのサイトマップの統合、HTMLとXMLファイルのフォーマット、404ページと301ページのリダイレクト、ソーシャルメディアの共有、 'ALTラベル、高度にカスタマイズ可能なレイアウト

ダウンロード | デモ | ウェブホスティング

2。 配送のためのWoocommerce Delivery Time Picker

Woocommerce Delivery Time Picker for Shippingは、顧客がチェックアウトページで配達日時を選択できるようにするWooCommerce拡張機能です。 

顧客は、自宅で荷物の配達時間を選択できます。 配信時間は、Webサイトの管理者に表示され、Webサイトの管理者またはオンラインストアに電子メールで送信されます。

ダウンロード | デモ | ウェブホスティング

3。 メニューヒーロー

このプラグインを使用すると、いくつかの非常に簡単な手順で独自のカスタムWordPressメニューを作成できます。 特に、エレガントでプロフェッショナルなWordPressメニューを簡単かつ直感的に作成できます。 

機能が満載の最も複雑なメガメニューから、ドロップダウンメニュー付きの最もシンプルなメニュー、WordPressプラグインまで HeroMenu あらゆるタイプのメニューを設定し、数分で起動して実行します。

提供する機能に関しては、PC、タブレット、スマートフォンでの完璧な操作、 カスタムCSS 独自のスタイルをメニューに追加するには、メガメニュービルダー、サポートされているいくつかのブラウザー：Chrome、Firefox、Safari、Opera、IE9など。

ダウンロード | デモ | ウェブホスティング

推奨リソース

他の一般的なWordPressエラーの解決に役立つ他の推奨リソースを確認してください。 

• ワードプレスのエラーをリダイレクト修正する方法
• Elementorでカスタムレイアウトを作成する方法
• あなたの組織のWordPressイントラネットを作成する方法
• ワードプレスのログインページを作成する方法

まとめ

ここは ！ このチュートリアルは以上です。WordPressにJavaScriptをロードする方法を理解できたと思います。 あなたの友人とそれを共有することを躊躇しないでください 社会的ネットワーク 好適。 

しかし、あなたも私たちに相談することができます ressources、インターネットサイトの作成プロジェクトを実行するためにより多くの要素が必要な場合は、 WordPressブログの作成。

しかし、その間に、あなたについて教えてください commentaires 専用セクションの提案。

...