Làm thế nào để chèn CSS vào WordPress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Làm thế nào để chèn CSS vào WordPress Có 3 cách để chèn CSS riêng (custom CSS) trong WordPress: Sử dụng custom CSS WordPress plugin; Sử dụng built-in theme customizer; Sử dụng WordPress child theme. Ngoài ra, để bạn hiểu rõ tường tận, chúng tôi còn giải thích CSS là gì và những biện pháp sửa lỗi CSS.

Trong bài chỉ dẫn này, chúng tôi sẽ chỉ bạn cách chèn CSS vào WordPress. Có 3 phương pháp để chèn CSS riêng (custom CSS) trong WordPress:

  1. Sử dụng custom CSS WordPress plugin;
  2. Sử dụng built-in theme customizer;
  3. Sử dụng WordPress child theme.

Ngoài ra, để bạn hiểu rõ tường tận, chúng tôi còn giải thích CSS là gì trước, để sau cùng bạn có thể biết rõ mình đang làm gì. Việc sử dụng CSS sẽ giúp bạn tăng kỹ năng xây dựng website, điều chỉnh một số element nhất định, và tự làm được website thân thiện người dùng, bắt mắt hơn. Hãy bắt đầu thôi!

CSS là gì?

CSS, viết tắt của C ascading S tyle S heet, có thể hiểu CSS dễ dàng như sau:

  • CSS  mô tả , định dạng, bố cục thành phần của HTML hiển thị như ra sao trên màn hình, website, hoặc trên các phương tiện media khác
  • CSS dành dụm thời gian định dạng, vì nó cũng 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.

Bạn có thể tìm biết thêm về Inline CSS, External CSS và Internal CSS tại bài viết này. Vì vào vai trò lớn trong định dạng phong cách của website, CSS rất quan trọng trong việc 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 chính là khi bạn phải phải tìm biết thêm cách chèn Custom CSS (CSS riêng) vào website của bạn. Trong bài hướng dẫn này, chúng tôi sẽ chỉ bạn 3 phương pháp để chèn CSS vào WordPress, CMS mã nguồn mở rất lớn ngoài nước hiện nay.

Cách 1 — Chèn Custom CSS WordPress bằng Plugins

Cách dễ nhất để chèn Custom CSS vào WordPress là bằng plugin. Nói đến WordPress plugin thì bạn sẽ có rất nhiều lựa chọn, chúng tôi sẽ giới thiệu vài plugin custom CSS WordPress phổ biến nhất, và đều có thể cài trong mục Plugins  › Add New trong trang admin WordPress. Chèn css vào WordPress bằng plugin

Simple Custom CSS

Đây là một plugin WordPress custom CSS phổ biến nhất. Nó giúp chỉnh styles và ghi đè lên CSS hiện hành của theme. Giá trị được thiết lập trong đây cũng sẽ còn không thay đổi khi thay đổi theme. Simple Custom CSS WordPress

Khi được kích hoạt, tool này sẽ hiện trong mục Appearance  › Custom CSS . Cách sử dụng cực kì đơn giản. Điền bất kỳ giá trị nào bạn phải trong editor và đọng lại là xong. Simple custom css WordPress plugin

Sau đó, bạn sẽ thấy thay bằng cách refresh trang web. simple custom css WordPress

WP Add Custom CSS

Một tool mạnh mẽ khác để chèn CSS vào WordPress Wp add custom css wordpress plugin

Khi cài đặt xong, nó sẽ hiện ra một mục riêng trong dashboard. Tại đó, bạn có chỉnh custom css riêng cho bạn và áp dụng CSS vào toàn bộ trang. WP add custom css WordPress plugin

Điểm tiện lợi là bạn cũng nhìn thấy Custom CSS WordPress editor dưới mỗi bài viết. Vì vậy bạn có thể chèn nhiều CSS khác nhau vào từng bài viết nếu cần. Wp add custom css wordpress 3

Cuối cùng là coi lại thay đổi bằng phương pháp tải lại trang: Wp add custom css wordpress plugin

Site Origin CSS

Siute Origin CSS là một Custom CSS plugin thân thiện và có tính tương tác cao với những người dùng: Site origin css custom WordPress

Khi đã cài xong, công cụ này sẽ xuất hiện trong mục Appearance  › Custom CSS . Site-origin-css-custom-wordpress

Plugin này cũng bổ trợ editor tiện dung ngay tại từng phần của site để bạn cũng có thể có thể chỉnh sửa hoặc theme code thủ công. site origin css custom wordpress 3

Simple Custom CSS and JS

Cuối cùng, nhưng vẫn không kém phần “nguy hiểm”, bạn có lẽ thích plugin custom css này. Nó có đa dụng phụ thêm so với những plugin trước. Một trong những chúng là thêm entries JavaScripts. Simple custom css and js wordpress plugin

Khi pluign này được cài, mục quản lý sẽ hiện trong dashboard. Ở đó bạn có thể tạo custom CSS tương tự như cách bạn đăng tin mới trong WordPress. tao-entry-custom-wordpress-css

