wordpress侧边栏小工具添加专题推荐列表 网站美化

看到有的网站上在侧边栏显示两列的专题推荐列表，效果很是美观，其实我们可以通过修改代码给自己的网站也添加这个功能，使用wordpress建站可以自己折腾修改也是一种乐趣儿。

1、首先修改CSS

在你的主题css文件后面添加如下代码：

/* 自定义专题推荐小工具样式 */ 
.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; }

2、修改侧边栏小工具：

比如DUX主题是widget-index.php，找到下面代码，在（）中的最后添加 'topics',添加“专题推荐”小工具。

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

3、创建widget-topics.php

新建一个Php文件，将以下代码填入并保存：

<?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="https://www.chukuangren.com/topic/tengxunyun/">直达专题</a> </li> 
<li class="ebox-i ebox-01"> <h4>阿里云</h4> <p>阿里云教程</p> <a class="btn btn-primary btn-sm" target="_blank" href="https://www.chukuangren.com/topic/aliyun/">直达专题</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目录中。

以上是在DUX主题中添加自定义专题推荐小工具的步骤和代码示例。如果您wordpress建站使用的是其他主题，也可以适当改变修改目标，总之方法是死的，应用是灵活的，您可以根据需要自定义专题和样式，并在WordPress小工具区域中添加此小工具以显示您的自定义内容。大家在修改前做好备份，如果出现什么情况可直接替换避免网站崩溃。

4、创建专题页

当然了，要显示专题首先你的网站要有专题页面，如果没有创建过专题，以上代码也可以用来做其他用途，比如做链接广告等等。