wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

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

      2020/07/15

こんにちは、管理人@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プラグイン情報, サイトのモバイル対応
【タグ】 -

  関連記事

All In One SEO Packの管理画面タイトル・概要カラムって消せる?→manage_edit-post_columnsフックで消せます

今回は、利用者の多いWordPressプラグイン『All In ...

【WPプラグイン無しでサイト構築&表示を速く】Really Simple SSLって無効化して大丈夫?→設定しとけば大丈夫、ただし混在に注意

今回は『プラグイン干渉リスク低減や動作スピードアップ』のために、 ...

【WPプラグイン】WordPress5.0以降のブロックエディタ使いたくない場合→Classic Editorプラグインで旧エディタに戻して記事を書こう

今回は、WordPress5.0から搭載された記事のエディタがし ...

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

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

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

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

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

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

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

今回は、wordpressで溜まりすぎるとデータベースを圧迫する ...