Để xem thử, chúng ta sẽ đổi màu cho tag h1 . Chỉnh sửa custom css trong WordPress

Tất cả thay đổi sẽ hiện lên khi bạn tải lại trang. WordPress custom css ví dụ 3

Lựa chọn 2 — Chèn Custom CSS vào WordPress bằng Theme Customizer

Bạn cũng có thể đơn giản chèn CSS vào WordPress từ phiên bản 4.7 trở lên, vì WordPress đã tích hợp công cụ theme customizer vào trong. Để sử dụng, bạn chỉ cần chuyển tới mục Appearance  Customize trong dashboard. mục css trong WordPress theme editor

Kéo xuống cuối cùng và chọn mục Additional CSS . mục additional css trong WordPress theme editor

Nó là công cụ có sẵn cho phép bạn chỉnh CSS code. Rất dễ để sử dụng, bạn có thể xem cả 2 phiên bản mobile và tablet của website. Ngày nay thân thiện thuộc mọi loại màn hình là ưu tiên hàng đầu phải không? chỉnh custom css wordpress bằng wordpress theme editor

Chúc mừng! Vậy là bạn đã biết phương pháp chèn CSS vào WordPress bằng theme editor mà cấm dùng plugin nào.

Cách 3 — Chèn CSS vào WordPress bằng Child Theme

2 cách trên đã chỉ bạn cách chèn CSS vào theme hiện hành của website WordPress. Tuy nhiên, sẽ được trường hợp bạn phải kiểm thử trước, hoặc là không muốn phả hỏng site đang chạy. Để làm vậy, chúng tôi khuyên bạn sử dụngWordPress child theme. Child theme sẽ giúp bạn làm tất cả mọi chuyện, kiểm thử nhiều loại CSS không giống nhau mà không ảnh hưởng tới site đang vận hành.!

Sửa lỗi phổ biến của Custom CSS WordPress

Đôi khi, bạn có thể gặp nhiều vấn đề nhỏ khi chèn CSS vào WordPress. Hãy nhìn qua các lỗi thông dùng nhất và làm ra sao để giải quyết chúng.

Thay đổi chưa được hiển thị

Custom CSS WordPress có thể bị áp dụng thất bại vì cache. Nếu bạn đang sẵn có cài caching pluing 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. Hãy xem bài chỉ dẫn này để biết phương pháp xóa cache. Một biện pháp khác là tạm thời vô hiệu plugin cache đi.

Nếu bạn cũng đã và đang cài browser caching để tăng tốc website, vậy thì chỉ cần xóa cache đi như hướng dẫn phía trên là đủ.

Ngoài ra một số hãng sản xuất hosting cũng có công cụ tự động lưu cache để tăng hiệu xuất cho WordPress site của bạn, như là Hostinger. Plugin caching đã được tích hợp vào wordpress và cần tạm thời vô hiệu trong mục Plugins  › Installed Plugins  › Must-Use Troubleshooting WordPress custom CSS issues by disabling in-build WordPress caching plugins provided by Hostinger.

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

Lỗi cú pháp thường dễ gặp 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 tình huống bạn sử dụng custom CSS wordpress quá đà. 2 hoặc nhiều lựa chọn của 1 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 mong muốn dùng cái nào, giá trị nào. Lỗi này thường gặp lúc gọi stylesheet lên trên một stylesheet đã có sẵn. Nếu bạn thử thay đổi h2 heading mà không có gì xảy ra, hãy kiểm tra lại style sheet cho entries cũ..

Không có ý tưởng

Mặc dù đây chẳng cần là lỗi, nhưng có biết bao tình huống phần khó khăn đặc biệt là sử dụng custom CSS nào cho WordPress. Vì có quá độ lựa, bạn có thể lúng túng dẫn đến … nhứt đầu hoa mắt, nhưng đừng lo, cứ nhìn qua những trang sau để dùng một vài ý tưởng hay ho của những người đi trước là được:

  • Ultimate Hostinger CSS Cheat Sheet
  • CSS fundamentals by BitDegree
  • Codeademy CSS tutorial
  • CSS tutorials by W3Schools

Lời kết

Tóm lại, chèn CSS vào WordPress là việc mà ai quản lý WordPress cũng đã từng làm hoặc sẽ làm, vì nó tạo cho WordPress một bố cục độc đáo và duy nhất theo phong cách riêng. Chúng ta đã học cách làm thế nào để chèn custom CSS vào WordPress bằng plugin, bằng công cụ có sẵn và bằng child theme trong bài hướng dẫn này. Ngoài ra chúng tôi còn nêu các lỗi thường gặp khi đụng tới custom CSS.

Nếu bạn thấy bài này hữu dụng, hãy share nó lên Facebook, Twitter nhé ;). Ngoài ra, nếu bạn có bất kỳ thủ thuật nào khác hay ho, hãy chia sẽ cùng với mọi đứa ở phần bình luận nhé!

Từ khóa bài viết: dinhthuanit.com,

Bài viết Làm thế nào để chèn CSS vào WordPress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang