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

Web前端 潘老师 3年前 (2021-08-11) 1438 ℃ (0) 扫码查看

WordPress自身内置了许多侧边栏小工具,使用起来非常灵活方便,但是缺点就是想要修改其样式比较麻烦,这不,最近潘老师想在侧边栏新增个首页友链列表,但是使用链接小工具,效果就比较单调,具体如图:
如何修改Wordpress自带的侧边栏小工具样式
而我的主题中的自定义小工具上的标题前都被潘老师加上了icon图标,还有移入移出渐变线的效果,因此我需要把链接这个小工具也加上该部分html代码来实现我的样式。

修改Wordpress自带的侧边栏小工具样式步骤

第1步:找到小工具类

Wordpress的小工具类(我的Wordpress版本目前是5.4)在wp-includes/widgets目录下,具体如图:
如何修改Wordpress自带的侧边栏小工具样式
于是潘老师找到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_beforetitle_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>,因此潘老师添加的代码位置正是我想要放的位置,最后将该文件覆盖即可。实现后具体效果如下:
如何修改Wordpress自带的侧边栏小工具样式
链接小工具可以这样修改,其他的默认小工具也是类似,现在,潘老师终于可以愉快地和别人互换首页友情链接了!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/3452.html
喜欢 (0)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】