web-dev-qa-db-ja.com

個々のページにjQueryスクリプトを追加する方法

私は私の特定のページに追加したいこのコードを持っています。そのためのファイルを作成してからetcなどを含めたくありません（ただしそれが唯一の方法であるかどうかを教えてください）。また、すべてのページに含まれるため、ヘッダーに含めることは望ましくありません。コードは次のとおりです。

<script type="text/javascript">
$(function () {
    $('input[name=done]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#p-days').show();
        } else {
            $('#p-days').hide();
        }
    });
    $('input[name=already-b]:radio').click(function () {
        if ($(this).val() === "Yes") {
            $('#div-name').show();
        } else {
            $('#div-name').hide();
        }
    });
});
</script>

テキストを選択してエディタにこれを追加しました（ビジュアルモードではありません）。しかしそれは機能していません。私が悪いことをしているという考えはありますか？

ありがとう。

pagesjquery
4
ISnoculrucdees

@s_ha_dumは正しいですが _は_ jQueryを使用する必要がありますWordPress内で競合しない元の質問は未回答のままです。

私は私の特定のページに追加したいこのコードを持っています。

これを行うにはいくつかの方法があります。

テーマのfunctions.phpのページ名/スラッグワードプレスに基づく

このメソッドはWordPressフック wp_enqueue_scripts を使います

  1. スクリプト用の新しいjsファイルを作成しますmy-nifty-custom.js

  2. functions.phpに以下を追加してください。

    /* Enqueue scripts (and related stylesheets) */
    add_action( 'wp_enqueue_scripts', 'my_nifty_scripts' );
/**
 * Registers scripts for the theme and enqueue those used site wide.
 *
 * @since 0.1.0.
 */

function my_nifty_scripts() {
    wp_register_script('my-nifty-custom', get_stylesheet_directory_uri() . '/js/my-nifty-custom.js', false, null, true);
if(is_page('page-slug-here')){
    wp_enqueue_script('my-nifty-custom'); 
}}

子テーマを使用している場合、またはそれをもっとしたい場合は、全体を after_setup_theme で囲んでください。

add_action( 'after_setup_theme', 'nifty_theme_setup' );
function nifty_theme_setup() {
// script function and other functions that should happen after the initial theme setup
}

ボディクラスに基づく（DOMベースのルーティング）

これはもう少し複雑です。幸いにして、Paul Irishがここで素晴らしいブログを書きました： http://www.paulirish.com/2009/markup-based-unobtrusive-comprehensive-dom-ready-execution/

このメソッドを使用すると、Bodyクラスに基づいてページごとにカスタムJSが取得されます。例<body class="nifty">

それからあなたは使用するでしょう：

//clip 
 nifty : {
    init     : function(){ //custom script goes here }
  }
//clip

これに関する唯一の問題はページがあなたが呼んでいるボディクラスを持たなければならないということです。このためWordPressには body_class という関数があります

add_filter('body_class','nifty_class_names');
function nifty_class_names($classes) {
    if(is_page('page-slug-here')){
        $classes[] = 'nifty';
    }

    return $classes;
}

それで、あなたはどの方法を使うべきですか？

両方の組み合わせをお勧めします。 Paulの方法を使用するJavaScriptファイルを1つ作成します。それからwp_enqueue_scriptsを使ってそのメソッドを呼び出します。

Lazy header.phpメソッド

最後にISが常に怠惰な方法です（これはお勧めしませんが、参考のためだけに説明しています）。

あなたのheader.phpであなたができること：

 <?php if(is_page('page-slug-here')){
           echo ('<script type="text/javascript" src="'. get_stylesheet_directory_uri() . '/js/my-nifty-custom.js"> </script>'); 
        } ?>
5
Brooke.

WordPressは jQueryを "No Conflict" モードでロードします。 "$"エイリアスは機能しません。完全な "jQuery" - jQuery.$.ajax({...を使用するか、jQueryドキュメントの例のようにスクリプトをラップしてください。

(function($) { 
  $(function() {
    // more code using $ as alias to jQuery
  });
})(jQuery);

これについての情報は Codexにもあります 。

1
s_ha_dum