Wordpress主题侧边栏添加加群小工具

RIPRO主题

1、找到wp-content/themes/ripro/assets/css/diy.css并将附件内的diy.css内容整体复制进去并保存

2、找到后台-外观-小工具-自定义HTML代码,加到合适侧边栏即可 ，标题可自定义

子比主题

CSS代码添加到后台子比主题设置—>自定义代码—>自定义CSS样式

后台设置—>外观—>小工具—>添加自定义 HTML 代码,加到合适侧边栏即可 

CSS

[CommentView]

/*加群小工具*/
.mobanweb-jiaqun h5 {
    font-size: 16px;
    line-height: 1.4;
}
.mobanweb-jiaqun-small {
    padding: 15px;
}
.mobanweb-jiaqun p {
    max-width: 80%;
}
.mobanweb-jiaqun {
    letter-spacing: .5px;
}
.mobanweb-jiaqun .btn {
    font-size: 13px;
}
.mobanweb-jiaqun .btn i {
    margin-right: 3px;
}
.mobanweb-jiaqun .helper-thumb {
    position: absolute;
    right: 0;
    bottom: 0;
}
.mobanweb-jiaqun-btn-on {
    color: #fff;
    background: #2c63ff!important;
    box-shadow: 0 3px 10px -1px #2c63ff!important;
    border: 0;
}
/*加群小工具*/

[/CommentView]

html代码

[CommentView]

<section class="mobanweb-jiaqun">
    <div class="mobanweb-jiaqun-small">
      <p>分享最新WordPress教程<br> 共同学习，共同进步，共同成长！</p>
      <a href="https://qm.qq.com/cgi-bin/qm/qr?k=8dgrnU7UE-ojXbxcmJ0Fx7axiEpwgZS6&authKey=T/jZeBKu96QJW+4Jt82jF2Kcqsk+kiDPontbn9mWpU0ZgQ956Yuog5x7mDwy8skO&noverify=0" class="btn mobanweb-jiaqun-btn-on" uk-toggle=""><i class="iconfont icon-qq"></i>QQ交流群</a>
      <div class="helper-thumb">
      <img src="https://www.ixiaojun.com/zb_users/upload/2023/06/202306071686139260918751.jpeg" alt="尘遇"> </div>
    </div>
  </section>

[/CommentView]