ジェイクールの更新テクニック

【WordPress】javascriptでメールフォームのスパム対策と、個別記事へのjavascript追記に便利なプラグイン

メールフォームを設置すると必ず付き纏う問題が”スパム”です。

WordPressにはスパム対策の非常に優秀なプラグインがいくつも存在しますが、条件によってはそれらが上手くハマらない場合もあります。

今回、諸般の事情でスパム対策プラグインを使用せずにメールフォームに何らかの対策を施す必要があり、採用した手法が「javascriptで送信ボタンを表示させ、javascriptをOFFにしている場合の送信を阻止する」というものです。
古くからある手法ですが、抜本的でもある為特定のスパムには有効なのではないかと考えました。
ひとまずこれで様子を見て、解消されなければ別の対策を考えます。
正解の無い問題にはひたすらトライアル&エラー。

【記述について】

javascriptで表示させるだけであれば、単に「document.write」記述で表示させれば良いだけの話ですが、メールフォームを設置しているのはWordPressの固定ページ。
該当の箇所にjavascriptを直接記述出来ません。

そのため、javascriptコードはhead内などページテンプレート以外に記述する必要があり、どのような書き方が良いか考えた結果、

「innerHTML」を「getElementById」と共に用いて、付与したIDにソースを追記させる方法を採用しました。

head内に

<script type="text/javascript">
<!--
window.onload = function onLoad() {
            target = document.getElementById("output");
            target.innerHTML = "ここにボタンのソースを書く";}
// -->
</script>

の様なコードを書き、

ボタンを置く部分に

<div id="output"></div>

の様なコードを書きます。

※出力が変になるときは、javascript内のソース記述で「”」を「’」にする

これで、固定ページ内にもjavascriptでボタンを表示させることが出来ます。

【javascript追加に便利なプラグイン】
1ページしか使わないjavascriptを共通のヘッダーに書くのはちょっと…という場合便利なプラグインが「Custom CSS and JavaScript」です。

■簡単な導入手順

インストール&有効後、投稿や固定ページ編集画面でカスタムフィールドでjavascriptやCSSが追記出来ます。

①投稿や固定ページ編集画面右上、「表示オプション」で「カスタムフィールド」をチェック。

②記事編集領域の下に表示される「カスタムフィールド」に新規追加。
フィールド名に「custom_js_code」、
値には

<script type="text/javascript">
<!--

// --></script>

を除いた、javascriptの本体記述のみ

③これで、その投稿/固定ページのhead内に直接記述がされます。

※プラグイン導入、カスタマイズは自己責任でお願い致します。