其他分享
首页 > 其他分享> > WordPress 底部新增固定联系方式

WordPress 底部新增固定联系方式

作者:互联网

源码扒于网络一平台,为WordPress 底部新增固定联系方式,具体样式可查看陈壶掌柜的网站:https://chenpot.com/tqn-chuanlu.html

   源码如下,在footer.php里加入以下代码:

<div class="qa_bottom">
    <a href="https://anxins.cn/l/dn2kptJ8Jo" target="_blank">
    <img src="https://chenpot.com/sy/weixin.png" alt=""> 加掌柜微信
        <i></i>
    </a>
    <a href="https://shop165668099.taobao.com/" target="_blank">
    <img src="https://chenpot.com/sy/taobao.png" alt="">
    逛淘宝店铺
    </a>
</div>
主题根目录style.css文件里加入以下代码:
.qa_bottom {
    position: fixed;
    height: 2.6rem;
    line-height: 2.6rem;
    background: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    border-top: 1px solid #f4f4f4;
    z-index: 800;
      font-size: 14px!important;
}
.qa_bottom a {
    flex: 1;
    text-align: center;
    position: relative;
    color: #444;
}
.qa_bottom a img {
    width: 1.4rem;
    vertical-align: middle;
    margin-right: 2px;
}
.qa_bottom a i {
    position: absolute;
    font-style: normal;
    width: 1px;
    background: #ededed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2.4rem;
    }
 

标签:bottom,联系方式,qa,width,WordPress,底部,rem,position,height
来源: https://www.cnblogs.com/liyucang/p/15214433.html