Sticky menu for WordPress – Tạo Menu cố định trong WordPress

Thời gian qua cũng có nhiều người hỏi về cách mình làm menu cố định màu xanh trên cùng website như thế nào và câu hỏi này được lặp đi lặp lại khá nhiều lần kể cả trên blog lẫn group BloggerVietnam. Thực ra thì muốn làm cũng có rất nhiều cách, nếu bạn là một coder thì có thể làm dễ dàng với hiệu ứng .fadeIn(), .fadeOut() bằng jQuery kèm theo một đoạn code đơn giản để hiển thị menu mà thôi.

Cách 1: Tích hợp thủ công ( cách này tuy phức tạp nhưng sẽ hiệu quá với tất cả các theme của WordPress):

1) Tạo một file javascript với nội dung dưới đây:

[php]
$(function(){
var stickyHeaderTop = $(‘#stickyheader’).offset().top;

$(window).scroll(function(){
if( $(window).scrollTop() > stickyHeaderTop ) {
$(‘#stickyheader’).css({position: ‘fixed’, top: ‘0px’});
} else {
$(‘#stickyheader’).css({position: ‘static’, top: ‘0px’});
}
});
});
[/php]

2) Lưu lại trong thư mục gốc của theme với tên: stickyheader.js

3) Chèn đoạn mã dưới đây vào functions.php:

[php]
do_action( ‘after_setup_theme’, ‘wpse101288_enqueue_script’ );

function wpse101288_enqueue_script() {
wp_register_script( ‘stickyheader’, get_template_directory_uri() . ‘/stickyheader.js’, array( ‘jquery’ ) );
}
[/php]

4) Bây giờ, bạn chỉ cần gọi hàm sticky để hiển thị menu theo của muốn thôi:

[php]</pre>
<div id="stickyheader">/* YOUR MENU CODE HERE */</div>
<pre>
[/php]

Cách 2: Sử dụng plugin

1. Tải plugin

Tải trực tiếp

Do tài khoản Codecanyon của mình liên tục bị Envato khóa nên plugin này hiện tại mình không còn quyền update bản mới nhất nữa nên mình chỉ còn giữ bản lúc mình tải về khi mới mua trên máy. Vì vậy, nếu bạn muốn nhận được update và support của tác giả thì nên mua luôn plugin này nhé vì cũng chỉ có $12 thôi.

2. Cài đặt và sử dụng

Sau khi cài đặt xong, bạn vào Appearance -> Menus tiến hành tạo một menu mới hoàn toàn và đưa các đối tượng vào menu mà bạn muốn nó sẽ hiển thị.

Nhớ ấn nút Save để lưu lại nhé. Tiếp theo, bạn nhìn bên tay phải sẽ thấy phần Location có một ví trí thêm mang tên WP PremiumCoding Menu, đó chính là vị trí hiển thị menu cố định, hãy chọn menu mà bạn vừa tạo bỏ vào đó và ấn Save để lưu.

Cuối cùng, bạn vào Settings -> WP Menu -> Main Settings và thiết lập các thông tin bắt buộc như ảnh

Các thông tin còn lại cũng cần bạn thiết lập nhưng bạn có thể thiết lập theo ý riêng của mình.
Sau khi thiết lập xong thì hãy ấn Save your setting để lưu lại và xem kết quả hiển thị. Nhớ xóa cache nếu bạn có bật.