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

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

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

この記事をSNSで共有する
スポンサーリンク
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・ログインできない・サーバー移転 ... )
マンツーマンなので相談内容は自由です。いただいた課題を迅速に解決、CSSやPHPの修正にも対応します。気軽にご相談ください。
現在までの対応件数:1806件
WordPress講座の問い合わせ先
wordpress講座受講予約

関連記事

スポンサーリンク