Làm cách nào để tùy chỉnh CSS của trang web WordPress của bạn? Tìm hiểu trong bài viết này.

Bất kể bạn chọn chủ đề WordPress nào cho trang web của mình, sẽ có những trang web khác sử dụng nó. Và ngay cả khi nhiều tùy chọn tùy chỉnh được cung cấp bởi nhiều Chủ đề WordPress ngày nay bạn có thể làm cho trang web của mình trở nên độc đáo hơn.

Đổ thực sự Để chạm vào khía cạnh trực quan của chủ đề WordPress của bạn, bạn phải vượt ra ngoài tùy chỉnh tiêu chuẩn được cung cấp bởi các tùy chọn hoặc cài đặt của chủ đề WordPress. Tùy chỉnh CSS của blog WordPress của bạn sẽ cho phép bạn sửa đổisự xuất hiện của trang web của bạn để làm cho nó thực sự độc đáo.

Hướng dẫn này sẽ xem xét nhiều phương pháp có sẵn cho bạn để tùy chỉnh trang web của mình bằng CSS, tạo và tùy chỉnh các chủ đề con, sử dụng các plugin WordPress Customizer tích hợp sẵn và plugin WordPress của CSS.

Nhưng trước khi bắt đầu, hãy dành thời gian để xem xét Làm thế nào để cài đặt một theme WordPress, Làm thế nào nhiều plugins tôi nên cài đặt trên WordPress.

Sau đó tìm ra danh sách của chúng tôi.

CSS: Những điều cơ bản và cách WordPress sử dụng chúng

Trước hết: CSS là viết tắt của Cascading Style Sheets, không rõ ràng hơn từ viết tắt. Vì vậy, chúng ta hãy chia nhỏ nó.

Biểu định kiểu là tài liệu mô tả kiểu (chẳng hạn như phông chữ, màu sắc, v.v..) được sử dụng để trình bày một tài liệu khác. Trong trường hợp của chúng tôi, chúng tôi đang xử lý một phong cách của các trang web.

PhầncascadingCái tên là một phần làm cho nó thực sự mạnh mẽ. Các trang web có thể được thiết kế với nhiều style sheet, giống như thác nước, với sheet dưới cùng sẽ thêm hoặc thay thế các style từ cấp cao hơn. Điều này rất quan trọng vì cách bạn thêm kiểu sẽ ghi đè lên những thay đổi ban đầu.

Nghe đơn giản như vậy, CSS có thể được sử dụng để thay đổi bất kỳ thứ gì trên một trang web (bao gồm bố cục, màu sắc, phông chữ và thậm chí cả hoạt ảnh).

Tìm hiểu cách quản lý thông báo của bạn bằng cách khám phá Làm thế nào để quản lý các thông báo email trên WordPress

Nhất Chủ đề WordPress sử dụng mã CSS có sẵn trong một tệp có tên là style.css. Nếu bạn mở tệp này, bạn sẽ thấy một danh sách đầy đủ các quy tắc kiểu cho chủ đề WordPress của bạn. Dù bạn làm gì, không sửa đổi tệp này! Các bản cập nhật sẽ ghi đè lên các thay đổi của bạn.

Có một số cách để thêm một mã CSS tùy chỉnh vào chủ đề WordPress của bạn để những thay đổi của bạn tồn tại trong bản cập nhật của chủ đề WordPress.

Cách tùy chỉnh trang web WordPress của bạn bằng CSS

Bây giờ bạn đã hiểu rõ hơn CSS là gì và cách Chủ đề WordPress sử dụng chúng, chúng tôi sẽ xem xét các tùy chọn bạn có thể sử dụng để tùy chỉnh blog WordPress của mình và chúng tôi sẽ thảo luận về ưu và nhược điểm của từng phương pháp.

Vào cuối công việc của chúng tôi, bạn sẽ có thể xác định phương pháp nào tương ứng với chủ đề WordPress của bạn.

Tùy chọn # 1: Tùy chỉnh CSS bằng chủ đề con

