Kết nối với chúng tôi

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

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]

Sticky-Menu-Top

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ị.

Tạo menu cần hiển thị cố định

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.

Chọn location là PremiumCoding Menu để hiển thị menu

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

Thiết lập thông số của plugin

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.

Rate this post

Các bình luận

Đọc tiếp...
Bài viết liên quan...
2 bình luận

1 bình luận

Gửi bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Cùng chuyên mục Thủ thuật Website

Lên trên