Nhúng CSS, JS vào Theme WordPress

Nhúng CSS, JS vào Theme WordPress là một trong những bước rất quan trọng để bắt đầu lập trình Theme WordPress.

Bước này tưởng chừng rất đơn giản nhưng rất nhiều mắc phải khi bắt đầu làm quen với lập trình Theme WordPress.

Nhiều bạn thường chọn cách gọi trực tiếp file .css và .js vào file header.php, footer.php thông qua thẻ link và script. Nhưng với WordPress, làm cách đó không tối ưu và dễ xảy ra các lỗi không đang có.

Hôm nay tôi xin hướng dẫn bạn cách gọi file CSS, JS vào Theme WordPress thông qua hàm wp_enqueue_style() và wp_enqueue_script() chèn vào file functions.php của Theme

Nhúng CSS vào Theme WordPress

Cú pháp:

wp_enqueue_style( $handle, $src = false, $deps = array(), $ver = false, $media = 'all');

$handle: Tên của style (Tên này phải đặt duy nhất)
$src: Đường dẫn đến file CSS
$deps: Mảng chứa tên style phụ thuộc (Tên style phụ tuộc phải được đăng ký trước. Khi load WordPress sẽ load đối tượng được phụ thuộc trước)
$ver: Phiên bản của style (Nếu để giá trị false, hệ thống sẽ tự lấy theo phiên bản của WordPress)
$media: Media của style (Ví dụ: ‘all’, ‘aural’, ‘braille’, ‘handheld’, ‘projection’, ‘print’)

Cách sử dụng:

<?php
function wp_include_css()
{
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 đó:

wp_include_css: Tên hàm tự đặt tên
wp_enqueue_scripts: Tên hook có sẵn trong WordPress
get_template_directory_uri(): Hàm gọi đường dẫn theme đang kích hoạt

Nhúng JS vào Theme WordPress

Cú pháp:

wp_enqueue_script($handle, $src = '', $deps = array(), $ver = false, $in_footer = false )

$handle: Tên của script (Tên này phải đặt tên duy nhất)
$src: Đường dẫn tới file js
$deps: Mảng chứa tên script phụ thuộc (Tên script phụ tuộc phải được đăng ký trước. Khi load WordPress sẽ load đối tượng được phụ thuộc trước)
$ver: Phiên bản của script (Nếu để giá trị false, hệ thống sẽ tự lấy theo phiên bản của WordPress)
$in_footer: Chuyển script xuống footer nếu giá trị là true

Cách sử dụng:

<?php
function wp_include_js()
{
wp_enqueue_script('bootstrap-js', get_template_directory_uri().'/js/bootstrap.min.js', array(), false, true);
}

add_action('wp_enqueue_scripts', 'wp_include_js');
?>

Nhúng CSS, JS vào WP Admin

Để nhúng CSS, JS vào WP Admin để custom trang quản trị bạn vẫn sử dụng cách gọi trên nhưng dùng hook: admin_enqueue_scripts

Ví dụ:

<?php
function wp_include_admin_css()
{
wp_enqueue_style('custom-admin', get_template_directory_uri().'/css/custom-admin.css', array(), false, 'all');
}

add_action('admin_enqueue_scripts', 'wp_include_admin_css');
?>

Nhúng CSS, JS vào trang đăng nhập

Để nhúng CSS, JS vào trang đăng nhập, đăng ký, quên mật khẩu bạn sử dụng hook login_enqueue_scripts

Ví dụ:

<?php
function wp_include_login_css()
{
wp_enqueue_style('custom-login', get_template_directory_uri().'/css/custom-login.css', array(), false, 'all');
}

add_action('login_enqueue_scripts', 'wp_include_login_css');
?>