我试图在wordpress中根据我的主题实现这一点:fullpage.js demo
因此,我为垂直部分(父部分)和水平幻灯片(子部分)预定义了一个标记。父级只有在没有子级时才包含帖子,如果有子级,则每个帖子必须位于子元素内。
以下是所需的标记:
<div id="fullpage">
<section class="vertical-scrolling" data-anchor="//post title here//">
<div //we can have another div here if you like //>
<article id="//post id here//">
// Here comes the content of a vertical section//
</article>
</div>
</section>
<section class="vertical-scrolling" data-anchor="//taxonomy term here//">
<div class="horizontal-scrolling" data-anchor="//post title here//">
<article id="//post id here//">
// Here comes the post-content with the taxonomy term for the first slide //
</article>
</div>
<div class="horizontal-scrolling" data-anchor="//post title here//">
<article id="//post id here//">
// Here comes the post-content with the taxonomy term for the second slide //
</article>
</div>
</section>
</div>
请帮我创建一个循环,
将指定帖子输出为垂直部分,将指定帖子输出为水平幻灯片,例如按分类术语分组,以满足给定标记要求
最合适的回答,由SO网友:matjaeck 整理而成
我自己也能弄明白,下面是代码:
<div id="fullpage">
<?php
//for each category, show 5 posts
$cat_args=array(
\'orderby\' => \'name\',
\'order\' => \'desc\'
);
$categories=get_categories($cat_args);
foreach($categories as $category) {
$args=array(
\'showposts\' => 5,
\'category__in\' => array($category->term_id),
);
$posts=get_posts($args);
if ($posts) {
echo \'<section class="vertical-scrolling" data-anchor="\' . $category->name.\'">\';
foreach($posts as $post) {
setup_postdata($post); ?>
<div <?php if(has_term( \'slide\', \'fp_type\' )): ?>class="horizontal-scrolling"<?php endif; ?>data-anchor="<?php the_title(); ?>">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
// Here comes the content //
</article>
</div>
<?php
} // endforeach;
echo \'</section>\';
} // endif;
} // endforeach;
?>
</div>
它似乎工作得很好。
@迈克尔的answer 帮了我很多