• Hotline Phone
    0898 370 098
  • Giờ mở cửa
    T2 - CN 8h - 23h
  • Server
    HCM - Viet Nam

[Lập trình theme WordPress] Viết CSS cho theme – Phần 2

Bài này thuộc phần 15 của 20 phần trong serie Lập trình theme WordPress

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.

superfish-folder

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 cddos_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 cddos_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’, ‘cddos_styles’ );

Bên trong nội dung cddos_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 cddos_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 cddos_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’, ‘cddos_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 cddos_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ó:

laptrinhtheme-finish-superfish

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ả:

laptrinhtheme-finish-custommenu

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.

Số từ: 1205
Bản nháp được lưu lúc 22:19:41. Chỉnh sửa lần cuối ngày 9 Tháng Ba, 2015 lúc 12:00 sáng
Chuyển đổi bảng điều khiển: Đăng bài viết
Đăng bài viết
Xem trước (mở trong cửa sổ mới)
Trạng thái: Đã đăng Chỉnh sửa Chỉnh sửa trạng thái
Chế độ xem: Công khai Chỉnh sửa Chỉnh sửa độ rõ nét
Được đăng vào: Th3 9, 2015 @ 00:00 Chỉnh sửa Chỉnh sửa ngày tháng và thời gian
Readability: OK
SEO: Not available
Bỏ vào thùng rácCập nhật
Chuyển đổi bảng điều khiển: Định dạng
Định dạng
Định dạng bài viết Chuẩn
Đứng riêng
Hình ảnh
Đường dẫn
Trích dẫn
Trạng thái
Chuyển đổi bảng điều khiển: Chuyên mục
Chuyên mục
Tất cả chuyên mục Được sử dụng nhiều nhất
Blog Seo Top Make primary
Wordpress Development Make primary
Apache
Blog
Cáp Quang AAG
Child Category
Chuyện ngoài lề
Công cụ
Dịch Vụ
Domain – Hosting
Entertainment
Giải Pháp
Học Excel
Học Office
Học PowerPoint
Học Word
Hỏi Đáp Hosting
Hỏi Đáp Tên Miền
HTML/CSS
Hướng dẫn WordPress
Internet
Javascript
Khuyến Mãi
Kiến thức MMO
Kỹ Thuật Sử Lý
Linux Webserver
Mã giảm giá
Mã nguồn mở
Make Money Online
Mạng xã hội
Máy Chủ
New Technologies
Nginx
Our Portfolio
PHP
Review hosting
Seo
Social Media
SSL và bảo mật
Tài nguyên
Thông Báo
Thủ thuật
Tin Khuyến Mãi
Tin Tức CNTT
Tin Tức Tổng Hợp
Tuyển Dụng
Web Designs
Web Development
Web Tutorials
Wordpress
Wordpress Plugins
Wordpress Themes
+ Thêm chuyên mục
Chuyển đổi bảng điều khiển: Thẻ
Thẻ
Thêm thẻ

Thêm

Phân cách các thẻ bằng dấu phẩy (,).
Xoá term: jquery jqueryXoá term: superfish superfishXoá term: thiết kế theme thiết kế themeXoá term: video hướng dẫn video hướng dẫnXoá term: wordpress nâng cao wordpress nâng cao
Chọn từ những thẻ được dùng nhiều nhất
Chuyển đổi bảng điều khiển: Ảnh đại diện
Ảnh đại diện

Nhấn vào ảnh để sửa hoặc cập nhật

Xóa ảnh đại diện

Chuyển đổi bảng điều khiển: Yoast SEO
Yoast SEO
Help center
Go Premium
Content optimization
Enter a focus keyword to calculate the SEO scoreSocialAdvanced
Readability OK Enter your focus keyword + Add keyword
Snippet preview

Show information about the snippet editorYou can click on each element in the preview to jump to the Snippet Editor.
SEO title preview:[Lập trình theme WordPress] Viết CSS cho theme – Phần 2
Slug preview:https://cddos.net/lap-trinh-theme-wordpress-viet-css-cho-theme-phan-2/
Meta description preview: Th3 9, 2015 – Trong phần này, mình sẽ hướng dẫn tích hợp SuperFish Menu vào WordPress để có được một menu đa cấp có hiệu ứng đổ xuống nhanh nhất thay vì phải viết CSS thủ
Edit snippet
Focus keyword

Show information about the focus keywordEnter a focus keyword
This article is cornerstone content
Meta keywords

Enter the meta keywords
If you type something above it will override your meta keywords template.
Analysis

Show information about the content analysis
Bad SEO scoreNo focus keyword was set for this page. If you do not set a focus keyword, no score can be calculated.
Bad SEO scoreNo meta description has been specified. Search engines will display copy from the page instead.
OK SEO scoreThe images on this page contain alt attributes.
OK SEO scoreThe slug for this page is a bit long, consider shortening it.
Good SEO scoreThis page has 0 nofollowed outbound link(s) and 1 normal outbound link(s).
Good SEO scoreThis page has 0 nofollowed internal link(s) and 4 normal internal link(s).
Good SEO scoreThe text contains 1349 words. This is more than or equal to the recommended minimum of 300 words.
Good SEO scoreThe page title has a nice length.
Chuyển đổi bảng điều khiển: Revolution Slider Options
Revolution Slider Options
Choose Slide Template

Cảm ơn bạn đã khởi tạo với WordPress. Phiên bản 4.8
Link đã được chèn
Không tìm thấy gì cả.

Leave your comment