Hướng Dẫn Cách Thêm Css Và Javascript Vào Theme Wordpress
Có thể bạn quan tâm
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
Bài viết hướng dẫn có chứa CODE - Copy và sử dụng chúng sẽ tiện hơn cho bạn.Trong thiết kế web ngoài HTML thì Script bao gồm CSS và Javascript không thể thiếu nếu bạn có một thiết kế hoàn hảo đẹp mắt.
Đối với việc làm web bằng WordPress cũng vậy, mã nguồn mở này hỗ trợ rất tốt, cho phép chúng ta thêm các Script từ theme một cách dễ dàng thông qua các action. Cụ thể ở đây là action wp_enqueue_scripts.
Nội dung chính
1. Thêm Css, Javascipt, jQuery vào WordPress
Bạn có thể thêm đoạn code sau vào file functions.php trong theme đang dùng như sau:
add_action( 'wp_enqueue_scripts', 'wpshare247_register_scripts' ); function wpshare247_register_scripts() { //Css wp_enqueue_style( 'my_css_custom_1.css', get_theme_file_uri( '/myassets/css/my_css_custom_1.css' ), false, '1.0' ); wp_enqueue_style( 'my_css_custom_2.css', get_theme_file_uri( '/myassets/css/my_css_custom_1.css' ), false, '1.0' ); //Javascript, Thư viện jQuery wp_enqueue_script( 'my_custom_1.js', get_theme_file_uri( '/myassets/js/custom_1.js' ) , array(), '1.0', true ); wp_enqueue_script( 'my_custom_2.js', get_theme_file_uri( '/myassets/js/custom_2.js' ) , array(), '1.0', true ); }Giải thích:
//Các tham số wp_enqueue_script( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, bool $in_footer = false ); //Xem giải thích bên dưới- $handle: kiểu dữ liệu là String, id của script, tiếng việt không dấu, không trùng với các script khai báo trước đó.
- $src: kiểu dữ liệu là String, đường dẫn tới file script hoặc css, ví dụ: https://wpshare247.com/wp-content/themes/wpshare247/dev/enqueue/js/main.js
- $deps: kiểu dữ liệu là mảng Array, cho phép chúng ta nhúng thêm một số $handle đã đăng ký trước đó.
- $ver: kiểu dữ liệu là String hoặc true|false hoặc null, cho phép khai báo phiên bản version của js hoặc css
- $in_footer: kiểu dữ liệu là true|false, mặc định là false, nếu true các script sẽ xuất hiện bên dưới footer.
Nói thêm về $src, có nhiều cách thể trỏ tới các file css, js trong theme. Trước tiên bạn cần phải thêm các file đó vào một thư mục có sẵn hoặc tạo mới từ theme đang dùng. Như ví dụ trên tôi đã tạo thư mục myassets ngay thư mục theme để tiện quản lý chúng. Bạn có thể dùng hàm get_theme_file_uri hoặc get_template_directory_uri tùy theo phiên bản wordpress đang dùng.
Nếu bạn muốn dùng các thư viện này từ bên thứ ba (bên ngoài web), chẳng hạn như jquery cdn, bạn chỉ cần khai báo như sau:
//Nhúng jquery từ cdn wp_enqueue_script( 'jquery.min.js_3.5.1', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js' , array(), '3.5.1', false ); // Khi cần thiết thì dùng các script từ cdn2. Xóa Css, Javascipt, jQuery đã đăng ký
Vậy nếu các thư viện đã nhúng trước đó từ các plugin chẳng hạn, chẳng may xảy ra lỗi, chúng ta cần xóa chúng khỏi WordPress thì sao?
Ví dụ khi tôi cần thiết kế website bằng WordPress kết hợp Woocommerce, sau khi kích hoạt plugin này, sẽ có một số css và js cho giao diện mặc định. Trong quá trình thiết kế bạn đang gặp rắc rối vì chúng xung đột với các style của chúng ta, để loại chúng ra khỏi theme, bạn chỉ cần khai báo như sau:
add_action( 'wp_enqueue_scripts', 'wpshare247_disable_loading_css_js' ); function wpshare247_disable_loading_css_js(){ //Xóa css wp_dequeue_style('woocommerce-layout'); // woocommerce-layout là $handle wp_dequeue_style('woocommerce-general'); wp_dequeue_style('woocommerce-smallscreen'); wp_dequeue_style('wc-block-style'); //Xóa js wp_dequeue_script('wc-cart-fragments'); // wc-add-to-cart là $handle wp_dequeue_script('woocommerce'); wp_dequeue_script('wc-add-to-cart'); wp_deregister_script( 'js-cookie' ); wp_dequeue_script( 'js-cookie' ); wp_dequeue_script( 'vc_woocommerce-add-to-cart-js' ); }3. Cách tìm các $handle để xóa như thế nào?
Trước tiên bạn cần view source hay xem nguồn trang
Tiếp theo bạn tìm đến các css đã đăng ký trước đó, id chính là các $handle
4. Hạn chế chèn css và js sai cách
Một số bạn khi mới làm quen với wordpress, hay nhúng các script sai cách là chèn thẳng chúng vào template header.php hoặc footer.php như sau:
Thực chất sử dụng cách như trên không sai, nhưng có một hạn chế là một khi website lớn, có nhiều người cùng dev chung, sẽ rất khó quản lý, một khi cần remove 1 script khỏi web chúng ta cũng không sử dụng được action wp_dequeue_script. Thứ hai nữa là khi bạn cần dùng nhiều thư viện jquery hỗ trợ khác, chúng ta nhúng kiểu trên sẽ không thiện cảm hay thiếu tính chuyên nghiệp.
CHƯƠNG TRÌNH GIẢM 50% GIÁ TẤT CẢ CÁC GÓI HOSTING WORDPRESS => Link giảm 50%
Từ khóa » Cách Thêm Jquery Vào Wordpress
-
Cách Thêm JQuery Vào WordPress - HelpEx
-
Cách Thêm Mã JQuery Trên WordPress - Tạo Blog
-
Làm Cách Nào để Thêm Tập Lệnh JQuery đơn Giản Vào WordPress?
-
5 Thủ Thuật Sử Dụng JQuery Với WordPress
-
Hướng Dẫn Thêm (nhúng) Thư Viện Jquery Vào Website
-
Hướng Dẫn Nâng Phiên Bản JQuery Trên Website WordPress - Code Tốt
-
Thay Thế Thư Viện JQuery Mặc định Trong WordPress - Hoàng An
-
Cách Thêm Tập Lệnh JQuery Vào WordPress đúng Cách
-
Thêm Js Vào Wordpress Bằng Php - Wpuonline
-
5 điều Lưu ý Khi Sử Dụng Jquery Trong Wordpress - Hoàng Web
-
Thêm Script Vào Wordpress Bằng PHP
-
Hướng Dẫn Cách Thêm File Javascript Vào Wordpress - MegaCode
-
Các Lỗi Thường Gặp Với JQuery Trong WordPress Và Cách Khắc Phục
-
Load JQuery Từ CDN Cho WordPress - HocWP