列出单个页面上的所有类别以及属于 wordpress 中 jquery 滑块中某个类别的所有页面

Question

我真的需要一些帮助。从昨天早上开始，我一直在努力为我女朋友在 wordpress 中的烘焙和烹饪食谱博客构建一个定制设计，此时我感到非常沮丧。 我按照 Lynda.com 教程在 wordpress 中进行自定义设计，并设法将模板分为页眉、主要部分和页脚，但在那之后我有点卡住了。 这是一个原始的 html 页面，可以查看该站点的外观： http://natalija.co.nf/index.html

这里是我需要帮助的地方。我希望将主页分成几个部分，每个部分都有一个唯一的 ID 和 data-stellar-background-ratio="0.5" 用于视差背景效果。这些部分将代表类别（蛋糕、饼干、饮料、菜肴等）。每个类别都应包含一篇具有自己的类和 data-stellar-ratio="1.5" 的文章。在一篇文章中，将有一个带有类别标题的 h1 标记和一个 jquery 滑块，其中包含指向该类别的食谱的链接。 所以一个section的结构应该是这样的：

<section id="teroteikolaci" data-stellar-background-ratio="0.5">
    <article class="torteikolaci" data-stellar-ratio="1.5">
        <h1>TORTE I KOLAČI</h1>
        <div class="wrapper">
            <ul class="slider">
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb01.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 1</h5>
                        </div>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb02.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 2</h5>
                        </div>
                    </a>
                </li>
                <li class="slide">
                    <a href="#">
                        <img src="wp-content/themes/Natalija/images/torte-i-kolaci-thumb03.jpg" alt="random">
                        <div class="bubble">
                            <h5>Čoko mousse torta 3</h5>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
    </article>
</section>

正如我所说，我设法将模板分成 header.php、footer.php 和 home.php， 但是我只设法将原始 html 代码放入 home.php 中，我想用动态内容替换它，但是我在教程中的那个人后面迷路了。 我不希望类别成为单独的页面。我希望它们都显示在主页中。我该如何做到这一点？ 我是 wordpress 的新手，所以仪表板有点让我困惑，而且我不熟悉 wordpress php 功能，所以如果有人能给我一些关于如何解决这个问题的指导，我将不胜感激。

