WordPress自身内置了许多侧边栏小工具，使用起来非常灵活方便，但是缺点就是想要修改其样式比较麻烦，这不，最近潘老师想在侧边栏新增个首页友链列表，但是使用链接小工具，效果就比较单调，具体如图：
而我的主题中的自定义小工具上的标题前都被潘老师加上了icon图标，还有移入移出渐变线的效果，因此我需要把链接这个小工具也加上该部分html代码来实现我的样式。
修改Wordpress自带的侧边栏小工具样式步骤
第1步：找到小工具类
WordPress的小工具类（我的Wordpress版本目前是5.4）在wp-includes/widgets目录下，具体如图：
于是潘老师找到links文件下载下来查看，做了如下修改：
其中的public function widget( $args, $instance )方法源代码如下：
public function widget( $args, $instance ) {
$show_description = isset( $instance['description'] ) ? $instance['description'] : false;
$show_name = isset( $instance['name'] ) ? $instance['name'] : false;
$show_rating = isset( $instance['rating'] ) ? $instance['rating'] : false;
$show_images = isset( $instance['images'] ) ? $instance['images'] : true;
$category = isset( $instance['category'] ) ? $instance['category'] : false;
$orderby = isset( $instance['orderby'] ) ? $instance['orderby'] : 'name';
$order = 'rating' === $orderby ? 'DESC' : 'ASC';
$limit = isset( $instance['limit'] ) ? $instance['limit'] : -1;
$before_widget = preg_replace( '/id="[^"]*"/', 'id="%id"', $args['before_widget'] );
$widget_links_args = array(
'title_before' => $args['before_title'],
'title_after' => '$args['after_title'],
'category_before' => $before_widget,
'category_after' => $args['after_widget'],
'show_images' => $show_images,
'show_description' => $show_description,
'show_name' => $show_name,
'show_rating' => $show_rating,
'category' => $category,
'class' => 'linkcat widget',
'orderby' => $orderby,
'order' => $order,
'limit' => $limit,
);
wp_list_bookmarks( apply_filters( 'widget_links_args', $widget_links_args, $instance ) );
}
其对应生成的小工具在页面代码如下：
程序员导航
优网导航旗下整合全网优质开发资源，一站式IT编程学习与工具大全网站
而我只要生成的代码变为如下就可以实现我想要的效果：
也就是在标题前后各加一段带css样式的html代码即可。
于是潘老师对public function widget( $args, $instance )方法源代码中的$widget_links_args 数组中的title_before和title_after修改如下：
'title_before' => $args['before_title'].' ', 'title_after' => ''.$args['after_title'],
这样就在标题前和标题后加上了我想要加的html代码，其实你参考下wp_list_bookmarks方法的源码你会发现$args['before_title']默认值就是<h2>，而$args['after_title']的默认值就是</h2>，因此潘老师添加的代码位置正是我想要放的位置，最后将该文件覆盖即可。实现后具体效果如下：
链接小工具可以这样修改，其他的默认小工具也是类似，现在，潘老师终于可以愉快地和别人互换首页友情链接了！
相关文章
