Thêm Script Vào Wordpress Bằng PHP

Trang chủ » Cách Thêm Jquery Vào Wordpress » Thêm Script Vào Wordpress Bằng PHP

Có thể bạn quan tâm

Có thể bạn quan tâm
  • Một số truy vấn hay dùng cho wordpress
  • Chia sẻ mẹo nhỏ để chặn comment spam trong WordPress
  • Hiển thị các bài viết trong cùng serial không dùng plugin
  • Chèn quảng cáo vào giữa bài viết trong wordpress
  • Đếm lượt xem bài viết không cần plugin – hỗ trợ cache – trong wordpress

Trong bài hôm nay chúng ta sẽ đi tìm hiểu làm cách nào để thêm file jQuery vào trong theme WordPress 1 cách chuẩn nhất. Bình thường chúng ta chèn trực tiếp file jQuery vào theme đúng  không nào? Nhưng đúng chuẩn WordPress thì chúng ra không nên chèn trực tiếp mà hãy thêm bằng wp_enqueue_script.

Với các thêm bằng wp_enqueue_script theme sẽ hoạt động tốt với tất cả các plugin đặc biệt là plugin hỗ trợ cache như wp super cache, wp rocket …

Hiểu về wp_enqueue_script và wp_register_script

2 hàm trên có các thông số y hệt nhau nhưng khác nhau ở chỗ. wp_enqueue_script sẽ gọi file script đó ra frontend nhưng wp_register_script chỉ là đăng ký file script đó chứ không include vào theme và không hiển thị ra ngoài frontend cho đến khi mình dùng hàm wp_enqueue_script để gọi nó ra.

Để duy trì blog nên mình có làm aff cho 1 số bên hosting. Nhưng dù aff mình cũng chọn 1 số nhà cung cấp uy tín về chất lượng và support nên các bạn cứ yên tâm nhé.

Nếu có mua hosting mà có trong list dưới đây các bạn click vào link trước khi mua để ủng hộ mình nhé. Mình cảm ơn nhiều

  • Azdigi: Giá rẻ thì dùng gói Pro Gold Hosting còn chất lượng hơn thì em khuyên dùng Business Hosting. Có điều kiện thì lên VPS nhé
  • Tino hosting
  • iNet
  • Nước ngoài thì Vultr

Các thông số của 2 hàm đó.

wp_enqueue_script( string $handle, string $src = ”, array $deps = array(),string|bool|null $ver = false, bool $in_footer = false )

Trong đó:

Kho plugin của tôi DevVN Reviews for Woocommerce DevVN Reviews for Woocommerce Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy Plugin mua hàng nhanh cho woocommerce – Woocommerce Quick buy Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK for Woocommerce Plugin kết nối giao hàng tiết kiệm với Woocommerce – GHTK for Woocommerce Plugin Kết nối Zalo OA với WordPress Plugin Kết nối Zalo OA với WordPress

$handle: là tên (hay là ID) của file script, thông số này là bắt buộc và duy nhất.

$src: Đường dẫn file script

$deps: Định dạng mảng. Chứa các tên của các file script bắt  buộc load trước khi tải file script của mình. Ví dụ file script của mình bắt buộc phải có thư viện jquery được load rồi mới đến file của mình thì để là array(‘jquery’)

$ver: là version của file script ví dụ để 1.0.0 hay 1.0.x hoặc x.x.x vvvv

$in_footer: thông số này để true hoặc false. Nghĩa là muốn để file script của mình được load trên <head> hay load dưới <footer> mặc định là false sẽ load trên head khi tải trang

Code PHP – functions.php

Chèn đoạn code sau vào file functions.php trong theme của bạn nhé.

Chú ý: Với cách này bạn đăng ký các file script trước (wp_register_script)  sau đó mới gọi nó ra (wp_enqueue_script) . Bạn hoàn toàn có thể gọi trược tiếp bằng hàm  wp_enqueue_script mà không cần tới  wp_register_script.

/* Đăng ký script có trong theme. */ add_action( 'wp_enqueue_scripts', 'theme_register_scripts', 1 ); function theme_register_scripts() { /* Đăng ký file script sẽ có trong theme */ wp_register_script( 'functions-js',esc_url( trailingslashit( get_template_directory_uri() ) . 'functions.js'), array( 'jquery' ), '1.0', true ); /* Localize Scripts - Phần này hiểu đơn giản là lấy giá trị script từ PHP */ $php_array = array( 'language' => get_bloginfo( 'language' ), 'URLhome' => get_bloginfo( 'home' ) ); wp_localize_script( 'functions-js', 'php_array', $php_array ); } /** Gọi file script. */ add_action( 'wp_enqueue_scripts', 'theme_enqueue_scripts' ); function theme_enqueue_scripts() { /* Gọi file script đã đăng ký ở trên */ wp_enqueue_script( 'functions-js' ); }

Sau khi chèn xong view code ta sẽ được như sau.

Mẫu website nổi bật của tôi Dự án website bán laptop surface Dự án website bán laptop surface Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp Mẫu website bán thiết bị nhà bếp, nhà tắm, thiết bị vệ sinh tuyệt đẹp Mẫu website bán hàng giống shopee Mẫu website bán hàng giống shopee Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy Mẫu website bán đồ gỗ, đồ thờ, đồ phòng thủy

Code jQuery – functions.js

thêm file với tên functions.js rồi thêm code sau vào. Lưu ngang hàng với functions.php nhé. Nếu để trong folder con thì thay lại đường dẫn lúc đăng ký script là được

// JavaScript Document (function($) { $(document).ready(function(){ console.log( php_array.language ); console.log( php_array.URLhome ); }); })(jQuery);

Đã xong. Đến đây bạn ra F5 lại trangg web rồi ấn F12 để kiểm tra nhé. kết quả đây…

Tìm hiểu thêm về wp_register_script

Chúc các bạn thành công ^^

3.7/5 - (9 votes) Từ khóa: hàm cơ bản, hàm wordpress, javascript Bài viết có ích cho bạn? Hãy chia sẻ ngay: Bài viết cùng chuyên mục
  • Code thêm nhanh hàng loạt ảnh cho biến thể sản phẩm trong WooCommerce
  • Chia sẻ code thêm nhanh thuộc tính trong Woo
  • Tối ưu sản phẩm tương tự trong Woo: chỉ lấy theo danh mục con sâu nhất
  • Cách ẩn cảnh báo nâng cấp PHP trong WordPress
  • Mẹo nhỏ để Lazy load iframe cho WordPress
Bài viết liên quan
  • Chia sẻ mẹo nhỏ để chặn comment spam trong WordPress
  • Một số đoạn script hữu dụng :D
  • Chèn quảng cáo vào giữa bài viết trong wordpress
  • Chỉ hiện thị admin bar với admin trong WordPress
  • Thêm nút next và previous vào trang single WordPress
  • Bình luận

Từ khóa » Cách Thêm Jquery Vào Wordpress