按钮 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;
}

我想根据 post（高级自定义字段）的内容打开一个灯箱

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

我怎样才能让它工作？

Answer 1

您应该能够利用 wordpress 中的 do_shortcode() 函数来获得简码 return.

的实际输出

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

这将 return 任何短代码输出的字符串。请记住 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";
}

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

button onclick opening a wordpress shortcode