Blog

HOME > Web > Wordpress > 【javascript】スマートフォンのみ電話番号のリンクを有効にする方法

【javascript】スマートフォンのみ電話番号のリンクを有効にする方法

2016/02/15

Wordpress javascript スマートフォン

備忘録です。

電話番号にリンクをつける場合、

<a href="tel:000-0000-0000">000-0000-0000</a>

ですが、
これですと、PCでもリンクがついてしまいます。

レスポンシブデザインでスマホのみリンクを有効にするためのjavascriptです。

//スマホ電話番号リンク
$(function() {
    if (!isPhone())
        return;

    $('span[data-action=call]').each(function() {
        var $ele = $(this);
        $ele.wrap('<a href="tel:' + $ele.data('tel') + '"></a>');
    });
});

function isPhone() {
    return (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('Android') > 0);
}

このjavascriptを使うことにより、デバイスでスマートフォンの場合のみ、
電話番号のリンクが有効になります。

しかし、競合するjQueryがあり、場合によっては使えないことがあります。
その場合、別の方法で対応することにしました。

参考サイト
レスポンシブのサイトでスマホの時だけtelリンクを有効にする

WordPressの場合には、head～/headまたは任意のファイルに貼り付け

function smtel(telno){
    if((navigator.userAgent.indexOf('iPhone') > 0 ) || navigator.userAgent.indexOf('Android') > 0 ){
        document.write('<a class="tel-link" href="tel:'+telno+'">'+telno+'</a>');
        }else{
        document.write('<span class="tel-link">'+telno+'</span>');
    }
}

【html】

<p>
お問い合わせ：<script type="text/javascript">smtel('00-0000-0000');</script>
</p>

この方法なら、jQuryの競合を気にしなくても大丈夫です。



カテゴリー

月間アーカイブ

«前の記事

一覧に戻る

次の記事»

最近の投稿

人気の記事

MORE

ミュージシャンズ・プラザ

神社仏閣ホームーページ制作

ホームページ制作問合せ