Ví dụ tự viết theme cho wordpress: Thêm CSS bằng wp_register_style

Ví dụ tự viết theme cho wordpress: Thêm CSS bằng wp_register_style là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Ví dụ tự viết theme cho wordpress: Thêm CSS bằng wp_register_style sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và Wordpress nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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: hoidapcode Theme
 * Description: Đây là một theme đơn giản để thực hành
 * Version: 1.0
 * Theme Author: hoidapcode
 * Author URI: https://hoidapcode.com
 * Tags: starter theme, framework theme, two-columns, customize
 * Text-domain: hoidapcode
 */ 

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 hoidapcode_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', 'hoidapcode_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à hoidapcode_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:

Ví dụ tự viết theme cho wordpress: Thêm CSS bằng wp_register_style

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/hoidapcode 

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.

Hy vọng với bài viết về Ví dụ tự viết theme cho wordpress: Thêm CSS bằng wp_register_style đã giải đáp giúp bạn phần nào về kiến thức lập trình Wordpress. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!