如何修改WordPress自带的侧边栏小工具样式

文
章
目
录

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 ) );
    }

其对应生成的小工具在页面代码如下：

<div class="widget widget_links"> 
   <div class="title"> 
    <h2> 首页友链</h2>
   </div> 
   <ul class="xoxo blogroll">
    <li><a href="https://code.panziye.com" target="_blank" rel="noopener noreferrer">Java项目源码</a></li> 
   </ul>
  </div>

而我只要生成的代码变为如下就可以实现我想要的效果：

<div class="widget widget_links">
   <div class="title">
    <h2><i class="fa fa-link"></i> 首页友链<span class="widget_line"></span></h2>
   </div> 
   <ul class="xoxo blogroll">
    <li><a href="https://code.panziye.com" target="_blank" rel="noopener noreferrer">Java项目源码</a></li> 
   </ul>
  </div>

也就是在标题前后各加一段带css样式的html代码即可。
于是潘老师对public function widget( $args, $instance )方法源代码中的$widget_links_args 数组中的title_before和title_after修改如下：

'title_before'     => $args['before_title'].'<i class="fa fa-link"></i> ',
'title_after'      => '<span class="widget_line"></span>'.$args['after_title'],

这样就在标题前和标题后加上了我想要加的html代码，其实你参考下wp_list_bookmarks方法的源码你会发现$args['before_title']默认值就是<h2>，而$args['after_title']的默认值就是</h2>，因此潘老师添加的代码位置正是我想要放的位置，最后将该文件覆盖即可。实现后具体效果如下：

链接小工具可以这样修改，其他的默认小工具也是类似，现在，潘老师终于可以愉快地和别人互换首页友情链接了！