[Lập trình theme WordPress] Thêm CSS vào theme với wp_register_style [NEW]



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


/*
* |—:[Đ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
*/

WordPress sẽ căn cứ vào tên của từng dòng bình luận để lấy thông tin về một chủ đề. Và trong tập tin này, chúng ta cũng có thể viết CSS bên dưới mà không cần tạo một tập tin CSS riêng biệt.

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

Trong CSS, có một lý do rất quan trọng khi tạo các chủ đề đó là nên sử dụng hàm wp_enqueue_style() Điều này để nếu sau này bạn tạo một chủ đề con để nó tùy chỉnh, bạn có thể dễ dàng thay đổi tệp CSS bằng cách hủy (wp_deregister_style ()) mà không cần chạm vào mã của chủ đề mẹ.

Tham khảo: Chủ đề con và Chủ đề mẹ là gì

Vì vậy, vui lòng chèn mã này vào tệp functions.php:


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

Đầu tiên, bằng cách chèn tệp CSS này, tôi sẽ nối nó vào hook wp_enqueue_scripts() vì vậy tôi sẽ tạo một hàm riêng có tên là thachpham_styles()điều này sẽ có một chức năng đăng ký (Đăng ký) và đưa vào danh sách chờ gọi ra (enqueue) các tệp CSS mà tôi cần chèn vào chủ đề.

Trong hàm đó, tôi 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à, tôi sẽ đặt tên cho tệp CSS này main-styletham số sau có nghĩa là đường dẫn trỏ đến tệp style.css get_template_directory_uri() là một hàm trả về đường dẫn thư mục của chủ đề bạn đang sử dụng, sau đó nối nó với chuỗi /style.css Hãy để nó tải tệp này. Thông số all nghĩa là loại thiết bị có thể đọc tệp CSS này (ví dụ: screen, all, print,…).

Tiếp theo là dòng gọi ra:

wp_enqueue_style( ‘main-style’ );

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

Cuối cùng là cái móc wp_enqueue_scripts() sẽ có tác dụng đưa tất cả các tệp / tập lệnh trong danh sách chờ đến giao diện front-end.

Bây giờ lưu nó và vào trang web, nhấp vào xem nguồn để xem mã nguồn và tìm tệp style.css, nó hiển thị như thế này:

[Lập trình theme WordPress] Thêm CSS vào theme với wp_register_style [NEW]

Tìm hiểu thêm về chức năng in đường dẫn chủ đề

Như bạn thấy ở trên, tôi sử dụng hàm get_template_directory_url() và chức năng 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 như sau:

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

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

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

wp_dequeue_style(‘main-style’);

Ở trên, tôi đã đề cập đến chức năng get_stylesheet_uri(), hàm này sẽ trả về giá trị cho tệp style.css của chủ đề hiện tại mà bạn đang sử dụng. Điều này có nghĩa là nếu bạn sử dụng chủ đề con, nó sẽ tải tệp CSS của chủ đề con, vì vậy tệp style.css của chủ đề mẹ sẽ không được gọi.

Phần kết

Trong bài viết này, tôi chỉ muốn tập trung vào việc sử dụng các hàm kết xuất CSS như wp_register_style (), wp_enqueue_style () và wp_enqueue_scripts () để có thể chèn tệp CSS vào chủ đề của tôi một cách thông minh và linh hoạt. tốt nhất.

Trong bài tiếp theo, chúng ta sẽ đi qua phần quan trọng nhất đó là viết CSS cho theme của chúng ta.

Đánh giá nội dung này

Tiếp tục đọc trong bộ truyện