0

新しいwww.digg.comサイトのレイアウトを模倣したサイト（ブログ）を構築しようとしています。

上部の全幅の支柱で構成され、その下の支柱は3列幅のブロックになっています。ブロックはすべて特定の幅に設定され、フロートは左になります。

私が作成しているものの違いは、一番上の投稿が全幅の注目の投稿である代わりに、どの行にも、ページの全幅を拡大して他のブロックを押し下げる注目の投稿を表示できることです。

問題は、投稿が特集として指定されていて、それが左の列にない場合、正しく表示されないことです。下の画像は、注目の投稿が2列目または3列目にある場合にどうなるかを示しています。

Wordpressの投稿のWHILEループをトラバースして、各投稿のCSSクラスに1から3までの数字を数えて割り当てます。例<div class="col-1"> <div class="col-2"> <div class="col-3">

col-1=左の列の投稿
col-2=中央の列の投稿
col-3=右の列の投稿

場合によっては、投稿に。という名前のCSSクラスが含まれることもありますfeatured。投稿がfeaturedthenとして指定されると、1列ではなく3列の全幅に拡張されます。

featured投稿が結果セットの最初の投稿である限り、これはすべて簡単に実行できます。ただし、下の画像では、問題がどこにあるかを示しています。各投稿に1〜3のクラス列名を割り当て、注目の投稿に注目のクラス名を割り当てる場合、セットを反復処理していると仮定して、通常はクラス名またはその後featuredのクラス名を持つ投稿にCSSクラスを割り当てます。問題がある。col-2col-3

下の画像は問題を示しています。3行目では、注目のクラスを3行目の中央の列（col-2）に割り当てた場合にどうなるかを確認できます。

ここに画像の説明を入力してください

どういうわけか、whileループ内のすべての投稿にクラス名col-1 col-2 col-3またはすべての投稿を割り当て、投稿が常に列1の位置にあることを確認する必要があります。featuredfeatured

私はこれをどのように達成できるかについての提案や助けを受け入れていますか？

以下はPHPループのサンプルコードです...（注：注目の投稿をチェックするためのコードはまだ追加していません）

<?php
// Start our column count at 1
$column = 1;
while (have_posts()) : the_post();
    $col_class = 'post-col-' .$column;
?>

  <article <?php post_class($col_class); ?>>
      post content
  </article>

<?php
// Increase the Column count
$column++;
// After count has displayed 3, we reset the count
if($column == 4){
    $column = 1;
}
endwhile;
?>
4

1 に答える 1

1

行全体がいっぱいになるまで要素を「保持」することもできると考えただけです。投稿を次のように並べ替えた場合：

  1. リストアイテム
  2. リストアイテム
  3. リストアイテム
  4. リストアイテム
  5. Featuerdリストアイテム
  6. リストアイテム
  7. リストアイテム

あなたはあなたがするようにそれらをループすることができ、注目のアイテムを検出するとき、それを一時的に保存し、終わったらそれを表示することができます。以下のようなもの：

<?php
$column = 1;
$featured_list = array();
while (have_posts()) : the_post();
  $col_class = 'post-col-' .$column;

  if(!$isfeatured) {
    echo '<article '.post_class($col_class).'>post content</article>';
  } else {
    $featured_list[] = '<article '.post_class($col_class).'>post content</article>';
  }

  // Increase the Column count
  $column++;
  // After count has displayed 3, we reset the count
  if($column == 4){
    $column = 1;
  // Print everything in the array, doing nothing if empty
  foreach ($featured_list as $featured_item) { 
    echo $featured_item;
  }
  // Reset the array
  $featured_list = array(); 
}
endwhile;
?>
于 2012-11-06T12:45:35.900 に答える