Sử dụng CSS & JavaScript trong Wordpress

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Trong đó, 'style' là tên của file CSS của bạn và get_stylesheet_uri() sẽ trả về đường dẫn đến file style.css của theme của bạn.

Nếu bạn muốn sử dụng một file CSS khác, hãy thay đổi tên của file và đường dẫn tương ứng.

Bạn cũng có thể thêm một đường dẫn tuyệt đối đến file CSS của bạn như sau:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'style', 'https://example.com/path/to/your/file.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Sử dụng hàm wp_enqueue_script() để JavaScript vào theme

Tương tự như với CSS, bạn có thể sử dụng hàm wp_enqueue_script() để thêm JavaScript vào theme của bạn.

Bạn có thể sử dụng hàm wp_enqueue_script() bằng cách thêm mã sau vào functions.php của theme của bạn:

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/your-script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Trong đó, 'script' là tên của file JavaScript của bạn, '/js/your-script.js' là đường dẫn tương đối đến file JavaScript và '1.0.0' là phiên bản của script.

Nếu bạn muốn sử dụng một đường dẫn tuyệt đối đến file JavaScript của bạn, bạn có thể thay đổi đường dẫn tương ứng.

Sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối đến file CSS hoặc JavaScript

Khi sử dụng hàm wp_enqueue_style() và wp_enqueue_script(), bạn có thể sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối đến file CSS hoặc JavaScript của bạn.

Cách sử dụng hàm wp_enqueue_style()

Để sử dụng hàm wp_enqueue_style() để thêm file CSS vào WordPress, bạn cần làm như sau:

Truyền các tham số như tên, đường dẫn, phiên bản của file CSS vào hàm wp_enqueue_style(). Cú pháp của hàm này như sau:

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Trong đó:

• $handle: Tên của file CSS. Đây là tham số bắt buộc.
• $src: Đường dẫn đến file CSS. Đây là tham số bắt buộc.
• $deps: Mảng các file CSS phụ thuộc. Đây là tham số tùy chọn.
• $ver: Phiên bản của file CSS. Đây là tham số tùy chọn.
• $media: Định dạng của file CSS (ví dụ: screen, print, ...). Đây là tham số tùy chọn.

Ví dụ:

wp_enqueue_style( 'style', get_stylesheet_uri(), array(), '1.0.0', 'all' );

Trong đó, 'style' là tên của file CSS, get_stylesheet_uri() là đường dẫn đến file style.css của theme, '1.0.0' là phiên bản của file CSS và 'all' là định dạng của file CSS.

Sử dụng hàm add_action() để đăng ký hàm wp_enqueue_style() vào hook wp_enqueue_scripts.

Cú pháp của hàm này như sau:

add_action( $hook, $function_to_add, $priority, $accepted_args );

Trong đó:

• $hook: Tên của hook mà bạn muốn đăng ký hàm vào. Trong trường hợp này, hook là wp_enqueue_scripts.
• $function_to_add: Tên của hàm mà bạn muốn đăng ký vào hook. Trong trường hợp này, hàm là wp_enqueue_style().
• $priority: Độ ưu tiên của hàm. Đây là tham số tùy chọn.
• $accepted_args: Số lượng tham số được chấp nhận bởi hàm. Đây là tham số tùy chọn.

Ví dụ:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'style', get_stylesheet_uri(), array(), '1.0.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Trong đó, 'my_theme_enqueue_styles' là tên của hàm, 'wp_enqueue_scripts' là tên của hook mà bạn muốn đăng ký hàm vào.

Cách sử dụng hàm wp_enqueue_script()

Để sử dụng hàm wp_enqueue_script() để thêm file JavaScript vào WordPress, bạn cần làm như sau:

Truyền các tham số như tên, đường dẫn, phiên bản của file JavaScript vào hàm wp_enqueue_script(). Cú pháp của hàm này như sau:

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

Trong đó:

• $handle: Tên của file JavaScript. Đây là tham số bắt buộc.
• $src: Đường dẫn đến file JavaScript. Đây là tham số bắt buộc.
• $deps: Mảng các file JavaScript phụ thuộc. Đây là tham số tùy chọn.
• $ver: Phiên bản của file JavaScript. Đây là tham số tùy chọn.
• $in_footer: Xác định liệu file JavaScript có được đưa vào phần cuối trang hay không (mặc định là false). Đây là tham số tùy chọn.

