電話番号リンクをスマホで有効・PCで無効にする方法

作成するホームページに電話番号リンクを設置することもあります。普通に設置したHTMLのリンクはPCでもクリックできてしまいます。PCではクリックされる必要はないので、電話番号リンクをスマホで有効・PCで無効にする方法を紹介します。

電話番号リンクはPCでもクリックできる

次のようなHTMLを使うと、タップして電話できる電話番号リンク（いわゆるClick to Call）を作成することができます。

<a href="tel:0399999999">03-9999-9999</a>

表示結果は次のようになります。

リンクの目的はスマホやタブレットのモバイル端末でタップしたときに電話できるようにすることですが、実際はPCでもリンクをクリックできてしまいます。

PCで電話番号リンクを無効にするには、CSSを使う方法とPHPを使う方法があります。それぞれを紹介します。

CSSを使う方法（端末の幅で切り替え）

次のCSSを子テーマのstyle.cssなどに入力すれば、スマホ以外では電話番号リンクが無効になります。

/* PCで電話番号リンクを無効に */
@media (min-width: 751px) {
    a[href*="tel:"] {
        pointer-events: none;
        cursor: default;
        text-decoration: none;
    }
}

正確には「スマホ以外」ではなく、端末の幅で判断しています。幅が751px以上の端末では、電話番号リンクが機能せず表示されるだけになります。サンプルなので幅のサイズは必要に応じて修正してください。

スマホ（幅が750px以下の場合）では電話番号リンクのままです。

PHPを使う方法（端末の種類で切り替え）

幅で制御するのではなくPCとそれ以外（PC／モバイル端末）で切り替える場合は次のコードを子テーマのfunctions.phpに記述する方法があります。

function my_wp_head_tel_link(){ 
if(!wp_is_mobile()): ?>
<style type="text/css">
/* PCで電話番号リンクを無効に */
a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
}
</style>
<?php endif;
}
add_action('wp_head', 'my_wp_head_tel_link');

この方法ではwp_is_mobile関数で端末を判定（PCまたはモバイル端末）しています。PCの場合のみ電話番号リンクを無効にするCSSを差し込む仕組みです。

前述のCSSのように端末幅で切り替える方法ではないのでメディアクエリ（@media）は記述されていません。

これにより、PCからアクセスされた場合は電話番号リンクが無効になります。

PC以外の端末（スマホ／タブレット）の場合は従来通り電話番号リンクが機能します。