Bỏ qua đến nội dung chính

Làm thế nào để nạp JavaScript trên WordPress

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 901.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bạn có muốn tìm hiểu cách tải JavaScript trên WordPress không?

Bất kỳ chủ đề WordPress nào thường bao gồm các tệp PHP, HTML, CSS và JavaScript. JavaScript là một ngôn ngữ lập trình rất nổi tiếng trong số các nhà phát triển chủ đề WordPress. Đây là ngôn ngữ giúp trang HTML tương tác và cũng có thể cho phép bạn tương tác với máy chủ.

Biết cách sử dụng nó trên trang web của bạn sẽ là một lợi thế rất lớn.

Để thực sự sử dụng JavaScript, bạn cần biết cách tải nó trên trang web của mình.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

Làm thế nào để tải các tập lệnh JavaScript trên WordPress

Hãy lùi lại một bước và nhìn lại cách WordPress tải các tập lệnh và kiểu. Bạn đã biết rằng khi tạo tệp JavaScript, bạn có thể thêm chúng vào trang của mình trong phần đầu trang hoặc ở chân trang.

Khám phá hướng dẫn của chúng tôi về Cách nén các tệp CSS, HTML và Javascript của bạn

WordPress cũng làm điều tương tự, nhưng bạn không thể chỉ thả các thẻ script này vào tệp đầu trang hoặc chân trang của chủ đề WordPress của mình. WordPress sử dụng một cơ chế tải thông minh được gọi là " enqueueing '.

Cơ chế này là cần thiết để đưa ra ý nghĩa cho các phụ thuộc. Nếu bạn đang viết mã jQuery cho chủ đề WordPress của mình, thì bản thân jQuery phải được tải trước tiên.

Bạn viết mã dựa trên plugin jQuery. Trong trường hợp này, jQuery phải được tải trước, sau đó là plugin jQuery, sau đó là mã của bạn.

Cách "Enqueueing" Script (Thêm vào hàng đợi)

Bạn có thể thêm tập lệnh vào hàng đợi của chủ đề WordPress hoặc plugin WordPress của bạn. Đây là mã hoàn chỉnh để bao gồm một tập lệnh dựa trên jQuery:

my_theme_scripts của hàm () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Trước hết, một hàm phải là " nối Trên WordPress (Sử dụng Hooks WordPress). Đối số đầu tiên của hàm add_action () cho WordPress biết nơi các tập lệnh này nên được đặt:

  • Trên không gian công cộng
  • Trên bảng điều khiển

Nếu bạn sử dụng " Wp_enqueue_scripts Chúng sẽ được tải trên không gian công cộng, nếu bạn sử dụng " Admin_enqueue_scripts Chúng sẽ được tải trên bảng điều khiển.

Trong hàm « add_action Bạn có thể sử dụng " wp_enqueue_script Để thêm các kịch bản bạn cần. Hàm lấy một tham số bắt buộc và bốn tham số tùy chọn:

  • Tham số đầu tiên là tên của tập lệnh của bạn. Bạn có thể chọn những gì bạn muốn, nhưng hãy chắc chắn sử dụng một tên duy nhất.
  • Tham số thứ hai phải chứa vị trí của tệp trên chủ đề WordPress hoặc plugin WordPress của bạn.
  • Tham số thứ ba chứa một mảng các phụ thuộc. Trong ví dụ trên, tôi đã nói rằng jQuery là một phụ thuộc. Tất cả các phần phụ thuộc được tải trước tập lệnh được đề cập.
  • Tham số thứ tư là số phiên bản
  • Tham số thứ năm và cuối cùng cho biết bạn muốn tải tập lệnh trên đầu trang hay chân trang. Sử dụng "true" để tải ở chân trang hoặc "false" để tải tập lệnh trên đầu trang (bạn cũng không thể điền thông số này).

Phụ thuộc

WordPress cung cấp một bản sao của jQuery, đó là lý do tại sao bạn có thể thêm nó làm phụ thuộc mà không gặp bất kỳ rắc rối nào. Có một số tập lệnh và plugin jQuery khác mà WordPress cung cấp. Nếu mã của bạn phụ thuộc vào một trong số chúng, bạn không cần phải sử dụng một trong các bản sao của mình, bạn chỉ cần thêm nó làm phụ thuộc. đây là Danh sách các tập lệnh mà WordPress cung cấp.

Nếu bạn bao gồm nhiều tập lệnh độc lập, bạn có thể thêm chúng làm phụ thuộc theo cách giống hệt nhau. Hãy xem ví dụ dưới đây:

