Hi các bác!
Em là Onion Trần, hôm nay em sẽ hướng dẫn các các cách tạo một menu dropdown cho riêng mình bằng cách sử dụng Superfish jQuery, để em nói sơ qua về Superfish trước nhé. Superfish là một plugin jQuery giúp chúng ta tích hợp/sử dụng làm một dropdown menu một cách rất rât là dễ dàng, phù hợp với nhiều nhu cầu của nhiều đối tượng, từ người mới tìm hiểu đến các bạn thiết kế website.
Menu dropdown sử dụng SuperFish
Bài hướng dẫn của mình sẽ được thực hiện với 7 bước, mỗi bước ngốn của các bạn khoảng 2 phút, vì thế, với tut này, các bạn có thể hoàn thành trong khoảng 15p là xong tất cả, bác nào muốn đẹp đẹp một chút thì bỏ công, làm thêm công đoạn css cho đẹp đẹp 1 chút là được. Thế thôi nhé, làm nào!
1/ Download Superfish
Đâu tiên, việc gì cũng vậy, các bác đi cày phải có trâu, làm menu dropdown phải có superfish jquery, haha. Các bác click vào đây để download Superfish . Trong trang download, em khuyên các bác nên download file .zip, vì nó chứa tất cả các file cần thiết, với cả một điều rất quan trong nữa là: trong bài viết này em dùng file .zip, LOL.
Download superfish jquery – tải “cái cày” trước khi ra “ruộng”
2/ Sắp xếp các file vừa tải về
Các bác vào hosting, tạo 1 thư mục tên superfish, tạo thêm 2 thư mục con là css và js, thư mục superfish ngang hàng với theme hiện tại của các bác. Sau khi tải “đồ nghề” xong, các bác giải nén ra sẽ được thư mục superfish-master, điều hướng đến thư mục src chúng ta sẽ được 2 thư mục con là css và js, các bác copy file superfish.css và superfish-navbar.css vào thư mục css vừa tạo, copy superfish.js và supersub.js vào thư mục js vừa tạo. Các bác xem hình dưới
Sắp xếp file css và js vừa download về
3/ Gọi các file js và css vừa copy bằng wp_enqueue_scripts
Sau khi đã chuẩn bị đầy đủ “súng” và “đạn”, chúng ta sẽ tiến hành load nó ở phần header, để khi sử dụng ở các nơi khác thì chỉ cần gọi hàm thôi, không phải load đi load lại mãi. :).
Các bác copy/paste đoạn code sau đây vào file functions.php trong theme hiện tại của các bạn nhé.
add_action( ‘wp_enqueue_scripts’, ‘superfish_libs’ );
function superfish_libs()
{
// đăng kí những file js cần load ở header
wp_enqueue_script(‘superfish’, get_stylesheet_directory_uri() . ‘/superfish/js/superfish.js’);
wp_enqueue_script(‘supersubs’, get_stylesheet_directory_uri() . ‘/superfish/js/supersubs.js’);
// đăng kí những file css cần load ở header
wp_enqueue_script(‘superfish’, get_stylesheet_directory_uri() . ‘/superfish/css/superfish.css’);
wp_enqueue_script(‘supersubs’, get_stylesheet_directory_uri() . ‘/superfish/css/superfish-navbar.css’);
Các bạn có thể thấy, chúng ta vừa đăng kí “hộ khẩu” cho 4 file chúng ta vừa copy/paste xong, từ giờ trở đi, 4 file này sẽ có những phần đất để tự động load mà không cần can thiệp gì của chúng ta nữa. Các bác cũng có thể thấy là tại sao em không copy/paste luôn 2 file css vào file style.css, làm vậy chi cho khổ, thực ra, thứ nhất em muốn các file được bố trí gọn gàng, thứ hai khi cần chỉnh sửa, cứ vào thư mục này mà sửa, mỗi khi mở file style.css với khoảng 2000 dòng thì rất là choáng và không biết phải thế nào. Nếu không thích, muốn đỡ load cho site thì mở 2 file superfish.css và superfish-navbar.css ra, copy/paste toàn bộ nội dung trong đó vào style.css, sau đó chỉ xóa 2 dòng đăng kí load css đi là ok!.
Tiếp theo, công việc này đòi hỏi chúng ta thực sự khéo léo, rất rất khéo léo, đó là copy/paste tiếp ạ =)). Các bác mở file header.php của theme hiện tại ra, thêm dòng này ngay dưới dòng WP_HEAD()
<script type="swift/javascript">
jQuery(function($){
$(document).ready(function(){
// superFish
$(‘ul.sf-menu’).supersubs({
minWidth: 16, // minimum width of sub-menus in em units
maxWidth: 40, // maximum width of sub-menus in em units
extraWidth: 1 // extra width can ensure lines don’t sometimes turn over
})
.superfish(); // call supersubs first, then superfish
});
});
</script>
Bổ sung từ Thạch Phạm
Bạn có thể làm theo cách gọn mà an toàn hơn đó là lưu đoạn code trên thành một file có tên là superfish_wp.js và upload vào thư mục wp-content/themes/tên_theme_đang_dùng, sau đó chèn thêm đoạn code sau đây vào file functions.php (chèn dưới cuối hoặc đầu tiên, miễn là nằm trong <?php và ?>).
function add_superfish() {
wp_enqueue_script(‘superfish_wp’,bloginfo(‘template_directory’).’/superfish.js’,array(jquery));
}
add_action(‘wp_enqueue_scripts’,’add_superfish’);
4/ Tìm đến doạn cần hiển thị menu (hoặc nơi đang hiển thị menu)
Bước tiếp theo, khi các bạn đang ở file header.php, các bạn tìm đến đoạn hiển thị menu của các bạn, đa số là vậy, vì ở file header.php thường là nơi chứa đoạn code hiển thị menu, ở đây mình sử dụng theme mặc định là twentytwelve, và mình tìm được 1 đoạn thế này trong file header.php
<?php wp_nav_menu( array( ‘theme_location’ => ‘primary’, ‘menu_class’ => ‘nav-menu’ ) ); ?>
Như các bạn đã thấy, trong đoạn code trên, chúng ta có 1 mảng là array(..), trong đó:
- theme_location => primary : ở đây, primary là id của menu cần hiển thị
- menu_class => nav-menu: cái này quy định style cho menu sắp ra đời của chúng ta
Vì đã thay thế và không còn sử dụng kiểu cũ của menu wordpress nữa, chúng ta sẽ tiến hành thay class cho menu, bằng cách thay thế nav-menu bằng sf-menu
5/ Tạo menu bằng chức năng menus trong wp-admin
Như các bạn đã biết, từ khi đổi đời lên wordpress 3.0 đã có rất nhiều sự thay đổi, trong đó có một chức năng là menus. Chức năng này giúp các bạn tạo các menu như ý muốn bao gồm: trang, chuyên mục, custom post type hoặc external link.
Quay trở lại vấn đề, các bạn vào wp-admin > appearances > menus. Tại đây các bạn có thể tạo menu theo ý mình, các bạn xem hình sau sẽ rõ:
Tạo menus theo ý mình bằng WordPress Menus
6/ Chỉnh sửa CSS cho phù hợp.
Sau khi đã tạo được menus theo ý mình, các bạn sẽ thấy nó hiển thị ra trang chủ như thế này:
Ghê quá – xấu!. Đây là menu superfish khi chưa chỉnh sửa css
Vâng, nó đó các bạn, thành quả nãy giờ đó :), nhưng mà có vẻ…xấu, nhỉ?, vậy làm sao cho nó đẹp?. Chúng ta sẽ tiến hành tiếp công việc “nặng nhọc” từ đầu đến giờ =)).
Các bạn mở file superfish.css ra, tìm đoạn
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #13a;
}
.sf-menu li {
background: #BDD2FF;
}
thành
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/
color: #999; /*#13a;*/
}
.sf-menu li {
background: #ccc;/*#BDD2FF;*/
Tiếp tục tìm
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #CFDEFF;
outline: 0;
}
thay thế bằng
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
background: #eee;
outline: 0;
color: #111;
}
Và đây là thành quả
7/ Chốt
Qua bài viết này, mình hi vọng đã giúp các bạn tạo được một menu cho riêng mình mà không cần phải nhờ vả ai cả, dù gì thì cái gì của mình vẫn hơn. Ngoài ra cũng mong muốn giúp các bác có ít thời gian tìm hiểu wordpress có thể làm được những cái mình muốn, từ từ từng chút một, hôm nay menu, hôm sau post, hôm sau và cả hôm sau nữa, các bài viết của mình mang tính chất mì ăn liền, có thể áp dụng ngay, chúc các bạn vui!
