javascript - 如何将 HTML 和 Javascript 添加到 WordPress 简码？

Question

我有一个 HTML 片段，我想将其制作成 Wordpress 短代码。这是片段。

<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">         
    <div class="textwidget">
        <div class="row">
            <div class="h3 regular-font">Have Questions?</div>
            <div class="h5">TALK TO US 800.810.8412</div>
            <a href="http://www.oakwoodsys.com/email-us"><div class="button help-email left">Email Us</div></a>
            <!-- BEGIN OLARK CHAT LINK -->
            <a href="javascript:void(0);" onclick="olark('api.box.expand')"><div class="button help-chat left">Chat Now</div></a>
            <!-- END OLARK CHAT LINK -->
        </div>
    </div>
</article>
</div>

我已将其添加到我的functions.php中，当我将[chat]添加到Wordpress中的页面时，它会正确输出代码。

// Chat/Email Shortcode
  function chat_shortcode() {
    return '<div class="small-12 large-7 columns">
<article id="text-39" class="panel widget widget_text">         
    <div class="textwidget">
        <div class="row">
            <div class="h3 regular-font">Have Questions?</div>
            <div class="h5">TALK TO US 800.810.8412</div>
            <a href="http://www.oakwoodsys.com/email-us"><div class="button help-email left">Email Us</div></a>
            <!-- BEGIN OLARK CHAT LINK -->
            <a href="#">Chat Now</div></a>
            <!-- END OLARK CHAT LINK -->
        </div>
    </div>
</article>
</div>';
    }
    add_shortcode('chat', 'chat_shortcode');

但是，当我将实时聊天链接从 # 更改为 javascript:void(0);"onclick="olark('api.box.expand')，整个网站崩溃了。如何才能使链接正常工作？

Answer 1

您的 return 语句使用 '' 打开和关闭，因此当您在 onclick 中使用它们时，您会中断语法(您会关闭 return 语句)。

试试这个，

onclick="olark(\'api.box.expand\')"