JavaScript ポップアップを作成する (feat. ChatGPT)

WordPressにはさまざまなポップアッププラグインがあるため、ポップアッププラグインを使用して簡単にポップアップを表示できます。 プラグインが提供する機能を使用して、ポップアップを表示するページ、頻度などを設定することも可能です。 シンプルなイメージポップアップからドラッグアンドドロップ方式で簡単にポップアップを作成できるプラグイン（」使いやすい WordPress ポップアッププラグインBrave Popup Builder「注）まで様々なプラグインがあります。

ティーストーリーブログ クパンバナーをテストとしてポップアップとして表示するように設定してみました。 記事の場合は、JavaScriptを使用してポップアップを作成できます。 ただし、表示するページなどは詳細に設定するには制約があります。

JavaScript ポップアップを作成する (feat. ChatGPT)

プログラミング言語に慣れていない場合は、Google で検索し、多くの検索結果の中から状況に合ったものを選択してテストする必要があります。

最近ChatGPTがホットです。 チャットGPTを活用すると、多くの検索結果の中から状況に適したものを選別して直接コードを作成します。 コードを確認して少し修正して活用できるほどかなりまともな結果を提示するようです。

※挿入した映像が非公開または削除され、他の映像と交換しました。 この記事を書いた後、有料版のChatGPT Plusがリリースされました。 私は チャットGPT有料プランに参加しました😄😄 不正確な回答も多いですが、よく活用すれば多様に利用できると思います。

参考として、OpenAIのChatGPTを使用して自動的に投稿することも可能です。

• WordPress OpenAI 自動投稿プラグイン GPT3 AI Content Writer & Generator

質問を英語にしますが、短い文章で明確に欲しい内容を提示すると、ChatGPTが知って理解して適切なコードを提示してくれるようです。

以下はChatGPTが提示するJavaScriptポップアップコードです。 ページが読み込まれると、5秒後にポップアップが表示され、Cookieの時間を指定して繰り返し表示しないように要求しました。

JavaScriptコード：

<script>
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  function showPopup() {
    var popup = document.getElementById("popup");
    popup.style.display = "block";
    setCookie("popupDisplayed", Date.now(), 3);
  }

  function checkPopupDisplay() {
    var lastDisplayed = getCookie("popupDisplayed");
    if (lastDisplayed) {
      var threeHours = 3 * 60 * 60 * 1000;
      if (Date.now() - lastDisplayed > threeHours) {
        setTimeout(showPopup, 5000);
      }
    } else {
      setTimeout(showPopup, 5000);
    }
  }
  checkPopupDisplay();
</script>

CSSコード：

#popup {
    position: fixed;
    bottom: 0;
    right: 0;
}

HTMLコードは提示されていないので、HTMLコードもお願いしますので、簡単なサンプルを教えてください。

<div id="popup" style="display: none;">
  <div class="popup-content">
    <div class="popup-header">
      <span class="close" onclick="document.getElementById('popup').style.display='none'">&times;</span>
      <h2>Popup Title</h2>
    </div>
    <div class="popup-body">
      <p>Popup content goes here.</p>
    </div>
  </div>
</div>

コードの中で気になる点があれば質問すると親切に説明してくれますね。 コードにコメントが必要な場合は、コメントをリクエストできます。

<script>
  // Function to set a cookie with a specified name, value and expiry date
  function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    // Set the expiration time in milliseconds (number of days * 24 hours/day * 60 minutes/hour * 60 seconds/minute * 1000 milliseconds/second)
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires="+d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
  }

  // Function to get the value of a cookie with a specified name
  function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) == ' ') {
        c = c.substring(1);
      }
      if (c.indexOf(name) == 0) {
        return c.substring(name.length, c.length);
      }
    }
    return "";
  }

  // Function to show the popup
  function showPopup() {
    var popup = document.getElementById("popup");
    popup.style.display = "block";
    // Set a cookie to track when the popup was last displayed
    setCookie("popupDisplayed", Date.now(), 3);
  }

  // Function to check if the popup should be displayed
  function checkPopupDisplay() {
    var lastDisplayed = getCookie("popupDisplayed");
    if (lastDisplayed) {
      // Get the time in milliseconds for 3 hours
      var threeHours = 3 * 60 * 60 * 1000;
      if (Date.now() - lastDisplayed > threeHours) {
        // If it has been more than 3 hours since the last display, show the popup after 5 seconds
        setTimeout(showPopup, 5000);
      }
    } else {
      // If the "popupDisplayed" cookie does not exist, show the popup after 5 seconds
      setTimeout(showPopup, 5000);
    }
  }
  // Call the checkPopupDisplay function when the page loads
  checkPopupDisplay();
</script>

上記のコードに誤りがある可能性があるため、確認して適切に修正した後に利用できます。 上記のコードでクッキーの時間部分をチェックして適切に修正してください。 疑わしい部分は、再び質問をすると修正されたコードを提示します。

AI言語モデルを活用してコードのデバッグからデータの異常検出まで、は現在無料でご利用いただけます。 プログラミング言語を学ぶときにも役に立つと思います。

参照

• WordPress Bloomプラグインをポップアッププラグインとして使用する方法
• エレメントと Avada テーマのタブに目的のコンテンツを簡単に挿入する方法
• WordPress Diviテーマの背景マスクとパターンの導入（+無料ダウンロード）