基于分类和标签的筛选小按钮实现
- 笔记
- 2024-01-16
- 127热度
- 0评论
问题起因
看到别人的博客有,我也想要这个功能。
但是主题里没写,没办法,只能寻求ai的帮助。
效果
主页的左边可以筛选!
解决方法
我想在左侧边栏加这个功能!
添加按钮
在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;
}
这里有个小插曲。一开始这个默认样式一直不生效,得到的背景一直是默认背景。
后来求助了万能的雪貂和泡泡,雪貂排查了以后发现是前面缩进的问题!
然后泡泡帮忙指出了样式颜色和间距的问题!非常的感谢!
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));
}
}
最后,大功告成!