web-dev-qa-db-ja.com

ページ上でjQueryスクリプトを実行する方法

私のWordpressページ上でjQueryスクリプトを実行する方法を「正しい」方法で見つけるのに苦労しています。

私は this の記事に従って、最初の答えがするように言うことを実行しました。

私のブログでjQueryを機能させる方法について私が読んだチュートリアルや記事は非常にたくさんありますが、それを理解することはできないようです。

私は、それを経験したことのある他の人たちから解決したいと思っている質問がいくつかあります。

まず第一に、私が読んだチュートリアルとことのほとんどはあなたのブログでjQueryincludedを取得する方法です。私の最初の質問は、ダウンロードしたほとんどのテーマにヘッダーにjQueryが自動的に含まれないようにすることです。たとえば、私のサイトでは、次の行がすべてのページに自動的に組み込まれています。

<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
<script type='text/javascript' src='http://<mysite>.com/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>

だから、jQueryが含まれている、私はそれについて心配する必要はありません...

さて、それは含まれています、今私はjQueryスクリプトを実行するためにちょうどサンプルページまたはポストを取得する方法を理解する必要があります。

上記のページの指示に従います。

最初に自分のサイトのバックエンドに行き、Child Themesフォルダーに行き、そして "jquery-script.js"という新しいファイルを作ります。

その中に、私は次のコードを書き、ファイルを保存します。

jQuery(document).ready(function($){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});

わかりました...バックエンドにjQueryスクリプトファイルがあります。それでは、そのスクリプトを参照またはエンキューする必要があります。この記事によると、スクリプトをエンキューするのが最善です。だから私は指示に従い、私の子供のテーマの "functions.php"ファイルに新しいPHP関数を追加します。このファイルに、以下を追加します。

function add_jquery_script() {
  wp_enqueue_script(
    'jquery-script', // name your script so that you can attach other scripts and de-register, etc.
     get_template_directory_uri() . '/jquery-script.js', // this is the location of your script file
     array('jquery') // this array lists the scripts upon which your script depends
  );
}

これで完了です。これでうまくいくはずだと思います。そこで、私は自分のサイトに「テストページ」を作成します（公開されていないかどうかにかかわらず）。私は自分のスクリプトに自分のやりたいことをさせるために必要なdiv、ボタン、そしてすべてを作成します。

<p>Demonstrate fadeIn() with different parameters.</p>
<button>Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

ページをプレビューし、ボタンをクリックします。何も起こりません。

さて...多分私は私のfunctions.phpファイルでもう少し行う必要があります。それで私はそこに戻り、私がフォローしているページを読みます。おそらくそれを機能させるには行を追加する必要があるでしょう。そのため、関数の後に次の行を追加します。

add_action('wp_enqueue_scripts', 'add_jquery_script');

ファイルを保存します。私は興奮しています。これでうまくいくはずです。私は行って自分のページをテストします…もう何もしません。ボタンをクリックしても何も起こりません。うーん...

だから今、私は行って、私のfunctions.phpファイルで全く異なる何かをします。特定のスクリプトを動作させるために過去に行ったことがあるので、関数と "add_action"呼び出しを完全に削除し、次の関数をfunctions.phpファイルに実装します。

function add_jquery_script() {
    echo '<script type="text/javascript" src="http://<mysite>.com/wp-content/themes/responsive-childtheme-master/jquery-script.js"></script>' . "\n";
}
add_action('wp_head', 'add_jquery_script');

それからファイルを保存してテストします。私のページは働きます！ウーホー！それは私がやりたいことです。

しかし、私はそれに満足していません。私が使用しようとしたが失敗した方法を使用してスクリプトを常にエンキューする必要があることを至る所で読んでいます。

それで私が答えられることを望むいくつかの最後の質問：

  • まず、スクリプトをエンキューしようとしたのに、2番目の方法ではうまくいかなかったのはなぜですか。

  • 第二に、事は今です...私が書いたjQueryスクリプトは私のサイトのすべての単一ページに含まれるようになります...すべての投稿、ページなど。これは問題ですか？他のページに影響を与えないようにスクリプトを実行したい1つのページに含めるだけの方法はありますか？

  • 3番目に、ページ/投稿を書いている間に私が使用するTinyMCEエディタの「テキスト」タブにこのスクリプトを含めることができないのはなぜですか？私は<script>タグを使ってそれらの間に私の小さなスクリプトを置くことを試みました、しかしそれはうまくいくように見えません。
  • 4つ目は、スクリプトを1ページでしか実行できず、すべてのページに含める必要がある場合は、HTML要素を特に的確にターゲットに設定する必要があることです。 $("button")を使用してすべてのボタンをターゲットにするスクリプトを使用することは明らかではありません。その場合は、その特定のページのボタンに<button id="some-unique-id">などの一意のIDを付けて、jQueryでそれをターゲットにします。そうすれば、スクリプトはそのボタンに対してのみ機能します。

