Nhúng css và javascript cho theme Wordpress - enqueue style script

Nhúng CSS và JavaScript Cho Theme WordPress

WordPress cung cấp một cách chuẩn mực để thêm CSS và JavaScript vào theme thông qua các hàm wp_enqueue_style() và wp_enqueue_script(). Điều này giúp đảm bảo tính tương thích và tránh xung đột với các plugin hoặc theme khác.

1. Tại sao nên dùng wp_enqueue_style và wp_enqueue_script?

• Tránh lỗi khi tải lại tệp (như tải tệp trùng lặp).
• Dễ dàng quản lý thứ tự tải file.
• Tích hợp tốt hơn với hệ thống hooks của WordPress.

2. Thêm CSS Cho Theme

Cú pháp:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Tham số	Ý nghĩa
$handle	Tên duy nhất của file (dùng để tham chiếu).
$src	URL hoặc đường dẫn đến file CSS.
$deps	(Tùy chọn) Các style khác cần tải trước (mảng).
$ver	(Tùy chọn) Phiên bản file CSS (hữu ích khi dùng cache).
$media	(Tùy chọn) Phạm vi áp dụng (vd: all, screen, print).

Ví dụ:

function my_theme_enqueue_styles() {
    // Nhúng style.css của theme
    wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), '1.0.0', 'all');

    // Nhúng một file CSS từ thư mục theme
    wp_enqueue_style('my-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0.0', 'all');

    // Nhúng một file CSS từ thư viện ngoài
    wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', array(), '5.3.0', 'all');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

3. Thêm JavaScript Cho Theme

Cú pháp:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Tham số	Ý nghĩa
$handle	Tên duy nhất của file (dùng để tham chiếu).
$src	URL hoặc đường dẫn đến file JavaScript.
$deps	(Tùy chọn) Các script khác cần tải trước (mảng).
$ver	(Tùy chọn) Phiên bản file JavaScript (hữu ích khi dùng cache).
$in_footer	(Tùy chọn) true để tải file ở cuối trang, false để tải ở đầu.

Ví dụ:

function my_theme_enqueue_scripts() {
    // Nhúng một file JavaScript từ thư mục theme
    wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), '1.0.0', true);

    // Nhúng một file JavaScript từ thư viện ngoài
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array(), '5.3.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts');

 

4. Tích Hợp Cả CSS và JavaScript

Bạn có thể gộp việc nhúng CSS và JavaScript vào cùng một hàm để dễ quản lý hơn:

function my_theme_enqueue_assets() {
    // Nhúng CSS
    wp_enqueue_style('my-theme-style', get_stylesheet_uri(), array(), '1.0.0', 'all');
    wp_enqueue_style('bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css', array(), '5.3.0', 'all');

    // Nhúng JavaScript
    wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), '1.0.0', true);
    wp_enqueue_script('bootstrap-js', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js', array(), '5.3.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_assets');

5. Nhúng JavaScript Sử Dụng Biến PHP

Đôi khi bạn cần truyền dữ liệu từ PHP vào JavaScript. Sử dụng wp_localize_script() để làm điều này.

Ví dụ:

function my_theme_localize_script() {
    wp_enqueue_script('my-custom-script', get_template_directory_uri() . '/assets/js/custom.js', array('jquery'), '1.0.0', true);
    
    // Truyền biến PHP vào file JS
    wp_localize_script('my-custom-script', 'myThemeData', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'site_name' => get_bloginfo('name'),
    ));
}
add_action('wp_enqueue_scripts', 'my_theme_localize_script');

Trong file custom.js, bạn có thể sử dụng biến myThemeData:

console.log(myThemeData.site_name);
console.log(myThemeData.ajax_url);

Hướng Dẫn Xóa CSS và JavaScript Đã Được Đăng Ký Trong WordPress

Khi sử dụng WordPress, nhiều theme và plugin sẽ tự động đăng ký và nhúng CSS hoặc JavaScript của riêng chúng. Trong một số trường hợp, bạn muốn xóa các file không cần thiết để tối ưu hóa tốc độ tải trang.

1. Xóa CSS hoặc JavaScript Đã Đăng Ký

WordPress cung cấp hai hàm để xóa CSS và JavaScript:

• wp_dequeue_style(): Xóa style đã đăng ký.
• wp_dequeue_script(): Xóa script đã đăng ký.