my_theme_scripts của hàm () {

 wp_enqueue_script ("my-base script", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Vì tập lệnh đầu tiên phụ thuộc vào jQuery, nên tập lệnh tiếp theo cũng phụ thuộc vào nó. Vì vậy, bạn không cần thêm jQuery làm phụ thuộc cho cả hai. Điều này làm cho quản lý phụ thuộc dễ dàng hơn.

Đang tải có điều kiện

Đôi khi bạn muốn sử dụng tập lệnh của mình trên mọi trang, nhưng thường thì bạn sẽ muốn tải tập lệnh trên một trang cụ thể. Điều này đặc biệt đúng khi xem xét thêm tập lệnh vào trang tổng quan. Một ví dụ điển hình là việc sử dụng các mã ngắn. Mã ngắn cho phép người dùng tạo hiển thị nâng cao trên trình soạn thảo văn bản trực quan bằng một vài thủ thuật đơn giản.

my_theme_scripts của hàm () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Chúng tôi đã lưu tập lệnh để WordPress tìm hiểu về tập lệnh, nhưng chúng tôi sử dụng " enqueue ". Theo cách này, tập lệnh chỉ được thêm vào trang nếu shortcode được sử dụng trên trang này.

Một phương pháp khác để tải script với các điều kiện là sử dụng các hàm có điều kiện. Nếu bạn muốn tải tập lệnh trên tất cả các trang lưu trữ của danh mục, bạn có thể sử dụng hàm is_category ().

Ví dụ: bạn có thể tạo băng chuyền hình ảnh mà người dùng có thể thêm vào bài viết như sau: [carousel ids = '42,124,123,331,90, XNUMX ′]. Một băng chuyền sẽ được tạo trên trang bài viết bằng cách sử dụng các hình ảnh được chỉ định bởi ID của họ.

Để làm điều này, bạn phải tạo một tập tin " carousel.js Đó là dựa trên jQuery. Đây là một mã để đến đó (Nó không tạo ra một băng chuyền, nhưng cho phép bạn xem quá trình tải xảy ra như thế nào):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts của hàm () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

Hàm my_carousel ($ args) {

 $ atts = shortcode_atts (mảng (

 'Id' => ",

 ), $ Atts, 'băng chuyền');

 wp_enqueue_script ('my-carousel');

 // Mã để hiển thị băng chuyền ở đây

}

Loại bỏ và thay thế các tập lệnh

Đây là một kịch bản phổ biến, nhưng đôi khi bạn có thể cần phải loại bỏ hoặc thay thế một tập lệnh. Tôi rơi vào tình huống trong đó một tập lệnh được thêm bởi một plugin (nhưng không được sử dụng bởi chủ đề) đã gây ra sự cố tương thích. "Rút tiền" là lựa chọn tốt nhất, vì lỗi đã hoàn toàn biến mất.

Bạn cũng có thể thay thế jQuery bằng một phiên bản mới hơn nếu bạn đang thử nghiệm thứ gì đó để đảm bảo rằng nó sẽ tương thích với các phiên bản mới hơn.

Trong những tình huống này, các chức năng wp_deregister_script () "Và" wp_dequeue_script () Rất hữu ích. Đây là cách chỉnh sửa mã đã được thêm vào WordPress.

my_theme_scripts của hàm () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

suy nghĩ cuối cùng

Phương pháp tải lên WordPress này rất tuyệt vì nó cho phép bạn thêm các tập lệnh của mình theo kiểu mô-đun. Điều này sẽ cho phép bạn đảm bảo rằng các phụ thuộc được thêm vào theo kiểu mô-đun.

Khám phá thêm một số plugin WordPress cao cấp  

Bạn có thể sử dụng các plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Gói Premium SEO

Premium SEO Pack là một plugin WordPress tối ưu hóa SEO của bạn và nén CSS để cải thiện tốc độ tải trang web của bạn.

Plugin cũng cho phép bạn quản lý thiết kế trang web của mình trong một vài cú nhấp chuột. Các tính năng của nó bao gồm: nén CSS và JS, tích hợp sơ đồ trang web đoạn mã và video, định dạng tệp HTML và XML, chuyển hướng trang 404 và 301, chia sẻ phương tiện truyền thông xã hội, cung cấp 'Nhãn ALT, bố cục có thể tùy chỉnh cao

Tải về | Bản demo | Web hosting

2. Bộ chọn thời gian giao hàng Woocommerce cho giao hàng

Woocommerce Delivery Time Picker for Shipping là một tiện ích mở rộng của WooCommerce cho phép khách hàng chọn ngày và giờ giao hàng trên trang thanh toán. 

Khách hàng sẽ có thể chọn thời gian giao hàng tại nhà. Thời gian giao hàng sẽ được hiển thị cho các quản trị viên của trang web và nó cũng sẽ được gửi qua e-mail đến các quản trị viên của trang web hoặc cửa hàng trực tuyến.

Tải về | Bản demo | Web hosting

3. đơn Anh hùng

Plugin này cho phép bạn tạo menu WordPress tùy chỉnh của riêng mình trong một vài bước khá dễ dàng. Đặc biệt, nó cho phép bạn dễ dàng và trực quan tạo một menu WordPress trang nhã và chuyên nghiệp. 

Từ menu mega phức tạp nhất có đầy đủ các tính năng, đến menu đơn giản nhất với menu thả xuống, plugin WordPress HeroMenu thiết lập bất kỳ loại menu nào và khởi động và chạy trong vài phút.

Về các tính năng mà nó cung cấp trong số các tính năng khác: hoạt động hoàn hảo trên PC, máy tính bảng và điện thoại thông minh, từ CSS tùy chỉnh để thêm các kiểu của riêng bạn vào menu, trình tạo megamothy, một số trình duyệt được hỗ trợ: Chrome, Firefox, Safari, Opera, IE9 và hơn thế nữa.

Tải về | Bản demo | Web hosting

Tài nguyên đề xuất

Kiểm tra các tài nguyên được đề xuất khác sẽ giúp bạn giải quyết các lỗi WordPress phổ biến khác. 

Kết luận

Đây là ! Đó là nó cho hướng dẫn này, tôi hy vọng nó đã giúp bạn hiểu cách tải JavaScript trên WordPress. Đừng ngần ngại chia sẻ nó với bạn bè của bạn trên mạng xã hội ưa thích. 

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress.

Nhưng trong lúc này, hãy cho chúng tôi biết về bạn ý kiến và đề xuất trong phần dành riêng.

...

Bài viết này chứa 1 bình luận

  1. Rất cám ơn về thông tin trên trang này:
    <>

    Tôi đã vật lộn với pcq trong một thời gian dài, tôi không bao giờ thấy các tập lệnh JS của mình trong bảng điều khiển của mình, vì đối số đầu tiên của add_action () được đặt thành wp chứ không phải admin.

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
13 cổ phiếu
cổ phiếu8
tweet2
Enregistrer3