php - 根据主要内容的高度在wordpress中重复侧边栏项目？

Question

我有一些项目要显示在我的 wordpress 侧边栏中。假设 div1、div2、div3。

我的客户想重复侧边栏中的项目序列以填充侧边栏的高度以匹配主要内容区域的高度。因此，如果每个 div 的高度为 200px，并且给定页面上主 div 中的内容为 1000px，那么应该有 div1、div2、div3、div1、div2。

我知道如何编写 php 代码和编写循环，但如何知道要运行多少个循环？

虽然我觉得这有点傻，但我的客户对此很坚持。

Answer 1

我想到的一种解决方案是，使用 JavaScript（或 JQuery）来获取主要内容的高度并决定可以在侧边添加多少 DIV。

编辑：这不是有效的方法，但假设在循环中将显示所有侧栏内容。然后，在 javascript 中决定要显示多少个 div。

Answer 2

这种类型的效果称为“浮动侧边栏”。我们将提供许多可用的 wordpress 插件。

简单的谷歌搜索将找到解决您的问题。

谷歌搜索结果之一是：

http://www.strx.it/2010/11/wordpress-floating-sidebar-plugin/

Answer 3

我最终用 jQuery 来做这件事。它不是浮动侧边栏，它实际上会根据需要将 img 标签添加到已经存在的任何内容中，直到不再适合为止。

<script type="text/javascript">
$(function() {
    var contentHeight = $('#content').height();
    var adList = [
        '<img class="ad" src="----url to first ad -----" />', 
        '<img class="ad" src="----url to second ad -----" />', 
        '<img class="ad" src="----url to third ad -----" />', 
        '<img class="ad" src="----url to fourth ad -----" />', 
        '<img class="ad" src="----url to fifth ad -----" />'
        ];
    var adHeight = 285;
    var numRequiredAds = adList.length;
    var heightDiff = contentHeight - (numRequiredAds * adHeight);
    var numAds = Math.floor(heightDiff/adHeight);
    if (heightDiff > adHeight){
        for (var i = 0; i < numAds ; i++) {
            $('#primary').append(adList[i % adList.length]);
        };
    }

});