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

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

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

ちょっと前に書いたblog

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示

Webページの右下に「お問い合わせ」というボタンを縦表示させる方法 というブログ記事でページの右下に「お問い合わせ」という縦書きのボタンを追加しました。 実際に追加してから見て

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

toastrを使うには、

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

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

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

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

次に子テーマの functions.php

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

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

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

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

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

タップすると、

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

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

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

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

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

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

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

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

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

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

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

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

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

参照

「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。 今回はblo

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

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

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

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク
スポンサー広告
トップへ戻る