Cách thêm Custom CSS trong WordPress

Cách thêm Custom CSS trong WordPress

Trong quá trình sử dụng WordPress, đôi lúc bạn cần thêm Custom CSS vào trang web để chỉnh sửa giao diện theo ý muốn.

Trong bài hướng dẫn này, tôi sẽ chỉ bạn cách thêm Custom CSS trong WordPress nhanh chóng và đơn giản nhất.

CSS là gì?

Nếu bạn chưa biết, CSS là từ viết tắt của cụm từ Cascading Style Sheet. Có thể hiểu CSS đơn giản như sau:

  • CSS mô tả, định dạng, bố cục thành phần của HTML hiển thị như thế nào trên màn hình, website, hoặc trên các phương tiện media khác.
  • CSS tiết kiệm thời gian định dạng, vì nó có thể điều khiển bố cục, màu sắc, màu chữ… của nhiều trang web cùng một lúc.

Vì CSS quyết định việc định hình phong cách của trang web nên nó đóng vai trò rất quan trọng trong quá trình thiết kế website.

Và khi bạn muốn website của mình không giống của bất kỳ ai, độc đáo và độc nhất trên Internet, cũng là lúc bạn cần phải tìm hiểu cách thêm Custom CSS (CSS riêng) vào trang web.

Hướng dẫn thêm Custom CSS trong WordPress

Bạn có thể lựa chọn một trong ba cách sau để thực hiện:

  • Sử dụng built-in Theme Customizer
  • Sử dụng WordPress Child Theme
  • Sử dụng plugin cài đặt bên ngoài

Hãy cùng nhau tìm hiểu từng cách.

Sử dụng built-in Theme Customizer

Bạn có thể dễ dàng thêm CSS vào WordPress từ phiên bản 4.7 trở lên, vì WordPress đã tích hợp sẵn công cụ Theme Customizer vào mã nguồn. Để sử dụng, bạn truy cập mục Appearance › Customize trong trang quản trị.

Kéo xuống cuối cùng và chọn mục Additional CSS.

Nhập đoạn mã CSS riêng vào khung chỉnh sửa.

Xem thử giao diện hiển thị trên các thiết bị di động (máy tính bảng, điện thoại) để kiểm tra đoạn mã CSS. Sau khi hoàn thành ấn nút Publish để hoàn tất chỉnh sửa.

Sử dụng WordPress Child Theme

Nếu chưa biết Child Theme là gì, bạn hãy truy cập vào đây (bài viết bằng Tiếng Anh) để tìm hiểu cách tạo Child Theme cho WordPress.

Cách này thực hiện rất đơn giản nhưng chỉ áp dụng khi bạn đang sử dụng Child Theme.

Đầu tiên, bạn truy cập Appearance › Theme Editor, rồi nhập Custom CSS của bạn tại khung soạn thảo. Sau khi hoàn thành, ấn Update File và refresh lại trang web để xem thành quả.

Sử dụng plugin cài đặt bên ngoài

Cách dễ dàng nhất để thêm Custom CSS trong WordPress là sử dụng plugin.

Có rất nhiều plugin cho phép thêm Custom CSS để bạn lựa chọn, trong đó phổ biến nhất là Simple Custom CSS and JS, Simple Custom CSS, WP Add Custom CSS, Simple CSS

Trong bài viết này tôi sẽ hướng dẫn cách sử dụng chi tiết đối với plugin Simple Custom CSS and JS (Cài đặt bằng cách truy cập mục Plugins › Add New trong trang quản trị).

Simple Custom CSS and JS

Lý do tôi chọn plugin này bởi tính năng tùy biến CSS, HTML hoặc JavaScript dễ dàng với trình soạn thảo hiển thị trực quan, có chế độ autocomple.

Tính năng chính:

  • Nhúng thêm file CSS / JS từ bên ngoài
  • Tùy chọn chèn đoạn mã vào phần đầu hoặc cuối trang
  • Tùy chọn áp dụng đoạn mã đối với Frontend / Admin / Trang đăng nhập
  • Khi thay đổi theme sẽ không ảnh hưởng tới đoạn mã CSS / HTML / JS được thêm bằng plugin

Hướng dẫn sử dụng plugin Simple Custom CSS and JS:

  1. Truy cập mục “Custom CSS & JS” → “Add CSS Code”

  2. Nhập tiêu đề tại ô “Add title”

    Đặt tên cho đoạn code CSS.

  3. Nhập đoạn mã CSS riêng tại khung soạn thảo

    Bạn không cần khai báo thẻ <style type=”text/css”> và </style>.

  4. Tùy chọn Custom CSS

    Tại phần “Options”: chọn kiểu liên kết tại mục “Linking type” (External File/File bên ngoài hay Internal/Nhúng trực tiếp), vị trí nhúng tại mục “Where on page” (Header/Đầu trang hay Footer/Cuối trang), đối tượng nhúng tại mục “Where in site” (In Frontend/Trang chủ, In Admin/Trang quản trị hay On Login Page/Trang đăng nhập).

  5. Ấn nút “Publish” để xuất bản

    Nếu đang dùng bộ nhớ đệm cho trang web, sau khi xuất bản Custom CSS hãy ấn nút “Purge from cache” để cập nhật thay đổi.

Sửa lỗi thông dụng của Custom CSS

Đôi khi, bạn có thể gặp nhiều vấn đề nhỏ khi thêm CSS trong WordPress. Hãy xem qua các lỗi thông dùng nhất và làm thế nào để xử lý chúng.

Thay đổi không được hiển thị

Custom CSS có thể bị áp dụng thất bại vì cache. Nếu bạn đang có cài caching plugin nào, các thay đổi có khi không được áp dụng ngay mà nếu muốn thấy thay đổi ngay phải xóa WordPress cache. Một giải pháp khác là tạm thời vô hiệu plugin cache đi.

Misspelled CSS Syntax – Lỗi cú pháp CSS

Lỗi cú pháp thường dễ mắc phải nên custom CSS sẽ không hiển thị đúng. Nếu bạn thấy trang web hiển thị không đúng mà lại không do cache, hãy sử dụng CSS validator để rà soát lỗi. Chỉ cần dán code CSS vào và chạy. Nó sẽ hiện lỗi lên cho bạn, hoặc các lỗi đánh máy sẽ hiện ra.

Quá nhiều lựa chọn

Đôi khi trường hợp bạn sử dụng custom CSS quá đà. 2 hoặc nhiều lựa chọn của một thành phần mà được gán trùng nhau sẽ gây ra xung đột. Vì CSS không thể biết được bạn muốn dùng cái nào, giá trị nào. Lỗi này thường gặp khi gọi stylesheet lên trên một stylesheet đã có sẵn. Nếu bạn thử thay đổi thuộc tính của đoạn custom CSS mà không có gì xảy ra, hãy kiểm tra lại stylesheet của đoạn mã CSS gốc.

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *