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

2016年8月30日2019年4月12日

この記事は最終更新日から6年経過しています。内容が古い可能性があります。

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

記事をざっと見る

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

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

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

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

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

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

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

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

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

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

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

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

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

  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")}}
    );
  });

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

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

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

次に、toastrライブラリのjsと今作成したjs、toastrライブラリの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;
}

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

再表示すると、