编辑：

        <?php
    $args = array(
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    foreach($categories as $category) {
        ?>

    <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
        <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
            <h1><?php echo $category->name; ?></h1>
            <div class="wrapper">
                <ul class="slider">

        <?php
    }

    $args = array (
        'post_status' => 'publish',
        'category_name' => $category->slug,
        'nopaging' => true,
    );
    $custom_query = new WP_Query( $args );

    if ( $custom_query->have_posts() ) {
        while ( $custom_query->have_posts() ) {
            $custom_query->the_post();

                // begin your slider loops in here
                ?>

                    <li class="slide">
                        <a href="<?php echo get_permalink(); ?>">
                            <?php the_post_thumbnail(); ?>
                            <div class="bubble">
                                <h5><?php echo get_the_title(); ?></h5>
                            </div>
                        </a>
                    </li>
    <?php }
    } else {
        // no posts found
    }

    /* Restore original Post Data */
    wp_reset_postdata();
    ?>

                </ul>
            </div>
        </article>
    </section>

Answer 1

WordPress 使用WP_Query 对象获取帖子/页面（好消息是它有很好的文档记录，您可以使用它并对其进行自定义）。我建议您为 each 部分创建一个专用循环（使用 WP_Query）。让我告诉你如何......

使用“TORTE I KOLAČI”作为第一个示例，就在您开始该部分之前，您可以像这样创建一个 new 循环：

// WP_Query arguments allow you to filter out / sort which posts you want
// In this example, I'm just telling WordPress to give me ONLY posts under the 
// TORTE I KOLAČI category and NOT to use paging (so you get ALL posts in that 
// category without limits)
$args = array (
    'post_status' => 'publish',
    'category_name' => 'torte_i_kolaci',
    'nopaging' => true,
);

// The Query
$custom_query = new WP_Query( $args );

注意：category_name 实际上是类别的slug（您可以在您定义的每个类别下的管理部分中找到它）。

现在是时候使用$custom_query了。

每个部分仍然会有这样的包装代码：

<section id="teroteikolaci" data-stellar-background-ratio="0.5">
    <article class="torteikolaci" data-stellar-ratio="1.5">
        <h1>TORTE I KOLAČI</h1>
        <div class="wrapper">
            <ul class="slider">

除了现在你将切换到 PHP 并使用诸如 the_post_thumbnail、get_the_title 和 get_permalink 之类的函数，如下所示：

<?php
if ( $custom_query->have_posts() ) {
    while ( $custom_query->have_posts() ) {
        $custom_query->the_post();

            // begin your slider loops in here
            ?>

            <li class="slide">
                <a href="<?php echo get_permalink(); ?>">
                    <?php the_post_thumbnail(); ?>
                    <div class="bubble">
                        <h5><?php echo get_the_title(); ?></h5>
                    </div>
                </a>
            </li>
    }
} else {
    // no posts found
}

/* Restore original Post Data */
wp_reset_postdata();
?>

现在您已经循环了所有帖子，是时候关闭包装器了...

            </ul>
        </div>
    </article>
</section>

现在您可以为您计划列出的每个类别（SITNI KOLAČI、NAPICI 等）重复此模式。

一些注意事项

我假设您的帖子实际上是 posts 而不是 pages（对于循环中的每个项目）。如果你需要页面，你可以像这样改变你的 $args 数组：

$args = array (
    'post_type' => 'page',
    'post_status' => 'publish',
    'category_name' => 'torte_i_kolaci',
    'nopaging' => true,
);

深入了解 codex 上的 WP_Query 页面，了解这些查询的灵活性。

您可能希望通过首先获取您的类别然后循环这些类别以输出您的代码甚至更多动态和易于维护“外包装”。 WordPress 有一个名为get_categories 的函数，我一直在使用它。 get_categories 也有它自己的 $args 数组，所以看看文档看看你能用它做什么。你可以像这样构造你的代码：

$args = array(
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
    ?>

<section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
    <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
        <h1><?php echo $category->name; ?></h1>
        <div class="wrapper">
            <ul class="slider">

    <?php
}

现在是最酷的部分！您可以像这样从 $category->slug 值驱动所有内部循环（使用 WP_Query）...

$args = array (
    'post_status' => 'publish',
    'category_name' => $category->slug,
    'nopaging' => true,
);

把它们放在一起

这就是整个代码 sn-p 的样子（我为一些大括号添加了一些 cmets，可帮助您查看某些循环的开始和结束位置）。

<?php
$args = array(
    'orderby' => 'name',
    'order' => 'ASC'
);
$categories = get_categories($args);
foreach($categories as $category) {
    ?>

    <section id="<?php echo $category->slug; ?>" data-stellar-background-ratio="0.5">
        <article class="<?php echo $category->slug; ?>" data-stellar-ratio="1.5">
            <h1><?php echo $category->name; ?></h1>
            <div class="wrapper">
                <ul class="slider">

                <?php
                    $args = array (
                        'post_status' => 'publish',
                        'category_name' => $category->slug,
                        'nopaging' => true,
                    );
                    $custom_query = new WP_Query( $args );

                    if ( $custom_query->have_posts() ) {
                        while ( $custom_query->have_posts() ) {
                            $custom_query->the_post();

                                // begin your slider loops in here
                                ?>

                                    <li class="slide">
                                        <a href="<?php echo get_permalink(); ?>">
                                            <?php the_post_thumbnail(); ?>
                                            <div class="bubble">
                                                <h5><?php echo get_the_title(); ?></h5>
                                            </div>
                                        </a>
                                    </li>

                    <?php } // end $custom_query loop

                    } else {
                        // no posts found
                    }

                    // reset the postdata
                    wp_reset_postdata();
                ?>

                </ul>
            </div>
        </article>
    </section>
<?php
} // end $categories loop
?>

希望这能帮助你摆脱困境，玩得开心！