Tạo thanh liên hệ góc phải tuyệt đẹp cho website wordpress

Đầu tiên bạn cần tải ảnh theo 3 link dưới và upload lên website của bạn. sau đó chèn code này vào file functions.php trong child theme

<!-- Nuts contact -->
//https://kedma.vn/wp-content/uploads/2022/02/telephone.png
//https://kedma.vn/wp-content/uploads/2022/02/zalo_des.png
//https://kedma.vn/wp-content/uploads/2022/02/messenger.png


//contact
add_action('wp_footer','contact_bottom');
function contact_bottom(){ ?>
    <style>
        .fix-phone {
            position: fixed;
            bottom: 0;
            top: inherit !important;
            z-index: 9;
            right: 0;
            display: flex;
            flex-direction:column;
            border-top-left-radius: 20px;
            justify-content: center;
            align-items: center;
            background-color: transparent;
        }
      .ast-scroll-to-top-right{
        width: 53px !important;
        border-radius: 50% !important;
        height: 53px !important;
        bottom: 188px !important;
        right: 8px !important;
        }
/* 		.fix-phone:before {
            content: "";
            position: absolute;
            height: 15px;
            width: 20px;
            bottom: -1px;
            left: -20px;
            border-radius: 0 0 30px 0;
            box-shadow: 10px 0 0 0 #f53d2d;
            pointer-events: none;
        } */
        .phone-box, .zalo-box, .fb-box {
            width: 55px;
            height: 55px;
            line-height: 55px;
            border-radius: 30px;
            display: inline-block;
            border: 2px solid #f8f9fa;
            position: relative;
        }
        .phone-box{
            background: #4cd137;
        }
        .zalo-box, .fb-box{
            background: #00a8ff;
        }
        .phone-box img, .zalo-box img, .fb-box img {
            max-width: 55px;
        }
        .play0 {
            animation: play0 1.5s ease infinite;
        }
        .d-lg-block {
            display: block !important;
        }
        .ml-lg-1, .mx-lg-1 {
            margin-bottom: 0.25rem !important;
        }
        .m-auto {
            margin: auto !important;
        }
        .align-items-center {
            -webkit-box-align: center !important;
            -ms-flex-align: center !important;
            align-items: center !important;
        }
        .justify-content-center {
            -webkit-box-pack: center !important;
            -ms-flex-pack: center !important;
            justify-content: center !important;
        }
        .d-flex {
            display: -webkit-box !important;
            display: -ms-flexbox !important;
            display: flex !important;
        }
        .p-lg-2 {
            padding: 0.5rem !important;
        }
        .ml-lg-1, .mx-lg-1 {
            margin-bottom: 0.25rem !important;
        }
    </style>
    <div class="fix-phone p-1 p-lg-2" id="mb_bar">
    <a rel="nofollow" href="tel:0374865097" title="Gọi ngay" class="phone-box m-auto ml-lg-1 mr-lg-1 d-flex align-items-center justify-content-center">
        <img class="d-lg-block lazy play0 loaded" src="/wp-content/uploads/2022/03/telephone.png" alt="kedma" width="25" height="25">
    </a>
    <a rel="nofollow" href="tel:0374865097" title="Chat Facebook" target="_blank" class="fb-box d-flex m-auto ml-lg-1 mr-lg-1 align-items-center justify-content-center rounded-circle">
        <img class="dd-lg-block lazy loaded" src="/wp-content/uploads/2022/05/messenger.png" data-src="/wp-content/uploads/2022/05/messenger.pn" alt="kedma" width="25" height="25">
    </a>
    <a rel="nofollow" href="https://zalo.me/0374865097" title="Chat Zalo" target="_blank" class="zalo-box m-auto ml-lg-1 mr-lg-1 d-flex align-items-center justify-content-center">
        <img class="d-lg-block lazy loaded" src="/wp-content/uploads/2022/05/zalo.png" alt="kedma" width="25" height="25">
    </a>
</div>
<?
}

Sau đó chèn CSS vào file style.css và tận hưởng thành quả

span img { width:unset}
#sticky-nav {
    display: block;
    position: fixed;
    right: 0px;
    z-index: 997;
    top: 50%;
    transform: translateY(-50%);
}
#sticky-nav .sticky-item {
    background: #075E8E;
    overflow: hidden;
    border-bottom: 2px solid #075E8E;
    position: relative;
    display: block;
    width: 45px;
    margin: 0;
    outline-offset: -1px;
    -webkit-transition: width .6s ease-in-out;
    transition: width .6s ease-in-out;
    cursor: pointer;
    float: right;
    clear: both;
}
#sticky-nav .icon-sticky {
    vertical-align: middle;
    display: inline-block;
    text-align: center;
    width: 50px;
}
#sticky-nav .icon-sticky img {
    margin: 0 auto;
    width: 30px;
    height: 30px;
    margin: 10px;
    display: inline-block;
}
#sticky-nav .info-expanded {
    display: none;
    -webkit-transition: display .15s ease-in-out;
    transition: display .15s ease-in-out;
    color: #fff;
    font-size: 17px;
}
#sticky-nav .sticky-item:hover, #sticky-nav .sticky-item.active {
    width: 200px;
    background: #075E8E ;
    border-color: #075E8E ;
}
#sticky-nav .sticky-item:hover .info-expanded, #sticky-nav .sticky-item.active .info-expanded {
    display: block;
    position: absolute;
    width: 100%;
    height: 50px;
    top: 0px;
    line-height: 50px;
    padding-left: 50px;
    color: #fff;
    text-decoration: none;
}