スクロールで追尾するボタン | コピペでWordPressカスタマイズ（備忘録）

手順

①toastrライブラリーをダウンロード

https://codeseven.github.io/toastr/

zip file をダウンロード

②展開してフォルダ名を toastr に変更

③FTPで子テーマの直下にアップロード

④子テーマのfunctios.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' );

⑤toaster.js アップロード

以下コードで toaster.js という名前のファイルを作成して、子テーマ \js\ にアップロード

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() {location.href="https://vcre8.jp/contact/"}}
   );
 });

リンクを別タブで表示する場合

上記の記述で以下の部分を変更

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

縦型にするCSS

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

@media(max-width:768px) {
	#toast-container {
		display:none;
	}
}

参考

コード取得デモページ

https://codeseven.github.io/toastr/demo.html