Nếu bạn sử dụng un chủ đề con để tùy chỉnh mã CSS của bạn, cập nhật các chủ đề mà chúng ta đã nói trước đây sẽ không còn là vấn đề nữa. Bản cập nhật của một chủ đề WordPress sẽ ảnh hưởng đến chủ đề "cha mẹ», Giữ nguyên các thay đổi đối với chủ đề con của bạn. Nhiều nhà phát triển chủ đề WordPress hiểu tiện ích của một chủ đề con.

Khám phá Khi nào và làm thế nào để cài đặt WordPress trong một thư mục con

Tạo một chủ đề con khá đơn giản. Nó bao gồm việc tạo một thư mục trên máy chủ lưu trữ web của bạn, bao gồm một tệp style.css trong đó liệt kê chủ đề gốc dưới dạng mẫu và nhập tệp style.css của chủ đề mẹ (bạn có nhớ ý nghĩa của kiểu 'xếp tầng' không?).

WordPress Codex có thêm thông tin về việc tạo chủ đề con.

Khi bạn đã tạo chủ đề con và kích hoạt nó một cách chính xác, bạn có thể bắt đầu tùy chỉnh chủ đề WordPress của mình. Cách nhanh nhất sẽ là chỉnh sửa tệp của bạn style.css, có thể được truy cập theo hai cách.

Kiểm tra bài viết này để khám phá Cách nén các tệp CSS, HTML và Javascript của bạn

Đầu tiên là sử dụng trình chỉnh sửa có trong bảng điều khiển WordPress, bằng cách nhấp vào Giao diện> Trình chỉnh sửa. L 'nhà phát hành hiển thị danh sách các tập tin bên phải có sẵn trong chủ đề (Chỉ các tệp phổ biến được hiển thị). Tệp của bạn style.css sẽ ở cuối danh sách và nhấp vào tùy chọn Kiểu trang tính tệp của bạn style.css sẽ tính phí.

Bạn có thể thêm các thay đổi của mình vào vị trí này và lưu thay đổi.

Cách khác để truy cập tệp của bạn style.css (một trong những chúng tôi khuyên) là để duyệt các tệp trong lưu trữ web của bạn thông qua một FTP client hoặc một trình quản lý tệp. Thư mục chủ đề con bạn đã tạo sẽ nằm trong " wp-content> chủ đề« . Bạn sẽ có thể sử dụng trình soạn thảo văn bản để chỉnh sửa tệp style.css.

Tùy chọn n ° 2: Tùy chỉnh CSS từ Trình tùy chỉnh

Kể từ WordPress 4.7, 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. Thật dễ dàng và bạn có thể xem các thay đổi của mình với bản xem trước trong thời gian thực.

Đầu tiên, bạn cần đến trang Chủ đề »Tùy chỉnh.

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

Bạn sẽ thấy bản xem trước thời gian thực của trang web của mình ở bên phải với một loạt tùy chọn ở khung bên trái. Bấm vào tab CSS bổ sung trên ngăn bên trái.

Tab sẽ trượt để hiển thị cho bạn một khu vực đơ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 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 thời gian thực của trang web của bạn.

Bạn có thể tiếp tục thêm mã CSS tùy chỉnh cho đến khi bạn hài lòng với giao diện của nó trên trang web của mình. Đừng quên nhấp vào " Lưu và Xuất bản Ở trên cùng khi bạn hoàn thành.

Lưu ý: Bất kỳ CSS tùy chỉnh nào mà bạn thêm bằng Công cụ tùy chỉnh chỉ có sẵn với chủ đề WordPress cụ thể đó. Nếu bạn muốn sử dụng nó với các chủ đề khác thì bạn sẽ cần sao chép và dán vào chủ đề mới của mình bằng cùng một phương pháp.

Tùy chọn # 3: Tùy chỉnh CSS bằng cách sử dụng plugin

Lợi thế của việc sử dụng plugin để tùy chỉnh CSS là bạn vẫn giữ plugin ngay cả khi bạn thực hiện thay đổi chủ đề WordPress. Điều này có sự đánh đổi của nó, vì các kiểu không thể hiển thị tốt trên tất cả các chủ đề WordPress.

Dưới đây là một số plugin:

