wordpress カスタムフィールド内のjavascriptの記述の仕方

Question

wordpressの個別投稿ページにページごとにcssやjavascript(jQuery)を指定したいです。
プラグインの「Custom CSS and JavaScript」をインストールし、カスタムフィールドは表示出来ているのですが、
初歩的で申し訳ないのですがその中でのjavascriptの書き方が分かりません。

CSSの場合は名前に「custom_css_code」と入力し
値の部分にCSSを記述で動いているのですが、
javascriptの場合は名前に「custom_js_code」を入力した後、
値の部分をどのように記述したら良いのでしょうか？

記述したいコードは以下になります。

<script>
$(function() {
    var bgColor = '';
    var bgDesign = '';
    var deColor = '';

    $('table#cndTbl td').on('click', function () {
        $('#rsultBox').removeClass();

        if ($(this).hasClass('bgColor')) {
            bgColor = $(this).text();
            $('#resBgColor').text(bgColor);
        } else if ($(this).hasClass('bgDesign')) {
            bgDesign = $(this).text();
            $('#resBgDesign').text(bgDesign);
        } else if ($(this).hasClass('deColor')) {
            deColor = $(this).text();
            $('#resDeColor').text(deColor);
        }
    });
});
</script>

$(function() { ～　以下をコピペしてもjavasctiptは動作しませんでした。
上記のコードはテキストベースのサイトでは正常に動いているコードです。

jQueryですが、wordpressのheader内に読み込ませてあります。
phpファイルに記述しているjavascript(jQuery)は動いておりますので
あくまでもカスタムフィールド内の記述方法についてご教授お願いいたします。

Answer 1

$(function() { ～　以下をコピペしてもjavasctiptは動作しませんでした。

エラーが出ていないか確認すれば原因が分かると思います。

推測ですが$を全てjQueryに変更すれば動くのではないでしょうか。

確認した時点で解決されてますが書いておきます。

<script>
jQuery(function() {
    var bgColor = '';
    var bgDesign = '';
    var deColor = '';
    jQuery('table#cndTbl td').on('click', function () {
        jQuery('#rsultBox').removeClass();
        if (jQuery(this).hasClass('bgColor')) {
            bgColor = jQuery(this).text();
            jQuery('#resBgColor').text(bgColor);
        } else if (jQuery(this).hasClass('bgDesign')) {
            bgDesign = jQuery(this).text();
            jQuery('#resBgDesign').text(bgDesign);
        } else if (jQuery(this).hasClass('deColor')) {
            deColor = jQuery(this).text();
            jQuery('#resDeColor').text(deColor);
        }
    });
});
</script>

ビジュアルエディターを使う場合、空行が余計なんでしょう。

Comments

[uzr1709]

調べていてカスタムフィールドではなく、投稿欄にscriptを書いても動作するとあったので投稿欄に直接記述したのですが、
コードの途中に</p>タグが入ってしまいエラーになっていました。

$をjQueryに変更というのは「jQuery(function ~」「jQuery('table#cndTbl td') ~」という事でしょうか？

[uzr1709]

全ての「$」を「jQuery」に変更し、カスタムフィールドに記述したら正常に動作しました。
ありがとうございます。勉強になりました。

[uzr1709]

やりたくない方法ですが、改行をなくし全て繋げれば余計なhtmlタグは入らないという事でしょうか。
いずれ試してみようと思います。
アドバイスありがとうございました。

[退会済みユーザー]

『空行』と書いてます。『改行』ではありません。

var deColor = '';の下
$('#rsultBox').removeClass();の下

だから空行を消してコードを書きました。

[uzr1709]

失礼致しました。
投稿欄内で試す時には空行に気をつけます。