WordPressで追従型縦表示「お問い合わせ」ボタンを作る方法

この記事は約6分で読めます。

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

スポンサーリンク

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

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

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

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

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

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

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

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

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

[ryus_blogcard url=”https://usortblog.com/toast-toastr/”]

[ryus_blogcard url=”https://usortblog.com/toast-toastr-wordpress/”]

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

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

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

下記のWebサイトに行き、

Toastr by CodeSeven

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のファイルを作ります。ソースは、

  jQuery(document).ready(function() {
    toastr.options = {
      "closeButton": true,
      "debug": false,
      "newestOnTop": false,
      "progressBar": false,
      "positionClass": "toast-bottom-right",
      "preventDuplicates": false,
      "onclick": null,
      "showDuration": "300",
      "hideDuration": "1000",
      "timeOut": "0",
      "extendedTimeOut": "0",
      "showEasing": "swing",
      "hideEasing": "linear",
      "showMethod": "fadeIn",
      "hideMethod": "fadeOut"
    }

    toastr.info('<br />お問い合わせ','', 
        {onclick: function() {window.open( "http://usort.jp/contact/", "_blank")}}
    );
  });

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

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

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

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

子テーマのfunctions.php
 

// toastr 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.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' );

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

この状態で表示すると

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

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

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

子テーマの style.css

 

/* toastrのinfoを縦表示させる */
#toast-container > div {
    width:70px;
    text-align:center;
    font-size: 16px;
}
#toast-container > .toast-info {
  background-image:none !important;
  padding: 15px 20px 15px 20px !important;
}
.toast-close-button {
  font-size: 30px;
}
.toast-bottom-right {
  right: 1px;
  bottom: 60px;
}

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

再表示すると、

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



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

兎本美佳

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

ゆうそうとITブログの更新通知が受け取れます!
スポンサー広告

WordPress 全般 インターネット javascript JQuery
スポンサーリンク
ゆうそうとITブログの更新通知が受け取れます!
ゆうそうとITブログ

コメント

トップへ戻る

ゆうそうとについての説明

ゆうそうと とは東京都八王子市を中心として、WordPressによるWEBサイトの作成や、スポットでのIT相談を行ったり、年間契約でのIT顧問をなりわいとして活動しています。

特徴としては30年以上IT業界でプログラムを中心として仕事をしてきたものと、美大出身のデザイナーがワンストップで対応するため、幅広い対応が可能であることです。

IT相談は直接お会いしてのご相談の他、ZOOMによるオンライン相談も可能です。