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 701.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ị]

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ó các trang web khác sẽ sử dụng nó. Và ngay cả khi có nhiều tùy chọn tùy chỉnh mà nhiều chủ đề WordPress cung cấp ngày nay, bạn vẫ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 đổi giao diện của trang web để 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 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.

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

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

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 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 về CSS là gì và cách các 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 mỗi phương pháp.

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

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.

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à 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.

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 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.

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

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

Truy cập vào tùy biến WordPress để tùy chỉnh chủ đề

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.

nhập mã css bổ sung và xuất 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. 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 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.đơn tùy chỉnh css

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.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ỏ 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 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, 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á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 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ả. Đây là một trong những plugin quản lý tệp WordPress 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.

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 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.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 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.

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 giới thiệu với bạn plugin Anym Live Editor cho phép chỉnh sửa đầy đủ CSS hoặc SCSS và Javascript từ bất kỳ trang WordPress nào và cung cấp hiển thị trực tiếp các thay đổi đã thực hiện! Ngoài ra, plugin được trang bị nhiều công cụ cho phép bạn tương tác với trang bạn muốn sửa đổi và hoạt động giống như bất kỳ IDE thông thường nào (kiểu văn bản Sublime), 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