Tạo menu chạy dọc website cho wordpress không dùng plugin

Bạn muốn tạo một menu cố định ở bên trái hoặc bên phải màn hình? Nếu bạn không rành về code, điều này có thể khá phức tạp. Đừng lo, tôi có thể giúp bạn! Hãy kéo xuống bên dưới để được hỗ trợ miễn phí. Hôm nay, tôi sẽ hướng dẫn bạn cách thực hiện điều này.

Table of Contents

Một số đặc điểm và lợi ích của menu chạy dọc website cho wordpress

Vị trí:

Thường nằm ở bên trái hoặc bên phải của trang.
Có thể cố định (sticky) hoặc cuộn cùng nội dung trang.

Chức năng:

Cung cấp khả năng điều hướng dễ dàng đến các phần khác nhau của trang web.
Hiển thị các danh mục, liên kết quan trọng.
Có thể chứa các tiện ích bổ sung như thanh tìm kiếm, thông tin liên hệ, hoặc các biểu tượng mạng xã hội.

Lợi ích:

Tăng cường trải nghiệm người dùng bằng cách cung cấp khả năng điều hướng trực quan.
Giúp người dùng dễ dàng truy cập nội dung mong muốn mà không cần cuộn lên đầu trang.
Tạo điểm nhấn trực quan cho trang web.
Phù hợp với những trang web có nhiều danh mục.

Hướng dẫn thêm menu chạy dọc website cho wordpress

1] Chèn code dưới vào functions theme đang dùng

function add_fixed_right_box_to_footer() {
  ?>
  <style>
    .box_fixRight {
        position: fixed;
        top: 150px;
        right: -115px;
        width: auto;
        transition: all 0.2s ease-in-out 0s;
        z-index: 999;
    }
    .box_fixRight .box_content {
        background: #fff;
        padding: 10px;
        box-shadow: 10px 0px 30px #888888;
        border-radius: 10px 0 0 10px;
    }
    .box_fixRight .box_content .item {
        display: block;
        padding: 13px 10px 13px 5px;
        color: #111;
    }
    .box_fixRight .box_content .item:hover{color:#184b9b}
    .box_fixRight:hover {
        right: 0;
        transition: all 0.2s ease-in-out 0s;
    }
	.box_content span {
	    margin-left: 20px;
	}
    @media (max-width: 549px){
        .box_fixRight{display:none}
    }
</style>
<div class="box_fixRight">
    <div class="box_content">
		<a href="https://f4vnn.com/" class="item item_1" rel="nofollow" target="_blank"> <img src="https://wpdev.io.vn/wp-content/uploads/2025/02/pc.png" alt="tips-pc"><span>TIPS PC</span></a>
		<a href="https://ngheketruyen.com/" class="item item_2" rel="nofollow" target="_blank"> <img src="https://wpdev.io.vn/wp-content/uploads/2025/02/audio-mp3.png" alt="truyen-ma"><span>TRUYỆN MA</span></a>
		<a href="https://www.youtube.com/@odaycohoa90" class="item item_3" rel="nofollow" target="_blank"> <img src="https://wpdev.io.vn/wp-content/uploads/2025/02/ytb.png" alt="youtube"><span>YOUTUBE</span></a>
    </div>
</div>
<?php
}

add_action( 'wp_footer', 'add_fixed_right_box_to_footer' );

2] Thay hình ảnh icon của menu

Tiếp theo là bạn tạo các icon phù hợp với mục đích của menu và thay thế vào code bên trên nhé.

Chúc bạn thành công! DEMO

Dev Wordpres