Sử dụng CSS & JavaScript trong Wordpress

Hướng dẫn cách sử dụng hàm wp_enqueue_style() và wp_enqueue_script() để bao gồm CSS và JavaScript vào theme của WordPress.

Trong quá trình phát triển trang web trên nền tảng WordPress, việc CSS và JavaScript là một trong những nhiệm vụ quan trọng nhằm tối ưu hóa trang web của bạn. Tuy nhiên, không phải ai cũng biết cách thực hiện điều này một cách hiệu quả và đúng cách. Vì vậy, trong bài viết này, chúng ta sẽ tìm hiểu cách CSS và JavaScript vào theme của WordPress bằng cách sử dụng hàm wp_enqueue_style() và wp_enqueue_script(). Cùng khám phá và tìm hiểu thêm về chủ đề này nhé!

CSS & JavaScript trong WordPress

CSS và JavaScript trong WordPress là thêm các tệp CSS và JavaScript vào trang web WordPress của bạn để có thể sử dụng để thiết kế và thêm tính năng cho các trang của trang web của bạn.

CSS được sử dụng để điều khiển bố cục, hiển thị và thiết kế của các trang của trang web của bạn. Nó cho phép bạn kiểm soát màu sắc, kích thước, phông chữ, khoảng cách và các yếu tố trực quan khác trên trang web của bạn.

Bài viết này được đăng tại [toptheme.info]

JavaScript là một ngôn ngữ lập trình có thể được sử dụng để thêm tính năng tương tác và động cho trang web của bạn. Nó có thể được sử dụng để tạo hiệu ứng, xác nhận biểu mẫu, thêm các hiệu ứng và nhiều hơn nữa.

Trong WordPress, bạn có thể CSS và JavaScript vào các trang của trang web của bạn bằng cách sử dụng các hàm và hooks được cung cấp bởi WordPress.

Các phương pháp CSS và JavaScript

Sử dụng hàm wp_enqueue_style() để CSS vào theme

Để thêm CSS vào theme WordPress của bạn, bạn có thể sử dụng hàm wp_enqueue_style(). Đây là cách tốt nhất để thêm CSS vào theme của bạn vì nó cho phép WordPress quản lý các file CSS được sử dụng trên trang của bạn.

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

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

				
					
				1
2
3
4

						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' );

				
					
				1
2
3
4

						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' );

				
					
				1
2
3
4

						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 );

				1

						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' );

				1

						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 );

				1

						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' );

				
					
				1
2
3
4

						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 );

				1

						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 );

				1

						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 );

				1

						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' );

				
					
				1
2
3
4

						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.

Blog hướng dẫn, LẬP TRÌNH THEME

CSS & JavaScript trong WordPress

Các phương pháp CSS và JavaScript

Sử dụng hàm wp_enqueue_style() để CSS vào theme

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

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

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

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

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

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

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

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

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

Kết bài viết

Trả lời Hủy

Bài viết cùng chủ đề:

Thêm custom field mô tả ngắn cho danh mục sản phẩm không dùng plugin

Thêm custom field ảnh đại diện cho danh mục sản phẩm

Xử lí lỗi Breadcrumb của Rank Math không dịch được chữ “Trang chủ” với Polylang

Tạo layout tùy chỉnh cho trang Blog Archive trong theme Flatsome cực dễ

Cách ẩn thông báo bản quyền theme Flatsome vô cùng đơn giản

Tạo hiệu ứng số chạy tăng dần bằng HTML và Javascript đơn giản

Tải về miễn phí plugin Related Post Sidebar – tạo widget bài viết liên quan

Hướng dẫn tạo shortcode hiển thị bài viết liên quan cho website

Mẫu web mới đăng

Danh mục mẫu web

Từ khóa liên quan

CSS & JavaScript trong WordPress

Các phương pháp CSS và JavaScript

Sử dụng hàm wp_enqueue_style() để CSS vào theme

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

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

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

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

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

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

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

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

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

Kết bài viết

Trả lời Hủy

Bài viết cùng chủ đề:

Thêm custom field mô tả ngắn cho danh mục sản phẩm không dùng plugin

Thêm custom field ảnh đại diện cho danh mục sản phẩm

Xử lí lỗi Breadcrumb của Rank Math không dịch được chữ “Trang chủ” với Polylang

Tạo layout tùy chỉnh cho trang Blog Archive trong theme Flatsome cực dễ

Cách ẩn thông báo bản quyền theme Flatsome vô cùng đơn giản

Tạo hiệu ứng số chạy tăng dần bằng HTML và Javascript đơn giản

Tải về miễn phí plugin Related Post Sidebar – tạo widget bài viết liên quan

Hướng dẫn tạo shortcode hiển thị bài viết liên quan cho website

Mẫu web mới đăng

Đăng nhập

Đăng ký