WordPressに単純なjQueryスクリプトを追加するにはどうすればよいですか？

CodexとWordPressでのjQueryの使用に関するいくつかのブログ投稿を読んで、非常にイライラします。私はfunctions.phpファイルにjQueryをロードすることまで行ってきましたが、すでに大量のWordPressの経験があると想定しているので、そこにあるすべてのガイドは安っぽいです。たとえば、jQueryをfunctions.phpファイルからロードしているので、jQueryをロードするだけでよいと言われています。

これはどのように正確に行うのですか？具体的には、どのファイルにコードを追加しますか？1つのWordPressページに正確に追加するにはどうすればよいですか？

チュートリアルの意味がわかります。ここに私がそれをする方法があります：

まず、スクリプトを作成する必要があります。テーマフォルダーに、「js」のようなフォルダーを作成します。そのフォルダーにJavaScriptのファイルを作成します。例：your-script.js。そのファイルにjQueryスクリプトを追加します（<script>.jsファイルにタグは必要ありません）。

jwスクリプト（wp-content / themes / your-theme / js / your-scrript.js内）の例を次に示します。

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

関数の開始時に$ではなくjQueryを使用していることに注意してください。

では、テーマのfunctions.phpファイルを開きます。このwp_enqueue_script()関数を使用して、スクリプトを追加すると同時に、WordPressにjQueryに依存していることを伝えます。これを行う方法は次のとおりです。

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

あなたのテーマが正しい場所にwp_headとwp_footerを持っていると仮定すると、これはうまくいくはずです。他にサポートが必要な場合はお知らせください。

WordPressの質問はWordPress Answersで質問できます。

多くの検索後、私は最終的には、最新のWordPressで動作する何かを発見しました。以下はその手順です。

1. テーマのディレクトリを見つけ、カスタムjs（この例ではcustom_js）のディレクトリにフォルダを作成します。
2. カスタムjQueryをこのディレクトリの.jsファイル（この例ではjquery_test.js）に配置します。

3. カスタムjQuery .jsが次のようになっていることを確認してください。

   (function($) {
   $(document).ready(function() {
   $('.your-class').addClass('do-my-bidding');
   })
   })(jQuery);

4. テーマのディレクトリに移動し、functions.phpを開きます

5. 次のようなコードを上部近くに追加します。

   //this goes in functions.php near the top
   function my_scripts_method() {
   // register your script location, dependencies and version
      wp_register_script('custom_script',
      get_template_directory_uri() . '/custom_js/jquery_test.js',
      array('jquery'),
      '1.0' );
    // enqueue the script
     wp_enqueue_script('custom_script');
     }
   add_action('wp_enqueue_scripts', 'my_scripts_method');

6. サイトをチェックして、機能することを確認してください！

テーマにスクリプトを追加するためにワードプレスの子テーマを使用する場合は、get_template_directory_uri関数をget_stylesheet_directory_uriに変更する必要があります。次に例を示します。

親テーマ：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

子供のテーマ：

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri：/ your-site / wp-content / themes / parent-theme

get_stylesheet_directory_uri：/ your-site / wp-content / themes / child-theme

テーマのfunction.phpファイルにjQueryまたはJavaScriptを追加できます。コードは次のとおりです。

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

詳細については、このチュートリアルをご覧ください。http：//www.codecanal.com/add-simple-jquery-script-wordpress/

関数を介してスクリプトを配置する以外に、ヘッダー（フッター、任意のテンプレート）にリンク（リンクrelタグ）を含めることができます。パスが正しいことを確認するだけです。このようなものを使用することをお勧めします（あなたがテーマのディレクトリにいると仮定します）。

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

これを本文の終了タグの直前、または少なくともフッターの直前に含めることをお勧めします。PHPインクルード、またはこのファイルをプルする他のいくつかの方法を使用することもできます。

<script type="javascript"><?php include('your-file.js');?></script>

**＃方法1：**別のjsファイルにjqueryコードを配置してみてください。

そのスクリプトをfunctions.phpファイルに登録します。

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

これで完了です。

関数にスクリプトを登録すると<head>、ページの読み込み時にセクションに入るので、常にheader.phpの一部になるため、スクリプトに利点があります。したがって、新しいhtmlコンテンツを作成するたびにコードを繰り返す必要はありません。

＃方法2：スクリプトコードをページ本文の<script>タグの下に配置します。その後、関数に登録する必要はありません。

このプラグインを使用して、カスタムJavaScriptまたはjQueryを追加できます。
https://wordpress.org/plugins/custom-javascript-editor/

jQueryを使用するときは、jquery noconflictモードを使用することを忘れないでください

ページに含めるスクリプトを追加する方法については、多くのチュートリアルと回答があります。しかし、私が見つけられなかったのは、適切に機能するようにコードを構造化する方法です。これは、$がこの形式のJQueryで使用されていないためです。

これが私のコードです。テンプレートとして使用できます。

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

ここからの回答：https : //premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

WordPressはしばらく前から存在していて、テーマやプラグインにスクリプトを追加する方法は何年も同じですが、スクリプトを正確に追加する必要があるかどうかについてはまだ混乱があります。だからそれを片付けましょう。

jQueryはまだ最も一般的に使用されているJavaScriptフレームワークなので、テーマやプラグインに簡単なスクリプトを追加する方法を見てみましょう。

jQueryの互換モード

スクリプトをWordPressに添付する前に、jQueryの互換モードを見てみましょう。WordPressには、jQueryのコピーがあらかじめパッケージ化されており、コードで使用する必要があります。WordPressのjQueryが読み込まれると、他の言語ライブラリとの競合を回避するためのメカニズムである互換モードが使用されます。

