wordpress图文教程

WordPress纯代码实现多分类筛选（显示分类让用户选择）

2024年8月28日
酒醒

方法一：‌WordPress纯代码实现多分类筛选（显示分类让用户选择）

了解您的需求，‌如果您想让用户从已有的分类中选择，‌而不是输入分类名称，‌您可以使用WordPress的分类下拉菜单（‌wp_dropdown_categories() 函数）‌来显示所有分类，‌并允许用户从中选择一个或多个分类。‌

以下是一个示例代码，‌它使用 wp_dropdown_categories() 函数来显示分类下拉菜单，‌并通过表单提交用户选择的分类ID来筛选文章：‌

<form method="post" action=""> <!-- 方法一：‌WordPress纯代码实现多分类筛选（显示分类让用户选择） -->
    <label for="category_ids">请选择分类：‌</label>
    <?php
    // 显示分类下拉菜单
    wp_dropdown_categories(array(
        'name' => 'category_ids', // 设置下拉菜单的name属性
        'id' => 'category_ids', // 设置下拉菜单的id属性
        'show_option_all' => '选择所有分类', // 设置默认选项文本
        'hide_empty' => 0, // 是否隐藏没有文章的分类
        'hierarchical' => 1, // 是否按层级显示分类
        'depth' => 3, // 设置显示的层级深度
        'show_count' => 1, // 是否显示分类下的文章数
        'selected' => 0, // 设置默认选中的分类ID
        'echo' => 1 // 是否输出下拉菜单的HTML代码
    ));
    ?>
    <input type="submit" value="筛选文章">
</form>

<?php
// 检查表单是否已提交
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['category_ids'])) {
    // 从表单中获取分类ID数组
    $category_ids = $_POST['category_ids'];

    // 创建一个新的WP_Query对象来执行自定义查询
    $query = new WP_Query(array(
        'category__in' => $category_ids, // 使用category__in参数来指定要包含的分类ID数组
        'posts_per_page' => -1, // 获取所有符合条件的文章
        'orderby' => 'date', // 按照文章发布日期排序
        'order' => 'DESC' // 降序排列
    ));

    // 检查是否有文章被查询出来
    if ($query->have_posts()) : ?>
        <ul>
            <?php // 开始循环输出文章
            while ($query->have_posts()) : $query->the_post(); ?>
                <li>
                    <a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
                    <!-- 您可以在此处添加更多文章信息，‌例如发布日期、‌作者等 -->
                </li>
            <?php endwhile; ?>
        </ul>
    <?php else : ?>
        <p>未找到属于指定分类的文章。‌</p>
    <?php endif;

    // 重置文章数据
    wp_reset_postdata();
}
?>

这段代码将显示一个分类下拉菜单，‌用户可以选择一个或多个分类。‌提交表单后，‌将执行一个自定义查询，‌显示用户所选分类中的所有文章。‌如果没有选择任何分类或没有文章属于所选分类，‌将显示相应的消息。‌

方法二：‌WordPress纯代码实现多分类筛选（显示分类让用户选择）（三个选择框）

要将表单修改为三个选择框（‌下拉菜单）‌，‌每个选择框对应一个分类，‌用户可以从每个选择框中选择一个分类来筛选文章，‌你可以按照以下方式修改HTML和PHP代码：‌

HTML部分：‌

<form method="post" action=""> <!-- 方法二：‌WordPress纯代码实现多分类筛选（显示分类让用户选择）（三个选择框） -->
    <!-- 方法三：‌使用三个选择框让用户选择分类来筛选文章 -->
    <label for="category_id_1">选择第一个分类：‌</label>
    <select id="category_id_1" name="category_ids[]">
        <option value="">请选择分类</option>
        <?php
        // 获取所有分类
        $categories = get_categories();
        foreach ($categories as $category) {
            echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
        }
        ?>
    </select>

    <label for="category_id_2">选择第二个分类：‌</label>
    <select id="category_id_2" name="category_ids[]">
        <option value="">请选择分类</option>
        <?php
        // 再次获取所有分类
        foreach ($categories as $category) {
            echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
        }
        ?>
    </select>

    <label for="category_id_3">选择第三个分类：‌</label>
    <select id="category_id_3" name="category_ids[]">
        <option value="">请选择分类</option>
        <?php
        // 第三次获取所有分类
        foreach ($categories as $category) {
            echo '<option value="' . $category->term_id . '">' . $category->name . '</option>';
        }
        ?>
    </select>

    <input type="submit" value="筛选文章">
