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

Làm thế nào để đưa phong cách cho menu điều hướng 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ị]

Bạn có muốn tùy chỉnh các menu điều hướng WordPress của mình để thay đổi màu sắc hoặc giao diện của chúng không? Chủ đề WordPress của bạn quản lý sự xuất hiện của các menu điều hướng trên trang web của bạn. Bạn có thể dễ dàng tùy chỉnh nó bằng cách sử dụng CSS để đáp ứng yêu cầu của bạn. Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo kiểu cho các menu điều hướng trên blog WordPress của bạn.

to-the-style-to-menu de navigation de wordpress

Phương pháp 1: Cách tạo kiểu cho các menu WordPress của bạn bằng một plugin

Chủ đề WordPress của bạn sử dụng CSS cho các kiểu điều hướng của bạn. Rất nhiều người mới không cảm thấy thoải mái với việc chỉnh sửa CSS của các chủ đề WordPress. Vì vậy, đây là lúc một plugin để tạo kiểu menu trở nên thực tế, vì nó giúp bạn tiết kiệm thời gian chỉnh sửa tệp chủ đề hoặc viết mã.

Đầu tiên, những gì bạn cần làm là cài đặt và kích hoạt plugin " CSS Hero ". Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của chúng tôi về cách cài đặt plugin WordPress.

CSS Hero là một plugin WordPress cao cấp cho phép bạn thiết kế chủ đề WordPress của riêng bạn mà không cần viết một dòng mã nào (Không bắt buộc HTML hoặc CSS).

Sau khi kích hoạt plugin, bạn sẽ được chuyển hướng đến trang mà bạn sẽ cần cung cấp giấy phép của mình. Chỉ cần làm theo hướng dẫn trên màn hình và bạn sẽ được chuyển hướng đến trang web của mình chỉ với một vài cú nhấp chuột.

Bây giờ bạn phải bấm vào nút Anh hùng CSS Trên thanh công cụ WordPress của bạn.

css-hùng-menu-wordpress

CSS Hero cung cấp trình soạn thảo WYSIWYG (những gì bạn thấy là những gì bạn nhận được "Những gì bạn thấy là những gì bạn nhận được"). Nhấp vào nút này sẽ đưa bạn đến trang web của mình với thanh công cụ nổi CSS Hero ở bên phải.

thanh công cụ-css-anh hùng

Bạn cần nhấp vào biểu tượng màu xanh ở trên cùng để bắt đầu chỉnh sửa.

Di chuyển chuột qua menu điều hướng của bạn và CSS Hero sẽ làm nổi bật nó bằng cách hiển thị đường viền của nó. Khi bạn nhấp vào menu điều hướng được tô sáng, nó sẽ hiển thị cho bạn các mục khác nhau mà bạn có thể chỉnh sửa.

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í]

Tùy chỉnh-một-menu-với-css-anh hùng

Trong ảnh chụp màn hình ở trên, bạn có thể thấy mục menu, menu điều hướng và vùng chứa menu điều hướng, v.v.

Giả sử chúng ta muốn thay đổi màu văn bản của tất cả các mục trên menu điều hướng. Trong trường hợp này, chúng tôi sẽ chọn menu điều hướng chạm vào toàn bộ menu.

CSS Hero bây giờ sẽ hiển thị cho bạn các thuộc tính khác nhau mà bạn có thể thay đổi như văn bản, màu nền, đường viền, lề, phần đệm, v.v.

css-hữu-anh hùng

Bạn có thể nhấp vào một thuộc tính mà bạn muốn chỉnh sửa. CSS Hero sẽ giới thiệu cho bạn một giao diện đơn giản để bạn có thể thực hiện các thay đổi của mình.

chỉnh sửa-một-hữu-css-với-css-anh hùng

Trong ảnh chụp màn hình ở trên, chúng tôi đã chọn văn bản và nó cho chúng tôi thấy một giao diện đẹp để chọn phông chữ, thay đổi màu văn bản, kích thước và các thuộc tính khác.

Khi bạn thực hiện thay đổi, bạn sẽ có bản xem trước trực tiếp về kết quả cuối cùng.

PREVIEW-to-live-css-anh hùng

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 bạn hài lòng với những thay đổi, hãy nhấp vào nút "Lưu" trên " Anh hùng CSS Để lưu các thay đổi của bạn.

Phần tốt nhất với phương pháp này là bạn có thể dễ dàng hoàn tác các thay đổi bạn thực hiện. CSS Hero lưu giữ lịch sử đầy đủ về tất cả các thay đổi của bạn và bạn có thể đến và đi giữa các thay đổi này.

Phương pháp hai: Cách thay đổi kiểu menu điều hướng của bạn theo cách thủ công

Phương pháp này yêu cầu bạn chỉnh sửa các tệp chủ đề WordPress của mình. Bạn chỉ nên sử dụng nó nếu bạn là một nhà phát triển và có một số kiến ​​thức về tạo chủ đề WordPress.

Cách tốt nhất để làm điều này là tùy chỉnh chủ đề WordPress của bạn bằng cách tạo một chủ đề con. Nếu bạn chỉ thay đổi CSS, thì tôi mời bạn đọc hướng dẫn của chúng tôi về Cách thêm mã CSS tùy chỉnh trên WordPress.

Các menu điều hướng của WordPress được hiển thị trong một danh sách không có thứ tự (danh sách gạch đầu dòng).

Nếu bạn sử dụng thẻ php sau, nó sẽ hiển thị một danh sách không có các lớp CSS được liên kết với nó.


Danh sách dấu đầu dòng của bạn sẽ có "menu" tên lớp với mỗi mục danh sách có lớp CSS riêng.

Điều này có thể làm việc nếu bạn có một vị trí menu duy nhất. Tuy nhiên, hầu hết các chủ đề có một số nơi bạn có thể hiển thị các menu điều hướng.

Chỉ sử dụng các lớp CSS mặc định có thể gây ra xung đột với các menu ở những nơi khác.

Đây là lý do tại sao bạn cần xác định lớp CSS và vị trí menu. Rất có thể chủ đề WordPress của bạn đã làm điều này bằng cách thêm các menu điều hướng bằng cách sử dụng mã như sau:

'primary', 'menu_class' => 'primary-menu',)); ?>

Mã này cho WordPress biết rằng đây là nơi chủ đề hiển thị menu chính. Nó cũng thêm một lớp CSS " Menu chính Trong menu điều hướng.

Bây giờ bạn sẽ tìm thấy phong cách trình đơn điều hướng sử dụng cấu trúc CSS.

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]

#header .primary-menu {} // container class #header .primary-menu ul {} // container lớp danh sách không có thứ tự đầu tiên #header .primary-menu ul ul {} / / unordered list -menu li {} // Mỗi mục navigation # header .primary đơn li {} // Mỗi chuyển hướng mục tiêu đề # li neo đơn .primary ul {} // danh sách không có thứ tự nếu có thả xuống mục # header .primary -menu li li {} // mỗi mục menu thả xuống #header .primary-menu li li a {} // mỗi drap xuống anchor navigation item

Thay thế #header bằng lớp vùng chứa hoặc " ID Được sử dụng bởi chủ đề WordPress của bạn.

Cấu trúc này sẽ giúp bạn thay đổi hoàn toàn giao diện của menu điều hướng.

Đó là nó cho hướng dẫn này. Tôi hy vọng nó sẽ cho phép bạn tùy chỉnh các menu của blog WordPress của bạn. Hãy chia sẻ nó 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.

 

Bài viết này chứa comments 0

Để 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