スマホの時、「今すぐ電話する」ボタンを表示、タップで電話する機能を追加する

この記事は約6分で読めます。

毎月一度行っているWordPressもくもく会ではWordPressやWebサイト制作に関する四方山話をするのが楽しいです。先週行ったもくもく会では「スマホ表示の時に今すぐ電話するボタンが表示できるといいのだけどなぁ」という要望を聞きました。
確かに、スマホの時はそういうボタンを表示したいサイトもあると思います。ちょっと前に作ったお問合せボタンと同じようにtoastrでできるのでは?と思ったのでタップで電話する機能を追加してみました。

スポンサーリンク

タップしたら電話するボタンを表示する

ちょっと前に書いたblog

[ryus_blogcard url=”https://usortblog.com/scroll-sticky-sitsumon/”]
[ryus_blogcard url=”https://usortblog.com/scroll-sticky-sitsumon-modify/”]

この2つの記事ではボタンをクリックするとお問合せページに飛ばす、ということをしました。ここで使っているjsのライブラリ toastr を使えば 電話するボタン も簡単に表示できそうなのでちょっと試してみました。

toastrを使うには、

toastrライブラリを使って「お問い合わせ」というボタンを表示する

この部分だけを読んで、toastrライブラリを準備してください。

タップしたら電話するボタンを表示するには、

  jQuery(document).ready(function() {
    toastr.options = {
      "closeButton": false,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-bottom-full-width",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "0",
      "extendedTimeOut": "0",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }
    Command: toastr["info"]("<a href='tel:080-9999-9999'><div style='width:100%'>今すぐ電話する</div></a>", "");
  });

このソースを toastr_tel.js という名前で、使っている 子テーマのjs というフォルダに(無ければフォルダを作る)保存します。ここで、かけてほしい電話番号電話するボタンに表示したい文字を指定します。divwidth:100% としているのはボタンのどこを押しても電話をする動作をさせるためです。これをいれないと文字の部分をクリックしたときしか電話をかけてくれません。

次に子テーマの functions.php

// toastr_tel.jsとCSSを読み込む
function my_scripts_toastr() {
        wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
        wp_enqueue_script( 'toast', get_bloginfo('stylesheet_directory') . '/js/toastr_tel.js', array(), false, true );
}
    add_action( 'wp_enqueue_scripts', 'my_scripts_toastr' );
function my_styles_toastr() {
    wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles_toastr' );

このソースを追加します。これはtoastrライブラリのjsとCSS、先ほど作ったtoastr_tel.jsを読み込む設定です。

スマホで「今すぐ電話する」ボタンの表示とタップしたら電話するかを確かめる

これで準備ができましたので、スマホで「今すぐ電話する」ボタンの表示タップしたら電話するかを確かめてみます。

この指定をしたWebサイトをスマホで見てみると、

こんな感じに、 今すぐ電話する ボタンが表示されています。

タップすると、

すぐに電話をかけることができるようになっています。

ボタンの色を変えたり、スマートフォンの時だけ表示するようにしてみる

たまたまですが、テスト用に使ったWebサイトの色とボタンの色が同じような色でちょっと目立たないので、ボタンの色を変えてみました。

使っている子テーマの style.css

/* toast カスタマイズ */
.toast-info {
    background-color:#ff6347;
}

を追加しました。これで再表示すると、

こんな感じに、ボタンの色が変わってだいぶわかりやすくなりました。

あと、PCのときはこのボタンを表示したくないので、

/* スマホのときだけ表示 */
#toast-container  {
    display:none;
}
@media (max-width: 767px) {
    #toast-container  {
        display:block;
    }
}

をいれました。これでPCでブラウザの幅が広いとき

ボタンが表示されなくなりました。PCでもブラウザの幅を縮めれば、

こんな感じにボタンが表示されます。

厳しくスマートフォンかどうかを判断するにはユーザーエージェントを使って判断する方法がありますが電話番号を表示するかどうか、だけでしたらCSSで幅を判定する程度でいいかなと思います。

まとめ:なんでもtoastrでやってみました

たまたま使ったtoastrというライブラリのデザインがいい感じだったので本来はトーストを表示するためのtoastrなのですが

参照
[ryus_blogcard url=”https://usortblog.com/toast-toastr-wordpress/”]

お問合せボタンを表示したり、今回のように「今すぐ電話する」ボタンを表示したりしてみました。

実際にはCSSとJQueryを使って自作してもたいした手間ではないような気がしてきたので、もし同じようなことがあったらtoastrのライブラリ無しで作ってみようかな~と思っています(^^)/

兎本美佳

ブログを見た人がそのままできたらいいなと思って、できるだけ丁寧に書いています。blogに書いたようなネタの有償対応のご相談は「ゆうそうと」へいただければと思います(^^)/
無償での対応をご希望の場合は、コメントをいただけましたら可能な場合はコメントを返させていただきます。

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress theme テーマ インターネット javascript JQuery
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

  1. goodmount92 より:

    はじめまして。
    ワードプレスで仕事用のホームページを作成しているものです。

    PCではヘッダーに問い合わせ先を表示しているのですが、スマホ表示だと消えてしまうので、電話番号を表示できないかと思案していてこのページにたどり着きました。
    設置は出来たんですが、縦表示に出来なくて困ってます。
    電話をかけるボタンがtopに戻るボタンと完全に重なってしまっているので何とかしたいのですが。
    お問合せボタンを作るページでの縦表示は出来てました。
    助言を頂けると助かります。

    • 兎本美佳兎本美佳 より:

      おはようございます、goodmount92さん。コメントいただいたページについての詳しい情報がないとちょっとわからないのですが
      戻るボタンと電話をかけるボタンが重なってしまう場合はcssを修正すれば位置をずらすことができると思います。
      また、このブログの方法は結構ややこしいので、できればウィジェットで表示できる方法を探した方がいいかもしれません。

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。