Thiết lập điều kiện tải CSS/JS trong WordPress

Thiết lập điều kiện tải CSS/JS trong WordPress

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()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.

Nếu có bất kỳ câu hỏi nào, hãy comment phía dưới bài viết này

[Total: 1   Average: 5/5]

Hoàng An

Tôi không phải là 1 chuyên gia lập trình, cũng không phải là 1 chuyên gia SEO. Với niềm đam mê với CNTT, tôi có thể biến ý tưởng thành sản phẩm và thích chia sẻ kiến thức cho người khác. Nếu có duyên, mời bạn đến với khoá học của tôi

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *