Cách tạo kiểu Menu điều hướng WordPress

Bạn có muốn tạo kiểu cho các menu điều hướng WordPress của mình để thay đổi màu sắc hoặc hình thức của chúng không? Mặc dù chủ đề WordPress của bạn xử lý sự xuất hiện của các menu điều hướng, bạn có thể dễ dàng tùy chỉnh nó bằng CSS để đáp ứng yêu cầu của bạn. Trong bài viết 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 WordPress trên trang web của bạn.


Tạo menu điều hướng trong WordPress

Chúng tôi sẽ chỉ ra hai phương pháp khác nhau. Phương pháp đầu tiên dành cho người mới bắt đầu vì nó sử dụng plugin và không yêu cầu bất kỳ kiến ​​thức về mã nào. Phương pháp thứ hai dành cho người dùng DIY trung gian, những người thích sử dụng mã CSS thay vì plugin.

Phương pháp 1: Tạo kiểu Menu điều hướng WordPress bằng cách sử dụng Plugin

Chủ đề WordPress của bạn sử dụng CSS để định kiểu các menu điều hướng. Nhiều người mới bắt đầu không thoải mái với việc chỉnh sửa các tệp chủ đề hoặc tự viết mã CSS.

Điều đó khi một plugin tạo kiểu WordPress có ích. Nó giúp bạn tiết kiệm từ chỉnh sửa tập tin chủ đề hoặc viết bất kỳ mã nào.

Trước tiên 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 yêu cầu HTML hoặc CSS). Xem đánh giá CSS Hero của chúng tôi để tìm hiểu thêm.

Người dùng WPBeginner có thể sử dụng Coupon CSS Hero này để được giảm giá 34% khi mua hàng.

Khi kích hoạt, bạn sẽ được chuyển hướng để lấy khóa Giấy phép CSS Hero. Chỉ cần làm theo các hướng dẫn trên màn hình và bạn sẽ được chuyển hướng trở lại trang web của mình sau vài cú nhấp chuột.

Tiếp theo, bạn cần nhấp vào nút CSS Hero trên thanh công cụ quản trị viên WordPress của bạn.

Khởi chạy CSS Hero

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ấp vào nút sẽ đưa bạn đến trang web của bạn với thanh công cụ CSS Hero nổi trên màn hình.

Thanh công cụ CSS Hero

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.

Sau khi bạn nhấp vào biểu tượng màu xanh, hãy đưa chuột vào 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ị các đường viền xung quanh 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 mà bạn có thể chỉnh sửa.

Chỉ và nhấp để tùy chỉnh menu

Trong ảnh chụp màn hình ở trên, nó cho chúng ta thấy hộp chứa menu điều hướng hàng đầu. Giả sử chúng tôi muốn thay đổi màu nền của menu điều hướng. Trong trường hợp đó, chúng tôi sẽ chọn điều hướng hàng đầu ảnh hưởng đến toàn bộ menu của chúng tôi.

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ể chỉnh sửa như văn bản, nền, đường viền, lề, phần đệm, v.v..

Thuộc tính CSS

Bạn có thể nhấp vào bất kỳ tài sản nào bạn muốn thay đổi. CSS Hero sẽ hiển thị cho bạn một giao diện đơn giản nơi bạn có thể thực hiện các thay đổi của mình.

Thay đổi diện mạo của một yếu tố

Trong ảnh chụp màn hình ở trên, chúng tôi đã chọn nền và nó cho chúng ta thấy một giao diện đẹp để chọn màu nền, độ dốc, hình ảnh và hơn thế nữa.

Khi bạn thực hiện thay đổi, bạn sẽ có thể thấy chúng trực tiếp trong bản xem trước chủ đề.

Xem trước trực tiếp các thay đổi CSS của bạn

Khi bạn hài lòng với các thay đổi, nhấp vào nút lưu trong thanh công cụ CSS Hero để lưu các thay đổi của bạn.

Điều tốt nhất khi sử dụng phương pháp này là bạn có thể dễ dàng hoàn tác mọi thay đổi mà 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ể qua lại giữa các thay đổi đó.

Phương pháp 2: Trình đơn điều hướng WordPress theo cách thủ công

Phương pháp này yêu cầu bạn thêm CSS tùy chỉnh theo cách thủ công và dành cho người dùng trung gian.

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

Thông thường nếu bạn sử dụng thẻ menu mặc định của WordPress, thì 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ó.

<?php wp_nav_menu (); ?>

Danh sách không có thứ tự của bạn sẽ có tên lớp ‘menu, với mỗi mục danh sách có lớp CSS riêng.

Điều này có thể hoạt động nếu bạn chỉ có một vị trí menu. Tuy nhiên, hầu hết các chủ đề có nhiều vị trí nơi bạn có thể hiển thị các menu điều hướng.

Chỉ sử dụng lớp CSS mặc định có thể gây xung đột với các menu trên các vị trí 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 đã thực hiện điều đó bằng cách thêm các menu điều hướng bằng cách sử dụng mã như thế này:

