Code nút liên hệ website wordpress

Với việc chúng ta cái 1 plugin sẽ rất tiện lợi nhưng nó sẽ không cho các bạn custom trên cái mãu sẵn đó ! nhìn nó không đẹp nên mình thấy code HTML và Css vào cho lẹ mà nhẹ hơn plugin 1 xíu thôi !

Trước tiên các bạn cài Plugin này của việt nam nhưng nó có đầy đủ tính năng bạn cần mà không cần code nhiều wp-extra nó sẽ giúp bạn chèn mã vào Footer Scripts và css nhanh chóng

Code liên hệ 1 mẫu máy tính và điện thoại

<div class="nav-social PC d-md-block d-none">
    <ul>
                    <li><a href="tel:0814621462" target=""><img src="https://zulihome.vn/wp-content/uploads/2022/12/Call.png"><br>Tổng đài</a></li>
                    <li><a href="https://www.facebook.com/messages/t/zulihome.com.vn" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/messenger-2.png"><br>Messenger</a></li>
                    <li><a href="https://zalo.me/2421753075440149504" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/Zalo.png"><br>Zalo</a></li>
                <li class="register">
            <a href="#lepopup-Form-dk-1" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/envelope.svg"><br>Đăng ký</a>
        </li>
        <li class="to-top-pc">
            <a href="#" id="back-top" rel="nofollow" style="display: none;"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br>Back top</a>
        </li>
    </ul>
</div>

Điện thoại

<!-- mobile-->
<div class="bottom-contact-mobile mobile d-md-none">
    <ul>
                    <li><a href="tel:0814621462">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-phone-mobile.png"><br>
            <span>Gọi điện </span></a></li>
                    <li><a href="sms:0974713186">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-sms-mobile.png"><br>
            <span>Nhắn tin</span></a></li>
                    <li><a href="https://zalo.me/2421753075440149504">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-zalo-mobile.png"><br>
            <span>Chat zalo</span></a></li>
                    <li><a href="https://m.me/zulihome.com.vn">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-mesenger-mobile.png"><br>
            <span>Messenger</span></a></li>
                <li class="to-top-pc">
            <a href="#" id="back-to-top" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br><span>Back top</span></a>
        </li>
    </ul>
</div>

Css :

.d-md-none {
    display: none;
}
.nav-social {
	position: fixed;
	right: 5px;
	background: #fff;
	border-radius: 5px;
	width: auto;
	z-index: 150;
	top: 220px;
	padding: 10px 0;
	border: 1px solid #f2f2f2;
}
.nav-social ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
	.nav-social ul li {
			border-bottom: 1px solid #d6d6d6;
			padding-bottom: calc( .6em - 5px );
            margin-bottom: .6em;
			list-style: none;
			text-align: center; }
            .nav-social ul li:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }
.nav-social ul li img {
                max-width: 25px;
                max-height: 20px;
                object-position: center;
                object-fit: contain;
            }
.nav-social ul li a {
				padding: 5px 12px 5px 12px;
				display: block;
				text-align: center;
				font-size: 11px;
				line-height: 15px;
				color: #000;
				font-weight: 400;
				max-width: 80px;
				max-height: 60px;
				text-decoration: none; }
.nav-social ul li img {
					margin-bottom: 10px;
				}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.PC {
display: none;
}
.bottom-contact-mobile {
	display: block;
	position: fixed;
	bottom: 0;
	background: white;
	width: 100%;
	z-index: 99;
	box-shadow: 2px 1px 9px #dedede;
	border-top: 1px solid #eaeaea;}
.bottom-contact-mobile ul {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0; }
.bottom-contact-mobile ul li {
			width: 20%;
            flex-basis: 20%;
			list-style: none;
			text-align: center;
			font-size: 13.5px; }
.bottom-contact-mobile ul li img {
				width: 25px;
                height: 20px;
                object-position: center;
                object-fit: contain;
				margin-top: 10px;
				margin-bottom: 3px;
			}
.bottom-contact-mobile ul li span {
				color: #000;
				font-size: 12px;
			}
}

Code đầy đủ

<div class="nav-social PC d-md-block d-none">
    <ul>
                    <li><a href="tel:0814621462" target=""><img src="https://zulihome.vn/wp-content/uploads/2022/12/Call.png"><br>Tổng đài</a></li>
                    <li><a href="https://www.facebook.com/messages/t/zulihome.com.vn" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/messenger-2.png"><br>Messenger</a></li>
                    <li><a href="https://zalo.me/2421753075440149504" target="_blank"><img src="https://zulihome.vn/wp-content/uploads/2022/12/Zalo.png"><br>Zalo</a></li>
                <li class="register">
            <a href="#lepopup-Form-dk-1" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/envelope.svg"><br>Đăng ký</a>
        </li>
        <li class="to-top-pc">
            <a href="#" id="back-top" rel="nofollow" style="display: none;"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br>Back top</a>
        </li>
    </ul>
</div>

