怎样让B2主题网址导航页面的子分类链接变成Tab筛选按钮，并添加全部分类功能

现在到处都是各种各样的网址导航站，什么AI导航、设计导航……放一堆乱七八糟点进去全是英文的网站

我们B2也有网址导航，但是我们的网址导航只有父分类可以筛选，而子分类是以a链接的形式存在

点一下子分类的名称，直接就跳到子分类的页面去了，别家的网址导航都可以筛选的

比如这样：

这次，我们从原来的基础上，在子分类链接前面加上了全部Tab筛选按钮，并把子分类链接也变成了Tab筛选按钮

默认是显示全部分类，点击右边的更多，会跳到父分类导航页面，里面会显示父分类包括子分类的所有链接

当我们点击子分类的筛选按钮，前端就只会显示子分类中的链接，然后点更多，会跳到子分类导航页面

这么一改，基本就和市面上的wordpress导航主题差不多了，一个页面顶一个主题哈哈

接下来上重点，如何实现

在B2子主题的functions.php文件中添加以下代码：

add_filter('b2_links_cat_settings', 'tcbdb_links_show_children_on_category');
function tcbdb_links_show_children_on_category($settings){
    if(is_tax('link_cat')){
        $settings['link_show_children'] = true;
    }
    return $settings;
}

在style.css文件中添加以下代码：

.child-link-cat {
gap: 6px;
flex-wrap: wrap;
}
.child-link-cat a,
.child-link-cat .cat-tab-item {
cursor: pointer;
transition: all 0.2s ease;
user-select: none;
font-size: 13px !important;
padding: 0 12px !important;
height: 28px !important;
line-height: 28px !important;
border-radius: 14px !important;
border: 1px solid transparent;
font-weight: normal !important;
}
.child-link-cat a:hover,
.child-link-cat .cat-tab-item:hover {
opacity: 0.85;
}
.child-link-cat .cat-tab-active {
background: var(--b2color) !important;
color: #fff !important;
border-color: var(--b2color) !important;
font-weight: 500 !important;
}
.child-link-cat .cat-tab-loading {
opacity: 0.6;
pointer-events: none;
}
.child-link-cat .cat-tab-loading::after {
content: '';
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid currentColor;
border-top-color: transparent;
border-radius: 50%;
animation: cat-tab-spin 0.6s linear infinite;
margin-left: 4px;
vertical-align: middle;
}
@keyframes cat-tab-spin {
to { transform: rotate(360deg); }
}
/* Tab切换时link-list淡入动画 */
.link-list {
transition: opacity 0.2s ease;
}

就这么简单，清除缓存刷新页面应该就能得到视频中一模一样的效果

因为我也是用的一模一样的方法，想实际体验一下移步我们的网址导航