Thêm tập lệnh WordPress

Khi bạn đang tạo chủ đề của mình, bạn có thể muốn tạo các biểu định kiểu hoặc tệp JavaScript bổ sung. Tuy nhiên, hãy nhớ rằng một trang web WordPress sẽ không chỉ có chủ đề của bạn hoạt động, nó cũng sẽ sử dụng nhiều plugin khác nhau. Để mọi thứ hoạt động hài hòa, điều quan trọng là chủ đề và plugin tải tập lệnh và biểu định kiểu bằng phương pháp WordPress tiêu chuẩn. Điều này sẽ đảm bảo trang web vẫn hoạt động hiệu quả và không có vấn đề không tương thích

Thêm tập lệnh và kiểu vào WordPress là một quá trình khá đơn giản. Về cơ bản, bạn sẽ tạo một chức năng sẽ liệt kê tất cả các tập lệnh và kiểu của bạn. Khi liệt kê một tập lệnh hoặc biểu định kiểu, WordPress sẽ tạo một tay cầm và đường dẫn để tìm tệp của bạn và bất kỳ phần phụ thuộc nào mà nó có thể có (như jQuery) và sau đó bạn sẽ sử dụng một hook sẽ chèn tập lệnh và biểu định kiểu của bạn

Cách thích hợp để thêm tập lệnh và kiểu vào chủ đề của bạn là xếp chúng vào hàng đợi trong các tệp functions.php. Tệp style.css được yêu cầu trong tất cả các chủ đề nhưng có thể cần phải thêm các tệp khác để mở rộng chức năng của chủ đề

Mẹo. WordPress bao gồm một số tệp JavaScript như một phần của gói phần mềm, bao gồm các thư viện thường được sử dụng như jQuery. Trước khi thêm JavaScript của riêng bạn,

những điều cơ bản là

1. Đưa vào hàng đợi tập lệnh hoặc phong cách bằng cách sử dụng wp_enqueue_script() hoặc 

   wp_enqueue_style( $handle, $src, $deps, $ver, $media );

   0

Biểu định kiểu CSS của bạn được sử dụng để tùy chỉnh cách trình bày chủ đề của bạn. Biểu định kiểu cũng là tệp lưu trữ thông tin về chủ đề của bạn. Vì lý do này, tệp style.css được yêu cầu trong mọi chủ đề

Thay vì tải biểu định kiểu trong tệp 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

2 của bạn, bạn nên tải nó bằng cách sử dụng 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

3. Để tải biểu định kiểu chính của bạn, bạn có thể đưa nó vào hàng đợi trong functions.php

Để xếp hàng style.css

wp_enqueue_style( 'style', get_stylesheet_uri() );

Thao tác này sẽ tìm một biểu định kiểu có tên là “phong cách” và tải nó

Chức năng cơ bản để xếp hàng một phong cách là

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Bạn có thể bao gồm các tham số này

• $handle chỉ đơn giản là tên của biểu định kiểu
• $src là vị trí của nó. Các thông số còn lại tùy chọn
• $deps dùng để chỉ việc biểu định kiểu này có phụ thuộc vào biểu định kiểu khác hay không. Nếu điều này được đặt, biểu định kiểu này sẽ không được tải trừ khi biểu định kiểu phụ thuộc của nó được tải trước
• $ver đặt số phiên bản
• $media có thể chỉ định loại phương tiện sẽ tải biểu định kiểu này, chẳng hạn như 'tất cả', 'màn hình', 'bản in' hoặc 'cầm tay'. ’

Vì vậy, nếu bạn muốn tải biểu định kiểu có tên “thanh trượt. css” trong thư mục có tên “CSS” trong thư mục gốc của chủ đề, bạn sẽ sử dụng

wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', false, '1.1', 'all');

Bất kỳ tệp JavaScript bổ sung nào theo yêu cầu của một chủ đề phải được tải bằng cách sử dụng 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

6. Điều này đảm bảo tải và lưu vào bộ nhớ đệm thích hợp, đồng thời cho phép sử dụng các thẻ có điều kiện để nhắm mục tiêu các trang cụ thể. Đây là tùy chọn

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

6 sử dụng cú pháp tương tự như 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

3

Xếp hàng tập lệnh của bạn

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

• $handle là tên của tập lệnh
• $src xác định vị trí của tập lệnh
• $deps là một mảng có thể xử lý bất kỳ tập lệnh nào mà tập lệnh mới của bạn phụ thuộc vào, chẳng hạn như jQuery
• $ver cho phép bạn liệt kê số phiên bản
• $in_footer là một tham số boolean (true/false) cho phép bạn đặt các tập lệnh của mình ở phần chân trang của tài liệu HTML thay vì ở phần đầu trang, để nó không làm chậm quá trình tải cây DOM

chức năng enqueue của bạn có thể trông như thế này

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true);

Nhận xét WordPress có khá nhiều chức năng ngay lập tức, bao gồm nhận xét theo chuỗi và biểu mẫu nhận xét nâng cao. Để nhận xét hoạt động chính xác, chúng cần một số JavaScript. Tuy nhiên, vì có một số tùy chọn nhất định cần được xác định trong JavaScript này, tập lệnh trả lời nhận xét sẽ được thêm vào mọi chủ đề cổ điển sử dụng nhận xét

Trong chủ đề khối, tập lệnh được bao gồm khi bạn đặt khối nhận xét. Bạn không cần phải thêm thủ công

Cách thích hợp để bao gồm câu trả lời nhận xét trong các chủ đề cổ điển là sử dụng các thẻ có điều kiện để kiểm tra xem có tồn tại một số điều kiện nhất định hay không, để tập lệnh không được tải một cách không cần thiết. Chẳng hạn, bạn chỉ có thể tải tập lệnh trên các trang bài đăng đơn lẻ bằng cách sử dụng 

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

9 và kiểm tra để đảm bảo rằng "Bật nhận xét theo chuỗi" được người dùng chọn. Vì vậy, bạn có thể thiết lập một chức năng như

if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
	wp_enqueue_script( 'comment-reply' );
}

Nếu người dùng bật nhận xét và chúng tôi đang ở trên trang bài đăng, thì tập lệnh trả lời nhận xét sẽ được tải. Nếu không, nó sẽ không

Tốt nhất là kết hợp tất cả các tập lệnh và kiểu được xếp vào hàng đợi vào một chức năng duy nhất, sau đó gọi chúng bằng cách sử dụng _______5_______0 hành động. Chức năng và hành động này phải được đặt ở đâu đó bên dưới thiết lập ban đầu (được thực hiện ở trên)

function add_theme_scripts() {
	wp_enqueue_style( 'style', get_stylesheet_uri() );

	wp_enqueue_style( 'slider', get_template_directory_uri() . '/css/slider.css', array(), '1.1', 'all' );

	wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), 1.1, true );

	if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
		wp_enqueue_script( 'comment-reply' );
	}
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Theo mặc định, WordPress bao gồm nhiều tập lệnh phổ biến thường được các nhà phát triển web sử dụng, cũng như các tập lệnh được chính WordPress sử dụng. Một số trong số họ được liệt kê trên trang tham khảo này

Danh sách còn lâu mới hoàn thành. Bạn có thể tìm thấy danh sách đầy đủ các tệp được bao gồm trong wp-includes/script-loader. php

Làm cách nào để thêm JavaScript vào WordPress mà không cần plugin?

Bạn có thể viết JavaScript trong WordPress không?