今天在嗯哌网上看到一款专题推荐的小工具，自己很喜欢。随即学习了这款小工具并对其进行了简单的修改应用到了自己的网站上，前端显示效果如下图，大家如果喜欢的话可以按照下面的方法应用在自己的网站上。

这次主题修改的文件主要有main.css、widget-index.php以及添加的一个小工具文件widget-topics.php，大家在修改前做好备份，如果出现什么情况可直接替换避免网站崩溃。

main.css文件修改

DUX主题的核心CSS是main.css文件，不支持style.css文件，直接将下面代码复制到main.css文件末尾即可。对于其它主题可能只需要将CSS添加到style.css中即可，当然对于一些后台有输入CSS样式文本框选项的主题，直接复制以下代码添加到CSS样式文本框选项中也可。

    /* ebox =========================================== */
.ebox {
overflow:hidden;
font-size:12px;
text-align:center;
background-color:#fff;
}
.ebox-i {
position:relative;
float:left;
width:50%;
padding:15px 15px 20px;
background-color:#fff;
color:#777;
border-bottom:1px dashed #ddd;
}
.ebox-01,.ebox-03 {
border-right:1px dashed #ddd;
}
.ebox-i:hover {
background-color:#F9F9F9;
}
.ebox-100 {
width:100%;
margin-bottom:0;
border-bottom:none;
}
.ebox-i::after {
content:”;
position:absolute;
right:0;
top:0;
border-top:20px solid #ECF0F1;
border-left:20px solid transparent;
}
.ebox-i p {
height:36px;
overflow:hidden;
color:#bbb;
}

widget-index.php文件修改

widget-index.php是DUX管理各种小工具的一个文件，添加专题推荐小工具我们需要在文件的$widgets = array(）最后添加”topics”代码，编辑完成后的代码如下：

 $widgets = array(
'sticky',
'statistics',
'ads',
'textads',
'comments',
'posts',
'readers',
'tags',
'topics',
);

widget-topics.php文件编辑

新建一个记事本文件并更改文件名及扩展名为widget-topics.php，使用Notepad++编辑并添加如下代码。保存完成后上传至DUX主题widget目录下即可。

<?php
class widget_ui_topics extends WP_Widget
{
public function widget_ui_topics()
{
$widget_ops = array('classname' => 'widget_ui_topics', 'description' => '显示主题广告(包括富媒体)');
$this->WP_Widget('widget_ui_topics', '专题推荐', $widget_ops);
}
public function widget($args, $instance)
{
extract($args);
$title = apply_filters('widget_name', $instance['title']);
$code = $instance['code'];
echo $before_widget;
echo '<h3>' . $title . '<h3>';
echo '<div class="item">' . $code . '</div>';
echo $after_widget;
}
public function form($instance)
{
$defaults = array('title' => '专题推荐', 'code' => '<ul class="ebox">
<li class="ebox-i ebox-01">
<h4>闲言碎语</h4>
<p>没错，就只是闲言碎语而已</p>
<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/gossip/">直达专题</a>
</li>
<li class="ebox-i ebox-02">
<h4>Tips</h4>
<p>各种IT相关小技巧收集整理</p>
<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/tips/">直达专题</a>
</li>
<li class="ebox-i ebox-03">
<h4>Linux</h4>
<p>Linux系统及其周边常见问题全搜罗</p>
<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/linux/">直达专题</a>
</li>
<li class="ebox-i ebox-04">
<h4>Windows</h4>
<p>全球最多用户使用系统常见问题搜罗</p>
<a class="btn btn-primary btn-sm" target="_blank" href="http://blog.quietguoguo.com/wordpress/">直达专题</a>
</li>
<li class="ebox-i ebox-100">
<h4>WordPress</h4>
<p>一个注重美学、易用性和网络标准的个人信息发布平台<br>WP插件|WP主题|WP常见问题</p>
<a class="btn btn-danger btn-sm" target="_blank" href="http://blog.quietguoguo.com/wordpress/">直达专题</a>
<a class="btn btn-default btn-sm" href="http://blog.quietguoguo.com/">了解更多</a> 
</li>
</ul>
');
$instance = wp_parse_args((array) $instance, $defaults);
echo '<p>' . "\r\n" . '<label>' . "\r\n" . '主题名称：' . "\r\n" . '<input id="';
echo $this->get_field_id('title');
echo '" name="';
echo $this->get_field_name('title');
echo '" type="text" value="';
echo $instance['title'];
echo '" class="widefat" />' . "\r\n" . '</label>' . "\r\n" . '</p>' . "\r\n" . '<p>' . "\r\n" . '<label>' . "\r\n".'	广告代码：' . "\r\n" . '<textarea id="';
echo $this->get_field_id('code');
echo '" name="';
echo $this->get_field_name('code');
echo '" class="widefat" rows="12" style="font-family:Courier New;">';
echo $instance['code'];
echo '</textarea>' . "\r\n" . '</label>' . "\r\n" . '</p>' . "\r\n" . '';
}
}
?>

需要注意的是：如果你只是将widget-topics.php文件上传至widget目录下而没有在widget-index.php中添加上“topics”代码，刷新网站的时候会报500错误，所以一定要注意上述步骤及文件编码是否有误。