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 function.php của theme.

<?php 
add_action( 'wp_enqueue_scripts', 'script_style_custom' );
function script_style_custom() {
    wp_enqueue_style('my-style', get_stylesheet_directory_uri() . '/custom/style.css');
    wp_enqueue_script('my-script', get_stylesheet_directory_uri() .'/custom/script.js', array('jquery'));
}
?>

Chú thích code

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

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

‘my-style’‘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

Kiểm tra source bạn sẽ thấy wp đã 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' />

js

<script type='text/javascript' src='https://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'));
}

Đố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');
}
add_action( 'admin_enqueue_scripts', 'wpdocs_enqueue_custom_admin_style' );

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

Leave a Reply

Your email address will not be published.