Hướng dẫn tạo Auto Fix Menu đẹp và chuyên nghiệp cho wordpress

Đúng là có cái khó thì ló cái khôn các bạn ah, trước giờ trình độ lập trình website bằng wordpress của cũng tàm tạm thôi, may mà có nhiều cơ hội được anh em tin tưởng giao làm vài cái website, cộng với việc vào Thạch Phạm nấu cháo nên có tiến bộ thêm 1 chút. Nói thật các bác chứ làm Marketer như mình thì việc công ty cũng túi bụi, tối tối mới cày thêm WordPress thôi. Chém gió tí ^^.

Tình hình là mình mới thiết kế thêm một website Du lịch Hàn Quốc  bằng wordpress, và tìm tòi giải quyết phần menu nên tìm hiểu thêm được cách tạo Auto Fix Menu rất đẹp, đẹp hơn và chuyên nghiệp hơn của Thạch Phạm nữa nên hôm nay xin viết bài hướng dẫn cho anh em. Top Menu của Thạch thì tự động load menu khi người dùng kéo trượt website xuống, nhưng cái hạn chế của Thạch là chỉ có thể đặt ở vị trí top. Còn nếu menu đặt sau phần logo thì sao? Auto Fix Menu này sẽ giải quyết được vấn đề đó, đặc biệt hơn bạn đã có hoặc đã tự tạo một giao diện Responsive rồi thì nó Menu Responsive vẫn có tác dụng.

Phù, kiếm 1 ly cafe, 1 gói thuốc lá để bắt đầu nào!

Bước 1: Backup

Có thể bạn nói bước này hơi thừa nhưng nếu website bị lỗi gì thì đừng kêu tớ nếu bạn không backup nhé. Nếu bạn lười thì chỉ cần backup dùm mình các file sau:

1. Đối với theme thông thường: backup file style.css, function.php là được.
2. Đối với ai dùng Thesis 2.1 : Backup file css.css và custom.php các bạn nhé.
3. Đối với ai dùng Genisis: Cũng backup file functions.php và style.css trong thư mục child-theme.

Bước 2: Chuẩn bị đồ nghề và code

Copy nội dung code jQuery bên dưới và đặt lại tên là autofix-menu.js nhé, sau đó upload lên thư mục js trong theme của bạn nhé, hoặc bạn có thể up vào bất cứ đâu miễn là nhớ nó.

JAVASCRIPTCopy

jQuery(document).ready(function ($) {

 var menu = $('#menu'),

 pos = menu.offset();

 $(window).scroll(function(){

 if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){

 menu.fadeOut('fast', function(){

 $(this).removeClass('default').addClass('fixed').fadeIn('fast');

 });

 } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){

 menu.fadeOut('fast', function(){

 $(this).removeClass('fixed').addClass('default').fadeIn('fast');

 });

 }

 });
});

Sau đó mở file function.php (hoặc custom.php cho Thesis 2), chèn vào, nhớ chỉnh sửa đường dẫn theo theme của bạn nhé.

PHPCopy

if (!is_admin()) {

add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
wp_register_script('autofix-menu', 'http://dulichhanquocgiare.com/wp-content/thesis/skins/classic-r/js/autofix-menu.js', false, null);

 wp_enqueue_script('autofix-menu');
}

}

Tiếp tục, các bạn mở file styles.css của theme (hoặc css.css của Thesis) chèn vào đoạn CSS sau:

CSSCopy

/***Fixed Menu JS**/

 .default {

 width: 850px;

 height: 50px;

 box-shadow: 0 5px 20px #888;

 -webkit-box-shadow: 0 5px 20px #888;

 -moz-box-shadow: 0 5px 20px #888;

 }
/* CSS3 position: fixed */

 .fixed {

 position: fixed;

 top: -5px;

 left: 0;

 width: 100%;

 box-shadow: 0 0 40px #222;

 -webkit-box-shadow: 0 0 40px #222;

 -moz-box-shadow: 0 0 40px #222;

 }

Tiếp theo, add thêm id=”menu” vào thẻ <div> chứa Menu của bạn. Nếu trong Thesis thì bước này vô cùng đơn giản, chỉ cần mở box Menu ra và thêm vào là xong, nhưng nếu bạn sử dụng theme thông thường thì có thể chèn thêm đoạn code sau vào function.php nhé:

PHPCopy

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'items_wrap' => '<div id="menu"><ul><li id="item-id"></li>%3$s</ul></div>' ) ); ?>

Bạn lưu ý ở tham số ‘theme_location’ thì có thể theme của bạn không phải là ‘primary’. Lúc này bạn có thể mò trong file functions.php, đoạn code tạo menu của nó để biết location nó tên gì.

Hoặc bạn có thể chèn thẻ div dạng html trong header.php nếu hàm menu của bạn đặt ở đó.

PHPCopy

<div id="menu"><?php wp_nav_menu(); ?></div>

Xong roài đấy, bạn có thể xem demo tại Du lịch Hàn Quốc giá rẻ.

Thật ra, mỗi theme có mỗi dạng Menu khác nhau nên các bạn nên ứng dụng linh hoạt các phần trong bài viết nhé. Cốt lõi chỉ có thêm js và css thôi. Rất đơn giản mà phải không? Nếu có vấn đề gì phát sinh các bác “khằm men” bên dưới nhá.

Chào đoàn kết và quyết thắng !!!