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

この記事のURLとタイトルをコピーする

「ブラウザにお知らせを表示して自動的に消えるトーストを作る 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を読み込みます。

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

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

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

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

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

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

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

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

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

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

こんな風に書けば、

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

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

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

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

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

[Amazon sponsored link] javascript css 関連本

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この記事のURLとタイトルをコピーする
スポンサーリンク
スポンサー広告

コメント

  1. マエヒロ より:

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

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

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

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

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

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

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

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

トップへ戻る

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

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

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

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