<?php
wp_nav_menu (mảng (
‘theme_location’ => ‘sơ cấp’,
‘menu_group’ => ‘thực đơn chính’,
));
?>

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 menu chính của lớp CSS vào menu điều hướng.

Bây giờ bạn có thể định kiểu menu điều hướng của mình bằng cấu trúc CSS này.

// lớp container
#header .primary-menu {}

// lớp container danh sách không có thứ tự đầu tiên
#header .primary-menu ul {}

// danh sách không có thứ tự trong danh sách không có thứ tự
#header .primary-menu ul ul {}

// mỗi mục điều hướng
#header .primary-menu li {}

// mỗi neo mục điều hướng
#header .primary-menu li a {}

// danh sách không có thứ tự nếu có mục thả xuống
#header .primary-menu li ul {}

// mỗi mục điều hướng thả xuống
#header .primary-menu li li {}

// mỗi drap xuống neo mục điều hướng
#header .primary-menu li li a {}

Bạn sẽ cần thay thế #header bằng lớp CSS container được sử dụng bởi menu điều hướng 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 của bạn.

Tuy nhiên, có các lớp CSS được tạo WordPress khác tự động thêm vào từng menu và mục menu. Các lớp này cho phép bạn tùy chỉnh menu điều hướng của bạn hơn nữa.

// Lớp cho trang hiện tại
.current_page_item {}

// Lớp cho danh mục hiện tại
.mèo hiện tại {}

// Lớp cho bất kỳ Mục menu hiện tại nào khác
.menu hiện tại-mục {}

// Lớp cho một danh mục
.menu-item-type-taxonomy {}

// Lớp cho các loại bài
.menu-item-type-post_type {}

// Lớp cho bất kỳ liên kết tùy chỉnh
.menu-item-type-custom {}

// Lớp cho liên kết nhà
.menu-item-home {}

WordPress cũng cho phép bạn thêm các lớp CSS tùy chỉnh của riêng bạn vào các mục menu riêng lẻ.

Bạn có thể sử dụng tính năng này để định kiểu các mục menu, như thêm biểu tượng hình ảnh vào menu hoặc chỉ bằng cách thay đổi màu sắc để làm nổi bật một mục menu.

Đi qua Ngoại hình »Menu trang trong quản trị viên WordPress của bạn và nhấp vào nút Tùy chọn màn hình.

Bật tùy chọn lớp CSS cho các mục menu riêng lẻ

Khi bạn đã chọn hộp đó, bạn sẽ thấy rằng một trường bổ sung được thêm vào khi bạn đi chỉnh sửa từng mục menu riêng lẻ.

Thêm một lớp CSS tùy chỉnh vào một mục menu trong WordPress

Bây giờ bạn có thể sử dụng lớp CSS này trong biểu định kiểu của mình để thêm CSS tùy chỉnh. Nó sẽ chỉ ảnh hưởng đến mục menu với lớp CSS mà bạn đã thêm.

Ví dụ về Menu điều hướng kiểu dáng trong WordPress

Các chủ đề WordPress khác nhau có thể sử dụng các tùy chọn kiểu dáng khác nhau, các lớp CSS và thậm chí JavaScript để tạo các menu điều hướng. Điều này cung cấp cho bạn rất nhiều tùy chọn để thay đổi các kiểu đó và tùy chỉnh các menu điều hướng của bạn để đáp ứng các yêu cầu của riêng bạn.

Công cụ kiểm tra trong trình duyệt web của bạn sẽ là người bạn tốt nhất của bạn khi tìm ra các lớp CSS sẽ thay đổi. Nếu bạn đã sử dụng nó trước đây, thì hãy xem hướng dẫn của chúng tôi về cách sử dụng công cụ kiểm tra để tùy chỉnh các chủ đề WordPress.

Về cơ bản, bạn chỉ cần trỏ con trỏ đến thành phần bạn muốn sửa đổi, nhấp chuột phải và sau đó chọn công cụ Kiểm tra từ menu Trình duyệt.

Sử dụng công cụ kiểm tra để tìm kiếm các lớp CSS để sửa đổi

Điều đó đang được nói, chúng ta hãy xem một số ví dụ thực tế về các menu điều hướng kiểu dáng trong WordPress.

1. Cách thay đổi màu chữ trong Menu điều hướng WordPress

Dưới đây là CSS tùy chỉnh mẫu mà bạn có thể thêm vào chủ đề của mình để thay đổi màu phông chữ của menu điều hướng.

# top-menu li.menu-item a {
màu: # ff0000;
}

Trong ví dụ này, menu trên cùng là ID được gán cho danh sách không có thứ tự hiển thị menu điều hướng của chúng tôi. Bạn sẽ cần sử dụng công cụ kiểm tra để tìm ra ID được sử dụng bởi chủ đề của bạn.

Thay đổi màu chữ của menu điều hướng WordPress

2. Cách thay đổi màu nền của thanh menu điều hướng

Trước tiên, bạn sẽ cần tìm ra ID hoặc lớp CSS được sử dụng bởi chủ đề của bạn cho trình đơn điều hướng xung quanh vùng chứa.

Tìm lớp CSS cho bộ chứa menu điều hướng

