当サイトには広告が含まれております

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

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

「ブラウザにお知らせを表示して自動的に消えるトーストを作る 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.phptoastrの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”]

この記事が気に入ったら
いいね または フォローしてね!

あなたのシェアが励みになります!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメント一覧 (2件)

  • ホームページ『ゆうそうとITブログ』
    兎本 様

    突然のご連絡失礼いたします、現在「WordPressを使いこなすためのサイト」というホームページを運営しております、マエヒロと申します。

    この度はこちらのページ『【WordPress編】ブラウザにお知らせを表示して自動的に消えるトーストを作る』を閲覧させて頂き、誠にありがとうございました。

    大変勉強になり自身でも試そうと思うのですが、もし自分で試してうまくいった際、出来ましたら手順とソースなどを自身のページに記載したいと思っております。
    もちろん引用元として貴ページを紹介し、画像や表現などはこちらで用意いたしますが、
    ソースコードはどうしても貴ページが掲載された内容が大部分となってしまいます。

    厚かましいお願いではございますが、許可頂けるかご検討いただきたく願います。

    何卒宜しくお願い致します。

    • マエヒロさま。お返事遅くなりました。ソースは私も参考にさせていただいている時もありますので、参考リンク程度を載せていただければ幸いです。お役に立てたようでしたら何よりです。

コメントを残す

記事をざっと見る