WPの投稿画面で フィールド項目を操作する。


スポンサーリンク

WP の投稿画面でフィールド内容を操作したくなる時ってありますよね?

例えば、メール送信フォームでエラーチェック以外に集計するとか。

買い物かごもどきですね。

買い物かごでは対応できないけど、メールの注文はうけつけたい。

でも、そこでお買い物合計を集計してその場で表示させたい。

とか、

wwwで見積もりしたいとか。

その中でも OnClick とかを使えない場面です。

HTMLのソースではこんな感じ。(どこまでも説明のためのソースなのでポイントとなる部分だけ)

<form method="post" action="" enctype="multipart/form-data">
<input type="text" name="input1" id="input1" size="60" value="" /><br />
<input type="text" name="input2" id="input2" size="60" value="" /><br />
<input type="text" name="total" id="total" size="60" value="" /></p>
<input type="submit" value="送信">
</form>


入力された2つの値を合計して total に入れるって簡単なやつ。

この場合、こんな感じで Jquery を使います。


入力フィールドのフックの方法です。

<script type="text/javascript">
// input1 のフック
jQuery('#input1').change(function() {
calc();
});
// input2 のフック
jQuery('#input2').change(function() {
calc();
});
// input1 + input2 = total の計算
function calc(fld)
{
var input1H = document.getElementById("input1");
var input2H = document.getElementById("input2");
var totalH = document.getElementById("total");
var total=0;
if( isFinite( input1H.value )==true && input1H.value){ //数字かゴミかの判定
total+=parseInt(input1H.value,10); //数字変換して加算
}
if( isFinite( input2H.value )==true && input2H.value){ //数字かゴミかの判定
total+=parseInt(input2H.value,10); //数字変換して加算
}
totalH.value = total; //結果を代入
}
</script>



投稿で直接 javascript を書き込む


ワードプレスの場合、ほとんどの場合 Jquery を取り込んであるので、

いきなり投稿ページに直接 JavaScript を書き込んでもOKですが

WPのテキストエディタを使っているとビジュアルモードに切り替わってくれちゃいます。

さらにエディタモードを切っていても勝手にソースをいじることがあるので、そこんところは注意しないといけないけど、

面倒なら、計算部分の JavaScript をファイルにして読み込ませるという手もありますね。


その場合は、javascript を取り込むタグを埋め込んじゃいましょう。

こんな感じです。
 ↓
<script type="text/javascript" src="ファイル"></script>


javascript ファイルは、ワードプレスのテーマのディレクトリに入れておくと便利です。

calc.js という名前で保存した場合、
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/myjavascript/calc.js"></script>


で、これを投稿記事の下の方にでも貼っておく。

それでも script の前の < が化ける場合は、 header.php に直接書き込むのもあり。

その場合は、こう書きます。
※テーマフォルダーの中に myjavascript というフォルダーを作っていれたと仮定します。

global $post;
if( $post->ID==<ターゲットのページの postID> ){
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/myjavascript/calc.js"></script>
}

これを header.php の下の方、/head の前辺りに張っておきます。


スポンサーリンク