</form>

PHP部分（‌处理表单提交并查询文章）‌：‌

<?php // 方法二：‌WordPress纯代码实现多分类筛选（显示分类让用户选择）（三个选择框）
// 引入WordPress环境（‌如果尚未引入）‌
if (!defined('ABSPATH')) {
    define('WP_USE_THEMES', false);
    require_once('../../../wp-load.php'); // 根据实际WordPress安装位置调整路径
}

// 检查表单是否已提交
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['category_ids'])) {
    // 从表单中获取分类ID数组
    $category_ids = $_POST['category_ids'];

    // 移除数组中的空值
    $category_ids = array_filter($category_ids);

    // 如果没有选择任何分类，‌则不显示任何内容
    if (empty($category_ids)) {
        echo '<p>未选择任何分类。‌</p>';
    } else {
        // 创建一个新的WP_Query对象来执行自定义查询
        $query = new WP_Query(array(
            'category__and' => $category_ids, // 使用category__and参数来指定必须同时满足的分类ID数组
            'posts_per_page' => -1, // 获取所有符合条件的文章
            'orderby' => 'date', // 按照文章发布日期排序
            'order' => 'DESC' // 降序排列
        ));

        // 检查是否有文章被查询出来
        if ($query->have_posts()) : ?>
            <ul>
                <?php // 开始循环输出文章
                while ($query->have_posts()) : $query->the_post(); ?>
                    <li>
                        <a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
                        <!-- 您可以在此处添加更多文章信息，‌例如发布日期、‌作者等 -->
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php else : ?>
            <p>未找到同时属于所有指定分类的文章。‌</p>
        <?php endif;

        // 重置文章数据
        wp_reset_postdata();
    }
}
?>

这样，‌用户就可以从三个下拉菜单中选择分类来筛选文章了。‌表单提交后，‌PHP代码会处理用户的选择，‌并执行相应的WordPress查询来显示结果。‌

方法三：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）

方法三是在方法二的基础上修改的

<!-- 这是上部份代码要和下部份代码组合使用 -->
<form method="post" action="">
    <!-- 方法三：‌使用复选框让用户选择分类来筛选文章 -->
    <label for="category_id_1">选择分类：‌</label>
    <?php
    // 获取所有分类
    $categories = get_categories();
    foreach ($categories as $category) {
        echo '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
        echo '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label><br>';
    }
    ?>
    <input type="submit" value="筛选文章">
</form>

<!-- 这是下部份代码要和上部份代码组合使用 -->
<?php // 方法三：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）
// 引入WordPress环境（‌如果尚未引入）‌
if (!defined('ABSPATH')) {
    define('WP_USE_THEMES', false);
    require_once('../../../wp-load.php'); // 根据实际WordPress安装位置调整路径
}

// 检查表单是否已提交
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['category_ids'])) {
    // 从表单中获取分类ID数组
    $category_ids = $_POST['category_ids'];

    // 移除数组中的空值
    $category_ids = array_filter($category_ids);

    // 如果没有选择任何分类，‌则不显示任何内容
    if (empty($category_ids)) {
        echo '<p>未选择任何分类。‌</p>';
    } else {
        // 创建一个新的WP_Query对象来执行自定义查询
        $query = new WP_Query(array(
            'category__and' => $category_ids, // 使用category__and参数来指定必须同时满足的分类ID数组
            'posts_per_page' => -1, // 获取所有符合条件的文章
            'orderby' => 'date', // 按照文章发布日期排序
            'order' => 'DESC' // 降序排列
        ));

        // 检查是否有文章被查询出来
        if ($query->have_posts()) : ?>
            <ul>
                <?php // 开始循环输出文章
                while ($query->have_posts()) : $query->the_post(); ?>
                    <li>
                        <a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
                        <!-- 您可以在此处添加更多文章信息，‌例如发布日期、‌作者等 -->
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php else : ?>
            <p>未找到同时属于所有指定分类的文章。‌</p>
        <?php endif;

        // 重置文章数据
        wp_reset_postdata();
    }
}
?>

