Thêm CSS vào theme với wp_enqueue_style

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

Khi ta tạo giao diện, chúng ta sẽ viết một số dòng comment vào file style.css để khai báo thông tin về theme như thế này:


/*
 * |---:[Đoạn này sẽ chứa các đoạn giới thiệu và thông tin về theme, như tên theme (Theme Name), tên tác giả (Theme Author), địa chỉ của tác giả (Author URI),...]:---|

 * Theme Name: ThachPham Theme
 * Description: Đây là một theme đơn giản để thực hành Lập trình theme WordPress
 * Theme URI: https://nguoivietweb.net/serie/lap-trinh-theme-wordpress
 * Version: 1.0
 * Theme Author: ThachPham
 * Author URI: https://nguoivietweb.net
 * Tags: starter theme, framework theme, two-columns, customize
 * Text-domain: thachpham
 */


WordPress sẽ căn cứ vào tên của từng dòng comment mà lấy thông tin của một theme. Và trong file này, chúng ta cũng có thể viết CSS vào bên dưới chứ không cần tạo ra một file CSS riêng.

Nhưng có một vấn đề là mặc định WordPress không có tự load file này lên theme, mà chúng ta phải chèn nó lên phần <head> của website. Để chèn file style.css lên phần <head> của website, bạn có thể viết code vào file header.php để nó load, nhưng mình nghĩ cách đó không hay cho lắm, mà chúng ta sẽ sử dụng một hàm tên là wp_register_style() để đăng ký file này vào danh sách “chờ gọi” của WordPress, sau đó dùng hàm wp_enqueue_sripts() để gọi nó ra giao diện một cách chuyên nghiệp hơn.

Trong CSS, có một lý do rất quan trọng khi làm theme mà nên sử dụng hàm wp_enqueue_style() là để sau này nếu bạn có tạo ra child theme cho nó để tùy biến lại thì có thể dễ dàng thay đổi file CSS bằng cách hủy bỏ (wp_deregister_style()) mà không đụng vào code của parent theme.

Tham khảo: Child Theme và Parent Theme là gì

Do vậy, bạn hãy chèn đoạn code này vào file functions.php nhé:


  /**
  @ 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' );

Trước tiên, do việc chèn file CSS này mình sẽ móc nó vào hook wp_enqueue_scripts() nên mình sẽ tạo ra một hàm riêng tên là thachpham_styles(), hàm này sẽ có chức năng đăng ký (register) và đưa vào danh sách chờ đợi gọi ra (enqueue) các file CSS mà mình cần chèn vào theme.

Trong hàm đó, mình sử dụng hàm wp_register_style() như sau:


wp_register_style( 'main-style', get_template_directory_uri() . '/style.css', 'all' );

Điều này có nghĩa là, mình sẽ khai báo cho cái file CSS này một cái tên là main-style, tham số phía sau nghĩa là đường dẫn trỏ đến file style.css mà get_template_directory_uri() là hàm trả về đường dẫn thư mục của theme bạn đang sử dụng, rồi nối với chuỗi /style.css để nó load file này ra. Tham số all nghĩa là loại thiết bị có thể đọc được file CSS này (ví dụ như screen, all, print,…).

Kế tiếp là dòng gọi ra:

wp_enqueue_style( 'main-style' );

Dòng này có nghĩa là, nó sẽ đưa cái file đã đăng ký ở phía trên vào danh sách chờ đợi bằng hàm wp_enqueue_style() và nó sẽ được nhận diện ra thông qua cái tên main-style mình đã đặt ở trên.

Cuối cùng là hook wp_enqueue_scripts() sẽ có tác dụng đưa tất cả các file/scripts trong danh sách chờ đợi lên giao diện ngoài front-end.

Bây giờ bạn hãy lưu lại rồi ra ngoài website, bấm view source để xem mã nguồn và tìm đến file style.css, nó đã hiển thị ra như thế này:

laptrinhtheme-finish-addstyle

Nói thêm về hàm in đường dẫn theme

Như bạn thấy ở trên, mình sử dụng hàm get_template_directory_url() và hàm này sẽ có tác dụng trả về đường dẫn thư mục theme hiện tại đang sử dụng. Nó sẽ trả về dữ liệu kiểu thế này:

https://domain.com/wp-content/themes/thachpham

Sau đó, mình nối hàm này với chuỗi '/style.css/' để ta có một đường dẫn tới file style.css hoàn chỉnh.

Tuy nhiên, có một yếu tố rất quan trọng mà mình cần cho bạn biết tại sao mình sử dụng hàm này vì nó có một hàm khác tiện hơn đó là get_stylesheet_uri() đó là nó vẫn sẽ gọi ra thư mục của parent theme nếu sau này bạn tạo một child theme cho nó. Mục đích là để CSS của theme không bị mất đi khi dùng child theme, nếu bạn muốn không load file style.css trong thư mục parent theme nữa thì có thể hủy bỏ đăng ký file này bằng đoạn sau trong file functions.php của child theme:

wp_dequeue_style('main-style');

Ở trên mình có nhắc qua hàm get_stylesheet_uri(), hàm này sẽ trả về giá trị đến file style.css của theme hiện tại bạn đang sử dụng. Điều này có nghĩa là nếu bạn sử dụng child theme thì nó sẽ load cái file CSS của child theme ra, thành ra file style.css của parent theme sẽ không được gọi.

Lời kết

Trong bài này, mình chỉ muốn tập trung vào việc sử dụng các hàm để hiển thị CSS như wp_register_style(), wp_enqueue_style() và wp_enqueue_scripts() để có thể chèn một tập tin CSS vào theme của mình một cách thông mình và mềm dẻo nhất.

Ở bài sau, chúng ta đi qua phần quan trọng nhất đó là viết CSS cho theme của mình.

Nguồn: Thêm CSS vào theme với wp_enqueue_style | 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,
Đánh giá A2Hosting – Dịch vụ host tốc độ cao và cách mua
Sửa cấu trúc permalink giữ nguyên thứ hạng
Tác giả

Bình luận

Jamesboymn

cure for ed https://canadaedwp.com best pills for ed

Leave a Message

Registration isn't required.

NguyenLp LarTheme