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

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

bởi Thạch Phạm
30 bình luận 3330 views
Khuyến mãi hosting

https://www.youtube.com/watch?v=NAD9elEQ9HE

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

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.

30 bình luận

Có thể bạn quan tâm

0 0 vote
Article Rating
guest
30 Comments
mới nhất
cũ nhất đánh giá nhiều
Inline Feedbacks
View all comments

[…] Toàn bộ CSS trong phần này […]

lephuong

anh ơi tại sao e viết css cho menu ko được tất cả các cái khác đều ok mà chỉ riêng nav (menu). không nhận bất cứ css nào

Long Hoang

chào bạn. mình đã copy các code trong bài viết của bạn và làm theo hướng dẫn trong video nhưng cái Menu của mình chỉ ra như thế này thui : http://imgur.com/dCB48Lv
Bạn sữa giúp mình với. Thanks.

Nguyễn Mạnh Toản

Chào bạn, trong css của bạn bị thiếu thuộc tính chuyển menu nằm ngang

Thuy Nga

Anh @Thach Pham cho em hỏi với ạ. Em có xem trên wordpress codex thì thấy phần add script vào theme có thêm array(). Em vẫn chưa hiểu cái này lắm ạ. Khi nào mình phải thêm array vào hả anh

Thuy Nga

Hi Anh, Em cám ơn nhiều ạ. Có nghĩa là nếu các script nằm bên dưới script jquery và các script đó phải dựa vào jquery mới chạy được thì mình thêm array(jquery) với tất các các script ở dươi có đúng không anh Hay mình thê vào tất cả ạ

tran van dong

Chào anh Thạch
em làm hết bài này theo hướng dẫn của anh thì ra được cái menu như anh luôn, nhưng khi bỏ vào 1 trang wordpress mới thì nó mất cái khung menu chỉ hiện ra chữ như trước khi vào viết CSS. Như vậy là bị lỗi gì ạ.

le van binh

em hiểu vì sao menu ko hiện lên rồi–> đó các bạn lười ko chiều xem video và tự code.

nguyenmanhhung

e bị lỗi là đường link bị tràn ra ngoài thế này, vậy có cách nào để sửa không a.

cuongdx

mình cũng bị lỗi không thêm được ul nhưng khi bỏ dòng
‘theme_location’ => $slug,
thì lại hiển thị được.
bạn nào biết vì sao ko? và bỏ đi có vấn đề gì không?

tuấn anh

cho e hỏi, tại sao khi em copy css vào theme thì menu của em nó ko rộng ra mà nó co lại

Hưng

Bạn nào vẫn bị lỗi thì thêm dòng này vào cuối đoạn thử nhé
‘theme_location’ => $menu,
‘container’ => ‘nav’,
‘container_class’ => $menu,
‘items_wrap’ => ‘

%3$s

‘,
‘menu’ => ‘Empty Menu’

Hưng

http://pastebin.com/XCddvZum
Code html của em ạ.

Hưng
Hưng

nav class=”primary-menu” ul li class=”page_item page-item-1086″

Hưng

Anh Thạch ơi, em vẫn bị lỗi không apply class lên thẻ ul trong thẻ nav được. Đây là folder và file functions.php ạ! Anh giúp em nhé.
http://www.mediafire.com/download/0was211s322be92/wordpress1.rar
http://www.mediafire.com/download/lfb58bbcbrddpx3/functions.php
hiện trạng của em

<

ul>

Hưng

<!–

<

ul>–>

Hưng

Cảm ơn anh. Em thử thêm dòng ‘menu’ => ‘Empty Menu’ vào thì hiện ra class cho thẻ ul rồi anh ạ!

Khanh

Mình hiểu lí do vì sao một bạn làm mà menu không thay đổi gì, đó là do quên chọn cái primary menucomment image

Duy Thành

chào anh sao e chèn cái superfish vào theme và theme code vào function rồi mà ngoài index vẫn không hiện

Văn Sỹ

Chào a Thạch,

Sao em không hiển thị được cái SuperFish Menu nhỉ, em đã thực hiện giống như đúc các bước a làm, cuối cùng nó vẫn trơ trơ hiển thị menu default

Le Ha

Hi a Thạch
Cái file custom.js ở bài này chỉ có dòng lệnh kích hoạt SP thôi ạ, với file này đặt ở thư mục nào ạ? em cám ơn

Nguyễn Thành Hưng

Hi a Thạch,
e hỏi 1 câu không liên quan đến WP nhé: cái tool a dùng lúc copy superfish vào thư mục theme (1 dạng như total commander) là tool gì ấy nhỉ :D.

Nguyễn Thành Hưng

Thanks a nhiều :). Những tutorial của a rất hay 😀

30
0
Would love your thoughts, please comment.x
()
x