方法四：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）（按层级排序）

方法四是在方法三的基础上修改的，实现层级排序

在WordPress中，‌分类（‌Categories）‌通常不具有内置的“一级”和“二级”之分，‌这样的层级结构更多地与自定义分类法（‌如标签或自定义类型）‌或页面层级结构相关联。‌然而，‌你可以利用分类的父子关系来实现类似的层级排序。‌

若要根据父子关系对分类进行排序，‌并在表单中以层级方式显示它们，‌你可以使用以下代码：‌

<!-- 方法四：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）（按层级排序） -->
<!-- 这是上部份代码要和下部份代码组合使用 -->
<form method="post" action="">
    <!-- 使用复选框让用户根据分类层级选择以筛选文章 -->
    <?php
    // 定义一个递归函数，‌用于按层级输出分类
    function display_categories_hierarchically($categories, $parent = 0, $level = 0) {
        foreach ($categories as $category) {
            if ($category->parent == $parent) {
                // 根据层级缩进
                echo str_repeat('&nbsp;&nbsp;', $level);
                echo '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
                echo '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label><br>';
                // 递归调用以显示子分类
                display_categories_hierarchically($categories, $category->term_id, $level + 1);
            }
        }
    }

    // 获取所有分类
    $categories = get_categories(array(
        'hide_empty' => 0, // 显示空分类
    ));
    // 调用函数并按层级显示分类
    display_categories_hierarchically($categories);
    ?>
    <input type="submit" value="筛选文章">
</form>

<!-- 这是下部份代码要和上部份代码组合使用 -->
<?php // 方法四：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）（按层级排序）
// 引入WordPress环境（‌如果尚未引入）‌
if (!defined('ABSPATH')) {
    define('WP_USE_THEMES', false);
    require_once('../../../wp-load.php'); // 根据实际WordPress安装位置调整路径
}

// 检查表单是否已提交
if ($_SERVER["REQUEST_METHOD"] == "POST" && isset($_POST['category_ids'])) {
    // 从表单中获取分类ID数组
    $category_ids = $_POST['category_ids'];

    // 移除数组中的空值
    $category_ids = array_filter($category_ids);

    // 如果没有选择任何分类，‌则不显示任何内容
    if (empty($category_ids)) {
        echo '<p>未选择任何分类。‌</p>';
    } else {
        // 创建一个新的WP_Query对象来执行自定义查询
        $query = new WP_Query(array(
            'category__and' => $category_ids, // 使用category__and参数来指定必须同时满足的分类ID数组
            'posts_per_page' => -1, // 获取所有符合条件的文章
            'orderby' => 'date', // 按照文章发布日期排序
            'order' => 'DESC' // 降序排列
        ));

        // 检查是否有文章被查询出来
        if ($query->have_posts()) : ?>
            <ul>
                <?php // 开始循环输出文章
                while ($query->have_posts()) : $query->the_post(); ?>
                    <li>
                        <a href="<?php echo get_permalink(); ?>"><?php echo get_the_title(); ?></a>
                        <!-- 您可以在此处添加更多文章信息，‌例如发布日期、‌作者等 -->
                    </li>
                <?php endwhile; ?>
            </ul>
        <?php else : ?>
            <p>未找到同时属于所有指定分类的文章。‌</p>
        <?php endif;

        // 重置文章数据
        wp_reset_postdata();
    }
}
?>

以下的代码是给方法四加样式，所以只改上部份代码，使用的时候和方法四的下部份