1. CSS tùy chỉnh trong Jetpack (Miễn phí)

Các plugin WordPress jetpack  được cài đặt trên hơn một triệu trang web WordPress và có thể là của bạn. Nó mang đến các tính năng có sẵn trên WordPress.com cho các trang web tự lưu trữ và cũng cung cấp một mô-đun cho tuỳ biến CSS.

Khi mô-đun được kích hoạt trong bảng điều khiển Jetpack, một trình chỉnh sửa CSS tùy chỉnh sẽ có sẵn, cho phép bạn tùy chỉnh chủ đề WordPress của mình mà không cần tạo chủ đề con. Bạn truy cập trình soạn thảo theo đường dẫn này " Giao diện> Chỉnh sửa CSS« .

2. CSS tùy chỉnh đơn giản (Miễn phí)

Nếu bạn muốn có một tùy chọn độc lập, Simple CSS là một lựa chọn tốt. Plugin miễn phí này, được sử dụng trên nhiều trang web 200.000 với xếp hạng sao 4,9, chắc chắn sẽ giúp bạn cá nhân hóa blog CSS WordPress của bạn.

Plugin này không yêu cầu bất kỳ cấu hình nào, bạn chỉ cần cài đặt và kích hoạt plugin. Để sửa đổi mã CSS của bạn, hãy truy cập " Giao diện> CSS tùy chỉnh«  trong bảng điều khiển WordPress. Áp dụng các thay đổi CSS của bạn trong hộp văn bản và sau khi hoàn tất, hãy lưu cài đặt của bạn.

3. CSS Hero (từ $ 14 mỗi năm)

Tùy chọn cuối cùng của plugin WordPress mà chúng ta đang xem hôm nay là một plugin WordPress cao cấp có tên CSS Hero. Từ 14 $ mỗi năm đối với một trang web, plugin này cho phép bạn tùy chỉnh chủ đề WordPress của mình bằng giao diện trực quan.

Được thiết kế để làm việc tốt nhất với hàng tá chủ đề WordPress tương thích , CSS Hero cung cấp cho bạn toàn quyền kiểm soát tất cả các yếu tố trong chủ đề WordPress của bạn. Đối với các chủ đề không có trong danh sách của họ, bạn có thể sử dụng Chế độ tên lửa để kích hoạt tùy chỉnh CSS Hero.

CSS Hero loại bỏ nhu cầu hiểu cú pháp CSS bằng cách đơn giản hóa tương tác với mã thông qua một giao diện và điều này áp dụng cho các hoạt ảnh và chuyển tiếp. Bạn cũng có thể xem trước các thay đổi của mình trong thời gian thực và hoàn nguyên về phiên bản trước đó.

Tìm hiểu Cách chuyển bình luận từ bài viết này sang bài viết khác trên WordPress

Nếu bạn muốn thay đổi hoàn toàn CSS của blog WordPress của mình, nhưng không muốn học CSS, CSS Hero là một lựa chọn tuyệt vời để tùy chỉnh trang web của bạn, đặc biệt nếu bạn đang sử dụng một trong các chủ đề WordPress của họ.

Mặc dù bạn biết rằng nội dung là quan trọng, tuy nhiên, bạn sẽ muốn trang web của mình nổi bật giữa đám đông, ngay cả khi bạn đang sử dụng một chủ đề WordPress phổ biến. Với CSS, bạn có thể tùy chỉnh thiết kế trang web của mình để nó hoàn toàn độc đáo.

Đi xa hơn bằng cách khám phá Làm thế nào để cho phép người dùng chỉnh sửa các trang nhất định

Vì vậy, có một số cách để tùy chỉnh CSS của chủ đề WordPress của bạn:

1. một chủ đề trẻ em.
2. các Customizer.
3. một plugin CSS.

Khám phá thêm một số plugin WordPress cao cấp  

Bạn có thể sử dụng cái khác plugin WordPress để tạo ra một giao diện hiện đại và để tối ưu hóa việc xử lý blog hoặc trang web của bạn.

Chúng tôi cung cấp cho bạn ở đây một số plugin WordPress cao cấp sẽ giúp bạn làm điều đó.

