WP thêm script hoặc css file custom của riêng bạn

Sau đây mình sẽ hướng dẫn bạn cách để thêm file css và js vào website wp. Đầu tiên bạn hãy vào folder theme và thêm folder con là custom, tiếp theo hãy copy file css và js của bạn vào.

Nơi code: file functions.php của theme.

<?php 
add_action( 'wp_enqueue_scripts', 'script_style_custom' );
function script_style_custom() {
    $time 	= current_time( 'YmdHis' );
   
    // css
    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/custom/style.css', '', $time );

    // javascript
    wp_enqueue_script('my-script', get_stylesheet_directory_uri() .'/custom/script.js', array('jquery'), $time, true );
}
?>

Chú thích code

wp_enqueue_style: dùng để thêm file css

wp_enqueue_script: dùng để thêm file js

‘my-style’ và ‘my-script’ là tên của file, tên này không được trùng.

get_stylesheet_directory_uri: lấy đường dẫn của theme. ví dụ: http://domain.com/wp-content/themes/my-theme

Biến $time để loại bỏ cache

Kiểm tra source(CTR + U) bạn sẽ thấy WordPress đã thêm 2 thư viện:

css

<link rel='stylesheet' id='my-style-css'  href='http://domain.com/wp-content/themes/my-theme/custom/style.css?ver=5.3.2' type='text/css' media='all' />

<script type='text/javascript' src='http://domain.com.au/wp-content/themes/my-theme/custom/script.js?ver=5.3.2'></script>

Vậy là thành công!

Thêm vào page bạn cần

Trường hợp bạn chỉ muốn thêm thư viện vào 1 page nào đó, hãy dùng code sau vào trong function ở trên:

if ( is_page_template( 'custom/template-special.php' ) ){
    wp_enqueue_script('special-script', get_stylesheet_directory_uri() .'/custom/special-script.js', array('jquery'), $time, true );
}

Đối với trang Admin

Bạn muốn thêm file custom cho trang admin thì sửa dụng cách sau.

function wpdocs_enqueue_custom_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', '', $time );
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );

Chúc bạn thành công!

Xem thêm: