基于分类和标签的筛选小按钮实现

问题起因

看到别人的博客有,我也想要这个功能。
但是主题里没写,没办法,只能寻求ai的帮助。

效果

file
主页的左边可以筛选!

解决方法

我想在左侧边栏加这个功能!

添加按钮

在template/index/sidebar-index-left.php中,原本只有文章导航这一项的。
现在总体改成:

<?php

/*
 * 左侧边栏内容
 * */

/*
 * 是否显示
 * */

if ( nicen_theme_showArticleCate() ) {?>
        <div id="space">
            <aside class="main-left" id="navigator">
                <div class='div-info recent'>

                <div class="main-top">
                    <ul>
                        <li class="active">标签筛选</li>
                        <!-- <li>修改记录</li>-->
                    </ul>
                    <i class="iconfont icon-daohang-caidan"></i>
                </div>
                        <form action="<?php echo home_url(); ?>" method="get" class="filter-form">
                                    <div class="category-buttons">
                                    <label>选择分类:</label>
                                    <?php
                                    $categories = get_categories();
                                foreach ($categories as $category) {
                                    echo '<button type="button" class="category-button" data-category_filter="' . $category->slug . '" data-state="off">' . $category->name . '</button>';
                                }
                            ?>
                            <input type="hidden" name="category_filter" id="category_filter" value="">
                            </div>

                            <div class="tag-buttons">
                                <label>选择标签:</label>
                                <?php
                                $tags = get_tags();
                                foreach ($tags as $tag) {
                                    echo '<button type="button" class="tag-button" data-tag_filter="' . $tag->slug . '" data-state="off">' . $tag->name . '</button>';
                                }
                                ?>
                                <input type="hidden" name="tag_filter" id="tag_filter" value="">
                            </div>

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

    <?php
    $catelog = nicen_theme_navigator();

    if ( ! empty( $catelog ) ) {

        ?>
                        <div class='div-info recent'>

                <div class="main-top">
                    <ul>
                        <li class="active">文章导航</li>
                        <!-- <li>修改记录</li>-->
                    </ul>
                    <i class="iconfont icon-daohang-caidan"></i>
                </div>
                <div class="scroll index-scroll">
                    <div class="line"></div>
                    <!--文章导航-->
                    <ul>
                        <?php echo $catelog; ?>
                    </ul>
                </div>
                        </div>
            </aside>
        </div>
        <?php
    }
}

添加样式

在样式表style.css中,添加这一段

/* 乌鸦自定义 */
.filter-form {
    margin-bottom: 20px;
}

.category-buttons, .tag-buttons {
    margin-bottom: 10px;
}

.category-button, .tag-button {
    display: inline-block;
    margin-right: 5px;
    padding: 2px 5px;
    font-size: var(--theme-text);
    background-color:#F0F0F0;
    color:var(--theme-text-color);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom:2px 0.5ex;
    margin:2px 0.5ex;
}

.category-button:hover, .tag-button:hover {
    background-color: #2980b9;
}

这里有个小插曲。一开始这个默认样式一直不生效,得到的背景一直是默认背景。
后来求助了万能的雪貂和泡泡,雪貂排查了以后发现是前面缩进的问题!
file
然后泡泡帮忙指出了样式颜色和间距的问题!非常的感谢!

php中添加筛选的功能

在include/themes/initialize.php中,添加下面的代码。


/*raven新增*/
function custom_modify_query($query) {
    // 检查是否为主查询以及是否在前台页面
    if ($query->is_main_query() && !is_admin()) {
        $tax_query = array();

        // 处理分类的查询
        if (!empty($_GET['category_filter'])) {
            $categories = explode(',', $_GET['category_filter']);
            $tax_query[] = array(
                'taxonomy' => 'category',
                'field'    => 'slug',
                'terms'    => $categories,
            );
        }

        // 处理标签的查询
        if (!empty($_GET['tag_filter'])) {
            $tags = explode(',', $_GET['tag_filter']);
            $tax_query[] = array(
                'taxonomy' => 'post_tag',
                'field'    => 'slug',
                'terms'    => $tags,
            );
        }

        // 如果有分类或标签的查询条件,则设置 tax_query
        if (!empty($tax_query)) {
            $query->set('tax_query', $tax_query);
        }

        // 输出查询条件,用于调试
        error_log(print_r($tax_query, true));
    }
}

最后,大功告成!