Question

对于网站，我想在父页面的标签中添加包含动态内容（图片，列表，列...）的所有子页面。标签可能非常简单，例如this。

<ul class="tabs">
    <li>
        <input type="radio" name="tabs" id="tab1" checked />
        <label for="tab1">Description</label>
        <div id="tab-content1" class="tab-content"> THE CONTENT </div>
    </li>
    <li>
        <input type="radio" name="tabs" id="ta2" checked />
        <label for="tab2">Description</label>
        <div id="tab-content1" class="tab-content"> THE CONTENT </div>
    </li>
</ul>

伴随着一些CSS。

如何修改此代码以获取WordPress子页面的标题和内容？

Answer 1

您需要一个自定义循环。首先，你必须做一个WP_Query来获取你的子页面。我不知道你的结构所以这个片段只是例子：

$subpages = new WP_Query( array(
    'post_type'      => 'page',
    'post_parent'    => $this_page,
    'posts_per_page' => - 1,
    'orderby'        => 'menu_order'
) );

然后你可以像这样循环查询这个查询：

<ul class="tabs">

<?php 
    global $post;
    while ( $subpages->have_posts() ) : $subpages->the_post();
?>
    <li>
        <input type="radio" name="tabs" id="<?php echo $post->post_name; ?>" checked />
        <label for="<?php echo $post->post_name; ?>">
            <?php the_title(); ?>
        </label>
        <div id="<?php echo $post->post_name; ?>" class="tab-content"> 
            <?php the_content();?>
        </div>
    </li>
<?php endwhile; wp_reset_query(); ?>

</ul>

您应该在模板中或要显示子页面的位置放置类似的循环。此循环将迭代抛出包含子页面的查询并设置全局$ post对象，使其始终包含此循环中的当前子页面。然后它将打印您请求的HTML结构，它将使用页面标题，页面slug和页面内容。在迭代之后，它将重置查询并取消设置$ post全局变量。

选项卡中的WordPress子页面

1 个答案: