1

すべての投稿が表示されるまで無限に小さくなる行で投稿のスタイルを変えるために、Wordpressループを適応させようとしています

ここでのコンセプトは、投稿を行に表示することです

1列目1ポスト2列目2ポスト3列目3ポスト4列目4ポスト5列目5ポスト6列目6ポスト7列目7ポスト

すべての投稿が取得されるまで

以下のコードは制限されており、上記を実行しません。以下に上記を実行させるためにどのように適応しますか？

以下のコードは機能しており、ここで見ることができます：http: //ccs.btcny.net/redhook/

<?php if (have_posts()) : ?>
<?php $count = 0; ?>
<?php while (have_posts()) : the_post(); ?>
<?php $count++; ?>
<?php if ($count == 1) : ?>
<div class="style-1"><?php the_content(); ?></div>
<?php elseif ($count == 2 || $count == 3) : ?>
<div class="style-2"><?php the_content(); ?></div>
<?php elseif ($count == 4 || $count == 5 || $count == 6) : ?>
<div class="style-3"><?php the_content(); ?></div>
<?php elseif ($count == 7 || $count == 8 || $count == 9 || $count == 10) : ?>
<div class="style-4"><?php the_content(); ?></div>
<?php elseif ($count == 11 || $count == 12 || $count == 13 || $count == 14 || $count == 15 ) : ?>
<div class="style-5"><?php the_content(); ?></div>
<?php elseif ($count >= 16 ) : ?>
<div class="style-6"><?php the_content(); ?></div>
<?php endif; ?>
<?php endwhile; ?>
4

2 に答える 2

0

なんてエレガントなアイデアでしょう。次のようなものを試してください。

<?php
if (have_posts()):
    $count = 0;
    while (have_posts()):
        $count++;
?>
    <div class="style-<?php echo $count; ?>">
    <?php
        for( $i = 1; $i <= $count; $i++ ):
            if (have_posts()):
                the_post();
                the_content(); 
            endif;
        endfor;
    ?>
    </div>
<?php 
    endwhile;
?>

whileループカウントの投稿と出力<div>'s。Inside divは、現在の値forと同じ回数だけbodyを実行します。$countしたがって、for$count = 1ループは1回実行され、次にfor$count = 2ループは2回実行されます。内部ループwp関数はthe_post()、ポストインデックスを反復し、the_content()現在のポストを出力します。

于 2012-09-27T17:49:55.567 に答える
0

これが私の解決策です。基本的に、次の要素が現在の行の中にあるかどうかを確認して行番号を設定しています。そのためには、次のインデックスが次の行の最初のインデックスと等しいかどうかを確認する必要があります。

トリッキーな部分は、行の最初のアイテムのインデックスを見つけることです。これは線形ではなく幾何学的な順序であるため、各行のアイテム数は増加します。次の行の最初の項目を計算するには、現在の行（この場合は単に現在の行）の要素数を現在の行の最初のインデックスに追加する必要があります。次の行の最初のインデックスを取得し、次の項目がその数と等しくなると、次の行に移動して、その計算されたインデックスの現在の行の最初のインデックスを設定する必要があります。

<?php //The first index of the first row is 1?>
<?php $row = 1;?>
<?php $curFirstIndex = 1;?>

<?php //start counting items ?>
<?php $count = 0;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the next item is equal to the first index of the next row ?>
   <?php if ($count+1 >= ($row + $curFirstIndex)) :
       <?php 
         //the next item will be in the new row
         //in $curFirstIndex store the first number of the current row
         $curFirstIndex = $row + $curFirstIndex;

         //go to the next row
         $row++;
       ?>
   <?php endif; ?>
   <?php $count++;?>

<?php endwhile;?>

[編集]

上記のソリューションは機能しますが、1つの小さな欠陥があります。つまり、ロジックがテンプレートに組み込まれています。Wordpressは厳密なレイヤー分離には従いませんが、私の意見では、可能であればそれを試みることは常に良いことです。そこで、テンプレートファイルでこのロジックを減らし、ロジックを外部に移動する2つの方法を考え出しました。wordpressのテーマにはfunctions.phpがあるため、このファイルを使用して、そのロジックを処理する関数を作成できます。これがコードです

テンプレートビューファイル：

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php //check if the current item is the last in the row ?>
   <?php if ($count == getRowLastItemIndex($row)) {$row++;} ?>
   <?php $count++;?>

<?php endwhile;?>

Functions.php内：

function getRowLastItemIndex($row) {
    $index = 0;
    for($i = 1; $i <= $row; $i++) {
        $index += $i;
    }
    return $index;
}

または、次の方法でさらに分離します

テンプレートファイル

<?php //Initial values?>
<?php $row = 1;?>
<?php $count = 1;?>
<?php while (have_posts()) : the_post();?>

   <?php //create actual html code ?>
   <div class="style-<?php echo $row;?>"><?php the_content(); ?></div>

   <?php $row = getRowNumber($row,$count);?>
   <?php $count++;?>

<?php endwhile;?>

そして、functions.phpに別の関数を追加します

function getRowNumber($row,$count) {

    if ($count == getRowLastItemIndex($row)) 
        $row++;
    } 
    return $row;
}
于 2012-09-27T17:53:19.133 に答える