<!-- 方法四：‌WordPress纯代码实现多分类筛选（使用复选框让用户选择分类来筛选文章）（按层级排序） -->
<form method="post" action="">
    <!-- 使用复选框和层级缩进让用户选择分类以筛选文章 -->
    <div class="category-selector">
        <?php
        // 定义一个递归函数，‌用于按层级输出分类
        function display_categories_hierarchically($categories, $parent = 0, $level = 0) {
            foreach ($categories as $category) {
                if ($category->parent == $parent) {
                    echo '<div class="category-item" style="margin-left: ' . ($level * 20) . 'px;">';
                    echo '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
                    echo '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label>';
                    echo '</div>';
                    // 递归调用以显示子分类
                    display_categories_hierarchically($categories, $category->term_id, $level + 1);
                }
            }
        }

        // 获取所有分类
        $categories = get_categories(array(
            'hide_empty' => 0, // 显示空分类
        ));
        // 调用函数并按层级显示分类
        display_categories_hierarchically($categories);
        ?>
    </div>
    <input type="submit" value="筛选文章" class="submit-button">
</form>

<style>
.category-selector {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.category-item {
    margin-bottom: 5px;
}

.category-item label {
    font-weight: normal;
}

.submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #0056b3;
}
</style>

以下是这是竖排对齐样式

为了实现每个分类对齐的样式，‌我们可以使用CSS的padding-left属性来代替margin-left，‌并确保每个分类项都占据相同的宽度（‌如果需要的话）‌。‌下面是一个修改后的示例，‌其中每个分类项都会对齐，‌并且子分类会有适当的缩进：‌

<!-- 这是上部份代码要和下部份代码组合使用 -->
<form method="post" action="">
    <!-- 使用复选框和层级缩进让用户选择分类以筛选文章 -->
    <div class="category-selector">
        <?php
        // 定义一个递归函数，‌用于按层级输出分类
        function display_categories_hierarchically($categories, $parent = 0, $level = 0) {
            foreach ($categories as $category) {
                if ($category->parent == $parent) {
                    echo '<div class="category-item" style="padding-left: ' . ($level * 20) . 'px;">';
                    echo '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
                    echo '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label>';
                    echo '</div>';
                    // 递归调用以显示子分类
                    display_categories_hierarchically($categories, $category->term_id, $level + 1);
                }
            }
        }

        // 获取所有分类
        $categories = get_categories(array(
            'hide_empty' => 0, // 显示空分类
        ));
        // 调用函数并按层级显示分类
        display_categories_hierarchically($categories);
        ?>
    </div>
    <input type="submit" value="筛选文章" class="submit-button">
</form>

<style>
.category-selector {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.category-item {
    margin-bottom: 5px;
}

.category-item label {
    font-weight: normal;
    display: inline-block;
    width: calc(100% - 20px); /* Adjust width as needed */
}

.submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    width: 100%; /* Make submit button full width */
    box-sizing: border-box; /* Ensure padding is included in width */
}

.submit-button:hover {
    background-color: #0056b3;
}
</style>

在这个示例中，‌我调整了.category-item label的样式，‌使其成为一个inline-block元素，‌并设置了一个宽度，‌以确保所有标签都对齐。‌提交按钮也被设置为100%宽度，‌以适应其父容器的宽度。‌你可以根据需要调整这些样式，‌以达到你想要的布局效果。‌

以下是这是横排对齐样式

若您希望分类以横排并对齐的方式展现，‌可以利用CSS的display: inline-block或display: flex属性来实现。‌以下是一个示例，‌其中运用了display: flex来对齐分类，‌并确保它们在横排上整齐排列：‌

