1. ホーム
  2. jquery

[解決済み] WordPressに簡単なjQueryスクリプトを追加するには?

2022-07-04 17:56:30

質問

WordPress で jQuery を使用することについて、Codex やいくつかのブログ記事を読みましたが、非常にもどかしいです。私は、jQueryを functions.php ファイルでのjQueryの読み込みまではできましたが、そこにあるすべてのガイドは、あなたがすでにWordPressの経験を持っていることを前提としているので、くだらないものばかりです。例えば、今私がjQueryを functions.php ファイルを通して jQuery を読み込むので、あとは jQuery を読み込むだけです。

具体的にどうすればいいのでしょうか?具体的には、どのファイルにコードを追加すればよいのでしょうか?WordPress の単一ページに対して、具体的にどのようにコードを追加すればよいのでしょうか。

どのように解決するのですか?

チュートリアルのことはよくわかります。私がやっている方法を紹介します。

まず、スクリプトを書く必要があります。テーマフォルダ内に「js」のような名前のフォルダを作成します。そのフォルダの中にjavascript用のファイルを作成します。例:your-script.js。そのファイルに、あなたのjQueryスクリプトを追加します。 <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() 関数を使用して、スクリプトを追加しながら、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 .