Bỏ qua đến nội dung chính

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

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 600.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Cho dù bạn chọn chủ đề WordPress nào cho trang web của mình, sẽ có những trang web khác sẽ sử dụng nó. Và ngay cả với 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 nữa.

Đổ 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 thay đổi giao diện trang web của mình để 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 để tùy chỉnh trang web của bạn bằng CSS, tạo và tùy chỉnh các chủ đề con, sử dụng plugin tùy biến WordPress và plugin CSS WordPress.

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

Vậy thì hãy quay lại với lý do tại sao chúng ta ở đây

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

Trước tiên: CSS có nghĩa là Cascading Style Sheetskhông rõ ràng hơn từ viết tắt. Vì vậy, hãy phá vỡ 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ầncascadingTên là một phần của những gì làm cho nó thực sự mạnh mẽ. Các trang web có thể được thiết kế với nhiều biểu định kiểu, chẳng hạn như thác nước, với bảng dưới cùng bằng cách thêm hoặc thay thế các kiểu cấp cao nhất. Điều này rất quan trọng vì cách bạn thêm các kiểu sẽ ghi đè lên các thay đổi ban đầu.

Bộ chọn CSS

Đơn giản như vẻ ngoài của nó, CSS có thể được sử dụng để thay đổi hầu hết mọi khía cạnh của trang web (bao gồm bố cục, màu sắc, phông chữ và thậm chí cả hình ảnh động).

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

Hầu hết các chủ đề WordPress sử dụng mã CSS có sẵn trong một tệp có tên 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 chỉnh sửa 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 về CSS là gì và cách các chủ đề WordPress sử dụng chúng, hãy xem 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.

Làm thế nào để tùy chỉnh trang web css wordpress 1

Khi kết thúc công việc của chúng tôi, bạn sẽ có thể xác định phương thức 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ác bản cập nhật của các chủ đề chúng ta đã nói trước đây sẽ không còn là vấn đề nữa. Một bản cập nhật của một chủ đề WordPress sẽ ảnh hưởng đến chủ đề "cha mẹĐể lại những thay đổi về chủ đề của con bạn nguyên vẹn. Nhiều nhà phát triển chủ đề WordPress hiểu sự hữu í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ó liên quan đến việc tạo một thư mục trên 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ủ đề phụ huynh (Bạn có nhớ ý nghĩa của các tờ kiểu "xếp tầng" không?).

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

cách tùy chỉnh trang web css wordpress 1 1

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

Khi bạn đã tạo chủ đề con và bậ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 tin 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 Appearance> Editor. 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ẽ nằm ở 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.

WordPress style sheet

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 người quản lý tập tin. Thư mục chủ đề con bạn đã tạo sẽ nằm trong thư mục " wp-content> themes« . 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 # 2: Tùy chỉnh CSS từ Tùy biến

Kể từ WordPress 3.4, các nhà phát triển chủ đề WordPress đã có thể truy cập vào Trình tùy biến WordPress để tạo ra các tùy chọn cho những điều này. Tùy biến cho phép bạn điều chỉnh các cài đặt của một chủ đề và xem trước chúng mà không ảnh hưởng đến sự xuất hiện của trang web khi bạn lưu cài đặt.

Làm thế nào để tùy chỉnh trang web css wordpress 2

Nhiều chủ đề WordPress sử dụng Trình tùy chỉnh để đơn giản hóa việc quản lý cài đặt.

Điều khiến chúng tôi quan tâm hiện nay là khả năng thêm mã CSS tùy chỉnh và may mắn thay, nhiều chủ đề WordPress có thể thực hiện điều này với một tùy chọn có sẵn trong trình tùy biến hoặc trong bảng điều khiển của WordPress.

Bạn có thể tham khảo tài liệu về chủ đề WordPress của mình để xác minh rằng tùy chọn này có sẵn.

Chủ đề WordPress Toàn bộ ví dụ: đề xuất một khu vực chỉnh sửa mã CSS từ bảng điều khiển.

CodeCSS Total WordPress

Tuy nhiên, một số chủ đề WordPress sẽ cung cấp tùy chọn này trực tiếp từ giao diện Tùy biến.

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

