3 phương pháp dễ dàng để tùy chỉnh trang web WordPress của bạn với CSS

ỨNG DỤNG


WordPress đã phát triển qua nhiều năm và ngày nay nó là một nền tảng khá linh hoạt và dễ dàng tùy chỉnh thông qua trình soạn thảo Gutenberg. Tuy nhiên, sẽ có lúc bạn cần phạm vi tiếp cận nhiều hơn một chút so với mức mà trình soạn thảo Gutenberg cung cấp.

Đây là lúc CSS tùy chỉnh có ích. Tạo kiểu CSS cho phép bạn chỉnh sửa màu sắc, khoảng cách, phông chữ, bố cục và về cơ bản là mọi yếu tố hình ảnh khác của trang web WordPress của bạn, làm cho nó trông giống như cách bạn muốn.

Trong bài viết này, TipsMake sẽ hướng dẫn bạn những điều cần thiết để tùy chỉnh trang web WordPress bằng CSS.

3 phương pháp dễ dàng để tùy chỉnh trang web WordPress với CSS

Khi bạn đã quen với những điều cơ bản trong CSS, bạn có thể sử dụng bất kỳ phương pháp nào sau đây để thêm CSS tùy chỉnh vào trang web WordPress của mình:

Phương pháp 1: Sử dụng WordPress Customizer

Với WordPress 4.7 hoặc bất kỳ phiên bản nào sau nó, bạn có thể thêm CSS tùy chỉnh trực tiếp từ khu vực quản trị. Đây là phương pháp đơn giản nhất và vì có bản xem trước trực tiếp nên bạn có thể thấy bất kỳ thay đổi nào mình thực hiện trong thời gian thực.

Đây cũng là cách được khuyến nghị nhất, vì tất cả các thay đổi bạn sẽ thực hiện đều được lưu trong chính WordPress. Điều này có nghĩa là ngay cả khi bạn thay đổi hoặc cập nhật chủ đề của mình, bạn sẽ không mất CSS tùy chỉnh của mình.

Dưới đây là các bước để làm điều đó:

Bước 1: Điều hướng đến Giao diện> Tùy chỉnh.

Hình ảnh 1 trong 3 phương pháp dễ dàng để tùy chỉnh trang web WordPress của bạn bằng CSS

Thao tác này sẽ mở tùy biến chủ đề WordPress, hiển thị cho bạn bản xem trước trực tiếp của trang web của bạn ở bên phải, cùng với một số tùy chọn tùy chỉnh ở bên trái. Cuộn xuống cuối bảng điều khiển bên trái và bạn sẽ tìm thấy tab CSS bổ sung.

Bước 2: Nhấp vào tab CSS bổ sung.

Hình 2 trong 3 Phương pháp Dễ dàng Tùy chỉnh Trang web WordPress của Bạn Với CSS

Thao tác này sẽ mở ra một hộp nhỏ trong ngăn bên trái, nơi bạn có thể thêm CSS tùy chỉnh của mình. Bạn có thể nhập bao nhiêu dòng mã CSS tùy thích. Điều tuyệt vời về trình chỉnh sửa này là nó xác thực mã của bạn, cảnh báo cho bạn nếu có bất kỳ lỗi nào.

Bước 3: Xuất bản các thay đổi.

Mọi quy tắc CSS hợp lệ mà bạn thêm sẽ hiển thị trong khu vực xem trước trực tiếp ở bên phải. Để áp dụng các thay đổi cho trang web, hãy nhấp vào nút Xuất bản ở đầu ngăn bên trái khi bạn hài lòng. Nếu bạn không muốn các thay đổi có hiệu lực ngay lập tức, bạn cũng có thể lên lịch để chúng được xuất bản sau hoặc lưu tác phẩm của bạn dưới dạng bản nháp.

Điều quan trọng cần lưu ý là bất kỳ thay đổi nào bạn thực hiện bằng cách sử dụng tùy biến đều gắn liền với chủ đề hiện tại. Nếu bạn chuyển sang chủ đề khác, các thay đổi sẽ biến mất, trừ khi bạn sao chép CSS tùy chỉnh của mình và thêm nó vào chủ đề mới. Một phương pháp hay là lưu tất cả CSS tùy chỉnh mà bạn thêm vào một chủ đề trong Notepad. Bằng cách đó, bạn có thể chỉ cần sao chép và dán mã vào phần ‘CSS bổ sung’ cho một chủ đề khác.

Nếu điều đó nghe có vẻ quá phức tạp và bạn thích một giải pháp cho phép bạn áp dụng CSS tùy chỉnh của mình cho bất kỳ chủ đề WordPress nào bạn sử dụng, thì phương pháp tiếp theo là dành cho bạn.

Phương pháp 2: Sử dụng một plugin

Các plugin CSS tùy chỉnh lưu trữ CSS tùy chỉnh riêng biệt với chủ đề của bạn, cho phép các thay đổi của bạn được áp dụng cho dù bạn sử dụng chủ đề nào. Các plugin này cũng đi kèm với các tính năng bổ sung như tự động hoàn thành có thể giúp việc thêm CSS dễ dàng hơn.

