Anonim

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 tin vào chúng, hầu như mọi blog thứ 2 và mọi trang web thứ 4 dường như đang sử dụng CMS mạnh mẽ và thân thiện với người dùng nhất. Nhìn về đ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 để chuyển đổi trang web đơn giản và ngọt ngào của bạn thành một trang web CMS hiệu suất cao, phức tạp, mọi người đang bị mắc kẹt ở 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 tôi có được tệp JavaScript (.js) bên ngoài này làm việc trong chủ đề WordPress này? Bạn có phải là người hỏi cùng một câu hỏi? Vâng amigos, cuối cùng bạn đã ở đú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ài đặt xong WordPress và sẵn sàng với JS bên ngoài, hãy tham gia vào nhiệm vụ bao gồm tệp!

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 thực hiện là Twenty Sixteen của WordPress .

cảnh báo ('Xin chào');

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.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 để 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 bao gồm trong phần tiêu đề (bắt đầu) hoặc chân trang (cuối) của tệp. Mỗi mẫu / chủ đề có các hàm riêng.php, vì vậy 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ó khái quát hóa. Vì tôi lấy hai mươi mười sáu làm chủ đề, bên dưới là ảnh chụp nhanh về cách các hàm.php của tôi (được sử dụng để bao gồm các tệp). Bạn nên ở một mức độ nào đó giống như thế này:

Hàm wp_enqueue_script liên kết một tệp tập lệnh đến trang được tạo vào đúng thời điểm theo các phụ thuộc của tập lệnh, nếu tập lệnh chưa được đưa vào và nếu tất cả các phụ thuộc đã được đăng ký. Bạn có thể liên kết tập lệnh với một thẻ điều khiển đã đăng ký trước đó bằng hàm wp_register_script () hoặc cung cấp cho hàm này tất cả các tham số cần thiết để liên kết tập lệnh.

Wp_enqueue_script ($ handle, $ src, $ deps, $ ver, $ in_footer) có các thông số sau:

$ xử lý

(chuỗi) (Bắt buộc) Tên của tập lệnh.

$ src

(chuỗi | 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: sai

$ dep

(mảng) (Tùy chọn) Một mảng các thẻ được xử lý tập lệnh này phụ thuộc vào.

Giá trị mặc định: mảng ()

$ ver

(chuỗi | 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ộ đệm, và do đó nên được bao gồm nếu số phiên bản có sẵn và có ý nghĩa cho tập lệnh.

Giá trị mặc định: sai

$ in_footer

(bool) (Tùy chọn) Có nên ghi lại kịch bản trước đó không hoặc trước . Mặc định 'sai'. Chấp nhận 'sai' hoặc 'đúng'.

Giá trị mặc định: sai

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 tập lệnh của mình là Tập kiểm tra, hãy nhớ rằng thông số này ($ xử lý) KHÔNG nhất thiết phải là tên của tệp thực tế và tệp của tôi có phụ thuộc bên ngoài vào jquery và phiên bản là 1.0 và tải trước khi tải trang thì chức năng của tôi sẽ như sau:

wp_enqueue_script ('guide', get_template_directory_uri (). '/js/testrun.js', mảng ('jquery'), '1.0', false);

Nếu bạn để ý, tôi đã sử dụng get_template_directory_uri (), do đó, chuỗi được nối sau hàm, đó là một cái tên /js/testrun.js .

Vì vậy, thuộc tính $ src của bạn, là nguồn của tệp js của bạn trở thành: get_template_directory_uri (). 'Path_to_js_wrt_index_of_template'.

Do đó, các hàm.php cuối cùng trông giống như:

Giữ trong đó, chúng tôi gần như đã hoàn tất! Chỉ cần lưu cái này ngay bây giờ và nhấn refresh trên trang web của bạn, bạn sẽ thấy JS hoạt động! Đâ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 sẽ tải trước khi tải trang, nhưng sau khi JQuery được tải khi nó được thêm dưới dạng phụ thuộc!

Và Voila! Ở đây bạn đi .. Bạn đã bao gồm thành công một tệp JS tùy chỉnh bên ngoài trong chủ đề WP của bạn!

Chúc mừng mã hóa !!

Tham khảo: Chức năng Enqueue: Codex WordPress

Cách tốt nhất để thêm js bên ngoài tùy chỉnh vào wordpress là gì