Sau đó, bạn có thể sử dụng CSS tùy chỉnh sau để thay đổi màu nền của thanh menu điều hướng.

.hàng đầu điều hướng {
màu nền: # 000;
}

Đây là cách nó trông trên trang web demo của chúng tôi.

Thay đổi màu nền của thanh menu điều hướng

3. Cách thay đổi màu nền của một mục menu đơn

Bạn có thể nhận thấy rằng nhiều trang web sử dụng màu nền khác nhau cho các liên kết quan trọng nhất trong menu điều hướng của chúng. Liên kết này có thể là một đăng nhập, đăng ký, liên hệ hoặc nút mua. Bằng cách cho nó một màu khác, nó làm cho liên kết dễ nhận thấy hơn.

Để đạt được điều này, chúng tôi sẽ thêm một lớp CSS tùy chỉnh vào mục menu mà chúng tôi muốn làm nổi bật với một màu nền khác.

Đi qua Ngoại hình »Menu và nhấp vào nút Tùy chọn màn hình ở góc trên bên phải màn hình. Thao tác này sẽ hiển thị trình đơn bay xuống, nơi bạn cần chọn hộp bên cạnh option Tùy chọn lớp CSS.

Bật tùy chọn lớp CSS cho các mục menu riêng lẻ

Sau đó, bạn cần cuộn xuống mục menu mà bạn muốn sửa đổi và nhấp để mở rộng nó. Bạn sẽ nhận thấy một tùy chọn mới để thêm lớp CSS tùy chỉnh của bạn.

Thêm lớp css tùy chỉnh vào một mục menu

Bây giờ bạn có thể sử dụng lớp CSS này để tạo kiểu cho mục menu cụ thể khác.

.liên hệ chúng tôi {
màu nền: # ff0099;
bán kính đường viền: 5px;
}

Đây là cách nó nhìn trên trang web thử nghiệm của chúng tôi.

Thay đổi màu nền của một mục menu trong menu điều hướng WordPress

4. Thêm hiệu ứng Hover vào Menu điều hướng WordPress

Bạn có muốn các mục menu của bạn thay đổi màu sắc trên chuột? Thủ thuật CSS đặc biệt này làm cho các menu điều hướng của bạn trông tương tác hơn.

Chỉ cần thêm CSS tùy chỉnh sau vào chủ đề của bạn.

# menu hàng đầu li.menu-mục a: hover {
màu nền: #fff;
màu: # 666;
bán kính đường viền: 5px;
}

Trong ví dụ này, # top-menu là ID CSS được sử dụng bởi chủ đề của bạn cho danh sách menu điều hướng không có thứ tự.

Đây là cách nó nhìn trên trang web thử nghiệm của chúng tôi.

Hiệu ứng di chuột trong menu điều hướng WordPress

5. Tạo Menu điều hướng nổi dính trong WordPress

Thông thường các menu điều hướng xuất hiện trên đầu và biến mất khi người dùng cuộn xuống. Các menu điều hướng nổi dính ở trên đầu khi người dùng cuộn xuống.

Bạn có thể thêm mã CSS sau vào chủ đề của mình để làm cho menu điều hướng của bạn bị dính.

# thực đơn hàng đầu {
nền: # 2194af;
chiều cao: 60px;
chỉ số z: 170;
lề: 0 tự động;
viền dưới: 1px solid #dadada;
chiều rộng: 100%;
vị trí: cố định;
đầu trang: 0;
trái: 0;
phải: 0;
văn bản-align: đúng;
đệm-phải: 30px
}

Chỉ cần thay thế # menu trên cùng bằng ID CSS của menu điều hướng của bạn.

Đây là cách nó nhìn trong bản demo của chúng tôi:

Menu điều hướng dính

Để biết hướng dẫn chi tiết hơn và phương pháp thay thế, hãy xem hướng dẫn của chúng tôi về cách tạo menu điều hướng nổi dính trong WordPress.

6. Tạo Menu điều hướng trong suốt trong WordPress

Nhiều trang web sử dụng hình nền lớn hoặc toàn màn hình với các nút kêu gọi hành động. Sử dụng các menu trong suốt làm cho điều hướng của bạn hòa trộn với hình ảnh. Điều này khiến người dùng có nhiều khả năng tập trung vào lời kêu gọi hành động của bạn.

Chỉ cần thêm CSS mẫu sau vào chủ đề của bạn để làm cho các menu điều hướng của bạn trong suốt.

#Điều hướng Trang web {
màu nền: trong suốt;
}

Đây là cách nó trông trên trang web demo của chúng tôi.

Menu điều hướng trong suốt trong WordPress

Tùy thuộc vào chủ đề của bạn, bạn có thể cần điều chỉnh vị trí của hình ảnh tiêu đề để nó bao phủ khu vực phía sau các menu trong suốt của bạn.

Chúng tôi hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo kiểu cho các menu điều hướng WordPress. Bạn cũng có thể muốn xem hướng dẫn của chúng tôi về cách thêm menu WordPress đáp ứng sẵn sàng cho thiết bị di động.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map