WordPressでJavascriptライブラリのスイートアラート(SweetAlert)を実装してみました。

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
WordPressでアラート機能を綺麗に作ることはできますか?

よしたか
学んだことをアウトプットしていきます。
この記事を読むことで
  • WordPressでJavascriptライブラリのスイートアラート(SweetAlert)を実装できます。

WordPressでJavascriptライブラリのスイートアラート(SweetAlert)を実装する手順

CDNを利用して設定しています。

大前提
  • テキストモードで操作することがメインになります。

以下の内容をテキストモードで挿入しましょう。

アラートに参考にさせていただいたサイトはこちらになります。

 

<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>

基本のアラートボタンの実装

基本のアラートボタンの実装

クリックしてみてください。

次のコードで書いています。

※整形してないので気になる人は直して使ってください。

※※ビジュアルモードで編集すると<p>タグが入るのですが、機能することを確認しています。

<input type="button" id="alert-demo" value="アラートボタン" />
<p><script>
document.getElementById("alert-demo").onclick = function(){
    swal('アラートが実行されました!');
};
</script></p>

アラートを表示するかしないかを選択して表示するボタン

次はアラートを表示する方法で書いています。

クリックしてみてください。

次のコードで書いています。

※整形してないので気になる人は直して使ってください。
※※ビジュアルモードで編集すると<p>タグが入るのですが、機能することを確認しています。

<p><input type="button" id="confirm-demo" value="確認アラートボタン" /></p>
<p><script>
document.getElementById("confirm-demo").onclick = function(){
    var options = {
        text: '確認ウインドウです。\nアラートを表示しますか?', //\nでテキストの改行が出来ます
        buttons: {
            cancel: 'キャンセル',
            ok: '表示する'
        }
    };
    swal(options).then(function(value){
        if(value){
            //表示するを選んだ場合の処理
            swal('アラートを表示!');
        }
    });
};
</script></p>

ボタンなしアラート。

ボタンなしアラート。自動で3秒後にアラートが消える設定

次のコードで書いています。

※整形してないので気になる人は直して使ってください。
※※ビジュアルモードで編集すると<p>タグが入るのですが、機能することを確認しています。

<p><input type="button" id="confirm-demo2" value="確認アラートボタン2" /></p>
<p><script>
document.getElementById("confirm-demo2").onclick = function(){
    var options = {
    title: "タイトルが入ります",
    text: "3秒後にアラートが自動的に閉じます",
    icon: "success",
    timer: 3000,
    buttons: false,
    };
    swal(options)
};
</script></p>

ボタンあり。OK、NO選択度に自動でアラートが消える設定

クリックしてみてください。

次のコードで書いています。

※整形してないので気になる人は直して使ってください。
※※ビジュアルモードで編集すると<p>タグが入るのですが、機能することを確認しています。

<p><input type="button" id="confirm-demo3" value="確認アラートボタン3" /></p>
<p><script>
document.getElementById("confirm-demo3").onclick = function(){
    var options = {
  title: "ボタンを押した時の処理のテスト",
  icon: "info",
  buttons: {
    cancel: "Cancel", // キャンセルボタン
    ok: true
  }
};
    swal(options).then(function(val){
        if(val) {
            swal("OKボタンが押されました");
        } else {
            swal({
              text: "キャンセルされました。2.5秒後に消えます",
              icon: "warning",
              buttons: false,
              timer: 2500
            });
          }
    });
};
</script></p>

まとめ

今回はWordPressにJavaScriptライブラリのスイートアラートを導入する方法についてお伝えしました。

※プログラミングは習得中ですので、参考程度に記事を読んでください。

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事