Ưu điểm của việc sử dụng plugin để tùy chỉnh CSS là bạn giữ plugin ngay cả khi bạn thực hiện thay đổi chủ đề WordPress. Điều này có sự đánh đổi bởi vì các phong cách 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ó lẽ bạn cũng vậy. Nó mang 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. jetpack-mẫu-plugin

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

Khi mô-đun được bật trong bảng điều khiển Jetpack, trình chỉnh sửa CSS tùy chỉnh sẽ khả dụng, 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 chỉnh sửa bằng cách theo đường dẫn này « Ngoại hình> 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.đơn tùy chỉnh css

Plugin này không yêu cầu bất kỳ cấu hình nào, chỉ cần cài đặt và kích hoạt plugin. Để sửa đổi mã CSS của bạn, hãy chuyển đến " Xuất hiện> Tùy chỉnh CSS« 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 (bắt đầu từ $ 14 mỗi năm)

Tùy chọn cuối cùng của plugin WordPress mà chúng ta đang tìm kiếm 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.CSS Hero WordPress Plugin

Đượ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ỏ sự cần thiết phải hiểu cú pháp của CSS bằng cách đơn giản hóa sự tương tác với mã thông qua một giao diện và điều này áp dụng cho hình ảnh động 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à quay lại 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 tìm hiểu CSS, CSS Hero là một tùy chọn toàn diện để tùy chỉnh trang web của bạn, đặc biệt nếu bạn 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, bạn sẽ muốn trang web của mình nổi bật so với những người khác, ngay cả khi bạn 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 sao cho 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ác plugin WordPress khác để mang lại cái nhìn hiện đại và tối ưu hóa độ bám của 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.Quảng cáo plugin WordPress 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 bạn. Plugin WordPress Adsense này cũng đi kèm với một tính năng độc đáo 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 Sliderbạ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 cứ đâ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 cho phép bạn dễ dàng sắp xếp thư viện phương tiện thành một hình thức phân cấp, sử dụng tính năng Kéo và Thả. Đây là một trong những plugin WordPress mạnh mẽ nhất của trình quản lý tệp CodeCanyon. Bạn thậm chí sẽ không cần phải tạo các thư mục bằng tay.

WP Media File Manager WordPress Media Library Folders Danh mục Tải lên Plugin

Plugin WordPress này cho phép bạn tải lên hàng ngà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 lưu ý rằng bây giờ bạn có một thư viện phương tiện thực sự cung cấp chức năng này.

Chia tay vấn đề 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ó đi cùng với bạn trong việc quản lý các tệp của bạn.

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

3. đơn Anh hùng

Menu Hero là một plugin WordPress từ menu lớn. Và mặc dù nó không làm được nhiều anh hùng, nhưng nó cung cấp tất cả các tính năng cần thiết cho chỉ 19 $. Giống như Mega Main Menu, đây là một plugin cũng tạo ra các sản phẩm nổi bật trên CodeCanyon và có doanh số gần như 4500 ngay bây giờ.Hero Menu Plugin WordPress Mega Menu đáp ứng

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Trong phần tính năng, bạn sẽ nhanh chóng nhận ra rằng thật dễ dàng để tạo một 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, đề xuất một thiết kế đáp ứng và giao diện "kéo và thả" để tạo các menu.

Trình xây dựng menu cải thiện việc sử dụng plugin và đơn giản hóa rất nhiều công việc của người mua. Việc 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à ứng dụng này 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

Khám phá các tài nguyên được đề xuất khác sẽ đồng hành cùng bạn trong việc tạo và quản lý trang web của bạn.

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.

...

Bài viết này chứa 1 bình luận

  1. Bonjour,

    Tôi muốn cho bạn biết plugin Anym Live Editor cho phép phiên bản hoàn chỉnh của CSS hoặc SCSS và Javascript từ bất kỳ trang WordPress nào và cung cấp kết xuất trực tiếp các sửa đổi được thực hiện! Ngoài ra, plugin được trang bị vô số công cụ cho phép tương tác với trang mà người ta muốn sửa đổi và hoạt động như mọi IDE thông thường (kiểu văn bản tuyệt vời), nhưng lần này, dành riêng cho trang web của bạn WordPress.

Để lại một 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 *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
4 cổ phiếu
cổ phiếu2
tweet
Enregistrer2