Theo tuyên bố của cộng đồng CMS hàng đầu, 25% internet đang sử dụng WordPress. Nhìn thấy xu hướng, chúng tôi không có lựa chọn nào khác ngoài việc tin tưởng họ, hầu như mọi blog thứ 2 và mọi trang thứ 4 dường như đều sử dụng CMS mạnh mẽ và thân thiện với người dùng nhất. Mong rằng điều này, mọi người và nhà phát triển đã bắt đầu chuyển trang web của họ sang nền tảng WordPress.
Với nỗ lực này để biến trang web đơn giản và ngọt ngào của bạn thành một trang web CMS phức tạp, có hiệu suất cao, mọi người đang gặp khó khăn trong một bước rất cơ bản và đặt câu hỏi: Đối với tình yêu, làm cách nào để lấy tệp JavaScript (.js) bên ngoài này làm việc trong chủ đề WordPress này? Bạn cũng là người hỏi cùng một câu hỏi? Vâng amigos, bạn cuối cùng cũng ở đúng nơi: Tôi ở đây để hướng dẫn bạn từng bước thông qua cách đơn giản nhất có thể để đạt được nhiệm vụ này!
Bây giờ giả sử bạn có WordPress tất cả được cài đặt và bắn lên với JS bên ngoài đã sẵn sàng, chúng ta hãy đi vào nhiệm vụ bao gồm các tập tin!
Lưu ý: Tôi đang sử dụng tệp sau (testrun.js) cho hướng dẫn này và chủ đề tôi đang làm là Twenty Sixteen của WordPress .
cảnh báo ('Hello'); Hãy bắt đầu nào!
Tất cả các tập lệnh và bảng định kiểu được tải từ bên trong hàm functions.php . Đây là cách chính xác để tải chúng trong WordPress để tránh xung đột với bất kỳ tập lệnh nào khác được tải bởi chính WordPress hoặc các plugin của bạn đang được sử dụng. Nếu bạn cho phép WordPress quản lý tất cả các tệp được bao gồm, thì bạn cần cho nó biết rằng bạn muốn tệp này được đưa vào phần đầu (đầu trang) hoặc chân trang (cuối) của tệp. Mỗi khuôn mẫu / chủ đề có hàm functions.php riêng của nó nên tên chính xác của các hàm bao gồm tất cả các tệp được đưa vào sẽ khó có thể khái quát hóa được. Vì tôi đang dùng mười hai mười sáu làm chủ đề, dưới đây là ảnh chụp nhanh về cách functions.php của tôi (được sử dụng để bao gồm các tệp). Của bạn nên đến một mức độ tương tự như thế này:
Hàm wp_enqueue_script liên kết một tệp kịch bản lệnh với trang được tạo vào đúng thời điểm tùy theo kịch bản phụ thuộc, nếu tập lệnh chưa được bao gồm và nếu tất cả các phụ thuộc đã được đăng ký. Bạn có thể liên kết một tập lệnh với một tay cầm đã đăng ký trước đó bằng cách sử dụng hàm wp_register_script () hoặc cung cấp hàm này với tất cả các tham số cần thiết để liên kết một tập lệnh.
Các wp_enqueue_script ($ xử lý, $ src, $ deps, $ ver, $ in_footer) mất trong params sau đây:
$ handle
(chuỗi) (Bắt buộc) Tên của tập lệnh.
$ src
(string | bool) (Tùy chọn) Đường dẫn đến tập lệnh từ thư mục gốc của WordPress. Ví dụ: '/js/myscript.js'.
Giá trị mặc định: false
$ deps
(mảng) (Tùy chọn) Một mảng các tay cầm đã đăng ký mà tập lệnh này phụ thuộc vào.
Giá trị mặc định: mảng ()
$ ver
(string | bool) (Tùy chọn) Chuỗi chỉ định số phiên bản tập lệnh, nếu có. Tham số này được sử dụng để đảm bảo rằng phiên bản chính xác được gửi đến máy khách bất kể bộ nhớ đệm, và do đó cần được bao gồm nếu số phiên bản có sẵn và có ý nghĩa đối với tập lệnh.
Giá trị mặc định: false
$ in_footer
(bool) (Tùy chọn) Cho dù để enqueue kịch bản trước hoặc trước. Mặc định 'sai'. Chấp nhận 'sai' hoặc 'đúng'.
Giá trị mặc định: false
Bạn có thể bỏ qua hàm wp_register_script () cho hướng dẫn này. Mục đích của chúng tôi là chỉ bao gồm một JS bên ngoài. Nó sẽ hoạt động tốt mà không có nó!
Do đó, nếu tôi muốn đặt tên cho kịch bản của mình là "test" hãy nhớ rằng tham số này ($ handle) KHÔNG nhất thiết phải là tên của tệp thực, và tệp của tôi có phụ thuộc bên ngoài trên jquery và phiên bản là 1.0 và tải trước khi tải trang sau đó chức năng của tôi sẽ như sau:
wp_enqueue_script ('hướng dẫn', get_template_directory_uri (). '/js/testrun.js', mảng ('jquery'), '1.0', sai);
Nếu bạn nhận thấy, tôi đã sử dụng get_template_directory_uri (), vì vậy, chuỗi được ghép nối sau hàm, đó là " /js/testrun.js " thực sự là đường dẫn của tệp wrt tệp chỉ mục của mẫu .
Vì vậy, thuộc tính $ src của bạn, là nguồn của tệp js của bạn sẽ trở thành: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.
Do đó, hàm functions.php cuối cùng trông giống như sau:
Giữ ở đó, chúng ta gần xong rồi! Chỉ cần lưu điều này ngay bây giờ và nhấn làm mới trên trang web của bạn ... bạn sẽ thấy JS làm việc! Đây là của tôi:
Vì chúng tôi đặt tùy chọn $ in_footer thành false, tập lệnh tải trước khi tải trang, nhưng sau khi JQuery được tải vì nó được thêm dưới dạng phụ thuộc!
Và Voila! Ở đây bạn đi .. Bạn đã thành công bao gồm một tập tin JS tùy chỉnh bên ngoài trong chủ đề WP của bạn!
Happy Coding !!
Tham khảo: Enqueue Chức năng: WordPress Codex
