好吧,我已经有一段时间没有使用 WordPress 了,但我认为我可以做到这一点……但失败了。我想要做的是列出指定父页面的所有子页面,并将它们在漂亮的小框中 2 x 2 列出。我设法获得代码以在框中列出所有子页面,但我被卡住了将它们 2 2 列出。这是我的代码。
<?php
$args = array(
'post_parent' => 31,
'post_type' => 'page',
'posts_per_page' => 5,
'orderby' => 'name',
'order' => 'ASC'
);
query_posts($args);
while (have_posts()) : the_post(); ?>
<div id="container">
<div id="left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><?php the_content(); ?></div>
<div id="right"><?php the_post_thumbnail('home-post-box'); ?></div>
</div><!--//special_page_box-->
<?php endwhile;
wp_reset_query();
} else {
the_content();
} ?>
这段代码工作正常,就其本身而言,但我真的很想将它们分成 2 乘 2,第一项 float 到左侧,第二项 float 到右侧。我完全被困住了。我尝试了一些 CSS 技巧并设法获得了列出的内联 block ,但这并没有真正帮助。那么,你们中有人可以帮助我完成元素的最后一步吗?我将不胜感激!我没有提供任何 CSS,因为我没有任何设置代码,我还在试验。
谢谢!
编辑 我认为我解释得不是很好,对此感到抱歉。这是我想要的外观的图片:
最佳答案
我认为这里不需要任何编码。只是一些 CSS 样式。对于每个帖子,您似乎有两个 div,一个左边和一个右边,所以实际上您需要每行 4 个 div。我通过一些 nth-child 操作让它工作:
<html>
<head>
<style>
.container {float:left; border: solid 1px black; width: 40%; }
.container:nth-child(2n + 1){clear: left; margin-right: 10%;}
.left { width: 50%; float: left; }
.right { width: 50%; float: left;}
.right img{width:90%; margin:0px auto; padding: 10px 0px;}
</style>
</head>
<body>
while (have_posts()) : the_post(); ?>
<div class="container">
<div class="left"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br><?php the_content(); ?></div>
<div class="right"><?php the_post_thumbnail('home-post-box'); ?></div>
</div><!--//special_page_box-->
我放置了宽度和边框,以便更容易看到发生了什么以及元素的边界在哪里。最好通过通用类选择子 div,因为此代码将选择容器下的所有 div。
关于php - WordPress 如何以两个为一组列出所有子页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22108343/