【WordPress編】ブラウザにお知らせを表示して自動的に消えるトーストを作る

「ブラウザにお知らせを表示して自動的に消えるトーストを作る HTML編」でブラウザにお知らせを表示するトーストの作り方(お料理みたいですが…)について書きました。
今回はblogでも使っているWordPressでトーストを表示する方法について書きます。

トーストを表示するためのtoastrライブラリーをダウンロードして子テーマに入れる

前回はCDNでリンクしましたが、今回はtoastrのファイルをダウンロードしてきて設置したいと思います。

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

このサイトの、

Download .zip file というボタンをクリックしてzipファイルをダウンロードします。

zipを解凍すると

このようなフォルダができますので

toastr　とフォルダ名を変えておきます

このフォルダを使っている子テーマの直下に置きます。今回は、twentyfourteen-mikaという子テーマに

こんな感じに置きました。

子テーマのfunctions.phpでtoastrのjsとcssを読み込む

子テーマのfunctios.phpでtoastrのjsとcssを読み込みます。

<?php
function my_scripts() {
    wp_enqueue_script( 'toastr_js', get_bloginfo('stylesheet_directory') . '/toastr/build/toastr.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

function my_styles() {
    wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

こんな感じのコードを書きます。これでWordPressサイトを見ると、ソースには

<link rel='stylesheet' id='toastr_css-css'  href='http://ryuswp/wp-content/themes/twentyfourteen-mika/toastr/build/toastr.min.css' type='text/css' media='all' />
<script type='text/javascript' src='http://ryuswp/wp-content/themes/twentyfourteen-mika/toastr/build/toastr.min.js?ver=4.3.1'></script>

このように指定したcssとjsが読み込まれているのが分かります。

前回、トーストを表示するしていた部分をjsファイルにします。

  jQuery(document).ready(function() {
    toastr.options.timeOut = 3000; // 3秒
toastr.options = {
  "closeButton": true,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-bottom-right",
  "preventDuplicates": false,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
}
Command: toastr["info"]("そろそろ今年も押し詰まりました。今日もはりきっていきましょう！", "こんにちは！");
    jQuery('#linkButton').click(function() {
       toastr.success('click');
    });
  });

前回は　$　で指定していた場所を　jQuery　としました。これはWordPressではデフォルトでは　$　を使うとエラーになってしまうためです。

このファイルを　toaster.js　という名前で子テーマの直下に置きました。このjsも読み込み指定したいので、先ほどのfunctions.phpを

<?php
function my_scripts() {
    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') . '/toast.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

function my_styles() {
    wp_enqueue_style( 'toastr_css', get_bloginfo( 'stylesheet_directory') . '/toastr/build/toastr.min.css', array(), null, 'all');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

このようにします。toast　というscriptを追加しました。

WordPressでtoastの表示を確認してみる

これでトップページを読み込みし直してみると、

こんな感じに、トーストが表示されました(^^)/

前回はClickMeという文字にIDを指定して表示させるようにしていた部分は、テキストタブで

こんな風に書けば、

クリックすると、こんな風に表示されます。なるほど…

すると、このblogでもちょっと秘密のメッセージに使えそうですね～

今年の年末年始休暇は　ちょっと私だけこんな感じ　になっています。

上のアンダーラインが引いてあるところをクリックしてみてくださいね♪

こんな風にこのtoastrライブラリーを使って工夫次第でいろいろできそうです(^^)/

[amazon_searchlink search=”javascript css”]