正しくワードプレス上のjQueryのコードを追加する方法

パー パッシーガイ | WordPressのチュートリアル

WordPressにjQueryコードを追加する方法をマスターしたいですか？ それで、もっと学ぶために読み続けてください。

WordPressがしばらくの間利用可能であり、テーマスクリプトとプラグインの追加もしばらくの間行われているという事実にもかかわらず、どの方法を使用するかについては依然として混乱があります。 WordPressにスクリプトを追加するために使用します。

だから私たちは物事を明確にしようとします。

jQuery は最も広く使用されている JavaScript フレームワークであるため、jQuery をテーマまたは WordPressのプラグイン.

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

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

JQuery互換モード

WordPressにスクリプトを追加する前に、jQueryの互換モードを調べてみましょう。 WordPressにはjQueryのコピーが付属しており、コードで使用できます。 WordPress jQueryがロードされると、互換モードが使用されます。これは、他のライブラリとの競合を回避するメカニズムです。 WordPressでjQueryコードを追加する方法

彼かどうか調べてください jQueryをテーマとプラグインから削除する必要がありますか WordPress ?

これは、他のプロジェクトのようにドル記号を直接使用できないことを意味します。 WordPressでjQueryを作成するときは、代わりにjQueryを使用する必要があります。

以下のコードを見て、私の意味を確認してください。

/ *通常モード* / $（ '。Hideable'）。On（ 'click'、function（）{$（this）.hide（）;}）/ *互換性モード* / jQuery（ '。Hideable'）。On （ 'クリック'、関数（）{jQuery（this）.hide（）;}）

知っておく必要があるのは、いくつかの変更を加えると、ドル記号を再び使用できることです。 すべてのコードで「jQuery」を使用するたびに、多くの記述が複雑になります。

チェックアウト 開発者のWordPress用10コードエディタ

要約すると、jQueryを知っている場合、$記号はjQuery（）のエイリアスであり、関数のエイリアスです。 基本的な構文は次のとおりです。 $（セレクタ）.action（） :

  • jQueryを定義するドル記号
  • HTML要素を「検索」するための（セレクター）
  • これらの要素で実行するjQuery（）アクション

スクリプトをフッターにロードすると、コードを匿名関数でラップできるようになります。 方法は次のとおりです。

（function（$）{$（ '。hideable'）。on（ 'click'、function（）{$（this）.hide（）;}）}）（jQuery）;

ヘッダーにスクリプトを追加する場合（可能であれば避けるべきことドキュメントの準備ができたときに実行される関数でラップできます。

ちなみに発見 方法 簡単に Webサイトを壊さずにWordPressでコードを作成する

jQuery（document）.ready（function（$）{$（ '。hideable'）。on（ 'click'、function（）{$（this）.hide（）;}）}）;

スクリプトをjQueryにリンクする方法

WordPressで有効なjQueryコードを作成できるようになったので、作業をWebサイトにリンクします。 WordPressでは、このプロセスは「 エンキュー 」（尾システム）。 通常のHTMLWebサイトの場合、タグを使用する必要がありますスクリプト>スクリプトを追加します。

WordPressでも同じことができますが、WordPressの特別な機能を使用してこれを実現します。 このようにして、WordPressはすべての依存関係を管理します。

テーマで作業している場合は、関数を使用できます wp_enqueue_script（） あなたのファイル内 のfunctions.php ファイル。 これがあなたがそれをすることができる方法です：

function my_theme_scripts（）{wp_enqueue_script（ 'my-great-script'、get_template_directory_uri（）。 '/ js / my-great-script.js'、array（ 'jquery'）、 '1.0.0'、true）; } add_action（ 'wp_enqueue_scripts'、 'my_theme_scripts'）;

この関数は XNUMX つの引数を取ります。 最初のパラメーターはスクリプトを参照するために使用でき、XNUMX 番目はスクリプト ファイルの場所、XNUMX 番目のパラメーターは依存関係の配列です。

スクリプトがjQueryを使用するため、依存関係としてjQueryを追加しました。 「に依存するスクリプトを作成する場合私-偉大なスクリプト WordPressが最初にロードする必要のあるファイルを認識できるように、依存関係リストに追加する必要があります。

発見も ワードプレスでJavaScriptをロードする方法

