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

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

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

電話番号リンクのタグ

<a href="tel:0600000000">06-0000-0000</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以上の端末では、電話番号リンクが機能せず表示されるだけになります。サンプルなので幅のサイズは必要に応じて修正してください。

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ツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。
この方法では、wp_is_mobile関数で端末を判定(PCまたはモバイル端末)しています。PCの場合のみ電話番号リンクを無効にするCSSを差し込む仕組みです。

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

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

コメント


認証コード2298

コメントは管理者の承認後に表示されます。