私は下の画像のように交互の列に投稿を表示しようとしています。最初の行がいっぱいになると、別のスタイルで別の行が作成されます。これは第3、第4などにも当てはまります。投稿の数によって異なります。WordPressの代替ポストカラム
ここでは私のワードプレスのPHP/HTMLコードを見ることができます。
<?php get_header();?>
<div class="tab-content">
<div class="container-fluid no-padding">
<?php
$args = array(
'post_type' => 'case',
'category_name' => 'website',
'posts_per_page' => -1
);
$query = new WP_Query($args);
if ($query->have_posts()) :
$i = 0;
while($query->have_posts()) :
$query->the_post();
$i++;
if($i <= 5) {
if($i == 1) {
?>
<div class="big-pane col-lg-6">
<a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
<div class="text-box">
<h1><?php the_title(); echo" ".$i?></h1>
<p><?php the_field('sub_titel');?></p>
<a href="<?php the_permalink(); ?>">Bekijk project</a>
</div>
</div>
<div class="small-pane-holder1 col-lg-6">
<?php
}
else { ?>
<div class="small-pane col-lg-6">
<a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
<div class="text-box">
<h1><?php the_title(); echo" ".$i?></h1>
<p><?php the_field('sub_titel');?></p>
<a href="<?php the_permalink(); ?>">Bekijk project</a>
</div>
</div>
<?php
if($i == 5){ ?>
</div>
<div class="clearfix"></div>
<?php
}
}
}
else {
$i = 1;
if($i == 1){ ?>
<div class="big-pane col-lg-6 pull-right">
<a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
<div class="text-box">
<h1><?php the_title(); echo" ".$i?></h1>
<p><?php the_field('sub_titel');?></p>
<a href="<?php the_permalink(); ?>">Bekijk project</a>
</div>
</div>
<div class="small-pane-holder2 col-lg-6 ">
<?php
}
else {?>
<div class="small-pane col-lg-6">
<a href="<?php the_permalink(); ?>"><div style='background: url("<?php the_post_thumbnail_url();?>") no-repeat; background-size:cover; width:100%; height:100%;'></div></a>
<div class="text-box">
<h1><?php the_title(); echo" ".$i?></h1>
<p><?php the_field('sub_titel');?></p>
<a href="<?php the_permalink(); ?>">Bekijk project</a>
</div>
</div>
</div>
<?php ?>
<div class="clearfix"></div>
<?php
}
}
endwhile;
echo $i;
else:
echo "<p>Sorry voor de teleurstelling :(!</p>";
endif;
wp_reset_postdata(); ?>
</div>
</div>
<?php get_footer();?>
このコードは機能しますが、目標を達成するには不十分です。私はこのコード出力のスクリーンショットを作った。以下を参照してください:
問題は最後の行です。大きな写真は2番目の行として右側に揃えられますが、そのスタイルは最初の行と同じでなければなりません。
私はまだ問題の原因と思われるヒントを与えたいと思っています。$i = 1
とwhileループの最後を設定することはできません。すべての行は1から5までカウントされますが、最後の行は問題を抱えています(最初の行と同じスタイルをとらないため)。私はタイトルの後ろにカウンターを置いた。
私は本当にたくさん試しました。どうしましたか?私を助けてください。
ありがとうございます。
これは明らかに問題があると思います。 '$ i = 1; if($ i == 1)... 'あなたは他のコードを実行することは決してありません。 – miken32
ええ、これをどうやって解決できるか知っていますか?私はループ内でループを作成する必要があると思うが、私はこれを行う方法を知らない。手伝って頂けますか?あなたの答えには – FFB