ブラウザにお知らせを表示して自動的に消えるトーストを作る 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.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 関連本
兎本美佳

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

シェアする

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

フォローする

スポンサーリンク
スポンサー広告
ブログをメールで購読

メールアドレスを記入して購読すれば、更新をメールで受信できます。

259人の購読者に加わりましょう

トップへ戻る