wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

【wpプラグイン】ワードプレスサイトに、スマホで電話機能をつけられる『Really Simple Click To Call』

      2018/05/01

こんにちは、管理人@SS_mshpです。

今回は、スマホで電話する機能を、ワードプレスサイトに実装できるプラグインを紹介します。

飲食店で料理の相談をしたり、スクールやコンサル系で詳しく教えてもらったりと、メールやlineを打つよりも、『電話したほうが早い』というケースは多くあります。さっそく実際に使ってみましょう。

■Really Simple Click To Callの設定方法


まずはプラグインの新規追加で検索フォームに『Really Simple Click To Call』といれます。この、スマホにボタンがついたような画像がでてくるので、インストール&有効化。有効化すると、メニューの設定部分に、このプラグインの欄が出てきます。


設定の画面はこんな感じ。『Enable Click to Call』にチェックをつけると、電話するボタンが表示されます。『Call Message』にはボタンに表示する文言を書き、『Call Number』で番号を指定。あとは色を決めれば完了と、非常にシンプルです。
CSSでも作れるんですが、下部fixしたり、z-indexで上に重ねたり、いろいろ大変です(笑)

■Really Simple Click To Callの、電話するボタンの表示のされ方

■pc版では表示されない


このサイトにつけてみたところ、PCビューでは表示されませんでした。というのも、メディアクエリで・・
@media (min-width: 737px) {
#click_to_call_bar {display: none;}
}
のように、737px以上になるとdisplay: none;になるように指定されているからです

■スマートフォンでアクセスすると、下部に電話するボタンが現れる


ユーザーエージェント判別ではなくメディアクエリ切り替えですが、スマートフォンでアクセスすると、このように下部に電話するボタンがでます。片手操作時に、親指でとどくギリギリ位置かなといった印象(管理人は片手スマホ操作ができません)。

■細かく調整したいときは、プラグインのCSSをエディットしよう


ワードプレスのプラグイン→プラグイン編集→右上の編集したいプラグイン選択で『Really Simple Click To Call』を選ぶ→CSSで、レイアウトなどを変更できます。文字をさらに大きくしたり、パディング多めに、などというときは使えそうです。

■あとがき・まとめ

通常のHTMLサイトに、電話するボタンをつけるとなると、細かいCSSの設定が必要になって大変ですが、ワードプレスなら『Really Simple Click To Call』を使うと簡単でした。CSSエディットをしなくても、簡単な設定ですぐボタンを実装できるので、かなり便利です。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - wordpressプラグイン(拡張)情報, サイトのモバイル対応 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【スマホ対応サイト】レスポンシブで、スマホからアクセスしたときに横にずれる・ディスプレイ領域の外にはみ出る現象を直したい

今回は、スマホ対応や管理をしやすくするためにレスポンシブにしたはいいけど …

【サイトスマホ対応】fc2ぶろぐで、スマホ表示時の検索タグって使えないの?回答→レスポンシブを使えばokです。

今回は、fc2ぶろぐの検索タグを、スマホ向けで使える簡単な方法を行ってみ …

【WPプラグイン】WordPressにサウンドクラウドみたいな波形表示つけたい→WaveSurfer-WPをどうぞ

今回は、以前すこしDJの練習をしていた管理人が、webサイト(wordp …

wordpressのリビジョンを、プラグインで制御する方法(revision control)【データベースを軽く】

今回は、wordpressで溜まりすぎるとデータベースを圧迫するリビジョ …

【スマホ対応・CSS】viewportにベンダープレフィックスがついてると、WordPressがエラー判定する件の対応

今回は、WordPress(4.9などの新しいバージョン)の管理画面で、 …

【WordPressとGoogleカレンダー連携プラグイン】Simple Calendarの設定・Calendar APIやID取得しての設定

今回は、WordPressサイトに、googleアカウントがある人ならみ …

【wordpressで教室・個別相談・サロン予約受付】プラグインEasy Appointmentsの設定・サイト実装方法を詳しく解説

今回は、特定の形態のビジネスで、『カレンダーつき予約フォームで、お客さん …

【wordpress限界高速化】Pjax技術を使ってサイトを高速表示するプラグインと、エラーの対処

今回は、『遅い』とされていた(過去形)wordpressサイトを『Pja …

【ワードプレスstingerスマホ最適化】記事一覧タイトル表示場所をPC/SPで切り替えて、スマホレイアウトで見やすくする

今回は、管理人のこのサイトを使って、『記事一覧のタイトル表示場所をPC/ …

【WPの仕組み】スマホとかに対応するレスポンシブ化(デバイスに応じてレイアウト変動)ってどうなってるの?

今回は、よくある疑問『wordpressのスマホ対応とかレスポンシブの仕 …

【PHPでwpプラグインを改造】all in one seoで、og:descriptionを書かなかったときに、文章が全部出力されてしまうのを直したい

今回は、ワードプレスでよくつかわれるプラグイン『all in one s …

【WPプラグイン・サイト高速化】EWWW Image Optimizerで、画像をサクッと圧縮して表示を速くしよう

今回は、サイトの高速化で、画像を圧縮してくれるものを試します 画像サイズ …