文
章
目
录
章
目
录
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>
,因此潘老师添加的代码位置正是我想要放的位置,最后将该文件覆盖即可。实现后具体效果如下:
链接小工具可以这样修改,其他的默认小工具也是类似,现在,潘老师终于可以愉快地和别人互换首页友情链接了!