Ví dụ:

wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );

Trong đó, 'script' là tên của file JavaScript, get_template_directory_uri() . '/js/script.js' là đường dẫn đến file script.js của theme, '1.0.0' là phiên bản của file JavaScript và true là để đưa file JavaScript vào phần cuối trang.

Sử dụng hàm add_action() để đăng ký hàm wp_enqueue_script() vào hook wp_enqueue_scripts

Cú pháp của hàm này như sau:

add_action( $hook, $function_to_add, $priority, $accepted_args );

Trong đó:

• $hook: Tên của hook mà bạn muốn đăng ký hàm vào. Trong trường hợp này, hook là wp_enqueue_scripts.
• $function_to_add: Tên của hàm mà bạn muốn đăng ký vào hook. Trong trường hợp này, hàm là wp_enqueue_script().
• $priority: Độ ưu tiên của hàm. Đây là tham số tùy chọn.
• $accepted_args: Số lượng tham số được chấp nhận bởi hàm. Đây là tham số tùy chọn.

Ví dụ:

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'script', get_template_directory_uri() . '/js/script.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Trong đó, 'my_theme_enqueue_scripts' là tên của hàm, 'wp_enqueue_scripts' là tên của hook mà bạn muốn đăng ký hàm vào

Sử dụng đường dẫn tuyệt đối và đường dẫn tương đối

Khi thêm CSS hoặc JavaScript vào website của bạn, bạn có thể sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối.

Đường dẫn tuyệt đối:

• Đường dẫn tuyệt đối là đường dẫn đầy đủ đến file CSS hoặc JavaScript.
• Ví dụ: "https://example.com/wp-content/themes/mytheme/style.css".

Đường dẫn tương đối

• Đường dẫn tương đối là đường dẫn liên quan đến thư mục hiện tại của file đang được xem xét.

• Đường dẫn tương đối giúp bạn viết mã nguồn gọn hơn và dễ dàng chuyển đổi giữa các trang.

• Có hai loại đường dẫn tương đối: đường dẫn tương đối đến file hoặc đường dẫn tương đối đến thư mục.

  • Đường dẫn tương đối đến file:
    • Ví dụ: "css/style.css". Đây là đường dẫn tương đối đến file style.css trong thư mục css nằm trong thư mục hiện tại.
  • Đường dẫn tương đối đến thư mục:
    • Ví dụ: "../css/style.css". Đây là đường dẫn tương đối đến file style.css trong thư mục css nằm trong thư mục cha của thư mục hiện tại.

Lưu ý rằng khi sử dụng đường dẫn tương đối, bạn cần phải đặt đúng vị trí của file CSS hoặc JavaScript trong website của mình để tránh lỗi khi trình duyệt không tìm thấy file cần thiết.

Kết bài viết

Trong những năm qua, CSS và JavaScript đã trở thành hai công cụ quan trọng để tạo ra các trang web đẹp mắt, tương tác và chuyên nghiệp hơn. Khi làm việc với CSS và JavaScript, sử dụng đường dẫn tuyệt đối hoặc đường dẫn tương đối để thêm các file CSS hoặc JavaScript vào website của bạn là một kỹ năng cần thiết.

Đường dẫn tuyệt đối cho phép bạn sử dụng đường dẫn đầy đủ đến file CSS hoặc JavaScript trong website của bạn. Trong khi đó, đường dẫn tương đối giúp bạn viết mã nguồn gọn hơn và dễ dàng chuyển đổi giữa các trang.

Bằng cách sử dụng hàm wp_enqueue_style() và wp_enqueue_script(), bạn có thể dễ dàng thêm các file CSS và JavaScript vào theme của mình. Điều quan trọng là hãy chắc chắn rằng bạn đã đặt đúng vị trí của các file này trong website của mình, để tránh các lỗi không cần thiết khi trình duyệt không tìm thấy các file cần thiết.

Với các kỹ năng cơ bản này, bạn sẽ có thể làm việc với CSS và JavaScript một cách hiệu quả hơn và tạo ra các trang web đẹp mắt và tương tác hơn.