Trong phần viết CSS trước, chúng ta đã làm qua các bước thêm những đoạn CSS cần thiết cho theme và chia cột theme như mong muốn. Tiếp tục trong phần này, mình sẽ hướng dẫn bạn làm tiếp CSS cho website để nó hiển thị tốt hơn, cụ thể hơn là trong bài này mình sẽ nói qua việc thêm CSS và Javascript để cái menu trên website của bạn được hiển thị đẹp hơn.
Trong khuôn khổ serie này, mình có thể sẽ không nói qua việc viết CSS làm sao để có một menu đổ xuống vì nếu hướng dẫn và giải thích nó rất dài dòng, mà không cẩn thận mình sẽ bị lái sang CSS làm nội dung của serie bị loãng đi. Do vậy trong serie này, mình sẽ hướng dẫn bạn tích hợp SuperFish Menu vào theme WordPress của bạn bằng cách chèn các đoạn Javascript và CSS của nó vào theme.
Tại sao lại dùng SuperFish Menu?
SuperFish Menu là một plugin dành cho jQuery giúp bạn làm được một menu đa cấp hỗ trợ hiệu ứng đổ xuống (dropdown menu) đơn giản nhưng hiển thị rất tốt, cũng như rất dễ sử dụng. Nếu bạn đã từng tự viết CSS cho cái menu thì sẽ thấy rằng quy trình này đôi khi rất vất vả nên thường là mình sẽ dùng các plugin dành cho jQuery hoặc các CSS Framework bên ngoài để làm cái menu.
Với SuperFish, bạn chỉ cần viết vài đoạn CSS thêm vào nếu muốn tùy biến lại màu sắc, bố cục của theme. Còn không thì cứ tích hợp đoạn script của nó vào website, khai báo class của SuperFish Menu vào theme là nó chạy ngon lành.
Các bước tích hợp SuperFish Menu vào WordPress
Trước hết, bạn hãy vào thư mục theme, tạo thêm một thư mục tên là js và một thư mục tên là css trong đó.
Sau đó hãy download bộ mã nguồn của SuperFish tại đây. Bạn giải nén ra sẽ thấy các thư mục tên là dist, example, src, test.
Các thư mục sau khi giải nén superfish-master.zip
Vào thư mục src trong đó sẽ thấy hai thư mục là css và js, bạn vào thư mục /src/css và copy file superfish.css vào thư mục css trong theme.
Sau đó vào thư mục /src/js và copy file superfish.js vào thư mục js trong theme. Và cũng trong thư mục js của theme, bạn tạo sẵn một file mang tên custom.js.
Sau khi chắc chắn trong theme đã có hai thư mục js và css, trong hai thư mục đó đã có các file của SuperFish thì chúng ta sẽ tiến hành chèn nó vào theme bằng cách sử dụng hàm thachpham_styles() mà chúng ta đã làm ở bước chèn CSS vào theme.
Bạn mở file functions.php ra, tìm đến phần này:
/**
@ Chèn CSS và Javascript vào theme
@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra ngoài front-end
**/
function thachpham_styles() {
/*
* Hàm get_stylesheet_uri() sẽ trả về giá trị dẫn đến file style.css của theme
* Nếu sử dụng child theme, thì file style.css này vẫn load ra từ theme mẹ
*/
wp_register_style( ‘main-style’, get_template_directory_uri() . ‘/style.css’, ‘all’ );
wp_enqueue_style( ‘main-style’ );
}
add_action( ‘wp_enqueue_scripts’, ‘thachpham_styles’ );
Bên trong nội dung thachpham_styles(), chúng ta khai báo thêm một số đoạn như sau để chèn hai cái file .css và .js của SuperFish vào:
/*
* Chèn các file CSS của SuperFish Menu
*/
wp_register_style( ‘superfish-css’, get_template_directory_uri() . ‘/css/superfish.css’, ‘all’ );
wp_enqueue_style( ‘superfish-css’ );/*
* Chèn file JS của SuperFish Menu
*/
wp_register_script( ‘superfish-js’, get_template_directory_uri() . ‘/js/superfish.js’, array(‘jquery’) );
wp_enqueue_script( ‘superfish-js’ );/*
* Chèn file JS custom.js
*/
wp_register_script( ‘custom-js’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );
wp_enqueue_script( ‘custom-js’ );
Và đây là toàn bộ nội dung của hàm thachpham_styles() sau khi theme:
/**
@ Chèn CSS và Javascript vào theme
@ sử dụng hook wp_enqueue_scripts() để hiển thị nó ra ngoài front-end
**/
function thachpham_styles() {
/*
* Chèn file style.css chứa CSS của theme
*/
wp_register_style( ‘main-style’, get_template_directory_uri() . ‘/style.css’, ‘all’ );
wp_enqueue_style( ‘main-style’ );/*
* Chèn các file CSS của SuperFish Menu
*/
wp_register_style( ‘superfish-css’, get_template_directory_uri() . ‘/css/superfish.css’, ‘all’ );
wp_enqueue_style( ‘superfish-css’ );/*
* Chèn file JS của SuperFish Menu
*/
wp_register_script( ‘superfish-js’, get_template_directory_uri() . ‘/js/superfish.js’, array(‘jquery’) );
wp_enqueue_script( ‘superfish-js’ );/*
* Chèn file JS custom.js
*/
wp_register_script( ‘custom-js’, get_template_directory_uri() . ‘/js/custom.js’, array(‘jquery’) );
wp_enqueue_script( ‘custom-js’ );
}
add_action( ‘wp_enqueue_scripts’, ‘thachpham_styles’ );
Bây giờ bạn hãy kiểm tra ngoài theme, nó đã có đầy đủ các file CSS và JS vừa chèn chưa nhé.
Tiếp tục, bạn tìm đến hàm thachpham_menu() trong functions.php, thêm một tham số vào biến mảng $menu như thế này (xem dòng in đậm):
$menu = array(
‘theme_location’ => $slug,
‘container’ => ‘nav’,
‘container_class’ => $slug,
‘items_wrap’ => ‘<ul id="%1$s" class="%2$s sf-menu">%3$s</ul>’,
);
Bởi vì SuperFish Menu cần cái thẻ <ul> đầu tiên trong menu sẽ có class là sf-menu để nó hiển thị CSS tốt nên tham số items_wrap trong hàm wp_nav_menu() sẽ cho phép thay đổi cấu trúc của thẻ <ul> đầu tiên.
Và cuối cùng là chèn đoạn sau vào file custom.js để kích hoạt SuperFish Menu.
jQuery(document).ready(function() {
jQuery(‘nav.primary-menu ul.sf-menu’).superfish();
});
Tuy nhiên có thể sẽ bị vỡ khung do cái menu có float, vì vậy chúng ta nên tiến hành clear float cho menu bằng pseudo class :after. Chèn đoạn sau vào file style.css:
/*—:[PRIMARY MENU]:—*/
.primary-menu:after {
display: table;
content: " ";
clear: both;
}
Kết quả ta có:
Kết quả sau khi chèn SuperFish Menu
Thêm một xíu CSS nữa là nó khác ngay:
.primary-menu ul{
border: 1px solid #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
}
.primary-menu ul li,
.primary-menu ul li ul li {
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
.primary-menu ul li a {
color: #f7f7f7;
border-top: none;
border-left: none;
}
.primary-menu ul li a:hover,
.primary-menu ul li.sfHover {
background: #555555;
}
.primary-menu ul li ul {
width: auto;
}
Kết quả:
Toàn bộ CSS trong phần này:
/*—:[PRIMARY MENU]:—*/
.primary-menu:after {
display: table;
content: " ";
clear: both;
}
.primary-menu ul{
border: 1px solid #000000;
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
width: 100%;
}
.primary-menu ul li,
.primary-menu ul li ul li {
-moz-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
-webkit-box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.2);
background: #565656;
background: -moz-linear-gradient(#565656 0%, #323232 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #565656), color-stop(100%, #323232));
background: -webkit-linear-gradient(#565656 0%, #323232 100%);
background: linear-gradient(#565656 0%, #323232 100%);
}
.primary-menu ul li a {
color: #f7f7f7;
border-top: none;
border-left: none;
}
.primary-menu ul li a:hover,
.primary-menu ul li.sfHover {
background: #555555;
}
.primary-menu ul li ul {
width: auto;
}
Lời kết
Vậy là dần dần theme của chúng ta cũng đã được dần hình thành rồi đó, làm xong cái menu thì coi như chúng ta đã bớt đi một gánh nặng mà đối với mình – khâu viết CSS cho menu là sợ nhất. Xong bước này là thấy khỏe rồi, và ở các phần kế tiếp chúng ta sẽ tiến hành viết cho các thành phần phụ bên trong website và cả WordPress nữa.
