如何在Wordpress中让一个按钮填充Mailchimp弹出表单的模式


How do you make a button populate a modal for a Mailchimp popup form in Wordpress

我有一个Wordpress网站,想添加一个Mailchimp模态来注册时事通讯。然而,我不希望它在给定的时间后出现,这是Mailchimp提供的唯一代码。我一直在寻找插件,以完成这项工作,但无法找到一个坚实的选择。我在Github上找到了一些信息,但没有一个是Wordpress特有的。

到目前为止,我已经找到了这个代码:

<!-- This is the HTML element that, when clicked, will cause the popup to appear. -->
<button id="open-popup">Subscribe to our mailing list</button>
<!-- This is what I have tried putting in the header. -->

<script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
<script>
function showMailingPopUp() {
require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"YOUR_UUID_GOES_HERE","lid":"YOUR_LID_GOES_HERE"}) })
document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
};
document.getElementById("open-popup").onclick = function() {showMailingPopUp()};
</script>

我试着把代码的第二部分放在几个不同的区域,包括标题和按钮所在的小部件,但都没有成功。你知道我做错了什么吗?

我解决了这个问题。

这是我的按钮的代码,我直接输入到文本小部件中的代码:

<button id="open-mc-popup" onclick ="showMailingPopUp(); return false;">Subscribe</button>

下一节我放在主题的标题中。如果你是wordpress的新手,或者不知道如何到达那里,请遵循以下步骤。Appearance > Editor > Theme Header (header.php)如果主题从父主题继承,则必须首先单击该父主题的链接。到达后,您可以将此代码放在<head> </head>部分之间,但要注意不要删除任何现有代码。

<!-- This is the Mailchimp Modal. -->
  <script type="text/javascript" src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" data-dojo-config="usePlainJson: true, isDebug: false"></script>
  <script>function showMailingPopUp() {
    require(["mojo/signup-forms/Loader"], function(L) { L.start({"baseUrl":"mc.usXX.list-manage.com","uuid":"YOUR_UUID_HERE",
      "lid":"YOUR_LID_HERE"}) })
    document.cookie = "MCEvilPopupClosed=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
  };</script>

最后确保您已经更新了"baseUrl" "uuid"&"lid"来匹配Mailchimp为您提供的弹出表单代码。这可以在选择一个Mailchimp列表(在Mailchimp网站上(,选择弹出表单并单击"获取代码"后找到。