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: onetidc Theme * Description: Đây là một theme đơn giản để thực hành Lập trình theme WordPress * Theme URI: https://onet.vn/serie/lap-trinh-theme-wordpress * Version: 1.0 * Theme Author: onetidc * Author URI: https://onet.vn * Tags: starter theme, framework theme, two-columns, customize * Text-domain: onetidc */
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 onetidc_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’, ‘onetidc_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à onetidc_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:
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:
http://domain.com/wp-content/themes/onetidc
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.