Nghĩ đến việc tùy chỉnh một số tính năng trên trang web WordPress của bạn?
Bạn có thể thuê một nhà thiết kế web, sử dụng trình tạo trang WordPress hoặc chỉ cần xắn tay áo và thêm một số CSS tùy chỉnh vào trang web WordPress của bạn
Nếu ý tưởng đạt được quyền kiểm soát gần như không giới hạn đối với kiểu dáng của các yếu tố khác nhau trên trang web của bạn làm bạn phấn khích, thì bạn đang ở đúng nơi
Đọc tiếp để tìm hiểu tất cả những gì bạn cần biết về việc tùy chỉnh trang web WordPress của mình bằng CSS tùy chỉnh
Mục lục
3 cách khác nhau để thêm CSS tùy chỉnh vào WordPress
Có nhiều cách khác nhau để thêm CSS tùy chỉnh vào WordPress và không có cách nào nhất thiết là giải pháp tốt nhất cho mọi tình huống
Chúng tôi sẽ hướng dẫn bạn qua từng cái và bạn có thể quyết định nên sử dụng cái nào
Trước khi chúng tôi tiến xa hơn, bây giờ là lúc để sao lưu trang web của bạn
Những điều đầu tiên, đầu tiên. Sao lưu trang web của bạn
Bất kể trình độ kỹ năng của bạn là gì, sao lưu trang web của bạn phải là một trong những điều đầu tiên bạn làm trước khi cố gắng tùy chỉnh bất kỳ thứ gì
Nếu bạn làm theo tất cả các bước chúng tôi sẽ chỉ cho bạn, sẽ không có gì sai sót. Tuy nhiên, nếu bạn mắc lỗi ở bất kỳ điểm nào, có khả năng bạn sẽ phá hỏng trang web của mình
Có một bản sao lưu giúp bạn dễ dàng thiết lập lại trang web của mình nếu điều này xảy ra
Cách dễ nhất để tạo bản sao lưu là sử dụng plugin sao lưu chuyên dụng như UpdraftPlus
Để bắt đầu, chỉ cần cài đặt và kích hoạt plugin UpdraftPlus từ kho lưu trữ WordPress
Sau khi được kích hoạt, hãy điều hướng đến Cài đặt trong bảng điều khiển bên trái và nhấp vào Sao lưu UpdraftPlus
Sau đó, bạn có thể nhấp vào Sao lưu ngay để tạo bản sao lưu trong máy chủ web của mình
Ngoài ra, bạn có thể nhấp vào tab Cài đặt nội bộ UpdraftPlus để chọn một vị trí lưu trữ từ xa bổ sung
Bây giờ trang web của bạn đã được sao lưu an toàn, đã đến lúc thực hiện một số kiểu dáng tùy chỉnh với CSS trong WordPress
Như đã đề cập, có ba cách khác nhau để làm điều này. Chúng tôi sẽ bắt đầu với việc thêm CSS tùy chỉnh vào WordPress bằng plugin
Sẳn sàng?
Xin chào. Tên tôi là Sujay và tôi là CEO của Astra
Chúng tôi đang thực hiện sứ mệnh giúp các doanh nghiệp nhỏ phát triển trực tuyến bằng các sản phẩm phần mềm giá cả phải chăng và nền giáo dục mà bạn cần để thành công
nếu bạn muốn tham gia cuộc trò chuyện hoặc nhấp vào đây nếu bạn muốn trợ giúp cá nhân hoặc tham gia riêng với nhóm của chúng tôi
Cách thêm CSS tùy chỉnh vào WordPress bằng Plugin
Plugin là những công cụ hữu ích cho phép bạn thêm các tính năng hoặc chức năng bổ sung vào trang web WordPress của mình với nỗ lực tối thiểu
Có một số plugin giúp dễ dàng thêm CSS tùy chỉnh vào trang web WordPress. Một số công cụ phổ biến hơn và được khuyên dùng nhiều nhất bao gồm Đoạn mã, CSS và JS tùy chỉnh đơn giản, CSS Hero, v.v.
Để thêm plugin mới, hãy truy cập bảng điều khiển WordPress của bạn, nhấp vào Plugin > Thêm mới và tìm kiếm plugin ưa thích của bạn
Đối với ví dụ này, chúng tôi sẽ làm việc với Đoạn mã
Thêm CSS tùy chỉnh vào WordPress bằng đoạn mã
Đoạn mã giúp bạn dễ dàng chạy các đoạn mã CSS trên trang web của mình. Với plugin này, bạn không phải chỉnh sửa các tệp chủ đề của mình để thêm mã, vì giao diện GUI bắt chước các chức năng của chủ đề của bạn. tập tin php
Khi bạn đã cài đặt và kích hoạt plugin, hãy di chuột qua Giao diện trong phụ trợ WordPress và nhấp vào CSS tùy chỉnh
Trong giao diện CSS tùy chỉnh đơn giản, chỉ cần dán mã CSS của bạn và nhấp vào Cập nhật CSS tùy chỉnh
Một số plugin CSS khác để xem xét
Có rất nhiều plugin CSS khác sẽ giúp bạn làm điều tương tự. Chúng cũng có các tính năng độc đáo của chúng, vì vậy hãy chắc chắn xem xét kỹ chúng trước khi bạn chọn một
Dưới đây là một số tùy chọn hàng đầu
CSS và JS tùy chỉnh đơn giản
CSS và JS tùy chỉnh đơn giản cho phép bạn thêm cả mã CSS và JS mà không cần sửa đổi các tệp chủ đề hoặc plugin của bạn
Một số tính năng chính của nó bao gồm trình soạn thảo văn bản có đánh dấu cú pháp, thêm CSS hoặc JS vào giao diện người dùng hoặc phía quản trị viên, thêm bao nhiêu mã tùy thích và giữ các thay đổi tùy chỉnh của bạn khi bạn thay đổi chủ đề
Anh hùng CSS
CSS Hero là một plugin thân thiện với người dùng, giúp quá trình chỉnh sửa CSS trở nên liền mạch. Nó có giao diện trỏ và nhấp hoặc kéo và thả dễ dàng và trực quan giúp việc tùy chỉnh dễ dàng hơn bao giờ hết. Điều này hoạt động tốt nhất cho người mới bắt đầu với kỹ năng mã hóa bằng không
Với CSS Hero, bạn có quyền truy cập vào bộ sưu tập phông chữ khổng lồ của Google và toàn quyền kiểm soát bảng màu
Khi bạn kích hoạt bất kỳ plugin nào, bạn có thể tìm thấy nó trong bảng điều khiển của mình qua Giao diện >> CSS tùy chỉnh
Một số plugin này cũng có thể có phần dành riêng trên bảng điều khiển của bạn nhưng điều đó sẽ thay đổi tùy theo plugin
Thêm CSS tùy chỉnh bằng Trình tùy chỉnh WordPress
WordPress có một tùy biến chủ đề tích hợp sẵn mà bạn có thể tận dụng. Bất kể chủ đề bạn chọn là gì, bạn luôn có thể điều chỉnh nó theo sở thích bằng tính năng này
Điều hướng đến phần Giao diện trên bảng điều khiển của bạn và nhấp vào Tùy chỉnh
Cuộn xuống cuối trang và nhấp vào CSS bổ sung
Tại đây, bạn sẽ có thể thêm bất kỳ mã CSS nào
Trong khi thêm mã, bạn sẽ có tùy chọn xem trước mã ở chế độ xem trên máy tính để bàn và thiết bị di động. Điều này giúp bạn có ý tưởng về giao diện của cả hai giao diện trước khi xuất bản
Phương pháp này không cần bất kỳ plugin nào và nhiều người có xu hướng chọn phương pháp này vì nó đơn giản hơn
Một lợi ích bổ sung là mã CSS của bạn được giữ nguyên ngay cả khi bạn cập nhật chủ đề hoặc thay đổi chủ đề
Cách thêm CSS tùy chỉnh vào WordPress bằng Trình chỉnh sửa chủ đề
Cách trực tiếp nhất để viết một số CSS vào trang web WordPress của bạn là sử dụng trình chỉnh sửa WordPress. Đây cũng là phương pháp rủi ro nhất, nhưng nếu bạn đã sao lưu trang web của mình thì sẽ ổn thôi
Một bước bổ sung cần thực hiện là tạo một chủ đề con. Mặc dù có nhiều cách khác nhau để thực hiện việc này, nhưng nếu bạn đang sử dụng chủ đề Astra, chủ đề này đi kèm với trình tạo chủ đề con riêng
Để bắt đầu, hãy điều hướng đến trình tạo chủ đề con Astra
Tất cả những gì bạn phải làm là nhập tên cho chủ đề con mới của mình và nhấp vào nút Tạo. Chủ đề con mới của bạn sẽ được tải xuống theo mặc định
Nếu bạn đang sử dụng một chủ đề khác, bạn có thể cân nhắc sử dụng plugin chẳng hạn như Trình cấu hình chủ đề con
Để sử dụng plugin này, hãy di chuột qua Plugin, sau đó nhấp vào Thêm mới trong phần phụ trợ WordPress của bạn
Tìm kiếm Trình cấu hình chủ đề con. Khi bạn tìm thấy nó, hãy cài đặt và kích hoạt nó
Bây giờ để tạo chủ đề con mới của bạn, hãy điều hướng đến Công cụ trong bảng điều khiển WordPress và nhấp vào Chủ đề con
Thao tác này sẽ mở trình hướng dẫn thiết lập
Nhấp vào Phân tích để tìm hiểu xem có thể tạo chủ đề con từ chủ đề hiện tại của bạn không. Trong hầu hết các trường hợp, sẽ không có vấn đề gì ở đây
Sau khi xóa, bước tiếp theo là tạo chủ đề con của bạn
Chỉ cần nhấp vào Tạo chủ đề con mới và chủ đề con mới của bạn sẽ sẵn sàng để sử dụng
Thêm CSS trực tiếp vào Style. Tệp CSS
Để bắt đầu, hãy di chuột qua Giao diện trong menu bên trái của bảng điều khiển WordPress
Nhấp vào Trình chỉnh sửa chủ đề. Điều này sẽ cấp cho bạn quyền truy cập vào một số tệp cơ bản giúp chủ đề của bạn hoạt động
Theo mặc định, nó sẽ mở ra phong cách. css, đây là tệp bạn đang tìm kiếm
Cuộn xuống cuối biểu định kiểu và dán mã CSS của bạn. Cập nhật tệp và thế là xong
Các sự cố CSS tùy chỉnh phổ biến của WordPress và cách khắc phục chúng
Như bạn đã thấy, việc chèn CSS tùy chỉnh vào WordPress thực sự dễ dàng. Nhưng những thách thức có thể xảy ra theo thời gian. Mặc dù vậy, đừng lo lắng, mặc dù những thách thức này có thể xảy ra vì nhiều lý do, nhưng chúng thường dễ khắc phục
Chúng tôi sẽ hướng dẫn bạn một số thách thức phổ biến về CSS mà bạn có thể gặp phải, cách chẩn đoán và cách khắc phục chúng
1. Các vấn đề xếp tầng
Cách thức hoạt động của CSS, có thể tạo nhiều quy tắc tác động đến cùng một thuộc tính của một phần tử. Ví dụ: một tiêu đề có thể bị ảnh hưởng bởi hai quy tắc xung đột có thể chỉ định cho nó các màu khác nhau
Cascading là một cách để giải quyết những. Cascade là một thuộc tính CSS ưu tiên các quy tắc CSS mới nhất hơn các quy tắc cũ hơn trong trường hợp xảy ra xung đột
Nếu bạn đã tạo một số quy tắc CSS nhưng không được phản ánh, thì có thể có một quy tắc xung đột với quy tắc mà bạn dự định
Nếu bạn muốn tạo các quy tắc chung cho một số phần tử, đồng thời tạo kiểu cho một số phần tử đó hơi khác một chút, bạn có thể thực hiện việc này bằng cách dựa vào một thuộc tính CSS có tên là tính đặc hiệu
ID và lớp tạo các quy tắc cụ thể được ưu tiên trong tầng. Điều này có nghĩa là không có vấn đề gì nếu có hai hoặc nhiều quy tắc xung đột. Tất cả những gì bạn phải làm là thêm một vòng loại như Lớp hoặc ID vào thành phần bạn muốn tạo kiểu khác
2. Thay đổi không xuất hiện
Sau khi sử dụng CSS tùy chỉnh trên trang web của mình, bạn có thể không thấy ngay bất kỳ thay đổi nào của mình. Đừng hoảng sợ, đây có thể là sự cố bộ nhớ đệm
Bắt đầu bằng cách xóa bộ nhớ cache của trình duyệt của bạn. Nếu điều này không giải quyết được sự cố, hãy xóa bộ đệm WordPress của bạn
Nếu các bước này không giải quyết được vấn đề, thì nhiều khả năng vấn đề sẽ liên quan đến chất lượng CSS của bạn. Bạn có thể mắc lỗi hoặc viết sai chính tả trong mã CSS của mình
Đọc tiếp để tìm hiểu cách chẩn đoán và khắc phục sự cố này
3. Lỗi và cú pháp CSS sai chính tả
Lỗi chính tả phổ biến hơn bạn nghĩ và rất dễ bỏ qua. Điều này có thể ảnh hưởng đến cách CSS tùy chỉnh được hiển thị
Mặc dù mã có thể trông chính xác, nhưng ngay cả những lỗi nhỏ cũng có thể ngăn trang web của bạn trông giống như bạn mong đợi. Trong trường hợp này, bạn phải kiểm tra mã để đảm bảo không có lỗi chính tả
Cách dễ dàng để thực hiện việc này là sử dụng một công cụ có tên là trình xác thực CSS, công cụ này sẽ làm nổi bật các lỗi trong CSS của bạn. Trình xác thực CSS phổ biến nhất hiện có là Trình xác thực CSS của W3C [World Wide Web Consortium]
Có nhiều cách khác nhau để sử dụng trình xác thực CSS của W3C tùy thuộc vào cách bạn đã chèn CSS của mình. Bạn có thể dán vào các đoạn CSS, tải lên toàn bộ biểu định kiểu hoặc chỉ cần dán vào URL của tài liệu nếu có
Sau đó, công cụ sẽ kiểm tra CSS của bạn và sẽ làm nổi bật các lỗi cơ bản như lỗi chính tả hoặc thiếu dấu chấm phẩy, cũng như các lỗi nghiêm trọng hơn như không đáp ứng các tiêu chuẩn của W3C
Điều gì xảy ra với CSS tùy chỉnh nếu bạn thay đổi chủ đề của mình?
Khi bạn sử dụng CSS tùy chỉnh, có nguy cơ mất nó khi bạn thay đổi chủ đề WordPress của mình. Để tránh điều này, hãy luôn tạo một chủ đề con khi viết CSS tùy chỉnh
Nếu bạn không sử dụng chủ đề con, bạn có thể muốn lưu CSS tùy chỉnh của mình ở đâu đó để dễ dàng triển khai nó với chủ đề mới khi bạn thay đổi chủ đề
Sẵn sàng để tạo một số CSS tùy chỉnh trong WordPress?
Biết cách chỉnh sửa CSS của bản cài đặt WordPress giúp bạn kiểm soát nhiều hơn đối với thiết kế trang web của mình. Nó cũng cho phép bạn làm được nhiều việc hơn mà không phải cài đặt các plugin bổ sung có thể dẫn đến phình to
Trong bài viết này, chúng tôi đã đề cập đến ba phương pháp để làm điều này
Chúng bao gồm sử dụng plugin, làm việc trong tùy biến và chỉnh sửa trực tiếp vào kiểu. tập tin css trong WordPress
Nếu bạn làm theo các bước này, bạn sẽ nhanh chóng tùy chỉnh trang web của mình như một chuyên gia. Đừng quên sao lưu trang web của bạn và tạo một chủ đề con trước
Tham gia 635.020 người đăng ký
Nhận quyền truy cập độc quyền vào các mẹo, bài viết, hướng dẫn, cập nhật mới, v.v.
Tên của bạn
địa chỉ email của bạn
ĐẶT MUA
Tiết lộ. Blog này có thể chứa các liên kết liên kết. Nếu bạn mua hàng qua một trong những liên kết này, chúng tôi có thể nhận được một khoản hoa hồng nhỏ. Đọc tiết lộ. Hãy yên tâm rằng chúng tôi chỉ giới thiệu những sản phẩm mà cá nhân chúng tôi đã sử dụng và tin rằng sẽ gia tăng giá trị cho độc giả của chúng tôi. Cảm ơn sự hỗ trợ của bạn
Thông tin về các Tác giả
Nhóm biên tập của chúng tôi tại Astra là một nhóm các chuyên gia do người đồng sáng lập Brainstorm Force, Sujay Pawar đứng đầu. Chúng tôi mong muốn tạo ra nội dung được nghiên cứu kỹ lưỡng, có độ chi tiết cao liên quan đến WordPress, thiết kế Web và hướng dẫn về cách phát triển doanh nghiệp trực tuyến của bạn
Chia sẻ là quan tâm
1 bình luận
cây khế
Giải pháp thú vị để thay đổi CSS. Trên một blog khác, tôi đọc được rằng thật tốt khi chặn quyền truy cập vào các tệp của máy chủ thông qua buồng lái. Bạn có thể viết một bài báo về chủ đề này và tôi rất muốn biết thêm
Chúc mừng năm mới
Để lại bình luận
Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *
Nhập ở đây
Tên*
E-mail*
Trang mạng
Bài viết được đề xuất
Làm thế nào để bắt đầu một blog du lịch, kiếm tiền và sống một cuộc sống mơ ước
Nhóm biên tập Ngày 26 tháng 1 năm 2023
16 chiến dịch bán hàng thương mại điện tử để tiếp thị theo mùa hiệu quả
Nhóm biên tập Ngày 24 tháng 1 năm 2023
Cách tạo một trang web thành viên tuyệt vời trong vài phút [Không cần mã hóa]
Nhóm biên tập Ngày 16 tháng 1 năm 2023
Astra miễn phí. Bây giờ và mãi mãi
Chúng tôi tin rằng việc tạo các trang web đẹp không nên tốn kém. Đó là lý do tại sao Astra miễn phí cho mọi người. Bắt đầu miễn phí và mở rộng với các gói giá cả phải chăng