按钮 onclick 打开一个 wordpress 简码答案

【问题标题】：button onclick opening a wordpress shortcode按钮 onclick 打开一个 wordpress 简码
【发布时间】：2016-06-04 06:31:42
【问题描述】：

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

<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'); ?>

我怎样才能让它工作？

【问题讨论】：

不清楚你想要什么。当您单击该按钮时，您期望发生什么？弹出窗口，模态？此外，为了运行简码，您需要一个 php 函数 do_shortcode('[shortcode_here]')

【解决方案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 字符串创建新元素的任何复杂性。

【讨论】：