1. Quảng cáo quảng cáo

Hệ thống quảng cáo WP PRO là một plugin quản lý quảng cáo WordPress, cung cấp các vị trí chiến lược 18 để giúp bạn hiển thị quảng cáo trên trang web của mình. Nó cũng có một phần thống kê chi tiết mà từ đó bạn sẽ thấy hiệu suất của từng quảng cáo.

Tính năng này rất quan trọng vì nó sẽ giúp bạn cải thiện chiến dịch và tối đa hóa lợi nhuận của mình. Plugin WordPress Adsense này cũng đi kèm với một tính năng độc đáo được gọi là quảng cáo nền. Nó cho phép bạn hiển thị quảng cáo làm nền cho nội dung của bạn.

Thêm vào đó, vì nó tương thích với các plugin như WPBakery et Cách mạng Slider, bạn có thể hiển thị quảng cáo của mình dưới dạng thanh trượt hoặc đặt chúng ở bất kỳ đâu trên trang web của bạn.

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

2. Trình quản lý tệp của WP Media

WP Media File Manager là một plugin WordPress giúp dễ dàng tổ chức thư viện phương tiện theo hình thức phân cấp, sử dụng chức năng Kéo và thả. Nó là một trong plugin WordPress trình quản lý tệp mạnh mẽ nhất trên CodeCanyon. Bạn thậm chí sẽ không cần phải tạo các thư mục theo cách thủ công.

Plugin WordPress này cho phép bạn tải hàng nghìn tệp từ trình quản lý tệp của PC lên trang web bằng cách tự động sao chép cấu trúc phân cấp của thư mục nguồn. Nếu bạn muốn có cùng một tệp trong các thư mục khác nhau, hãy biết rằng bây giờ bạn có một thư viện phương tiện thực cung cấp chức năng này.

Nói lời tạm biệt với các vấn đề khi tải xuống các loại tệp cụ thể, bây giờ bạn chỉ cần cài đặt plugin WordPress này và để nó giúp bạn quản lý các tệp của mình.

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

3. đơn Anh hùng

Hero Menu là một plugin WordPress menu lớn. Và trong khi nó không làm được nhiều điều anh hùng, nó có tất cả các tính năng cần thiết chỉ với $ 19. Một chút giống Mega Main Menu, đó là một plugin cũng có các sản phẩm được giới thiệu trên CodeCanyon và nó có gần 4500 doanh số bán hàng tính đến thời điểm hiện tại.

Trong phần tính năng, bạn sẽ nhanh chóng nhận ra rằng khá dễ dàng để tạo megamenu. Quá trình chỉ mất một vài bước. Nhưng ngoài ra, bạn sẽ nhận thấy rằng plugin tương thích với WooCommerce, cung cấp thiết kế đáp ứng và giao diện "kéo và thả" để tạo menu.

Trình tạo menu cải thiện việc sử dụng plugin và đơn giản hóa đáng kể công việc của người mua. Tích hợp giao diện người dùng cũng là một công việc tuyệt vời và giao diện người dùng hoạt động hoàn hảo với các plugin khác.

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

Tài nguyên đề xuất

Tìm hiểu về các tài nguyên được đề xuất khác để giúp bạn xây dựng và quản lý trang web của mình.

• Cách đặt mật khẩu bảo vệ biểu mẫu trong WordPress
• Làm thế nào để tạo ra các hiệu ứng chuyển tiếp tuyệt đẹp của các trang trên WordPress
• Cách sử dụng API WordPress REST
• Cách liên kết trang web WordPress của bạn với Telegram
• Cách làm sạch WordPress trong một vài bước

Kết luận

Có! Đó là nó cho hướng dẫn này. Chúng tôi hy vọng hướng dẫn này đã chỉ cho bạn cách tùy chỉnh CSS của trang web WordPress của bạn. Đừng ngần ngại chia sẻ với bạn bè của bạn trên các mạng xã hội yêu thích của bạn. 

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.

Nếu bạn có đề xuất hoặc nhận xét, hãy để lại trong phần của chúng tôi ý kiến.

...