つまり、他のプロジェクトのようにドル記号を直接使用することはできません。WordPress用のjQueryを作成する場合は、代わりにjQueryを使用する必要があります。以下のコードを見て、私の意味を確認してください。

私が見たソリューションは、テーマにJavaScript機能を追加するという観点からのものです。ただし、OPは、具体的には、「どのように正確に1 つの WordPressページにですか？」と尋ねました。これは、WordpressブログでJavaScriptをどのように使用しているのかと思われます。個々の投稿には、JavaScriptを利用したさまざまな「ウィジェット」が含まれている可能性があります。たとえば、投稿では、ユーザーが変数（スライダー、チェックボックス、テキスト入力フィールド）を変更したり、結果をプロットまたは一覧表示したりできます。

JavaScriptの観点から始めます。

1. JavaScript関数を別の「.js」ファイルに記述します

投稿のhtmlに重要なJavaScriptを含めることについては考えないでください。コードでJavaScriptファイルを作成してください。

2. JavaScriptと投稿のhtmlをインターフェースする

JavaScriptウィジェットがHTMLコントロールおよびフィールドと相互作用する場合、JavaScriptからこれらの要素をクエリおよび設定する方法、およびUI要素にJavaScript関数を呼び出させる方法を理解する必要があります。以下に例をいくつか示します。まず、JavaScriptから：

var val = document.getElementById(“AM_Freq_A_3”).value;

そしてhtmlから：

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>

3. jQueryを使用してJavaScriptウィジェットの初期化関数を呼び出す

ページの準備ができたときにJavaScriptウィジェットを構成して描画する関数の名前を使用して、これを.jsファイルに追加します。

jQuery(document).ready(function( $ ) {
    your_init_function();
});

4. 投稿のhtmlコードで、投稿に必要なスクリプトをロードします

Wordpressコードエディタでは、通常、投稿の最後にスクリプトを指定します。たとえば、メインディレクトリにスクリプトフォルダーがあります。内部には、いくつかの投稿が共有する可能性のある一般的なJavaScriptを含むユーティリティディレクトリがあります。この場合、自分の数学ユーティリティ関数とflotr2プロットライブラリの一部です。たとえば、メディアマネージャーを使用する代わりに、日付に基づいてサブディレクトリを指定して、投稿固有のJavaScriptを別のディレクトリにグループ化する方が便利です。

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>

5. jQueryのエンキュー

WordpressはjQueryを登録しますが、jQueryをエンキューしてWordpressに指示しない限り、jQueryを使用できません。そうしないと、jQueryコマンドは失敗します。多くのソースがこのコマンドをfunctions.phpに追加する方法を説明していますが、他の重要な詳細を知っていると想定しています。

まず、テーマを編集することはお勧めできません。テーマを将来更新すると、変更がすべて消去されます。子供のテーマを作る。方法は次のとおりです。

https://developer.wordpress.org/themes/advanced-topics/child-themes/

子のfunctions.phpファイルは、同じ名前の親テーマのファイルをオーバーライドせず、それに追加します。子テーマのチュートリアルでは、親と子のstyle.cssファイルをエンキューする方法を提案しています。その関数に別の行を追加するだけで、jQueryもキューに入れることができます。子テーマのfunctions.phpファイル全体を次に示します。

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

WordPressの定義済み関数を使用して、スクリプトファイルをWordPressプラグインに追加できます。

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

見後のあなたはどのように簡単にあなたがWordPressのプラグインでjQueryとCSSを実装できることを理解するのに役立ちます。

関数を介してスクリプトを配置する以外に、ヘッダー（フッター、任意のテンプレート）にリンク（リンクrelタグ）を含めることができます。

いいえ。WordPressでこのような外部スクリプトへのリンクを追加するだけではいけません。functions.phpファイルを介してそれらをエンキューすると、スクリプトが正しい順序でロードされます。

それらをエンキューしないと、スクリプトが正しく記述されていても、スクリプトが機能しない可能性があります。

スクリプトを別のファイルに書き込むことができますimage-ticker.js。スクリプト名がであるとすると、このようにファイルをエンキューします。

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

/js/image-ticker.jsあなたの代わりにあなたのjsファイルパスを置くべきです。

WordPressでは、次の関数を使用することにより、スクリプトをWebサイトに組み込む正しい方法を使用できます。

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

これらの関数はフック内で呼び出されwp_enqueue_scriptます。

詳細と例については、wp_register_script＆wp_enqueue_scriptを使用して、WordpressでのJSファイルの追加を確認できます。

例：

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

「私たちはグーグルを持っている」cit。ワードプレス内でスクリプトを適切に使用するには、ホストされたライブラリを追加するだけです。同様にGoogleの

カスタムスクリプトの前にリンクする必要があるライブラリを選択した後：exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

そしてあなた自身のスクリプトの後

<script type="text/javascript">
    $(document).ready(function () {
        $('.text_container').addClass("hidden");
    });
</script>

jqueryをロードするだけで済みますか？

1）他のガイドが言うように、次のようにfunctions.phpファイルにスクリプトを登録します：

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2）jQueryはすでにコアにあるため、jQueryを登録する必要がないことに注意してください。wp_footer（）がフッター.phpで呼び出され、wp_head（）がヘッダー.phpで呼び出されていることを確認します（これがスクリプトタグを出力する場所です）。jQueryはすべてのページにロードされます。WordPressでjQueryをエンキューすると、「競合なし」モードになるため、$ではなくjQueryを使用する必要があります。必要に応じてjQueryの登録を解除し、wp_deregister_script（ 'jquery'）を実行して独自のjQueryを再登録できます。

function xyz_scripts() {
    wp_enqueue_script('jquery');
}
add_action('wp_enqueue_scripts', 'xyz_scripts');