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

Question

私はCodexとWordPressでのjQueryの使用に関するいくつかのブログ投稿を読みましたが、それは非常に苛立たしいことです。私はjQueryをfunctions.phpファイルにロードするところまで来ましたが、そこにあるすべてのガイドは、あなたがすでにたくさんのWordPressの経験を持っていると想定しているので、くだらないものです。たとえば、functions.phpファイルを介してjQueryをロードしているので、jQueryをロードするだけでよいと言われています。

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

score 219 · Accepted Answer

私はあなたがチュートリアルについて何を意味するのか知っています。これが私がそれをする方法です：

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

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()、スクリプトを追加しながら、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の質問は、 WordPressAnswersで質問できます。

score 54 · Accepted Answer

何度も検索した結果、ついに最新のWordPressで動作するものを見つけました。従う手順は次のとおりです。

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

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

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

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

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

//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');

あなたのサイトをチェックして、それが機能することを確認してください！

score 10 · Accepted Answer

テーマにスクリプトを追加するために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

score 6 · Accepted Answer

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

score 4 · Accepted Answer

関数を介してスクリプトを挿入する以外に、ヘッダー、フッター、任意のテンプレートにリンク（つまり、リンク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>

score 3 · Accepted Answer

**＃方法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>タグの下のページ本文内にスクリプトコードを配置します。そうすれば、関数に登録する必要はありません。

score 3 · Accepted Answer

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

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

score 3 · Accepted Answer

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

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

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

jQueryの互換モード

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

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

score 3 · Accepted Answer

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

score 3 · Accepted Answer

私が見た解決策は、テーマにjavascript機能を追加するという観点からのものです。しかし、OPは具体的に、「単一のWordPressページにどのように正確に追加するのですか？」と尋ねました。これは、Wordpressブログでjavascriptを使用する方法のように聞こえます。ここでは、個々の投稿にjavascriptを利用した「ウィジェット」が異なる場合があります。たとえば、投稿では、ユーザーが変数（スライダー、チェックボックス、テキスト入力フィールド）を変更し、結果をプロットまたは一覧表示できる場合があります。

JavaScriptの観点から始める：

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

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

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);'/>

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

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

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

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

Wordpressコードエディターでは、通常、投稿の最後にスクリプトを指定します。たとえば、メインディレクトリにscriptsフォルダがあります。内部には、私の投稿の一部が共有する可能性のある共通の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>

jQueryをエンキューする

Wordpressは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');
}

score 3 · Accepted Answer

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

score 2 · Accepted Answer

「私たちはグーグルを持っている」引用。WordPress内でスクリプトを適切に使用するには、ホストされているライブラリを追加するだけです。グーグルのように

カスタムスクリプトの前にリンクする必要があるライブラリを選択した後：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>

score 2 · Accepted Answer

wp_enqueue_scriptを使用せずにfunctions.phpファイル内（テーマ/子テーマ上）にスクリプトを追加する最も簡単な方法は次のとおりです。

// CREATE WORDPRESS ACTION ON FOOTER
add_action('wp_footer', 'customJsScript');

function customJsScript() {
  echo '
  <script>
  // YOUR JS SCRIPT
  jQuery(function(){
    console.log("test");
  });
  </script>
  ';
}

ご覧のとおり、wp_footerアクションを使用してコードを挿入します。

これを頻繁に使用する場合や、他のプラグインなどと「話す」必要がある場合は、これは適切な方法ではない可能性があります。ただし、これが最速の方法です。

WordPress全体に挿入されるコードの場合は、javascriptコードをheader.phpまたはfooter.php内に直接配置することもできます。

score 1 · Accepted Answer

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

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

WordPressプラグインでjQueryとCSSを簡単に実装できることを理解するのに役立つ投稿を見てください。

score 1 · Accepted Answer

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

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

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

score 1 · Accepted Answer

スクリプトを別のファイルに書き込むことができます。スクリプト名が。であるとすると、このようにファイルをキューに入れます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ファイルパスを置くべきです。

score 1 · Accepted Answer

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' );

score 0 · Accepted Answer

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

score 0 · Accepted Answer

私はここで他のすべての答えにいくつかの深刻な問題を抱えていたので、より最新の解決策を望んでいる人のためにここに私の追加があります。

ショートコードを使用しているため、これはOPが要求したものとは正確には一致しませんが、これが機能させる唯一の方法であり、ページにショートコードが含まれている場合にのみ機能を持つという追加の利点があります。これは機能も使用しませwp_enqueue_script()んadd_action()。

私はCodeSnippetsプラグインを使用しています。これは、functions.phpをいじったり、新しい.jsファイルを作成したりする必要がないことを意味します。

ショートコードでは、jQuery関数を次のようにエコーします。

echo '<script type="text/javascript">
    jQuery(document).ready(function($) {

        //your jQuery code goes here.
        
    });

    </script>';

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

19 に答える 19

Related

Reference