web-dev-qa-db-ja.com

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

WordPressでjQueryを使用することに関するCodexといくつかのブログ投稿を読んでおり、非常にイライラしています。 jQueryをfunctions.phpファイルにロードすることはできましたが、そこにあるガイドはすべて、WordPressの豊富な経験があることを前提としているため、すべてが安っぽいものです。たとえば、functions.phpファイルを介してjQueryをロードしているので、jQueryをロードするだけです。

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

jquerywordpress
110
Citizen

チュートリアルの意味を知っています。以下にその方法を示します。

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

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

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

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

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

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 で確認できます。

171
kdev

多くの検索の後、私は最終的に最新のWordPressで動作するものを見つけました。次に手順を示します。

  1. テーマのディレクトリを見つけて、カスタムjsのディレクトリにフォルダーを作成します（この例ではcustom_js）。
  2. このディレクトリの.jsファイルにカスタムjQueryを配置します（この例では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. サイトをチェックして、機能することを確認してください！
43
Stan

テーマにスクリプトを追加するためにwordpress 子テーマ を使用する場合、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

6
DibaCode

テーマの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/

4
Jitendra Damor

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

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

これは、終了bodyタグの直前、または少なくともフッターの直前に含めることをお勧めします。 php include、またはこのファイルを取り込むいくつかの他の方法を使用することもできます。

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

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

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

3
sameeuor

ページに含めるスクリプトを追加する方法については、多くのチュートリアルと回答があります。しかし、私が見つけることができなかったのは、適切に機能するようにそのコードを構成する方法です。これは、この形式の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);
  });
});
3
Rob

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

次に、そのスクリプトを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>タグの下にスクリプトコードを配置します。その後、関数に登録する必要はありません。

2
Rajan471

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

WordPressはしばらく存在しており、テーマやプラグインにスクリプトを追加する方法は何年も同じでしたが、スクリプトを追加する方法を正確に判断することに関しては、まだ混乱があります。それではそれを片付けましょう。

JQueryは依然として最も一般的に使用されているJavascriptフレームワークであるため、テーマまたはプラグインに簡単なスクリプトを追加する方法を見てみましょう。

jQueryの互換モード

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

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

2
Ahmed Elcheikh

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

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

それらをキューに登録しないと、スクリプトは正しく作成されますが、スクリプトが機能しない場合があります。

1
Kenneth Odle

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

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

post を見ると、WordPressプラグインでjQueryとCSSをどれだけ簡単に実装できるかを理解できます。

1
user64745

「Googleがいます」と。 wordpress内でスクリプトを適切に使用するには、ホストされたライブラリを追加するだけです。 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>
1
Vlad

スクリプトを別のファイルに書き込むことができます。そして、このようにファイルをキューに追加します。スクリプト名が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ファイルパスを配置する必要があります。

1
upendra tiwari

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' );
1
Aman Dhanda

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は既にコアにあるため、登録する必要がないことに注意してください。 footer.phpでwp_footer（）が呼び出され、header.phpでwp_head（）が呼び出されることを確認して（スクリプトタグを出力する場所）、jQueryがすべてのページに読み込まれます。 jQueryをWordPressでエンキューすると、「競合なし」モードになるため、$の代わりにjQueryを使用する必要があります。必要に応じてjQueryの登録を解除し、wp_deregister_script（ 'jquery'）を実行して独自のjQueryを再登録できます。

0
Eli Cole