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

WordPress個別サポート

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

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

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

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

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

電話番号リンク
電話番号リンクの表示結果

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

PCでもクリックできる電話番号リンク
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');
functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

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

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

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

電話番号リンクが機能しなくなる
電話番号リンクが機能しなくなる

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

スマホでは電話番号リンクのまま
スマホでは電話番号リンクのまま