<!-- mobile-->
<div class="bottom-contact-mobile mobile d-md-none">
    <ul>
                    <li><a href="tel:0814621462">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-phone-mobile.png"><br>
            <span>Gọi điện </span></a></li>
                    <li><a href="sms:0974713186">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-sms-mobile.png"><br>
            <span>Nhắn tin</span></a></li>
                    <li><a href="https://zalo.me/2421753075440149504">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-zalo-mobile.png"><br>
            <span>Chat zalo</span></a></li>
                    <li><a href="https://m.me/zulihome.com.vn">
            <img src="https://zulihome.vn/wp-content/uploads/2022/12/icon-mesenger-mobile.png"><br>
            <span>Messenger</span></a></li>
                <li class="to-top-pc">
            <a href="#" id="back-to-top" rel="nofollow"><img src="https://zulihome.vn/wp-content/themes/zulihome/assets/img/BackOnTop.png"><br><span>Back top</span></a>
        </li>
    </ul>
</div>

<style>
.d-md-none {
    display: none;
}
.nav-social {
	position: fixed;
	right: 5px;
	background: #fff;
	border-radius: 5px;
	width: auto;
	z-index: 150;
	top: 220px;
	padding: 10px 0;
	border: 1px solid #f2f2f2;
}
.nav-social ul {
        margin: 0;
        padding: 0;
        list-style: none;
}
	.nav-social ul li {
			border-bottom: 1px solid #d6d6d6;
			padding-bottom: calc( .6em - 5px );
            margin-bottom: .6em;
			list-style: none;
			text-align: center; }
            .nav-social ul li:last-child {
                padding-bottom: 0;
                margin-bottom: 0;
                border-bottom: 0;
            }
.nav-social ul li img {
                max-width: 25px;
                max-height: 20px;
                object-position: center;
                object-fit: contain;
            }
.nav-social ul li a {
				padding: 5px 12px 5px 12px;
				display: block;
				text-align: center;
				font-size: 11px;
				line-height: 15px;
				color: #000;
				font-weight: 400;
				max-width: 80px;
				max-height: 60px;
				text-decoration: none; }
.nav-social ul li img {
					margin-bottom: 10px;
				}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
.PC {
display: none;
}
.bottom-contact-mobile {
	display: block;
	position: fixed;
	bottom: 0;
	background: white;
	width: 100%;
	z-index: 99;
	box-shadow: 2px 1px 9px #dedede;
	border-top: 1px solid #eaeaea;}
.bottom-contact-mobile ul {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0; }
.bottom-contact-mobile ul li {
			width: 20%;
            flex-basis: 20%;
			list-style: none;
			text-align: center;
			font-size: 13.5px; }
.bottom-contact-mobile ul li img {
				width: 25px;
                height: 20px;
                object-position: center;
                object-fit: contain;
				margin-top: 10px;
				margin-bottom: 3px;
			}
.bottom-contact-mobile ul li span {
				color: #000;
				font-size: 12px;
			}
}
</style>

Lưu ý các bạn vào link đó tải hình xuống máy sau đó tải lên website của mình thay đường dẫn website của mình vào là được nhé

Mẫu 2 : Điện thoại

HTML chèn vào Footer Scripts

<div class="bottom-contact">
    <ul>
        <li>
            <a id="trangchu" href="https://igold.vn/">
                <img src="https://igold.vn/wp-content/uploads/2023/12/igold-1.png" alt="Trang chủ">
                <br>
                <span>Trang chủ</span>
            </a>
        </li>
        <li>
            <a href="#" data-open="#main-menu" data-pos="left" data-bg="main-menu-overlay" data-color="">
                <img src="https://igold.vn/wp-content/uploads/2023/12/igold-2.png" alt="Danh mục">
                <br>
                <span>Danh mục</span>
            </a>
        </li>
        <li>
            <a id="cuahang" href="/cua-hang">
                <img src="https://igold.vn/wp-content/uploads/2023/12/igold-3.png" alt="Cửa hàng">
                <br>
                <span>Cửa hàng</span>
            </a>
        </li>
        <li>
            <a id="giohang" href="/gio-hang/" data-open="#cart-popup" data-class="off-canvas-cart" title="Giỏ hàng" data-pos="right" class="">
                <img src="https://igold.vn/wp-content/uploads/2023/12/igold-4.png" alt="Giỏ hàng">
                <br>
                <span>Giỏ hàng</span>
            </a>
        </li>
        <li>
            <a id="backtotop" href="#top">
                <img src="https://igold.vn/wp-content/uploads/2023/12/igold-5.png" alt="Lên đầu"/>
                <br>
                <span>Lên đầu</span>
            </a>
        </li>
    </ul>
</div>

Css

Trên tất cả thiết bị bàn chèn code này để nó không hiển thị trên máy tính

.bottom-contact{display:none}

Còn này chèn vào thiết bị điện thoại

.bottom-contact {
    display: block !important;
    position: fixed !important;
    bottom: 0;
    background: white;
    width: 100%;
    z-index: 99;
    box-shadow: 2px 1px 9px #dedede;
    border-top: 1px solid #eaeaea;
}
.bottom-contact ul li {
    margin-bottom: 5px;
    width: 20%;
    float: left;
    list-style: none;
    text-align: center;
    font-size: 13.5px;
}
.bottom-contact ul li img {
    width: 22px;
    margin-top: 5px;
    margin-bottom: 3px;
    opacity: 0.6;
}
.bottom-contact ul li span {
    color: black;
    font-size: 12px;
}

Hãy để lại cảm nhận của bạn về bài viết này