3 phương pháp dễ dàng tùy chỉnh trang web WordPress bằng CSS

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ễ tùy chỉnh thông qua trình chỉnh sửa Gutenberg. Tuy nhiên, sẽ có khi bạn cần độ rộng tiếp cận nhiều hơn chút ít so với khoảng mà trình soạn thảo Gutenberg cung cấp.

Đây là khi CSS tùy chỉnh trở nên hữu ích. Tính năng tạo kiểu của CSS cấp 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, khiến cho diện mạo website trông đúng theo phương pháp bạn muốn.

Trong bài viết này, Chúng tôisẽ hướng dẫn bạn các yếu tố càng phải có để 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 đã 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 trình tùy chỉnh WordPress

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 diện từ khu vực quản trị. Đây là cách thức đơn giản nhất và vì có bản xem trước trực tiếp nên bạn có thể xem 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 dùng nhiều nhất, vì tất cả các thay đổi bạn sẽ thực hành đều được lưu trong chính WordPress. Điều này có nghĩa là ngay cả những lúc thay đổi hoặc cập nhật theme, bạn cũng sẽ không mất CSS tùy chỉnh của mình.

Dưới đây là các bước để thực hiện:

Bước 1: Điều hướng đến Appearance > Customize.

Thao tác này sẽ mở trình tùy biến theme WordPress, hiển thị cho bạn bản xem trước trực diện của trang web ở bên phải, cùng theo 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 Additional CSS .

Bước 2: Nhấp vào tab Additional CSS.

Thao tác này sẽ mở ra 1 hộp nhỏ trong ngăn bên trái, nơi bạn cũng có thể thêm CSS tùy chỉnh của mình. Bạn cũng có thể có thể nhập bao nhiêu dòng code 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 code 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 thức mà bạn thêm sẽ hiển thị trong khu vực xem trước trực diện ở bên phải. Để áp dụng các thay đổi cho trang web, hãy nhấp vào nút Publish ở đầu ngăn bên trái khi bạn hài lòng. Nếu 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 xuất bản sau hoặc lưu tác phẩm của mình 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 hành bằng phương pháp sử dụng trình tùy chỉnh đều gắn liền với theme hiện tại. Nếu bạn chuyển sang theme 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 theme 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 nữa một theme trên Notepad. Bằng cách đó, bạn chỉ cần sao chép và dán code vào phần “Additional CSS” cho 1 theme khác.

Nếu điều đó nghe có vẻ quá phức tạp và bạn thích một biện pháp cho phép bạn áp dụng CSS tùy chỉnh của mình vào bất kỳ theme WordPress nào bạn sử dụng, thì cách thức 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 cách ly với theme của bạn, cấp phép các thay đổi của bạn được áp dụng bất kể bạn sử dụng theme 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ũng đều có thể giúp việc thêm CSS dễ dàng hơn.

Hạn chế duy nhất nằm ngay chỗ chúng là phần mềm của bên thứ ba, có tức là chúng cũng đều 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 sẽ có ít tác động đến hiệu suất trang web. Dưới này là một số plugin CSS tùy chỉnh tốt nhất mà bạn có thể sử dụng:

Simple Custom CSS 

Simple Custom CSS là một trong những plugin CSS tùy chỉnh thông dụng 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ả các gì bạn phải làm là cài đặt và kích hoạt plugin. Sau đó, điều hướng đến phần Appearance trên ngăn bên trái của trang tổng quan.

Bạn sẽ thấy một tùy chọn mới mang 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ũng có thể thêm CSS tùy chỉnh của mình. Nhấp vào nút Update Custom CSS để lưu các thay đổi. Để xem các thay đổi, chỉ cần refresh trang web.

Simple Custom CSS and JS

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

CSS Hero

Nếu bạn không muốn viết một dòng code nào, thì plugin CSS Hero là chọn lựa hoàn mỹ cho bạn. Plugin này cung cấp một trình chỉnh sửa CSS trực giác với những menu drop-down và những trường đầu vào cấp 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àng phải viết bất kỳ code nào.

Phương pháp 3. Chỉnh sửa raw code

Hai phương pháp bài viết đã mô tả phía 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àng phải chạm vào bất kỳ file theme nào. Tuy nhiên, trong 1 số trường hợp, bạn có thể muốn chỉnh sửa CSS của theme hoặc thêm trực tiếp CSS tùy chỉnh vào code của theme.

Để thực hành 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 đơn giản để truy cập biểu định kiểu đây là thông qua Theme Editor trên trang tổng quan WordPress.

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

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

Sau lúc các giải pháp bảo vệ này được thực hiện, hãy đăng nhập vào backend WordPress. Đi tới Appearance > Theme Editor . Khi nhấp vào tùy chọn trình chỉnh sửa theme, bạn sẽ thấy 1 hộp pop-up cảnh báo bạn không nên thực hiện các thay đổi trực diện đối với những file theme của mình. Nếu làm đúng theo một số bước trên, bạn đã sẵn sàng.

Nhấp vào I understand để đón tục.

Sau khi nhấp, 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 Stylesheet.

Từ đây, bạn có thể thực hiện các thay đổi trực diện đối với các file theme của mình. Chỉ cần hãy nhớ nhấp vào Save and Update khi bạn đã hoàn tất.

wordpress,css,tùy chỉnh trang web WordPress,phương pháp tùy chỉnh trang web WordPress,tùy chỉnh trang web WordPress bằng CSS

Nội dung 3 phương pháp dễ dàng tùy chỉnh trang web WordPress bằng CSS được tổng hợp sưu tầm biên tập bởi: Tin Học Trường Tín. Mọi ý kiến vui lòng gửi Liên Hệ cho truongtin.top để điều chỉnh. truongtin.top tks.