Mẫu CSS WordPress

Việc thêm CSS tùy chỉnh giúp bạn thay đổi bố cục và giao diện của trang web, điều không thể thực hiện được thông qua các tùy chọn mặc định. Sử dụng FTP quá khó hiểu đối với hầu hết người mới bắt đầu, nhưng có nhiều cách khác để thêm CSS tùy chỉnh

Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách dễ dàng thêm CSS tùy chỉnh vào trang web WordPress của bạn mà không cần chỉnh sửa bất kỳ tệp chủ đề nào

Mẫu CSS WordPress

Tại sao Thêm CSS tùy chỉnh trong WordPress?

CSS là viết tắt của Cascading Style Sheets và là ngôn ngữ giúp bạn tạo kiểu cho trang web WordPress của mình. CSS và HTML đi cùng nhau vì CSS được sử dụng để tạo kiểu cho các thành phần HTML khác nhau như màu sắc, kích thước, bố cục và hiển thị

Việc thêm CSS tùy chỉnh giúp tùy chỉnh thiết kế và giao diện trang web của bạn, điều không thể thực hiện được thông qua các tùy chọn mặc định. Nó cung cấp cho bạn nhiều quyền kiểm soát hơn và bạn có thể dễ dàng thực hiện các thay đổi đối với chủ đề WordPress của mình bằng một vài dòng mã

Ví dụ: giả sử bạn muốn thay đổi màu nền của từng bài đăng riêng lẻ thay vì sử dụng cùng một màu trên toàn trang web. Bằng cách thêm mã CSS tùy chỉnh, bạn có thể cá nhân hóa nền của một bài đăng hoặc trang cụ thể

Tương tự, bạn có thể thay đổi kiểu và giao diện của danh mục sản phẩm trên cửa hàng Thương mại điện tử của mình bằng cách sử dụng CSS bổ sung

Điều đó nói rằng, chúng ta hãy xem các cách khác nhau mà bạn có thể thêm CSS tùy chỉnh vào trang web WordPress của mình. Bạn có thể nhấp vào liên kết bên dưới để chuyển tới bất kỳ phần nào bạn quan tâm

  • Thêm CSS tùy chỉnh bằng Trình tùy chỉnh chủ đề
  • Thêm CSS tùy chỉnh bằng Plugin
  • Thêm CSS bổ sung với Trình chỉnh sửa toàn trang (FSE)

Phương pháp 1. Thêm CSS tùy chỉnh bằng Trình tùy chỉnh chủ đề

Kể từ WordPress 4. 7, giờ đây người dùng có thể thêm CSS tùy chỉnh trực tiếp từ khu vực quản trị WordPress. Điều này cực kỳ dễ dàng và bạn sẽ có thể xem các thay đổi của mình bằng bản xem trước trực tiếp ngay lập tức

Trước tiên, bạn cần truy cập trang Giao diện »Tùy chỉnh từ bảng điều khiển WordPress của bạn

Mẫu CSS WordPress

Thao tác này sẽ khởi chạy giao diện tùy biến chủ đề WordPress

Bạn sẽ thấy bản xem trước trực tiếp của trang web của mình với một loạt các tùy chọn ở khung bên trái. Nhấp vào tab 'CSS bổ sung' từ bảng điều khiển bên trái

Mẫu CSS WordPress

Tab sẽ trượt để hiển thị cho bạn một hộp đơn giản nơi bạn có thể thêm CSS tùy chỉnh của mình. Ngay sau khi bạn thêm một quy tắc CSS hợp lệ, bạn sẽ có thể thấy quy tắc đó được áp dụng trên ngăn xem trước trực tiếp của trang web của bạn

Mẫu CSS WordPress

Bạn có thể tiếp tục thêm mã CSS tùy chỉnh cho đến khi hài lòng với giao diện trên trang web của mình

Đừng quên nhấp vào nút 'Xuất bản' ở trên cùng khi bạn hoàn tất

Ghi chú. Bất kỳ CSS tùy chỉnh nào bạn thêm bằng tùy biến chủ đề chỉ khả dụng với chủ đề cụ thể đó. Nếu bạn muốn sử dụng nó với các chủ đề khác, thì bạn cần sao chép và dán nó vào chủ đề mới của mình bằng phương pháp tương tự

Phương pháp 2. Thêm CSS tùy chỉnh bằng Plugin

Phương pháp đầu tiên chỉ cho phép bạn lưu CSS tùy chỉnh cho chủ đề hiện đang hoạt động. Nếu thay đổi chủ đề, bạn có thể cần sao chép và dán CSS tùy chỉnh của mình vào chủ đề mới

Nếu bạn muốn CSS tùy chỉnh của mình được áp dụng bất kể bạn đang sử dụng chủ đề WordPress nào, thì phương pháp này là dành cho bạn

Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Simple Custom CSS. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của chúng tôi về cách cài đặt plugin WordPress

Sau khi kích hoạt, chỉ cần vào Giao diện » CSS tùy chỉnh và ghi hoặc dán CSS tùy chỉnh của bạn

Mẫu CSS WordPress

Đừng quên nhấn nút 'Cập nhật CSS tùy chỉnh' để lưu các thay đổi của bạn

Bây giờ bạn có thể xem trang web WordPress của mình để xem CSS tùy chỉnh đang hoạt động

