如何在Wordpress Shortcode中添加HTML和Javascript？

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中，并且当我在Wordpress中将[chat]添加到页面时，它可以正确输出代码。

// 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\')"

Answer 2

您已经用单引号（在chat_shortcode() ）构建了字符串，因此当您添加其他onclick代码且其中包含单引号时，您逃脱了要构建的第一个字符串。 尝试这个：

return <<<HTML
<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>
HTML;

这称为PHP Heredoc ，它使您可以使用单引号和双引号，而不必转义字符串中的字符。 它还具有能够自动解析您可能希望注入的任何PHP变量的附加好处。 我更喜欢这种方法，以提高可读性，大多数编辑器都为您突出显示语法。

如何在Wordpress Shortcode中添加HTML和Javascript？

问题描述

2 个解决方案

解决方案1
1 已采纳 2014-07-07 20:55:38

解决方案2
0 2014-07-07 20:53:46

如何在Wordpress Shortcode中添加HTML和Javascript？

问题描述

2 个解决方案

解决方案1 1 已采纳 2014-07-07 20:55:38

解决方案2 0 2014-07-07 20:53:46

解决方案1
1 已采纳 2014-07-07 20:55:38

解决方案2
0 2014-07-07 20:53:46