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


6 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. あなたのサイトをチェックして、それが動作することを確認してください!
Question

私はWordPressでjQueryを使うことについてのコーデックスといくつかのブログ記事を読んで、とてもイライラしています。 私はfunctions.phpファイルでjQueryをロードしていますが、すでにWordPressの経験が豊富であると仮定しているので、ガイドのすべてが駄目です。 たとえば、 functions.phpファイルを使ってjQueryをロードするようになったので、今ではjQueryをロードするだけです。

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







「GoogleにはGoogleがある」 ワードプレス内のスクリプトを正しく使用するためには、ホストされたライブラリを追加するだけです。 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>



テーマの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/http://www.codecanal.com/add-simple-jquery-script-wordpress/ : http://www.codecanal.com/add-simple-jquery-script-wordpress/




あなたは、WordPressのプラグインにスクリプトファイルを追加するために、WordPressの事前定義された関数を使用することができます。

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

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




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

WordPressがしばらく前からあったにもかかわらず、テーマとプラグインにスクリプトを追加する方法は何年も同じだったにもかかわらず、スクリプトをどれくらい追加することになっているかについては混乱が残っています。 だからそれをクリアしましょう。

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

jQueryの互換モード

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

これは、他のプロジェクトと同じようにドル記号を直接使用することができないということです。 WordPress用のjQueryを書くときは、代わりにjQueryを使う必要があります。 以下のコードを見て、私が何を意味するのか見てみましょう:




あなたのスクリプトを別のファイルに書き込むことができます。そして、あなたのスクリプト名が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ファイルのパスを入れる必要があります。




Related