Trong những website sử dụng nhiều CSS/JS thì việc tải CSS/JS theo điều kiện rất quan trọng vì nó ảnh hưởng rất nhiều đến tốc độ của website. Nếu như trang nào chúng ta cũng cho phép tải tất cả CSS/JS thì rất dư thừa. Chính vì vậy, các bạn chỉ tải CSS/JS nào mà cần sử dụng.
Trong bài viết này, tôi sẽ hướng dẫn cách thiết lập tải CSS/JS trong WordPress. Để làm điều này với theme thì rất đơn giản, vì chỉ cần vào trong file functions.php của theme sửa lại điều kiện là được. Nhưng với các plugin được cài sẵn trong WordPress thì làm như thế nào? Hãy theo dõi ngay phía dưới đây.
Trong bài viết trước đây, tôi có đề cập đến vấn đề điều kiện hiển thị Widget. Trong đó, tôi có nói về việc sử dụng Conditional Tags có sẵn của WordPress. Trong nội dung bài này cũng phải sử dụng đến nó. Bạn nào không nhớ có thể đọc lại.
Như các bạn đã biết, việc nhúng css, js vào trong WordPress sẽ sử dụng hàm wp_enqueue_style() và wp_enqueue_script(). Vậy để xử lý điều kiện tải chúng ta chỉ cần thiết lập điều kiện gọi 2 hàm này ra.
Thiết lập với Theme WordPress
Với theme WordPress, bạn mở file functions.php của theme bạn đang dùng và tìm hook wp_enqueue_scripts
Tại đây, bạn sửa lại điều kiện như sau:
<?php function wp_include_css() { if (is_category()){ wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap.min.css', array(), false, 'all'); } wp_enqueue_style('main-style', get_template_directory_uri().'/style.css', array(), false, 'all'); } add_action('wp_enqueue_scripts', 'wp_include_css'); ?>Trong ví dụ trên, khi vào trang chuyên mục thì website mới tải file bootstrap.min.css. Còn các trang khác thì không tải.
Với JS, các bạn làm tương tự.
Lưu ý: Bạn phải phân tích kỹ xem trang bạn không cho tải CSS có ảnh hưởng gì đến website không? Nếu không sẽ dẫn đến trường hợp bị lỗi giao diện.
Thiết lập với plugin WordPress
Với trường hợp này, bạn không thể vào từng plugin để sửa được. Vì nếu sửa sau này plugin update bạn sẽ bị mất những gì đã sửa.
Để thiết lập trường hợp này bạn cũng sẽ viết vào file functions.php của theme, và sẽ can thiệp vào hook wp_enqueue_scripts
Các bạn chèn đoạn code sau vào file functions.php của theme:
<?php function wp_condition_css_plugin() { wp_dequeue_style('ez-toc'); if (is_single()){ wp_enqueue_style('ez-toc'); } } add_action('wp_enqueue_scripts', 'wp_condition_css_plugin'); ?>Trong trường hợp trên, tôi có dùng hàm wp_dequeue_style() để loại bỏ CSS của 1 plugin và gọi CSS đó trong trang chi tiết bài viết.
Việc của các bạn là phải tìm được ID của style, script. Việc này, các bạn làm rất đơn giản bằng cách sau:
Tìm ID của Style (CSS)
- View source trang web bằng cách chuột phải chọn View Page Source hoặc dùng tổ hợp phím Ctrl + U
- Tìm đến đoạn code HTML tải CSS (thẻ link)
- Lấy giá trị của thuộc tính id (Nhớ bỏ ký tự -css). Ví dụ: style, ez-toc
Tìm ID của Script (JS)
Việc lấy ID của JS sẽ khó hơn chút, vì View Source sẽ không thấy được. Bạn cần phải sử dụng code để in ra.
Bạn hãy chèn đoạn code sau vào file functions.php
function unicode_inspect_scripts() { global $wp_scripts; foreach( $wp_scripts->queue as $handle ) : echo $handle.'<br/>'; endforeach; } add_action( 'wp_print_scripts', 'unicode_inspect_scripts' );Sau đó, bạn F12 để xem các ID của JS
Lưu ý: Sau khi lấy được rồi bạn nhớ xoá đoạn code trên đi nhé.
Kết luận
Trên đây, tôi đã hướng dẫn các bạn cách thiết lập điều kiện tải CSS/JS trong WordPress. Còn điều kiện như thế nào tuỳ thuộc vào dự án của bạn.