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

2021年5月1日 2021年5月1日 10分25秒

YOSHITAKA

こんにちは。YOSHITAKA（@YOSHITA19704216）です。

初心者

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

よしたか

学んだことをアウトプットしていきます。

この記事を読むことで

WordPressでJavascriptライブラリのスイートアラート（SweetAlert）を実装できます。

Contents

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>

ボタンなしアラート。

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

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

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