0

ワードプレスのサイドバーに表示する項目があります。div1、div2、div3 としましょう。

私のクライアントは、サイドバーのアイテムのシーケンスを繰り返して、メイン コンテンツ エリアの高さに合わせてサイドバーの高さを埋めたいと考えています。したがって、各 div の高さが 200px で、特定のページのメイン div のコンテンツが 1000px の場合、div1、div2、div3、div1、div2 が必要です。

PHP のコーディング方法とループの書き方は知っていますが、実行するループの数を知る方法はありますか?

少しばかげていると思いますが、私のクライアントはこれについて断固としています。

4

3 に答える 3

0

私の頭に浮かぶ解決策の 1 つは、JavaScript (または JQuery) を使用してメイン コンテンツの高さを取得し、サイド ベアに追加できる DIV の数を決定することです。

編集: 効率的な方法ではありませんが、ループ内ですべてのサイド バーのコンテンツが表示されると仮定します。次に、表示する div の数を JavaScript で決定します。

于 2012-11-25T08:47:27.533 に答える
0

このタイプの効果は「フローティング サイドバー」と呼ばれます。多数のワードプレス プラグインが利用可能になります。

簡単な Google 検索で問題の解決策が見つかります。

Google検索結果の1つは次のとおりです。

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

于 2012-11-27T09:24:33.470 に答える
0

私は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]);
        };
    }

});

于 2013-01-27T17:16:41.827 に答える