Question

我们有一个Wordpress网站，并使用了来自另一方的小部件。我们正在尝试使用小部件区域并排显示这些内容。问题是该页面仅显示一个。强制第一个不出现。

我们尝试使用完全不同的行，选项卡，使用代码块（而不是小部件区域）等，但是无论我们尝试什么，它只会显示一个。

和

我们希望它们是第三者提供的代码，并且预览效果很好，因此只需要将它们放入小部件区域即可。

我们想知道这是限制我们的目标还是仅仅是行不通的东西。

Answer 1

简短的答案是，罪魁祸首是第三方代码。在加载的JS中，它使用document.getElementById("inform-widget")，然后将该元素的HTML设置为其服务器中的内容。因为它不检查ID是否为“ inform-widget”的元素是否多于一个（而且坦白地说，不应存在，因为ID应该是唯一的），那么会发生什么事情，那就是不断替换内容第一个<div id="inform-widget">中的第一个。最好的解决方案是让第三方通过按类切换到定位小部件或提供某种动态嵌入代码或iframe src URL来允许多个小部件。

您可以使用的一种解决方法是，将每个小部件脚本+ div手动放入iframe。因此，例如，您可以将一个非常简单的HTML文件上传到example.com/inform-widget-1.html上的服务器：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Widget</title>
</head>
<body>
    <div id="inform-widget"></div>
    <script src="https://inform.dataloft.co.uk/widgets/stats/..."></script>
</body>
</html>

然后用<iframe src="/inform-widget-1.html"></iframe>替换Wordpress中的小部件代码。使用这种方法，您可以在一页上拥有任意数量的小部件，并且它们都应该一起工作而不会出现问题。

另一种选择是使用PHP自动生成与上述相同的iframe嵌入，因此您不必为每个小部件手动上传HTML文件。这超出了这个问题的范围，但是对于熟悉PHP的人来说将是非常容易的。

我的Wordpress网站可以并排显示两个脚本吗

1 个答案: