Hướng dẫn cách thêm css và javascript 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.

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ừ 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á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.