<!-- 这是上部份代码要和下部份代码组合使用 -->
<form method="post" action="">
    <!-- 用户可通过复选框选择分类以筛选文章，‌分类以横排对齐方式展示 -->
    <div class="category-selector">
        <?php
        // 定义一个递归函数，‌用于按层级以横排方式输出分类
        function display_categories_hierarchically($categories, $parent = 0, $flex_container = true) {
            if ($flex_container) {
                echo '<div class="flex-container">';
            }
            foreach ($categories as $category) {
                if ($category->parent == $parent) {
                    echo '<div class="flex-item">';
                    echo '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
                    echo '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label>';
                    echo '</div>';
                    // 递归调用以显示子分类，‌但不为子分类创建新的flex容器
                    display_categories_hierarchically($categories, $category->term_id, false);
                }
            }
            if ($flex_container) {
                echo '</div>';
            }
        }

        // 获取所有分类
        $categories = get_categories(array(
            'hide_empty' => 0, // 展示空分类
        ));
        // 调用函数并按层级以横排方式显示分类
        display_categories_hierarchically($categories);
        ?>
    </div>
    <input type="submit" value="筛选文章" class="submit-button">
</form>

<style>
.category-selector {
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 10px;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.flex-item {
    margin-right: 20px;
    margin-bottom: 10px;
}

.flex-item label {
    font-weight: normal;
}

.submit-button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #0056b3;
}
</style>

在此示例中，‌我运用了display: flex来创建一个灵活的容器，‌该容器内的项目会自动对齐并横排排列。‌每个分类项都被置于一个带有flex-item类的<div>中，‌并通过margin-right来设置它们之间的间距。‌提交按钮的样式与之前保持一致。‌您可以根据需要调整间距、‌对齐方式等样式。‌

仅显示指定分类ID及其子分类，‌并对它们进行横排显示

如果您想在表单中仅显示指定分类ID及其子分类，‌并对它们进行横排显示，‌您需要对PHP代码进行一些调整。‌以下是一个示例，‌该示例将显示指定分类ID（‌例如ID为5）‌的分类及其所有子分类，‌并以横排方式展示：‌

<!-- 这是上部份代码要和下部份代码组合使用 -->
<form method="post" action="">
    <!-- 用户可通过复选框横向选择指定分类ID及其子分类以筛选文章 -->
    <div class="category-selector">
        <?php
        // 定义一个递归函数，‌用于按层级输出分类
        function display_categories_hierarchically($categories, $parent = 0, $level = 0, $specified_id) {
            $output = '';
            foreach ($categories as $category) {
                if ($category->parent == $parent) {
                    // 如果是指定分类ID或其子分类，‌则进行显示
                    if ($category->term_id == $specified_id || $level > 0) {
                        $output .= '<div class="category-item" style="display: inline-block; margin-right: 20px;">';
                        $output .= '<input type="checkbox" id="category_id_' . $category->term_id . '" name="category_ids[]" value="' . $category->term_id . '">';
                        $output .= '<label for="category_id_' . $category->term_id . '">' . $category->name . '</label>';
                        $output .= '</div>';

                        // 递归调用以显示子分类
                        $output .= display_categories_hierarchically($categories, $category->term_id, $level + 1, $specified_id);
                    }
                }
            }
            return $output;
        }

        // 获取所有分类
        $categories = get_categories(array(
            'hide_empty' => 0, // 显示空分类
        ));
        // 调用函数并显示指定分类ID及其子分类
        echo display_categories_hierarchically($categories, 0, 0, 5); // 这里的5是指定的分类ID
        ?>
    </div>
    <input type="submit" value="筛选文章" class="submit-button">
</form>

<style>
.category-selector {
    /* 根据需要添加样式 */
}

.category-item {
    /* 根据需要添加样式，‌已设置为inline-block以实现横排 */
}

.submit-button {
    /* 根据需要添加样式 */
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

.submit-button:hover {
    background-color: #0056b3;
}
</style>

在这个示例中，‌display_categories_hierarchically函数现在会返回一个字符串，‌其中包含HTML输出。‌这个函数会检查每个分类，‌如果它是指定的分类ID或其子分类，‌就会将其添加到输出字符串中。‌子分类会通过递归调用该函数来显示。‌最后，‌使用echo将输出字符串打印到页面上。‌

发表回复