Cách Gọi File Js Và File Css Trong Wordpress » Kiến Thức IT

Bỏ qua nội dung

1 lượt xem

Cách gọi file JS và CSS trong wordpress – Thường thì các bạn sẽ thấy các file style.css và js đều được chèn vào phần header của trang web. Trong wordpress CSS, Javascript là một trong những thứ cực kỳ quan trọng cho bất kỳ website nào. Để tạo lên một website đẹp thì không thể thiếu các thành phần quan trọng đó để làm vẻ đẹp bên ngoài khi người dùng truy cập tới website.

Bạn đang sử dụng mã nguồn mở Wordpres vào một ngày đẹp trời bạn muốn tìm hiểu kỹ hơn về cách chèn các thư viện này ngoài cách chèn file css, js thông thường như bao mã nguồn khác. Hôm nay PhonuiIT.com sẽ hướng dẫn bạn cách gọi file css và js bằng cách dùng file functions.php để gọi nhé.

Nên xem: Xóa bỏ đuôi ?v=e4db74a5432 sau URL trong WordPress Code bài viết liên quan Flatsome kèm hình ảnh – Top 1 theme hiện nay Sửa lỗi Error Establishing a Database Connection WordPress Flatsome – Chia sẻ theme flatsome mới nhất 2025 Ẩn thông báo Flatsome khi update phiên bản mới

Cách gọi file JS và CSS thông thường theo chuẩn

<script type="text/javascript" src="custom.js"></script> <link rel='stylesheet' href='theme.css' type='text/css' media='all' />

Nhưng với WordPress thì hệ thống mặc định sẽ có các mã lệnh đó và việc chúng ta là chỉ cần khai báo đúng cấu trúc của wordpress thì nó sẽ ra dạng html như trên. Tuy nhiên wordpress đã định hình trong php và việc của lập trình viên là khai báo nó trong functions.php là được. Vì điều này giúp chúng ta tránh được vấn đề quên khai báo các mã lệnh đi kèm trong thẻ script và link.

Cách gọi file JS và CSS theo chuẩn WordPress

Đối với wordpress thì bạn khai báo một function sau đó thì chuyển nó thông qua action wp_enqueue_scripts là nó đã hiển thị ngoài site cho bạn được rồi và cụ thể như sau:

function phonuiit_style(){ // custom css wp_register_style( 'bootstrap-style' , get_template_directory_uri() . "/css/bootstrap.min.css", 'all'); wp_enqueue_style('bootstrap-style'); //custom script wp_register_script('custom-script', get_template_directory_uri() . "/js/custom.js", array('jquery')); wp_enqueue_script('custom-script'); */ } add_action('wp_enqueue_scripts', 'phonuiit_style');

Khi đó bạn khai báo một function tên phonuiit_style và gán nó ngay cho action wp_enqueue_scripts và hệ thống nó sẽ tự nhận ra việc bạn khai báo js và css cho theme.

Trong đó

• wp_register_style, wp_enqueue_style: gọi đến file css
• wp_register_script, wp_enqueue_script: gọi đến file js

Ngoài ra trong trường hợp bạn muốn sử dụng file css bất kỳ cho một vị trí nhất định như: home, category, single,… thì bạn cần tiến hành kiểm tra điều kiện tồn tại để nó chỉ được hiển thị ra ở đúng khu vực bạn muốn.

Ví dụ bạn chỉ muốn hiển thị file css ở trang home, hay js thì trong function trên bạn if điều kiện như sau

if( is_home() ) { // khai bao duong dan file css và js nhu tren o day }

Cách xử lý hết sức đơn giản phải không nào. Mọi quy định của wordpress đưa ra đều có ý riêng của họ với một quy chuẩn riêng giúp cho việc chúng ta sử dụng file css, js hiệu quả từng vị trí tránh load hết nhằm giảm tải dung lượng trang và đó là điều tốt dành cho seo web.

Chúc các bạn thực hiện thành công!

4.9/5 - (98 bình chọn)

Quản Trị Viên

Đam mê công nghệ, thích tìm hiểu về SEO, Website, MMO. Cho đi hôm nay, nhận lại ngày mai.

Hướng dẫn fix lỗi acme.sh khi cài đặt SSL Let’s Encrypt Xử lý website bị malware chuyển hướng Label {} [+] Tên của bạn* Email* Label {} [+] Tên của bạn* Email* 0 Bình luận Bình chọn nhiều nhất Mới nhất Cũ nhất Inline Feedbacks View all comments Tìm bài viết Bài viết mới

• [HOTDEALS] Giảm 65% VPS & 75% Hosting mừng Giáng Sinh cùng vNode Cloud
• Black Friday 7 ngày vàng – Azdigi khuyến mãi ưu đãi đến 80%
• [ BLACK FRIDAY SIÊU SALE ] – Giảm 90% Hosting, VPS tại vNode
• Review Dịch Vụ VPS, Hosting VNODE – Hiệu Năng Cao, Giá Rẻ, Hỗ Trợ Cực Tốt
• Cách nhận 1 năm ChatGPT Go miễn phí

HOSTING KHUYÊN DÙNG

	Hosting WordPress tốc độ nhanh . Support tốt. Click để mã 50% ngay Nhận mã
	Hosting WordPress chất lượng cao. Support tốt. Dùng thử 7 ngày. Xem ngay
	Hosting WordPress mà mình khuyên dùng ở VN. Xem ngay
	Hosting WordPress chất lượng cao. Support tốt. Click để mã 25% ngay Nhận mã

Cài website Wordpress MIỄN PHÍ

Bạn cần hỗ trợ nhấn vào ảnh phía trên nhé. Hoặc tại đây

Từ KhóaBảo mật VPS CorelDraw X7 database server directadmin Dọn rác máy tính ESXI font chữ đẹp kiếm tiền online kiểm qua tốc độ web linux lỗi bàn phím gõ chữ mariadb MySQL PDF Phần mềm download phần mềm làm video Phần mềm máy tính Phần mềm thiết kế Phần mềm tiện ích Phần mềm ảo hóa plugin wordpress Proshow Producer remote desktop SecureCRT ssl miễn phí Let’s Encrypt themes wordpress Thủ thuật máy tính thủ thuật win tăng tốc website Tạo website miễn phí Windows wordpress

• Webmaster
• Hướng dẫn IT
  • Tin học văn phòng
  • Windows
  • VPS & Linux
• Software
  • Phần Mềm Máy Tính
  • Share Key & Bản Quyền
  • Thiết kế – Đồ họa
  • Phần mềm Internet
• WordPress
  • Themes Bản Quyền
  • Themes Miễn Phí
  • Plugin
• Mạng Máy Tính
• Bảo mật VPS – Website
• Tin tức

wpDiscuz00Bạn thích bài viết này, viết bình luận nhé.x()x| Phản hồiInsert