javascript - 按钮 onclick 打开 WordPress 短代码

Question

我正在尝试制作一个按钮，从终极简码插件中打开简码。这是我的例子:

<button id="showInfo" onclick="showInfo()">Video</button>

JavaScript:

var infoSC = '[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]';

function showInfoSC(){
  return infoSC;
}

我想根据帖子内容打开一个ligtbox(高级自定义字段)

<?php the_field('info'); ?>

我怎样才能让它发挥作用？

Answer 1

您应该能够利用 wordpress 中的 do_shortcode() 函数来获取短代码将返回的实际输出。

do_shortcode('[su_lightbox_content id="showInfo"]Inline content[/su_lightbox_content]');

这将返回短代码输出的字符串。请记住，javascript 使用多行字符串会中断，因此，如果您计划将短代码存储在 javascript 中的字符串中，请注意短代码将输出的 html 代码。

我的建议是通过 CSS 隐藏短代码显示的任何内容，然后利用 javascript 使内容可见。

例如，短代码输出

<div class="su_lightbox_content" id="showInfo">
  Inline content
</div>

在 CSS 中，只需添加

#showInfo {
  display: none;
}

还有你的 JavaScript 函数:

function showInfo() {
  document.getElementById("showInfo").style.display = "block";
}

这样，您就可以正常在帖子/页面中包含短代码，并避免使用 JavaScript 从原始 html 字符串创建新元素时出现任何复杂情况。