WPの投稿画面で フィールド項目を操作する。
WP の投稿画面でフィールド内容を操作したくなる時ってありますよね？
例えば、メール送信フォームでエラーチェック以外に集計するとか。
買い物かごもどきですね。
買い物かごでは対応できないけど、メールの注文はうけつけたい。
でも、そこでお買い物合計を集計してその場で表示させたい。
とか、
WEBで見積もりしたいとか。
その中でも OnClick とかを使えない場面です。
HTMLのソースではこんな感じ。（どこまでも説明のためのソースなのでポイントとなる部分だけ)
入力された２つの値を合計して total に入れるって簡単なやつ。
この場合、こんな感じで Jquery を使います。
入力フィールドのフックの方法です。
いきなり投稿ページに直接 JavaScript を書き込んでもOKですが
WPのテキストエディタを使っているとビジュアルモードに切り替わってくれちゃいます。
さらにエディタモードを切っていても勝手にソースをいじることがあるので、そこんところは注意しないといけないけど、
面倒なら、計算部分の JavaScript をファイルにして読み込ませるという手もありますね。
その場合は、javascript を取り込むタグを埋め込んじゃいましょう。
こんな感じです。
↓
javascript ファイルは、ワードプレスのテーマのディレクトリに入れておくと便利です。
calc.js という名前で保存した場合、
で、これを投稿記事の下の方にでも貼っておく。
それでも script の前の < が化ける場合は、 header.php に直接書き込むのもあり。
その場合は、こう書きます。
※テーマフォルダーの中に myjavascript というフォルダーを作っていれたと仮定します。
これを header.php の下の方、/head の前辺りに張っておきます。
例えば、メール送信フォームでエラーチェック以外に集計するとか。
買い物かごもどきですね。
買い物かごでは対応できないけど、メールの注文はうけつけたい。
でも、そこでお買い物合計を集計してその場で表示させたい。
とか、
WEBで見積もりしたいとか。
その中でも 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>
入力された２つの値を合計して 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 の前辺りに張っておきます。
スポンサーリンク