Bạn có muốn tạo style cho các navigation menus (menu điều hướng) WordPress của mình để thay đổi màu sắc hoặc giao diện không? Theme WordPress là nơi xử lý giao diện của các menu điều hướng nên bạn có thể dễ dàng tùy chỉnh bằng CSS theo nhu cầu. Trong bài viết này, CunghocWP sẽ hướng dẫn cách tạo style cho các navigation menus WordPress trên trang web.
CunghocWP sẽ hướng dẫn bạn hai phương pháp khác nhau. Phương pháp đầu tiên dành cho người dùng mới sử dụng plugin và không yêu cầu bất kỳ kiến thức code nào. Phương pháp thứ hai dành cho người dùng DIY trung gian thích sử dụng code CSS thay vì plugin.
Phương pháp 1: Tạo style cho các Navigation Menu WordPress bằng plugin
Theme WordPress sử dụng CSS để tạo style cho các menu điều hướng nhưng nhiều người dùng mới không biết chỉnh sửa file theme hoặc viết code CSS riêng.
Đây là lúc plugin style WordPress trở nên hữu ích. Bạn sẽ tiết kiệm được một khoản lớn từ việc chỉnh sửa các file theme hoặc viết bất kỳ code nào.
Đầu tiên bạn cần 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 của CunghocWP 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ế theme WordPress theo ý muốn mà không cần viết một dòng code nào (Không yêu cầu HTML hoặc CSS). Hãy đọc bài đánh giá CSS Hero của chúng tôi để tìm hiểu thêm.
Sau khi kích hoạt, bạn sẽ được chuyển hướng để lấy khóa License 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 một vài cú nhấp chuột.
Tiếp theo, click vào CSS Hero trên thanh công cụ quản trị WordPress.
CSS Hero cung cấp trình chỉnh sửa WYSIWYG (Những gì bạn thấy là những gì bạn nhận được). Click vào button để đến trang web của mình với thanh công cụ CSS Hero floating hiển thị trên màn hình.
Click vào biểu tượng màu xanh ở trên cùng để bắt đầu chỉnh sửa.
Sau khi nhấp vào biểu tượng màu xanh lam, di chuột đến navigation menu, CSS Hero sẽ đánh dấu menu bằng cách hiển thị các đường viền xung quanh. Khi bạn nhấp vào navigation menu được đánh dấu sẽ hiển thị các item mà bạn có thể chỉnh sửa.
Trong ảnh chụp màn hình ở trên, vùng chứa navigation menu ở trên cùng. Giả sử nếu bạn muốn thay đổi màu background của menu điều hướng thì khi chọn chọn điều hướng trên cùng sẽ ảnh hưởng đến toàn bộ menu.
CSS Hero sẽ hiển thị các thuộc tính khác nhau mà bạn có thể chỉnh sửa như văn bản, background, border, margin, padding, vv…
Bạn có thể nhấp vào bất kỳ thuộc tính nào để thay đổi. CSS Hero sẽ hiển thị một giao diện đơn giản để bạn thực hiện các thay đổi của mình.
Trong ảnh chụp màn hình ở trên, chúng tôi đã chọn background và một giao diện đẹp xuất hiện để chọn màu background, gradient, hình ảnh, vv…
Sau khi thực hiện các thay đổi, bạn có thể xem trực tiếp trong bản xem trước theme.
Nếu bạn hài lòng với các thay đổi, hãy nhấp vào nút Save trên thanh công cụ CSS Hero để lưu các thay đổi.
Ưu điểm của phương pháp này là bạn có thể hoàn tác bất kỳ thay đổi nào đã thực hiện. CSS Hero lưu giữ một lịch sử đầy đủ về tất cả các thay đổi của bạn và bạn có thể quay lại giữa các thay đổi đó.
Phương pháp 2: Tạo style cho Navigation Menus WordPress theo cách thủ công
Phương pháp này 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 trong WordPress được hiển thị trong một danh sách không có thứ tự (danh sách có dấu đầu dòng).
Thông thường, nếu bạn sử dụng thẻ menu mặc định của WordPress, sẽ hiển thị danh sách không có thuộc tính class CSS nào được liên kết với thẻ.
- <?php wp_nav_menu(); ?>
Danh sách không có thứ tự có tên thuộc tính class là ‘menu’, mỗi item trong danh sách đều có thuộc tính class 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 theme đều có nhiều vị trí để bạn hiển thị menu điều hướng.
Nếu chỉ sử dụng thuộc tính class CSS mặc định có thể gây ra 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ũng cần xác định thuộc tính class CSS và vị trí menu. Rất có thể theme 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 đoạn code sau:
- <?php
wp_nav_menu(array('theme_location'=>'primary','menu_class'=>'primary-menu',) );- ?>
Đoạn code này cho WordPress biết rằng đây là nơi theme hiển thị menu chính và thêm một menu chính có thuộc tính class CSS vào menu điều hướng.
Bây giờ bạn có thể tạo style cho menu điều hướng của mình bằng cấu trúc CSS này.
- // container class
- #header .primary-menu{}
- // container class first unordered list
- #header .primary-menu ul {}
- //unordered list within an unordered list
- #header .primary-menu ul ul {}
// each navigation item- #header .primary-menu li {}
- // each navigation item anchor
- #header .primary-menu li a {}
- // unordered list if there is drop down items
- #header .primary-menu li ul {}
- // each drop down navigation item
- #header .primary-menu li li {}
- // each drap down navigation item anchor
- #header .primary-menu li li a {}
Bạn sẽ cần thay thế #header bằng thuộc tính CSS container mà menu điều hướng của bạn đang sử dụng.
Cấu trúc này sẽ thay đổi hoàn toàn giao diện của menu điều hướng.
Tuy nhiên, vẫn có các thuộc tính class CSS khác do WordPress tạo tự động được thêm vào từng menu và tiem menu. Các thuộc tính class này tùy chỉnh menu điều hướng.
- // Class for Current Page
- .current_page_item{}
- // Class for Current Category
- .current-cat{}
- // Class for any other current Menu Item
- .current-menu-item{}
- // Class for a Category
- .menu-item-type-taxonomy{}
- // Class for Post types
- .menu-item-type-post_type{}
- // Class for any custom links
- .menu-item-type-custom{}
- // Class for the home Link
- .menu-item-home{}
WordPress cũng cho phép bạn thêm các thuộc tính class CSS tùy chỉnh riêng vào các item menu riêng lẻ.
Bạn có thể sử dụng tính năng này để tạo style cho các item menu như thêm biểu tượng hình ảnh vào menu hay thay đổi màu sắc để đánh dấu item menu.
Đi tới Appearance » Menus trong quản trị WordPress và click vào Screen Options.
Sau khi tích vào box đó, một trường bổ sung được thêm vào khi bạn chỉnh sửa từng item menu riêng lẻ.
Bây giờ bạn có thể sử dụng thuộc tính class CSS này trong stylesheet của mình để thêm CSS tùy chỉnh. Điều này chỉ ảnh hưởng đến item menu có thuộc tính CSS bạn đã thêm.
Ví dụ về tạo style cho Navigation Menus trong WordPress
Các theme WordPress khác nhau có thể sử dụng các tùy chọn tạo style khác nhau, các thuộc tính CSS và cả JavaScript để tạo navigation menus. Do đó, sẽ có rất nhiều tùy chọn để bạn thay đổi các style và tùy chỉnh các menu điều hướng để đáp ứng nhu cầu riêng.
Công cụ kiểm tra trong trình duyệt web sẽ là trợ thủ đắc lực nhất để tìm ra các thuộc tính class CSS nào cần thay đổi. Nếu bạn chưa từng làm việc này trước đây thì hãy tham khảo hướng dẫn của CunghocWP về cách sử dụng công cụ kiểm tra để tùy chỉnh các theme WordPress.
Bạn chỉ cần trỏ con trỏ đến phần tử muốn sửa đổi, nhấp chuột phải và sau đó chọn công cụ Inspect từ menu của trình duyệt.
Bây giờ hãy cùng xem một số ví dụ thực tế về style của navigation menus trong WordPress.
1. Thay đổi màu phông chữ trong navigation menus WordPress
Đây là mẫu CSS tùy chỉnh mà bạn có thể thêm vào theme của mình để thay đổi màu phông chữ của navigation menus.
- #top-menu li.menu-item a {
color:#ff0000;- }
Trong ví dụ này, # top-menu là ID được gán cho danh sách không có thứ tự hiển thị navigation menu của chúng tôi. Bạn cần sử dụng công cụ kiểm tra để tìm ra ID theme bạn đang dùng.
2. Thay đổi màu Background của thanh Navigation Menu
Trước tiên, bạn cần tìm ra ID CSS hoặc thuộc tính class của theme đang sử dụng cho navigation menu xung quanh vùng chứa.
Sau đó, bạn có thể sử dụng CSS tùy chỉnh sau để thay đổi màu background của thanh navigation menu.
.navigation-top{background-color:#000;- }
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
3. Thay đổi màu Background của một item menu
Nhiều trang web sử dụng các màu background khác cho các liên kết quan trọng nhất trong menu điều hướng của họ như một nút đăng nhập, đăng ký, liên hệ hoặc mua. Các liên kết này sẽ nổi bật hơn nếu có một màu khác.
Để làm điều này, bạn cần thêm một thuộc tính class CSS tùy chỉnh vào item menu muốn đánh dấu bằng màu background khác.
Đi tới Appearance » Menus và click vào Screen Options ở góc trên cùng bên phải của màn hình. Thao tác này sẽ đưa ra một menu thả xuống để bạn chọn hộp bên cạnh tùy chọn ‘CSS classes’.
Sau đó, bạn cần cuộn xuống mục menu muốn sửa đổi và nhấp vào để mở rộng. Có một tùy chọn mới để bạn thêm thuộc tính class CSS tùy chỉnh.
Bây giờ bạn có thể sử dụng thuộc tính class CSS này để tạo các style khác nhau cho item menu cụ thể đó.
- .contact-us {
background-color:#ff0099;border-radius:5px;- }
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
4. Thêm Hiệu ứng Hover vào Navigation Menus WordPress
Nếu bạn muốn các item menu của mình thay đổi màu sắc khi di chuột qua thì có thể sử dụng thủ thuật CSS cụ thể để làm cho các menu điều hướng có tính tương tác hơn.
Chỉ cần thêm CSS tùy chỉnh sau vào theme của bạn.
- #top-menu li.menu-item a:hover {
background-color:#fff;color:#666;border-radius:5px;- }
Trong ví dụ này, # top-menu là ID CSS mà theme của bạn sử dụng cho danh sách menu điều hướng không có thứ tự.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
5. Tạo Navigation Menus Sticky Floating trong WordPress
Thông thường, các navigation menu xuất hiện ở trên cùng và biến mất khi người dùng cuộn xuống. nhưng các navigation menu sticky floating vẫn ở trên cùng khi người dùng cuộn xuống.
Bạn có thể thêm đoạn code CSS sau vào theme để làm cho các menu điều hướng của bạn trở nên hấp dẫn.
- #top-menu {
background:#2194af;height:60px;z-index:170;margin:0auto;border-bottom:1pxsolid#dadada;width:100%;position:fixed;top:0;left:0;right:0;text-align:right;padding-right:30px- }
Chỉ cần thay thế # top-menu bằng ID CSS menu điều hướng của bạn.
Đây là là kết quả trong bản demo của chúng tôi:
Để biết thêm chi tiết 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 navigation menu sticky floating trong WordPress.
6. Tạo Navigation Menus Transparent trong WordPress
Nhiều trang web sử dụng ảnh background lớn hoặc toàn màn hình với các nút CTA. Sử dụng menu trong suốt giúp điều hướng của bạn hòa hợp với hình ảnh và khiến người dùng tập trung hơn vào lời kêu gọi hành động của bạn.
Chỉ cần mẫu code CSS sau vào theme để làm trong suốt các menu điều hướng:
- #site-navigation {
background-color:transparent;- }
Và đây là kết quả trên trang demo của chúng tôi.
Tùy thuộc vào theme, bạn cần điều chỉnh vị trí để ảnh header bao phủ khu vực phía sau của menu trong suốt.
CunghocWP hi vọng bài viết này sẽ giúp bạn tìm hiểu cách tạo style cho các navigation menu trong 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 tương thích với thiết bị di động.
Nếu thích bài viết này, hãy theo dõi YouTube Channel để xem thêm các video hướng dẫn về WordPress. Bạn cũng có thể tìm kiếm chúng tôi trên Twitter hoặc Facebook.