非常に長い投稿とnoobの質問ですみません…私はそれほどjQueryに惑わされたことがありません。私は自分のカスタムスクリプトや実行したいものを含めるためにWordpressの使い方について頭を包みます。 。

誰かが私の質問のいずれかについてのフィードバックをお持ちの場合、それは大歓迎です。本当にありがとう！

jqueryjavascriptwp-enqueue-scripttinymcescripts
3
JakeP

あなたの質問は少し広いです。私たちは実際には投稿ポリシーごとに1つの質問があります。私は答えようとするつもりです

私の最初の質問は、ダウンロードしたほとんどのテーマにヘッダーにjQueryが自動的に含まれないようにすることです。

まあ、基本的に正しいです。そのため、今日のテーマの多くの機能を正しく実行するにはjqueryが必要です。私はjqueryを利用しないテーマに出くわしていません。ちょっとここで注意してください、あなたのテーマがjqueryをロードしていないなら、wordpressでデフォルトで来るjqueryをロードしてください、それはすでに組み込まれています、それであなたはただライブラリをエンキューする必要があります。外部のソースからjqueryライブラリをロードすることはお勧めできません。

（念のために言っておきますが、wp_enqueue_scriptsはこれらのフックを使用してスクリプトとスタイルをフックするため、スクリプトとスタイルを機能させるには、テーマにはヘッダーに wp_head() 、フッターに wp_footer() が必要です）

あなたは単にあなたのテーマにjqueryを追加することができます。

function my_scripts_method() {
    wp_enqueue_script( 'jquery' );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

ページをプレビューし、ボタンをクリックします。何も起こりません。

まず、スクリプトをエンキューしようとしたのに、2番目の方法ではうまくいかなかったのはなぜですか。

ほとんどのオンラインチュートリアルには根本的な欠陥があります。初心者はこれを知らないかもしれませんが、 wp_enqueue_script() 、 wp_register_script() 、 wp_enqueue_style() 、 wp_register_style() の$scrパラメータ（スクリプトへのURL）は、親テーマとプラグインは異なります

  • 親テーマはget_template_directory_uri()を使います
  • 子テーマはget_stylesheet_directory_uri()を使用します
  • とプラグインはplugins_url()を使います

そのため、コードが機能しないのは、子テーマで親パスを使用しているためです。あなたはあなたの第二の方法を使うべきではありません。あなたの最初の方法はスクリプトとスタイルをロードする正しい方法です

第二に、事は今です...私が書いたjQueryスクリプトは私のサイトのすべての単一ページに含まれるようになります...すべての投稿、ページなど。これは問題ですか？他のページに影響を与えないようにスクリプトを実行したい1つのページに含めるだけの方法はありますか？

スタイルとスクリプトは、 条件付きタグ を使用して条件付きでロードできます。自分の時間に行ってみることもできますが、基本的にjqueryをホームページでのみロードし、他のページではロードしない場合は、次のようにします。

function my_scripts_method() {
   if(is_home()){
        wp_enqueue_script( 'jquery' );
    }
}    
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

3番目に、ページ/投稿を書いている間に私が使用するTinyMCEエディタの「テキスト」タブにこのスクリプトを含めることができないのはなぜですか？私はタグを使ってそれらの間に私の小さなスクリプトを置くことを試みました、しかしそれはうまくいくようには見えません。

wp_enqueue_scripts actionフックを使用してスクリプトとスタイルを常にロードする必要があり、スタイルとスクリプトは必要に応じて条件付きでロードする必要があります。

4つ目は、スクリプトを1ページでしか実行できず、すべてのページに含める必要がある場合は、HTML要素を特に的確にターゲットに設定する必要があることです。もちろん、$（ "button"）を使用してすべてのボタンをターゲットにするスクリプトを使用するのではありません。その場合は、その特定のページのボタンに固有のIDなどを割り当ててjQueryでターゲットにするだけですか。そうすれば、スクリプトはそのボタンに対してのみ機能します。

説明はポイント番号2を参照

4
Pieter Goosen