電話番号のリンクをスマホのみ有効にする

PC閲覧時に“電話をかけますか?”みたいなメッセージが表示されても、煩わしさを感じることもありますので、aタグにtel:を使用してる際は設定しておいた方がいいでしょう。

設定手順

function.phpにコードを記述

function my_wp_head_tel_link(){
if(!wp_is_mobile()): ?>
<style type="text/css">
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
</style>
<?php endif;
}
add_action('wp_head', 'my_wp_head_tel_link');

上記コードをfunction.phpに記述すれば、スマホに画面が表示された時にのみ、電話発信が有効になります。PCで表示の際は、cssが効いて電話発信のリンクは無効となります。

※注意点
コードに記述した“wp_is_mobile()”はタブレット端末もスマホだと判断されてしまうため、その点は憂慮するところかと思います。

それが嫌だという場合、function.phpへの記述ではなくcssファイルへの記述で対応してください。

@media (min-width: 550px) {
 a[href*="tel:"] {
  pointer-events: none;
  cursor: default;
  text-decoration: none;
 }
}

@media (min-width: 550px)で、スマホ以上のサイズには電話発信のリンクは無効となります。min-width部分は各人で適宜、対応してください。

SATOWEBではホームページの新規制作、リニューアル、業務委託等、受付中です。
お問い合わせはこちらから受け付けていますので、お気軽にご相談ください。