当サイトには広告が含まれております

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

この記事は最終更新日から8年経過しています。内容が古い可能性があります。

毎月一度行っている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のライブラリ無しで作ってみようかな~と思っています(^^)/

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

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

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

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

コメントを残す

記事をざっと見る