按钮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字符串创建新元素时出现任何复杂情况。