Hạn chế duy nhất là chúng là phần mềm của bên thứ ba, có nghĩa là chúng có thể làm chậm trang web của bạn. Tuy nhiên, hầu hết các plugin này đều nhẹ, vì vậy chúng thường ít ảnh hưởng đến hiệu suất của trang web. Dưới đây là một số plugin CSS tùy chỉnh tốt nhất mà bạn có thể sử dụng:

CSS tùy chỉnh đơn giản

Simple Custom CSS là một trong những plugin CSS tùy chỉnh phổ biến nhất. Nó nhẹ, dễ sử dụng và cung cấp các tính năng tuyệt vời. Thiết lập nó rất dễ dàng. Tất cả những gì bạn cần làm là cài đặt và kích hoạt plugin. Sau đó, điều hướng đến phần Giao diện ở ngăn bên trái của bảng điều khiển.

Bạn sẽ thấy một tùy chọn mới có tên là CSS tùy chỉnh. Nhấp vào nó sẽ mở ra một trình chỉnh sửa nơi bạn có thể thêm CSS tùy chỉnh của mình. Nhấp vào nút Cập nhật CSS tùy chỉnh để lưu các thay đổi. Để xem các thay đổi, chỉ cần làm mới trang web.

CSS và JS tùy chỉnh đơn giản

Nếu bạn muốn nhiều tính năng hơn nữa, plugin Simple Custom CSS và JS là một lựa chọn tuyệt vời. Ngoài việc thêm CSS, nó cũng cho phép bạn thêm các mục JavaScript.

Anh hùng CSS

Nếu bạn không muốn viết một dòng mã, thì plugin CSS Hero là sự lựa chọn hoàn hảo cho bạn. Plugin này cung cấp một trình chỉnh sửa CSS trực quan với các menu thả xuống và các trường nhập liệu cho phép bạn chỉnh sửa hầu hết mọi kiểu CSS trên trang web của mình mà không cần viết bất kỳ mã nào.

Phương pháp 3. Chỉnh sửa mã thô

Hai phương pháp bài viết được mô tả ở trên cho phép bạn thêm CSS tùy chỉnh vào trang web của mình mà không cần phải chạm vào bất kỳ tệp chủ đề nào. Tuy nhiên, trong một số trường hợp, bạn có thể muốn chỉnh sửa CSS của chủ đề hoặc thêm CSS tùy chỉnh trực tiếp vào mã chủ đề của bạn.

Để thực hiện việc này, bạn cần truy cập vào biểu định kiểu của trang web. Một cách dễ dàng để truy cập biểu định kiểu này là thông qua Trình chỉnh sửa chủ đề trên trang tổng quan WordPress.

Hình ảnh 3 trong số 3 phương pháp dễ dàng để tùy chỉnh trang web WordPress của bạn bằng CSS

Tuy nhiên, trước khi đi xa hơn, bạn cần áp dụng một số biện pháp bảo vệ. Đầu tiên, hãy sao lưu trang web. Trong khi chỉnh sửa các tệp chủ đề, bạn rất dễ mắc phải những sai sót có thể làm hỏng trang web của bạn.

Bản sao lưu đảm bảo rằng bạn có một trang web sao lưu đầy đủ chức năng để khôi phục trong trường hợp có sự cố. Tiếp theo, tạo một chủ đề con. Nếu bạn thực hiện các chỉnh sửa trực tiếp đối với chủ đề mẹ của mình, các thay đổi sẽ bị mất bất cứ khi nào chủ đề được cập nhật.

Khi các biện pháp bảo vệ này được thực hiện, hãy đăng nhập vào phần phụ trợ của WordPress. Đi tới Giao diện> Trình chỉnh sửa chủ đề. Khi bạn nhấp vào tùy chọn trình chỉnh sửa chủ đề, bạn sẽ thấy một hộp bật lên cảnh báo bạn không được thực hiện các thay đổi trực tiếp đối với các tệp chủ đề của mình. Nếu bạn làm theo các bước ở trên, bạn đã sẵn sàng.

Nhấp vào Tôi hiểu để tiếp tục.

Hình 4 trong 3 Phương pháp Dễ dàng Tùy chỉnh Trang web WordPress của Bạn Với CSS

Sau khi nhấp vào, bạn sẽ thấy biểu định kiểu của trang web theo mặc định. Nếu không, chỉ cần nhìn vào ngăn bên phải và nhấp vào style.css dưới tùy chọn Biểu định kiểu.

Hình ảnh 5 trong 3 phương pháp dễ dàng để tùy chỉnh trang web WordPress của bạn bằng CSS

Từ đây, bạn có thể thực hiện các thay đổi trực tiếp đối với các tệp chủ đề của mình. Chỉ cần đừng quên nhấp vào Lưu và Cập nhật khi bạn hoàn tất.



Source link

Trả lời

Email của bạn sẽ không được hiển thị công khai.