我正在尝试获得一个特殊的wordpress循环html输出:
<div id="main">
<!-- Line number 1 -->
<div class="article-thumbnail" data-target="article-1" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-2" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-3" >
<div class="article-open"><img src="" /></div>
</div>
<div class="container">
<article id="article-1" class="article-entry">
<header class="article-header">
<h2>This is the article 1 text</h2>
</header>
<div class="article-body">
<p>This is the article 1 body</p>
</div>
</article>
<article id="article-2" class="article-entry">
<header class="article-header">
<h2>This is the article 2 text</h2>
</header>
<div class="article-body">
<p>This is the article 2 body</p>
</div>
</article>
<article id="article-3" class="article-entry">
<header class="article-header">
<h2>This is the article 3 text</h2>
</header>
<div class="article-body">
<p>This is the article 3 body</p>
</div>
</article>
</div>
<!-- Line number 2 -->
<div class="article-thumbnail" data-target="article-4" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-5" >
<div class="article-open"><img src="" /></div>
</div>
<div class="article-thumbnail" data-target="article-6" >
<div class="article-open"><img src="" /></div>
</div>
<div class="container">
<article id="article-4" class="article-entry">
<header class="article-header">
<h2>This is the article 4 text</h2>
</header>
<div class="article-body">
<p>This is the article 4 body</p>
</div>
</article>
<article id="article-5" class="article-entry">
<header class="article-header">
<h2>This is the article 5 text</h2>
</header>
<div class="article-body">
<p>This is the article 5 body</p>
</div>
</article>
<article id="article-6" class="article-entry">
<header class="article-header">
<h2>This is the article 6 text</h2>
</header>
<div class="article-body">
<p>This is the article 6 body</p>
</div>
</article>
</div>
</div>
检查这个小提琴文件:http://jsfiddle.net/PkZrZ/5/以了解我想要实现的目标。
基本上,我想从Wordpress循环中获得的是1行3个缩略图(特色帖子的图像),并在它们下面为每个缩略图输入,然后是另一行,依此类推。
我已经成功实现了一些目标,但说实话,这是一个令人难以置信的错误(一旦它起作用,之后它没有)并且似乎是错误的。无论如何,这是我到目前为止的Wordpress循环:
<?php
$post_array = array();
$i = 0;
$j = 0;
$index = 0;
$post_total = $wp_query->post_count; // buggy
/*$post_total = get_term_by('name','ventures','category');
$post_total = $post_total->count;*/
// echo $post_total;
if (have_posts()) : while (have_posts()) : the_post();
$i++;
// echo $i;
$post_array[] = get_object_vars($post);
?>
<div id="post-ventures-image-<?php the_ID();?>" class="post-ventures-image">
<?php the_post_thumbnail( 'hnp-thumb-ventures-180' ); ?>
</div>
<?php if($i%3 == 0 && $post_total >= 3) : ?>
<?php for($j = 0; $j < 3; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j; $j = 0; $post_total = $post_total - 3; $i = 0; ?>
<?php elseif($i%2 == 0 && $post_total == 2 ) : ?>
<?php for($j = 0; $j < 2; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j ; $j = 0; $post_total = $post_total - 2; $i = 0; ?>
<?php elseif($i%1 == 0 && $post_total == 1) : ?>
<?php for($j = 0; $j < 1; $j++) : ?>
<article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
<header class="article-header">
<h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
</header> <!-- end article header -->
<section class="entry-content clearfix">
<?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
</section> <!-- end article section -->
</article> <!-- end article -->
<?php endfor; $index = $index + $j + 1; $j = 0; $i = 0; ?>
<?php endif;?>
<?php endwhile; ?>
<?php endif; ?>
我认为这是有史以来最糟糕的改进编码。 如果有人能给我写一个关于如何编写会膨胀的循环的快速标记:)
答案 0 :(得分:1)
更新:
$posts = get_posts();
$first_three = array_chunk($posts, 3);
$count = 0;
foreach($first_three as $posts){
foreach($posts as $post){?>
<div class="article-thumbnail" data-target="article-1" >
<div class="article-open"><?php echo $post->post_title; ?></div>
</div><?php
}?>
<div class="container"><?php
foreach($posts as $post){$count++?>
<article id="article-<?php echo $count; ?>" class="article-entry">
<header class="article-header">
<h2>This is the article <?php echo $count; ?> text</h2>
</header>
<div class="article-body">
<p>This is the article <?php echo $count; ?> body</p>
</div>
</article><?php
}?>
</div><?php
}
对我来说非常适合,只需根据需要更改标记或数组。