Trong bài học lập trình WordPress này mình sẽ hướng dẫn bạn cách tạo Auto Fix Menu chuyên nghiệp cho WordPress. Cùng chuẩn bị để làm nào!
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.
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:
- Đối với theme thông thường: backup file style.css, function.php là được.
- Đối với ai dùng Thesis 2.1 : Backup file css.css và custom.php các bạn nhé.
- Đố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ó.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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é.
|
1 2 3 4 5 6 7 8 9 10 |
if (!is_admin()) { add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11); function my_jquery_enqueue() { wp_register_script('autofix-menu', 'http://ten-website/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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/***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é:
|
1 |
<?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 ở đó.
|
1 |
<div id="menu"><?php wp_nav_menu(); ?></div> |
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 !!!
WordPress FAQ » Học WordPress > Lập trình WordPress
WordPress FAQ | Hoc WordPress | Su dung WordPress | Lap trinh WordPress | Plugin WordPress | Thuat ngu WordPress | Theme WordPress | Lap trinh Themes | Lap trinh plugin | WordPress API
