サイト制作中に注意がけているのがメールアドレスのテキストの表示のしかた。
スパムボットがサイト上のEメールアドレスと思わしき文字列を自動的に取得していくのでそれを阻止する方法をとらなければならないためです。

画像化して取り込めなくしちゃう方法

<img src='http://gti.jp/wp/wp-content/themes/original/image/ad.gif' />

メールアドレス

↑こんな感じですね。

しかし、これだけだとクリックしてメールする機能は奪われてしまいます。

ちょっと優しくないですよね。

なので、上記の画像にJavaScriptで文字列を難読化したものをリンクとして生成する方法っていうのが一般的に行われています。

<script type="text/javascript">
document.write('<a href="');
document.write('&#109;&#97;&#105;&#108;&#116;&#111;&#58;');
document.write('&#105;&#110;&#102;&#111;&#64;&#103;&#116;&#105;&#46;&#106;&#112;');
document.write('">');
document.write('&#105;&#110;&#102;');
document.write('&#111;&#64;&#103;&#116;&#105;&#46;&#106;&#112;');
document.write('</a>');
</script>


↑こんな感じになります。

変換表はこんな感じです。

[html]記号
&#45; → -(ハイフン)
&#46; → .(ドット)
&#64; → @(アットマーク)
&#95; → _(アンダースコア、下線)

数字
&#48; → 0
&#49; → 1
&#50; → 2
&#51; → 3
&#52; → 4
&#53; → 5
&#54; → 6
&#55; → 7
&#56; → 8
&#57; → 9

アルファベット
&#65; → A
&#66; → B
&#67; → C
&#68; → D
&#69; → E
&#70; → F
&#71; → G
&#72; → H
&#73; → I
&#74; → J
&#75; → K
&#76; → L
&#77; → M
&#78; → N
&#79; → O
&#80; → P
&#81; → Q
&#82; → R
&#83; → S
&#84; → T
&#85; → U
&#86; → V
&#87; → W
&#88; → X
&#89; → Y
&#90; → Z

&#97; → a
&#98; → b
&#99; → c
&#100; → d
&#101; → e
&#102; → f
&#103; → g
&#104; → h
&#105; → i
&#106; → j
&#107; → k
&#108; → l
&#109; → m
&#110; → n
&#111; → o
&#112; → p
&#113; → q
&#114; → r
&#115; → s
&#116; → t
&#117; → u
&#118; → v
&#119; → w
&#120; → x
&#121; → y
&#122; → z[/html]

これっていろいろ変換ツールがあるんですが、WordPressをご利用ならパパっとできちゃう方法が紹介されていました。

Secure Your Mail With WordPress Antispambot Function – WP Engineer.

上記の記事による順番は下記の通り。
テーマの中にある「functions.php」に下記コードを追加する

function wpe_secure_mail($atts) {
	extract(shortcode_atts(array(
		"mailto" => '',
		"txt" => ''
	), $atts));
	$mailto = antispambot($mailto);
	$txt = antispambot($txt);
	return '<a href="mailto:' . $mailto . '">' . $txt . '</a>';
}
if ( function_exists('add_shortcode') )
	add_shortcode('sm', 'wpe_secure_mail');

そして

WordPressの固定ページや記事上で

[sm mailto=”foo@bar.com” txt=”here is my mail”]
//or
[sm mailto=”foo@bar.com” txt=”foo@bar.com”]

と記述すると内部では下記のようなコードが生成されています。

<a href="mailto:&#105;&#110;&#102;o&#64;g&#116;&#105;.j&#112;">
&#105;&#110;&#102;o&#64;&#103;&#116;i.jp
</a>

オリジナルのテーマをご利用であればそのまま記述するだけですが、オリジナルでない場合は「子テーマ」を作ってそちらのfunctions.phpを改造するようにしたほうがいいかもしれません。

弊社(株式会社ジーティーアイ)の「特定商取引に関する法律に基づく表記」にてメールアドレス表記に使用しています。

この記事が気に入ったら
いいね ! しよう

Twitter で