XNUMX番目のパラメーターはバージョン番号で、XNUMX番目のパラメーターはWordPressがスクリプトを配置する場所を認識できるようにします。 デフォルトでは、スクリプトはヘッダーに読み込まれますが、これはWebサイトページの読み込みが遅くなるため、お勧めできません（ブロックがブロックされるたびに、ブラウザはすべてのページの読み込みを停止します est rencontré）。 可能であれば、5番目のパラメーターを作成して、すべてのスクリプトをフッターに読み込む必要があります。 true '。

ダッシュボード上のスクリプトを追加する方法

WordPressにjQueryコードを正しく追加するスクリプトを追加することもできます タブロー・ド・ボルド。 使用される機能はまったく同じです。「」を使用するだけです。 フック 「違う。 以下の例を見てください。

function my_admin_scripts（）{wp_enqueue_script（ 'my-great-script'、plugin_dir_url（__ FILE __）。 '/ js / my-great-script.js'、array（ 'jquery'）、 '1.0.0'、true）; } add_action（ 'admin_enqueue_scripts'、 'my_admin_scripts'）;

代わりに wp_enqueue_scripts 私たちは使わなければなりません admin_enqueue_scripts、そしてそれだけです！

コンディショナルタグの使用

条件付きタグを使用して、必要な場合にのみスクリプトをロードします。 これは、特定のページでのみスクリプトを使用するダッシュボードで最もよく使用されます。 これにより、帯域幅と処理時間が節約され、Webサイトの読み込み時間が短縮されます。

私たちも発見 ブログの読み込み速度を改善する10 WordPressプラグイン

見てみましょう ドキュメントadmin_enqueue_scripts 詳細については、WordPress Codexをご覧ください。

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

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

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

1。 インタラクティブな世界地図

インタラクティブワールドマップは WordPressのプラグイン これにより、インタラクティブで色付きのマーカー、大陸、国、または地域を使用して、必要な数のマップを作成できます。

インタラクティブな世界地図

それはの新しいバージョンと完全に互換性があります WordPress と 視覚的な作曲家。 このプラグインのおかげで、全世界の地図、大陸または亜大陸（アフリカ、ヨーロッパ、アメリカ、アジア、オセアニア、およびそれらのすべての亜大陸）、国、その地域で分けられた国、米国の州、大都市圏で分けられた米国、大都市圏で分けられた米国の州。

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

2。 AJAX Contact Form with Tracking

Ce WordPressのプラグイン 連絡先フォームやコメント フォームを簡単に追加できます。 WordPressのブログ. WordPressダッシュボードから直接アクセスできる設定マネージャーが付属しています.WP-AJAX接触型トラッキング・プラグインワードプレス・ツー・セーフティ

その主な機能はとりわけ次のとおりです。電子メールのために、のサポート フォーム、カスタマイズ、構成に関するCAPTCHA数学 WordPressダッシュボードを介して、dの可能性カスタム自動応答の定義、カスタムCSSのサポートなど

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

3。 忍者フォームのためのPayPal標準支払いゲートウェイ

忍者フォーム用のPayPal標準ゲートウェイを使用すると、PayPal支払いゲートウェイとシームレスに統合するフォームを作成できます。 

忍者フォーム用のPaypal標準支払いゲートウェイ

パーソナライズされた注文フォームを作成し、標準のPaypalアカウントを使用して支払いを受け取ることができます。 その主な機能は、簡単で高速な統合、IPN統合、個々のフォームでPayPalゲートウェイをアクティブ化/非アクティブ化する機能、定期的な支払いのサポートなどです。

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

その他の推奨リソース

また、以下のリソースを参照して、Webサイトとブログの把握と管理をさらに進めてください。

まとめ

ここに ！ このチュートリアルは以上です。 WordPressにスクリプトを追加する方法を知っていることを願っています。 お気軽に ソーシャルネットワークで友達とヒントを共有する.

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

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

... 

1コメント

  1. Yerlikaya
    Yerlikaya 13年2018月13日50時間XNUMX分

    どうもありがとうございます。 私はXNUMX時間$記号でこれをやろうとします。 jqueryの使用は問題ではありません。

    返事

コメントを投稿

あなたのメールアドレスは公開されません。 必須フィールドは、マークされています *

このサイトでは、望ましくないものを減らすためにAkismetを使用しています。 コメントデータの使用方法の詳細.