Có nhiều cách để thêm mã CSS tùy chỉnh vào blog WordPress.

Hôm nay, tôi sẽ giải thích những điểm mạnh và điểm yếu của hai phương pháp khác nhau mà tôi đề xuất với bạn, để bạn có thể chọn phương pháp phù hợp nhất với mình.

Nhưng trước đây, nếu bạn chưa bao giờ cài đặt WordPress khám phá Làm thế nào để cài đặt một bước 7 blog WordPress et Làm thế nào để tìm kiếm, cài đặt và kích hoạt một chủ đề WordPress trên blog của bạn 

Sau đó trở lại lý do tại sao chúng ta ở đây.

Cách tìm các mục bạn muốn tùy chỉnh

Một khi bạn đã tách phần chủ đề WordPress của bạn mà bạn muốn thay đổi (ví dụ tiêu đề của một bài báo), bạn sẽ cần phải xác định các thuộc tính CSS áp dụng cho nó để bạn có thể thực hiện các thay đổi thích hợp. May mắn thay, quá trình này không phức tạp.

CSS sử dụng các bộ chọn để xác định các thành phần nào sẽ trải qua các thay đổi cụ thể khác nhau. Thông thường, điều này được thực hiện bằng cách chỉ định một " lớp "Của một phần tử (hoặc phần tử DOM). Tuy nhiên, CSS cũng có thể được sử dụng để xác định bố cục của toàn bộ thành phần (ví dụ: thẻ " ") hoặc sử dụng định danh của thẻ.

May mắn thay, các trình duyệt phổ biến cho phép chúng ta xem các bộ chọn và khai báo khác nhau được áp dụng cho các phần tử trang chỉ với một vài cú nhấp chuột. Ví dụ: trên Google Chrome, bạn chỉ cần đánh dấu một phần cụ thể của tài liệu và sau đó nhấp chuột phải, như trong ví dụ bên dưới.

Bằng cách nhấp vào Kiểm tra phần tử Trong menu thả xuống xuất hiện, bạn sẽ thấy mã HTML của trang trong một cửa sổ mới với mục được kiểm tra được tô sáng trong cửa sổ bên phải (hoặc bên dưới). Bạn có thể xem một ví dụ dưới đây.

Các văn bản của các yếu tố này (hoặc các thuộc tính) Nổi bật màu đỏ cho bạn thấy các kiểu cụ thể khác nhau áp dụng cho mục mà bạn đã tô sáng bằng cách kiểm tra mã.

Đọc cũng: Làm thế nào để Thêm một trình đơn thả xuống với CSS trong Visual Editor của bạn

Ví dụ, phần tử " cỡ chữ Cho bạn biết rằng phông chữ được hiển thị trong mục được tô sáng có kích thước bằng pixel 13. Các mô tả được bao quanh bởi dấu ngoặc nhọn và trước các bộ chọn. Tên của tệp biểu định kiểu tương ứng được hiển thị ở bên phải của bộ chọn.