Phương pháp 3. Thêm CSS bổ sung với Trình chỉnh sửa toàn trang (FSE)

Một cách khác để bạn có thể thêm CSS tùy chỉnh trong WordPress là sử dụng Trình chỉnh sửa trang web đầy đủ (FSE). Với FSE, bạn có thể chỉnh sửa bố cục và thiết kế của toàn bộ trang web bằng trình chỉnh sửa khối WordPress, giống như khi chỉnh sửa bài đăng trên blog hoặc trang

Xin lưu ý rằng trình chỉnh sửa trang web đầy đủ chỉ khả dụng cho các chủ đề đã chọn. Để biết thêm chi tiết, bạn có thể xem bài viết của chúng tôi về các chủ đề chỉnh sửa toàn bộ trang web WordPress tốt nhất

Sử dụng một plugin để thêm CSS dễ dàng hơn một chút. Điều đó nói rằng, nếu bạn không muốn sử dụng plugin, thì chúng tôi sẽ chỉ cho bạn cách truy cập tùy biến ngay cả khi nó không còn khả dụng trong menu quản trị của bạn

Tất cả những gì bạn cần làm là đăng nhập vào quản trị viên WordPress của mình

Sau đó, chỉ cần sao chép và dán URL bên dưới vào trình duyệt của bạn và thay thế 'ví dụ. com’ với tên miền trang web của riêng bạn

https://example.com/wp-admin/customize.php

Thao tác này sẽ đưa bạn đến một phiên bản giới hạn của tùy biến chủ đề. Trong menu bên trái, bạn sẽ thấy tùy chọn thêm CSS tùy chỉnh ở dưới cùng

Chỉ cần nhấp vào tab 'CSS bổ sung'

Mẫu CSS WordPress

Bây giờ hãy tiếp tục và nhập mã CSS của bạn vào khu vực CSS bổ sung

Sau khi thêm mã, chỉ cần nhấp vào nút 'Xuất bản'

Mẫu CSS WordPress

Sử dụng plugin CSS tùy chỉnh so với Thêm CSS trong chủ đề

Tất cả các phương pháp được mô tả ở trên được khuyến nghị cho người mới bắt đầu. Người dùng nâng cao cũng có thể thêm CSS tùy chỉnh trực tiếp vào chủ đề của họ

Tuy nhiên, bạn không nên thêm đoạn mã CSS tùy chỉnh vào chủ đề gốc. Các thay đổi CSS của bạn sẽ bị mất nếu bạn vô tình cập nhật chủ đề mà không lưu các thay đổi tùy chỉnh của mình

Cách tiếp cận tốt nhất là sử dụng một chủ đề con thay thế. Tuy nhiên, nhiều người mới bắt đầu không muốn tạo một chủ đề con. Ngoài việc thêm CSS tùy chỉnh, thường thì những người mới bắt đầu thực sự không biết họ sẽ sử dụng chủ đề con đó như thế nào

Sử dụng plugin CSS tùy chỉnh cho phép bạn lưu trữ CSS tùy chỉnh độc lập với chủ đề của mình. Bằng cách này, bạn có thể dễ dàng chuyển đổi chủ đề và CSS tùy chỉnh của bạn sẽ vẫn ở đó

Một cách tuyệt vời khác để thêm CSS tùy chỉnh vào trang web WordPress của bạn là sử dụng plugin CSS Hero. Plugin tuyệt vời này cho phép bạn chỉnh sửa hầu hết mọi kiểu CSS trên trang web WordPress của mình mà không cần viết một dòng mã nào

Mẫu CSS WordPress

Bạn cũng có thể thêm CSS tùy chỉnh bằng plugin SeedProd. SeedProd là trình tạo trang web kéo và thả cho phép bạn tạo các chủ đề và trang đích WordPress tùy chỉnh cho trang web WordPress của mình. Bạn có thể dễ dàng chỉnh sửa cài đặt CSS toàn cầu, không cần mã

Mẫu CSS WordPress

Chúng tôi hy vọng bài viết này đã giúp thêm CSS tùy chỉnh vào trang web WordPress của bạn. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách chọn phần mềm thiết kế web tốt nhất và plugin trình tạo trang kéo và thả WordPress tốt nhất

Nếu bạn thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem các video hướng dẫn về WordPress. Bạn cũng có thể tìm thấy chúng tôi trên Twitter và Facebook

WordPress có sử dụng CSS không?

css là tệp biểu định kiểu (CSS) cần có cho mọi chủ đề WordPress . Nó kiểm soát cách trình bày (thiết kế và bố cục trực quan) của các trang web.

Tìm CSS phong cách ở đâu?

Mỗi chủ đề WordPress chứa phong cách của nó. tập tin css. Bạn có thể tìm thấy một trong thư mục /wp-content/themes/themename/ .

CSS được lưu trữ ở đâu trong WordPress?

CSS tùy chỉnh được lưu trữ trong cơ sở dữ liệu của trang web, trong bảng wp_posts . CSS tùy chỉnh là nội dung của bài đăng, với tiêu đề là sên chủ đề, dưới dạng bài đăng thuộc loại “css tùy chỉnh”. Các bản cập nhật tiếp theo được lưu trữ dưới dạng bản sửa đổi của bài đăng đó.