Webページの右下に「お問い合わせ」というボタンを縦表示させる方法

たとえばこのブログを読んでいて、自分でやるのは不安なので有償で頼んでみたいと思うお客さん(がいるといいんですが!)がいたときに、すぐに聞けるようにお問い合わせのボタンが常に表示されているようにしてみたいなと思いました。
そこでページの右下に「お問い合わせ」というボタンを縦表示できるようにしてみました。その方法について書きます。

今回作った「お問い合わせ」という縦表示のボタン

今回作った「お問い合わせ」という縦表示のボタンは、

こんなかんじのものです。

 をクリックすると閉じます。

お問い合わせ をクリックすると、

指定しておいたお問い合わせページが別タブで表示されました。

というか、既にこのWebサイトに入っていますので(^_^;、見ていただいたりクリックしていただけたらと思います!

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

この「お問い合わせ」ボタンを表示するには、以前

Webサイトを見ているときに右下のあたりに ポッ と四角いエリアが浮き上がってきてメッセージが表示されて、クリックしたり数秒経つと消えているようなものを時々みかけます。 この四
「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。 今回はblo

の2つのブログ記事で書いた トースト という表示方法をアレンジして実現しました。

この方法は toastr というライブラリを使っています。

以前のブログ記事で書いたものですが、少し時間がたつと変わっているところもあるかもしれませんので改めてインストールするところからやってみます。

下記のWebサイトに行き、

http://codeseven.github.io/toastr/

zip file というボタンをクリック

CodeSeven-toastr-2.1.3-3-gc85e612.zip というzipファイル(数字の部分などはバージョンによって変わります)がダウンロードできるので、

右クリックして すべて展開(解凍) します。

zipファイル名と同じフォルダができます。このフォルダを開くとさらに

CodeSeven-toastr-c85e612 というフォルダ(数字部分はバージョンによって異なります)がありますので、このフォルダ名

toastr に変えておきます。

このtoastrフォルダ使っている子テーマの直下に移動します。

子テーマのfunctions.phpでtoastrのjsとcssを読み込み、消えないように指定する

子テーマのfunctions.phpに「お問い合わせ」という縦表示のボタンを表示するJavaScriptのファイルを作ります。ソースは、

こうしました。positionClasstoast-bottom-right にして右下に表示させます。また、timeOutとextendedTimeOutを0にして、自動的に消えないようにします。

toastr.info という部分では表示させる お問い合わせ という文字を指定し、onclickのところで、クリックしたときに表示したいページのURLを指定しました。

このファイルを使っている子テーマのjsフォルダ(無ければ作成する)の下に toastr.js という名前をつけて保存します。日本語が入っているので保存するときの文字コードはutf-8にしておきます。

次に、toastrライブラリのjsと今作成したjstoastrライブラリのCSSを読み込む指定をします。

子テーマのfunctions.php
 

このコードを追加します。
* コードを追加して実行したときに一部環境でエラーが出る場合があることが分かりました。その場合は wp_ で始まる3行の頭のスペースを削除、して保存するとエラーがなくなります。原因がよく分かっていないのですがコピーしてペーストしたときに半角のスペースがなにか違うコードになる環境があるようです。削除した後に見た目的に4個のスペースを入れて保存してもエラーは解消されます。

この状態で表示すると

このように toastr の標準的な表示方法である横表示になって表示されます。

CSSを指定して、縦表示に変更する

toastrで指定されているCSSを変更することで縦表示にします。

子テーマの style.css

 

このコードを追加します。

再表示すると、

縦表示されるようになりました。右下の空を大きく取った( bottom: 60px;)のは、このWebサイトは下にスクロールさせると、



上に戻るボタン
が表示されて、重なってしまうからでちょっとだけ重ならない部分を作るために大きめに空をとりました。

兎本美佳

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

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

261人の購読者に加わりましょう

トップへ戻る