也是一个很久之前网友想要的功能，一直没什么时间静下心来写，最近两天抽了点时间写下这篇文章希望能够帮助到同样需要这个功能的朋友。这个功能是DUX4.0版本开始加入的，当然网上也有一些其他教程，原理大致一样。前端显示效果如下：

下面来说一下具体实现方式：

首先我们需要获取WordPress后台的标题及分类描述，获取代码如下：

single_cat_title()          //获取当前分类标题
$description = trim(strip_tags(category_description()));          //获取当前分类描述

明白了当前分类页面的标题及描述的获取方式，其他WordPress主题也就可以简单实现这个功能了。下面我们可以参照 DUX 主题该功能的实现方式来设置自己主题该功能的实现。值得说明的是 DUX 主题还获取了当前分类页面的页码，实现方式如下：

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$pagedtext = '';
if( $paged && $paged > 1 ){
$pagedtext = ' <small>第'.$paged.'页</small>';
}

值得注意的是 $paged 是定义在了主题的 index.php 文件中的，因为主题有多个地方调用这个变量。后面的 $pagedtext 变量是控制页码显示及显示方式的。

好了，知道了元数据的获取方式，下面我们只需要将其显示出来即可。

 echo '<div class="catleader"><h1>', single_cat_title(), $pagedtext.'</h1>'.'<div class="catleader-desc">'.$description.'</div></div>';

使用上面这段代码替换掉主题原有的如下代码（大概在 category.php 文件中的70行左右的位置）即可：

echo '<div class="pagetitle"><h1>', single_cat_title(), '</h1>'.$pagedtext.'</div>';

如此一来前端即可显示当前分类的标题及描述，添加如下样式美化一下即可。

.catleader{background-color:#fff;border:1px solid #eaeaea;border-radius:4px;margin-bottom:15px;padding:15px 20px;}
.catleader h1{font-size:22px;margin:0;padding:0;line-height:1;border-left:5px solid #45B6F7;padding-left:10px;}
.catleader h1 small{color:#999;font-size:14px;position:relative;top:-2px;margin-left:5px;}
.catleader-desc{font-size:14px;color:#999;margin-top:10px;}
@media (max-width:640px){
.catleader{padding: 12px 15px 10px;margin-bottom: 5px;border: none;}
.catleader h1{font-size: 14px;font-weight: bold;}
.catleader-desc{margin-top: 5px;font-size: 12px;}
}

代码来源于大前端 DUX 主题，感谢原作者提供的代码。