クライアントが空白を埋めるために一連の広告を何度も繰り返したいサイドバー幅のワードプレス サイトがあります。
そのため、最初の広告セットをハードコーディングし、#content DIV の高さを取得して広告の配列をループし、必要に応じてサイドバーに追加する関数を用意しました。
ここ (リンク) など、サイトのほとんどすべてのページで問題なく動作します。
しかし、何らかの理由で、1 つのテンプレートに基づくページが正しい高さを報告していません (ページにトレース ステートメントを配置すると、~6000 ではなく ~2500 と報告されました)。このようなページでそれを見ることができます(リンク) .
これをデバッグしにくくするために、断続的にそれらのページで動作します。しかし、通常、リロードすると再び失敗します。高さがスクリプトに誤って報告されるため、ループは機能しますが、十分な回数ではありません。理解できません。
スクリプトは次のとおりです。
<script type="text/javascript">
$(function() {
var contentHeight = $('#content').height();
var adList = [
'<a href="http://www.toveromarks.com"><img class="ad" src="http://happeninginthehills.com/wp-content/uploads/ads/ToveroHappeningHills.jpg" /></a>',
'<img class="ad" src="http://happeninginthehills.com/wp-content/uploads/2012/12/vi-owens-ad.png" />',
'<a href="http://www.hadunne.com"><img class="ad" src="http://happeninginthehills.com/wp-content/uploads/2012/12/susie-ad1.png" /></a>',
'<a href="http://www.deborahchabrian.com"><img class="ad" src="http://happeninginthehills.com/wp-content/uploads/ads/chabrian-ad.jpg" /></a>',
'<a href="http://www.tclaw.biz"><img class="ad" src="http://happeninginthehills.com/wp-content/uploads/2012/12/jeffs-ad.png" /></a>',
'<a href="http://www.edmartinezart.com"><img class="ad" src="http://happeninginthehills.com/wp-content/uploads/ads/martinez-ad.jpg" /></a>',
'<img class="ad" src="http://happeninginthehills.com/wp-content/uploads/2012/12/scott-phillips-ad.jpg" />'
];
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]);
//$('#primary').append('<p>ad num '+i+'</p>');
};
//$('#primary').append('<p>height is'+contentHeight+'</p>');
}
});
</script>