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

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

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

スポンサーリンク

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

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

Toastr by CodeSeven

このサイトの、

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”]

兎本美佳

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

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

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

コメント

  1. マエヒロ より:

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

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

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

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

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

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

    • 兎本美佳兎本美佳 より:

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

トップへ戻る

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

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

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

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