Một khi bạn có thông tin này trong tâm trí, việc thay đổi phong cách trở nên dễ dàng. Ví dụ: nếu bạn muốn thay đổi phông chữ từ 13px thành 14px, bạn chỉ cần tìm tệp biểu định kiểu của mình, bộ chọn tương ứng với một trong các mục được tô sáng. Nó thường ở dạng này: (« # Thông tin .block-plugin-content"). Sau đó, bạn có thể sửa đổi các giá trị khác nhau của các thuộc tính.

Bạn có thể làm điều tương tự trên Firefox, chỉ cần làm nổi bật một phần cụ thể của trang, nhấp chuột phải vào mục đó, sau đó chọn " Kiểm tra phần tử Trong menu xuất hiện.

Làm thế nào WordPress và làm việc cùng nhau CSS

Có một thực tế là Chủ đề WordPress được tạo khác nhau. Vì vậy, hãy nhớ rằng theme WordPress có thể không tuân thủ 100% những gì bạn đọc trong các phần sau.

Điều đó nói rằng, nhiều khả năng CSS được sử dụng trên blog WordPress của bạn nằm trong một tệp có tên " style.css " Đây là tên chung cho một biểu định kiểu cho bất kỳ loại trang web nào, không chỉ WordPress.

Xem thêm: Làm thế nào để thay đổi kích thước của Gravatar images trên WordPress

Bây giờ là lúc để trải qua các quá trình chỉnh sửa khác nhau.

Phương pháp # 1: Chỉnh sửa tệp kiểu của chủ đề WordPress của bạn

Có hai cách để truy cập tệp style.css của chủ đề của bạn.

Đầu tiên là làm điều đó từ bảng điều khiển WordPress của bạn. Trên menu bên trái, chọn menu " Apparence "Và sau đó" Nhà phát hành '.

Khi bạn ở trên trang trình chỉnh sửa, bạn sẽ thấy danh sách các tệp trên thanh dọc ở phía bên phải của trang. Cuộn qua danh sách các tệp. Bạn sẽ thấy một tệp có tên " Stylesheet style.css Ở dưới cùng của trang.

Nếu bạn nhấp vào tên của tệp này, nó sẽ được tải và hiển thị trong trình chỉnh sửa ở giữa. Bạn có thể sử dụng màn hình này để chỉnh sửa tập tin.

Cách khác để tìm biểu định kiểu là duyệt qua hệ điều hành của nhà cung cấp dịch vụ lưu trữ của bạn và định vị tệp trong theme WordPress (sử dụng một ứng dụng FTP). Vị trí chính xác sẽ khác nhau tùy thuộc vào nhà cung cấp dịch vụ lưu trữ của bạn. Trong ví dụ được hiển thị bên dưới, tên trang web (trong trường hợp của chúng tôi thecare) Là một thư mục trong thư mục public_html.

Vì WordPress đã được cài đặt, bạn có thể thấy thư mục wp-content trong "thecare". Thư mục con wp-content là một thư mục khác có tên " wp-chủ đề", đó là nơi tất cả Chủ đề WordPress đã được cài đặt.

Từ trang web này sử dụng một chủ đề gọi là " Đăng ký bản tin », Tệp kiểu« style.css Nằm trong thư mục " Bản tin mẹ '.

Phương pháp # 2: Sử dụng plugin để sửa đổi CSS

Có lẽ cách thuận tiện nhất để chỉnh sửa CSS của blog WordPress của bạn là việc sử dụng plugin.

Một trong những lợi thế chính của việc sử dụng một plugin tương tự như các chủ đề con. Đúng bạn cập nhật chủ đề WordPress, các thay đổi của bạn sẽ không bị ghi đè, vì chúng sẽ được lưu trữ riêng biệt và không nằm trong các tệp chủ đề. Tất nhiên, lợi thế khác là bạn không phải tạo chủ đề con.

Dưới đây là một số plugin cao cấp mà bạn cũng có thể sử dụng để sửa đổi mã CSS của mình. theme WordPress :

1. Bút chì màu vàng: Trình chỉnh sửa kiểu Visual CSS

Yellow Pencil là một trình chỉnh sửa phong cách trực quan mà bạn có thể sử dụng với bất kỳ chủ đề nào để cá nhân hóa trang web của mình trong vài phút (phông chữ, màu sắc, hoạt ảnh và hơn thế nữa…).

Ce Plugin WordPress premium sẽ tạo kiểu CSS bằng cách lý lịch trong khi bạn chơi với màu sắc như thể đó là một trò chơi. Nó được thiết kế cho người mới bắt đầu cũng như người dùng có kinh nghiệm.

Khám phá cũng của chúng tôi Plugin 5 WordPress để hiển thị thông báo

Không có kiến ​​thức mã hóa được yêu cầu. Tuy nhiên, Plugin WordPress có một trình soạn thảo CSS tốt cho những người thích viết mã. Bạn có thể viết mã trực tiếp với trình chỉnh sửa này và tùy chỉnh CSS của mình.

Tải về | Bản demo | Web hosting

2. JS và CSS tùy chỉnh cho Gutenberg

Le Plugin WordPress JS và CSS tùy chỉnh cao cấp dành cho Gutenberg sẽ cho phép bạn thêm vô số kiểu tùy chỉnh không giới hạn vào trình chỉnh sửa WYSIWYG cho các bài đăng và trang WordPress của bạn. Nó hoàn toàn tương thích với phiên bản Gutenberg của WordPress.

Bạn có thể chỉ cần tạo một kiểu mới với trình soạn thảo CSS dễ sử dụng. Plugin WordPress này mở rộng các tính năng của lĩnh vực tùy chỉnh của trang web của bạn và cung cấp cho bạn khả năng sửa đổi các trường tùy chỉnh của bạn với một mô-đun cá nhân hóa mạnh mẽ và năng động. và chức năng của xem trước thời gian thực của plugin WordPress này làm cho nó rất thoải mái và thân thiện với người dùng.

Tải về | Bản demo | Web hosting

3. SiteOrigin CSS

Cho đến nay, nó là plugin WordPress cung cấp nhiều tùy chọn nhất trong danh sách này. Điều tuyệt vời nhất về cái sau là nó miễn phí. Plugin WordPress này là plugin duy nhất không thể tìm thấy trong tùy biến.

Sau khi cài đặt và kích hoạt plugin, bạn cần điều hướng đến vị trí sau “ Giao diện> CSS tùy chỉnh Để truy cập phiên bản CSS của plugin. Trên trang này, bạn có thể thấy một trình soạn thảo văn bản không cung cấp bản xem trước trực tiếp. 

Đọc bài viết của chúng tôi về Các plugin 10 WordPress để tăng doanh số của trang web của bạn

Để truy cập phần sau, bạn phải nhấp vào một trong hai nút xuất hiện ở bên trái, ngay phía trên trình chỉnh sửa. Nút có biểu tượng con mắt sẽ hiển thị trình chỉnh sửa mã CSS trực quan mà những người đam mê sẽ đánh giá cao. Biểu tượng với các mũi tên mở rộng sẽ hiển thị một trình soạn thảo văn bản ngụ ý rằng bạn đã nắm vững các mã CSS.

Tải về | Bản demo | Web hosting

4. Simple CSS

Simple CSS là một trong những plugin phổ biến nhất.

Khám phá cũng của chúng tôi Cách tạo blog của bạn nhanh chóng: quản lý tệp CSS và JS.

Nó đã được cài đặt hơn 100 lần và đã nhận được đánh giá năm sao.

Tải về | Bản demo | Web hosting

5. WP Thêm Tuỳ chỉnh CSS

WP Thêm CSS tùy chỉnh là một plugin cho phép bạn thay đổi bố cục của blog WordPress toàn bộ hoặc chỉ các bài viết cá nhân. Đây là một lựa chọn tuyệt vời nếu bạn đang tìm kiếm sự linh hoạt trong việc tùy chỉnh các mục.

Plugin đã được tải xuống hơn 10.000 lần và hiện được xếp hạng 4,3 sao.

Tải về | Bản demo | Web hosting

6. Theme Junkie CSS

Nếu bạn đang tìm kiếm một giải pháp cung cấp bản xem trước trực tiếp các thay đổi của mình, bạn có thể cân nhắc sử dụng Chủ đề CSS tùy chỉnh Junkie. 

Giải pháp này thêm trình quản lý CSS tùy chỉnh vào bảng điều khiển của bạn, nơi bạn có thể thêm các kiểu của riêng mình. Nó cũng cung cấp một sự thay thế cho sử dụng một chủ đề con.

Tải về | Bản demo | Web hosting

Các tài nguyên được đề xuất khác

Chúng tôi cũng mời bạn tham khảo các tài nguyên dưới đây để đi xa hơn trong việc kiểm soát và kiểm soát trang web và blog của bạn.

• Chia sẻ plugin 10 WordPress trên mạng xã hội
• Làm thế nào để hiển thị các lĩnh vực tùy chỉnh bên ngoài vòng lặp trên WordPress
• Các plugin 5 WordPress để kiếm tiền từ blog của bạn bằng quảng cáo
• Làm thế nào để bảo vệ chọc nội dung blog của bạn

Kết luận

Đây! Vậy là xong cho hướng dẫn này, tôi hy vọng bạn có thể thêm mã CSS tùy chỉnh vào blog WordPress của mình theo 2 phương pháp, Nếu bạn có ý kiến hoặc đề xuất, đừng ngần ngại cho chúng tôi biết trong phần dành riêng cho những điều này.

Tuy nhiên, bạn cũng sẽ có thể tham khảo ý kiến ​​của chúng tôi ressources, nếu bạn cần thêm các yếu tố để thực hiện các dự án tạo trang Internet của mình, bằng cách tham khảo hướng dẫn của chúng tôi về Tạo blog WordPress hoặc một ngày Divi: chủ đề WordPress tốt nhất mọi thời đại.

Nếu bạn thích bài viết này, nđừng ngần ngại chia sẻ trên các mạng xã hội yêu thích của bạn. 

...