Chào mừng đến với bài viết mới của chúng ta! Hôm nay chúng ta sẽ tìm hiểu về cách tối ưu hóa CSS trong theme WordPress thông qua việc sử dụng wp_register_style
. Hãy cùng khám phá nhé!
Contents
Tạo file style.css
Đầu tiên, khi chúng ta tạo giao diện, chúng ta thường viết một số dòng comment vào file style.css
để khai báo thông tin về theme. WordPress sẽ dựa vào những dòng comment này để lấy thông tin về theme. Bạn cũng có thể viết CSS trực tiếp trong file này mà không cần tạo ra một file CSS riêng.
/*
* |—:[Đ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://thachpham.com/serie/lap-trinh-theme-wordpress
* Version: 1.0
* Theme Author: ThachPham
* Author URI: https://thachpham.com
* Tags: starter theme, framework theme, two-columns, customize
* Text-domain: thachpham
*/
Xử lý vấn đề load file CSS
Mặc định, WordPress không tự động load file CSS này lên theme, mà chúng ta phải chèn nó vào phần <head>
của website. Trong quá trình phát triển theme, bạn có thể viết code vào file header.php
để nó load, nhưng cách này không được tối ưu. Thay vào đó, chúng ta sẽ sử dụng hai hàm là wp_register_style()
và wp_enqueue_scripts()
để đăng ký và gọi file CSS ra giao diện một cách chuyên nghiệp hơn.
Sử dụng wp_register_style
Để đăng ký file style.css
của theme vào danh sách “chờ gọi” của WordPress, bạn có thể sử dụng hàm wp_register_style()
như sau:
function thachpham_styles() {
wp_register_style( 'main-style', get_template_directory_uri() . '/style.css', 'all' );
wp_enqueue_style( 'main-style' );
}
add_action( 'wp_enqueue_scripts', 'thachpham_styles' );
Ở đoạn code trên, chúng ta đã tạo một hàm riêng tên là thachpham_styles()
và sử dụng hàm wp_register_style()
để đăng ký file CSS vào danh sách chờ đợi. Tham số truyền vào hàm này bao gồm tên file (main-style
), đường dẫn tới file (get_template_directory_uri() . '/style.css'
) và loại thiết bị có thể đọc được file CSS này (all
).
Sau đó, chúng ta sử dụng hàm wp_enqueue_style()
để gọi file CSS đã đăng ký vào giao diện. Dòng này sẽ đưa file đã đăng ký vào danh sách chờ đợi và được nhận diện thông qua tên mà chúng ta đã đặt (main-style
).
Sử dụng wp_enqueue_scripts
Cuối cùng, chúng ta sử dụng hook wp_enqueue_scripts()
để đư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ờ, hãy lưu lại và kiểm tra mã nguồn trang web của bạn bằng cách nhấp chuột phải và chọn “View Source”. Điều này sẽ hiển thị file style.css
đã được gọi ra như sau:
Chú thích về hàm in đường dẫn theme
Bạn có thể thấy rằng chúng ta đã sử dụng hàm get_template_directory_uri()
để lấy đường dẫn thư mục của theme hiện tại. Chúng ta cần lưu ý rằng hàm này sẽ trả về thư mục của parent theme nếu bạn sử dụng child theme. Điều này nhằm mục đích giữ nguyên file CSS của theme khi sử dụng child theme. Nếu bạn muốn không load file style.css
của parent theme nữa, bạn có thể hủy bỏ đăng ký file này bằng đoạn mã sau trong file functions.php
của child theme:
wp_dequeue_style( 'main-style' );
Lời kết
Trong bài viết này, chúng ta đã tập trung vào việc sử dụng các hàm wp_register_style()
, wp_enqueue_style()
và wp_enqueue_scripts()
để chèn tập tin CSS vào theme một cách thông minh và linh hoạt nhất. Trên bài viết tiếp theo, chúng ta sẽ đi sâu vào việc viết CSS cho theme của chúng ta. Hãy cùng đón chờ nhé!
Tham khảo: Lập trình theme WordPress