Cách Enqueue File Css, Js vào Child Theme

Bạn đã làm quen khá lâu với WordPress rồi phải không, tuy vậy, không phải ai cũng nắm được cách “đúng đắn” để thêm file Js, Css vào WordPress. Bản thân Nam cũng đang tìm hiểu & tối ưu WordPress dưới mindset của Developer hơn một chút(Mình là code newbie thôi) ^^!

Trong quá trình tối ưu nguyenbahoangnam.com, mình quyết định chia sẻ cách load file css, js vào child theme đầy hữu ích này. Hy vọng bạn sẽ thấy những dòng code này có ích cho dự án của mình

Cách Enqueue cơ bản để chạy trên mọi page

function my_scripts_method() {
    wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/custom_script.js',
        array( 'jquery' )
    );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

Cùng nhau phân tích một chút nhé, trước hết bạn định nghĩa 1 function tên là my_scripts_method, hàm chức năng này thực hiện 1 lệnh để WordPress load 1 file Js chuẩn chỉnh

Hàm này mang tên wp_enqueue_script, tiếp đó, hãy phân tích các thành phần đi theo sau

Custom-script: Tên script, bạn đặt thế nào cũng được, bởi nó không phải là tên File JS đâu nhé

get_stylesheet_directory_uri(): Đường dẫn tới Child theme, đường dẫn này đã được định tuyến sẵn bởi WordPress

‘/js/custom_script.js’: Đường dẫn trong child theme, ví dụ như bạn dùng astra-child như Nam, file custom-script sẽ nằm trong /wp-content/themes/astra-child/js/custom-script.js

Cách Enqueue cơ bản để chạy js code trên 1 số page

/**Load Script để hiển thị css và js của popup cho page "thiết kế web" **/
 function my_custom_tooltip() {
    if (  is_page( 49 ) ) {
        wp_enqueue_script(
        'custom-script',
        get_stylesheet_directory_uri() . '/js/js-popup.js',
        array(),'1.0.0',true
    );
    }
} add_action('wp_enqueue_scripts', 'my_custom_tooltip');

Đoạn code phía trong dưới if (is_page(49) ) thì đơn giản như phía trên thôi. Phần is_page cho biết bạn chỉ muốn load code vào bài viết / trang có id 49.

Về cách lấy id thế nào thì bạn có thể search google nhé, hết sức đơn giản, chúng thường có sẵn trên url của 1 đường dẫn khi bạn truy cập vào 1 post / page đã đăng sẵn

About nguyenbahoangnam

Đam mê Digital Marketing, Web Development, Fitness & Healthy Diet đồng thời cũng là Fan cuồng của lối sống tối giản ^^!. Quyết tâm khai quật nghiệp "nhà văn"

Leave a Comment

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 *