Hướng dẫn wp_enqueue_script trong wordpress - wp_enqueue_script trong wordpress
|
Nhúng CSS, JS vào Theme WordPress là một trong những bước rất quan trọng để bắt đầu lập trình Theme WordPress.Theme WordPress là một trong những bước rất quan trọng để bắt đầu lập trình Theme WordPress. Show
Bước này tưởng chừng rất đơn giản nhưng rất nhiều mắc phải khi bắt đầu làm quen với lập trình Theme WordPress.lập trình Theme WordPress. Nhiều bạn thường chọn cách gọi trực tiếp file 0 và 1 vào file 2, 3 thông qua thẻ link và script. Nhưng với WordPress, làm cách đó không tối ưu và dễ xảy ra các lỗi không đang có.Hôm nay tôi xin hướng dẫn bạn cách gọi file CSS, JS vào Theme WordPress thông qua hàm 4 và 5 chèn vào file 6 của ThemeNhúng CSS vào Theme WordPressCú pháp: wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all');
Cách sử dụng:Trong đó:
Nhúng JS vào Theme WordPressCú pháp: wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )
Cách sử dụng: Trong đó:wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )2: Tên hàm tự đặt tên
wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )4: Hàm gọi đường dẫn theme đang kích hoạtNhúng JS vào Theme WordPress
wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )4: Hàm gọi đường dẫn theme đang kích hoạtNhúng JS vào Theme WordPress 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.wp_enqueue_scripts. 1. Thêm Css, Javascipt, jQuery vào WordPressBạ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
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.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ừ cdn 2. 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áchMộ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. |