Cú pháp:

wp_dequeue_style( $handle );
wp_dequeue_script( $handle );

Tham số	Ý nghĩa
$handle	Tên của style hoặc script cần xóa.

Ví dụ:

function my_theme_remove_scripts() {
    // Xóa CSS Bootstrap được đăng ký bởi plugin
    wp_dequeue_style('bootstrap-css');

    // Xóa JavaScript jQuery Migrate
    wp_dequeue_script('jquery-migrate');
}
add_action('wp_enqueue_scripts', 'my_theme_remove_scripts', 20); // Đặt ưu tiên cao để xóa

 

2. Tìm $handle Của CSS/JavaScript Đã Đăng Ký

Để xóa được một file, bạn cần biết $handle của nó. Dưới đây là các cách tìm $handle:

2.1. Sử dụng Plugin Debugging

• Plugin: Query Monitor
• Cách dùng:
  1. Cài đặt và kích hoạt plugin Query Monitor.
  2. Truy cập trang bạn muốn kiểm tra.
  3. Trong menu quản trị của Query Monitor, tìm tab Styles hoặc Scripts để xem danh sách các file được đăng ký và $handle của chúng.

2.2. In Danh Sách Tất Cả CSS/JavaScript

Bạn có thể in danh sách tất cả $handle được đăng ký bằng đoạn mã sau:

Hiển thị danh sách CSS:

add_action('wp_enqueue_scripts', function() {
    global $wp_styles;
    echo '<pre>';
    print_r($wp_styles->queue); // Danh sách các $handle đã đăng ký
    echo '</pre>';
}, 100);

Hiển thị danh sách JavaScript:

add_action('wp_enqueue_scripts', function() {
    global $wp_scripts;
    echo '<pre>';
    print_r($wp_scripts->queue); // Danh sách các $handle đã đăng ký
    echo '</pre>';
}, 100);

Mở trang web, xem mã nguồn HTML hoặc trình duyệt console để kiểm tra danh sách.

3. Xóa CSS và JavaScript Của Plugin Hoặc Theme

Xóa CSS:

function remove_plugin_css() {
    wp_dequeue_style('plugin-css-handle'); // Thay 'plugin-css-handle' bằng $handle tìm được
}
add_action('wp_enqueue_scripts', 'remove_plugin_css', 20);

Xóa JavaScript:

function remove_plugin_js() {
    wp_dequeue_script('plugin-js-handle'); // Thay 'plugin-js-handle' bằng $handle tìm được
}
add_action('wp_enqueue_scripts', 'remove_plugin_js', 20);

 

4. Xóa CSS/JS Chỉ Trong Một Trang Cụ Thể

Nếu bạn chỉ muốn xóa trên một trang cụ thể, hãy dùng điều kiện trong PHP.

Ví dụ:

• Xóa trên trang chủ:

function remove_home_scripts() {
    if ( is_front_page() ) {
        wp_dequeue_style('bootstrap-css');
        wp_dequeue_script('plugin-js-handle');
    }
}
add_action('wp_enqueue_scripts', 'remove_home_scripts', 20);

• Xóa trên một trang với ID cụ thể:

function remove_page_scripts() {
    if ( is_page(42) ) { // Thay 42 bằng ID trang
        wp_dequeue_style('plugin-css-handle');
    }
}
add_action('wp_enqueue_scripts', 'remove_page_scripts', 20);

 

5. Xóa CSS/JS Bằng Cách Hủy Đăng Ký

Nếu muốn hoàn toàn hủy bỏ một file, bạn có thể dùng wp_deregister_style() hoặc wp_deregister_script().

Ví dụ:

function my_theme_deregister_scripts() {
    // Hủy đăng ký file jQuery Migrate
    wp_deregister_script('jquery-migrate');
}
add_action('wp_enqueue_scripts', 'my_theme_deregister_scripts', 20);

 

6. Lưu Ý

• Đảm bảo chỉ xóa các file thực sự không cần thiết, để tránh làm hỏng chức năng của trang web.
• Đặt ưu tiên (priority) cao hơn 10 (như 20 hoặc 99) khi thêm các hàm xóa, để đảm bảo các file được xóa sau khi plugin hoặc theme khác đăng ký chúng.

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.