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

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

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

ちょっと前に書いたblog

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

この２つの記事ではボタンをクリックするとお問合せページに飛ばす、ということをしました。ここで使っている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 というフォルダに（無ければフォルダを作る）保存します。ここで、かけてほしい電話番号と電話するボタンに表示したい文字を指定します。div で width: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のライブラリ無しで作ってみようかな～と思っています(^^)/