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

这次主题修改的文件主要有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 '' . $title . '';
		echo '' . $code . '
';
		echo $after_widget;
	}

	public function form($instance)
	{
		$defaults = array('title' => '专题推荐', 'code' => '
	
		闲言碎语
		没错，就只是闲言碎语而已
		直达专题
	
	
		Tips
		各种IT相关小技巧收集整理
		直达专题
	
	
		Linux
		Linux系统及其周边常见问题全搜罗
		直达专题
	
	
		Windows
		全球最多用户使用系统常见问题搜罗
		直达专题
	
	
		WordPress
		一个注重美学、易用性和网络标准的个人信息发布平台
WP插件|WP主题|WP常见问题
		直达专题
		了解更多 
	

');
		$instance = wp_parse_args((array) $instance, $defaults);
		echo '' . "\r\n" . '' . "\r\n" . '主题名称：' . "\r\n" . ';
		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" . '' . "\r\n" . '
' . "\r\n" . '' . "\r\n" . '' . "\r\n".'	广告代码：' . "\r\n" . ';</span><span class="pln">
		echo $this</span><span class="pun">-></span><span class="pln">get_field_id</span><span class="pun">(</span><span class="str">'code'</span><span class="pun">);</span><span class="pln">
		echo </span><span class="str">'" name="'</span><span class="pun">;</span><span class="pln">
		echo $this</span><span class="pun">-></span><span class="pln">get_field_name</span><span class="pun">(</span><span class="str">'code'</span><span class="pun">);</span><span class="pln">
		echo </span><span class="str">'" class="widefat" rows="12" style="font-family:Courier New;">'</span><span class="pun">;</span><span class="pln">
		echo $instance</span><span class="pun">[</span><span class="str">'code'</span><span class="pun">];</span><span class="pln">
		echo </span><span class="str">'' . "\r\n" . '' . "\r\n" . '
' . "\r\n" . '';
	}
}
?>