Viết CSS cho theme phần 2

[Lập trình theme WordPress] Thêm chức năng Theme Options

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.

Nguồn: Viết CSS cho theme phần 2 | Thạch Phạm

Categories: Content Marketing, Digital Marketing, Google Ads, Kinh doanh, PHP, SEO, Server - Hosting, WordPress, WordPress Development, Wordpress Plugin, WordPress Theme, Wordpress Tutorial,
Tags: baemin, bán hàng online, bán hàng online trên facebook, bán hàng qua facebook, bán hàng quần áo, bán hàng thời trang, bán hàng trên baemin, bán hàng trên facebook, bán hàng trên fanpage, bán hàng trên grab, bán hàng trên marketplace, bán hàng trên now, bán hàng trên tiktok, báo cáo kết quả hoạt động kinh doanh, bí quyết kinh doanh online, bít tết Âu việt, black friday, buôn bán hàng thùng, buôn bán hàng thùng tuyển chọn, cách bán hàng online đắt khách, cách bán hàng trên marketplace, cách bán hàng trên tiktok, câu chuyện kinh doanh, câu chuyện thành công, chương trình khuyến mãi, công nghệ phần mềm bán hàng, cửa hàng cafe, cửa hàng minh tuấn mobile, cửa hàng phụ kiện, cửa hàng thời trang, cửa hàng thực phẩm, cửa hàng thực phẩm sạch, doanh số bán hàng, dox garage & coffee, dox garage &amp; coffee, đăng ký bán hàng trên baemin, đăng ký bán hàng trên go food, đăng ký bán hàng trên grab, đăng ký bán hàng trên now, facebook, facebook pos, fanpage, file excel, file excel báo cáo kết quả kinh doanh, file excel quản lý kho, foodngon, go food, go jek, grab, halo mobile, khởi nghiệp, khởi nghiệp kinh doanh, khởi nghiệp kinh doanh thời trang, kinh doanh cafe, kinh doanh điện thoại, kinh doanh điện tử điện máy, kinh doanh đồ handmade, kinh doanh gì sau dịch, kinh doanh mỹ phẩm, kinh doanh mỹ phẩm online, kinh doanh nhà hàng, kinh doanh online, kinh doanh phụ kiện, kinh doanh quán cafe, kinh doanh shop thời trang, kinh doanh siêu thị mini, kinh doanh spa, kinh doanh thành công, kinh doanh thời trang, kinh doanh thời trang trẻ em, kinh doanh thực phẩm, kinh doanh thực phẩm sạch thành công, kinh doanh trên facebook, kinh doanh trên grab, kinh nghiệm bán hàng, kinh nghiệm kinh doanh, làm đồ handmade, lily shop, link kháng tài khoản quảng cáo, lụa tơ tằm bá minh, marketing online, mặt hàng dễ bán, mẹo bán hàng, mẹo bán hàng trên facebook, mẹo hay, ngày black friday năm 2020 là ngày nào?, now, now - foody, phầm mềm quản lý bán hàng miễn phí, phần mềm chốt đơn, phần mềm chốt đơn hàng, phần mềm miễn phí, phần mềm pos, phần mềm quản lý bán hàng, phần mềm quản lý bán hàng đáng tin cậy, phần mềm quản lý bán hàng miễn phí, phụ kiện ben & tony, phụ kiện ben &amp; tony, phụ kiện hà xinh, quán cafe hiệu quả, quản lý cửa hàng, quản lý cửa hàng thời trang, quản lý nhà hàng, quản lý nhân viên, quản lý nhân viên cứng đầu, quản lý nhân viên thời vụ, quảng cáo thương hiệu, shop thời trang, shopee, siêu thị minimart, status, status bán hàng, status quảng cáo mỹ phẩm, stella spa, stt bán hàng online hài hước, stt tương tác bán hàng, t.u.s shop, tài khoản bị vô hiệu hóa, tài khoản facebook, tài khoản facebook bị vô hiệu hóa, tải miễn phí file excel quản lý kho, tăng doanh thu mùa black friday, thời trang kosta, thời trang mine, thời trang tú trần shop, thực phẩm sạch, thực phẩm sạch 02, thực phẩm sạch tâm an, thuê mặt bằng kinh doanh, tiki, tiktok, tú trần shop,
7 nhà cung cấp host không nên dùng
Thiết lập Social cho WordPress SEO by Yoast
Tác giả

Bình luận

Leave a Message

Registration isn't required.

NguyenLp LarTheme