Hướng dẫn cách tạo Navigotion Menu (menu điều hướng) trong WordPress

Bạn muốn thay đổi màu sắc hoặc tuỳ biến các menu điều hướng WordPress? Mặc dù theme của WordPress có thể giúp bạn làm được điều đó, nhưng vẫ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ẽ hướng dẫn bạn tuỳ biến menu điều hướng WordPress trên trang web của bạn.

Chúng ta có 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 kiến ​​thức nào về code. 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 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 navigotion menu(menu điều hướng). Nhiều người dùng mới cảm thấy không thoải mái với việc chỉnh sửa các file theme hoặc tự viết code CSS.

Tuy nhiên có một plugin WordPress lại giúp bạn làm được điều đó. Nó tiết kiệm cho bạn từ khâu chỉnh sửa file theme hoặc viết code.

Trước tiên bạn cần làm là cài đặt và kích hoạt plugin CSS Hero. Nếu bạn chưa biêt cách cài plugin thì hãy xem bài 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ế theme WordPress của riêng bạ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 xem bài đánh giá CSS Hero của chúng tôi để hiểu thêm.

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

Khi kích hoạt, bạn sẽ được chuyển hướng để lấy key 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 vài thao tác.

Tiếp theo, bạn cần click vào nút CSS Hero trên thanh công cụ admin trong WordPress.

CSS Hero cung cấp cho bạn trình soạn thảo WYSIWYG (Những gì bạn nhì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 được hiển thị trên màn hình.

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.

Trong ảnh chụp màn hình ở trên, bạn sẽ thấy hộp chứa menu điều hướng đang ở đầu(navigation-Top). 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 nó sẽ ả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.

Bạn có thể nhấp vào bất kỳ chỗ nào bạn muốn thay đổi. CSS Hero sẽ cho bạn thấy 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.

Trong ảnh chụp màn hình ở trên, chúng tôi đã chọn khung nền và nó cho ra một giao diện đẹp để chọn màu nền, độ dốc, hình ảnh, v.v.

Khi bạn thực hiện thay đổi, bạn sẽ có thể thấy chúng trực tiếp trong Theme preview ở ngay bên cạnh.

Sai khi hài lòng với các thay đổi, hãy click 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à 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 các thay đổi thủ công CSS và dành cho người dùng đã quá quen với những công cụ này.

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 tag menu mặc định của WordPress, thì nó sẽ hiển thị một danh sách không có các class CSS được liên kết với nó.

1 <?php wp_nav_menu(); ?>

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

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

Ngoài ra việc chỉ sử dụng 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ần xác định các class CSS và vị trí menu. Rất có thể theme WordPress của bạn đã thêm các menu điều hướng bằng cách sử dụng đoạn code như thế này:

123456 <?phpwp_nav_menu( array('theme_location' => 'primary','menu_class'     => 'primary-menu',) );?>

Đoạn code trên cho bạn biết đây là nơi theme hiển thị menu chính. Nó cũng thêm một menu chính của class CSS vào menu điều hướng.

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

1234567891011121314151617181920212223 // 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 {}

Menu điều hướng của bạn sẽ cần thay thế #header bằng class CSS container.

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.

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

1234567891011121314151617181920 // 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 class CSS tùy chỉnh vào các mục menu riêng lẻ.

Bạn có thể sử dụng tính năng này để tuỳ biến cho các item trên menu, như thêm icon 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 item menu nhất định.

Hãy vào Appearance(Giao diện) » Menus trong khu vực admin WordPress của bạn và nhấp vào nút  Screen Options màn hình.

Khi bạn đã chọn ô đó, 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ẻ.

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

Đây là ví dụ về các dạng Menu điều hướng trong WordPress

Các theme WordPress khác nhau có thể sử dụng các tùy chọn kiểu dáng khác nhau, các class 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 class CSS thay đổi. Nếu bạn đã sử dụng nó trước đây, thì hãy xem bài 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 themeWordPress.

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

Hãy cùng xem một số ví dụ thực tế về các dạng menu điều hướng trong WordPress.

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

Dưới đây là mẫu CSS tùy chỉnh 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.

123 #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ị 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.

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

Trước tiên, bạn sẽ cần tìm ra ID hoặc class CSS ở nội dung quanh menu điều hướng trên theme mà bạn dùng.

Sau đó, bạn có thể tuỳ chỉnh CSS để thay đổi màu nền của thanh menu điều hướng.

123 .navigation-top { background-color:#000; }

Đây là giao diện hiển thị trên trang demo của chúng tôi.

3. Cách thay đổi màu nền item trên 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 cung cấp cho nó một màu sắc khác nhau, nó làm cho liên kết được chú ý hơn.

Để đạt được điều này, chúng tôi sẽ thêm một class 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.

Vào Appearance » Menus và nhấp vào nút Tùy chọn màn hình(Screen Options) ở góc trên cùng bên phải của 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 ‘CSS classes’.

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 vào lớp CSS tùy chỉnh của bạn.

Bây giờ bạn có thể sử dụng class CSS này để tuỳ biến các item menu cụ thể khác nhau.

1234 .contact-us { background-color: #ff0099;border-radius:5px;}

Đây là giao diện hiện thị trên trang demo của chúng tôi.

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 khi trỏ chuột vào? 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 bắt mắt hơn.

Việc bạn cần làm thêm CSS tùy chỉnh sau vào theme của bạn.

12345 #top-menu  li.menu-item a:hover {background-color:#fff;color:#666;border-radius:5px;}

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

Đây là giao diện hiện thị trên trang demo của chúng tôi.

5. Tạo Menu điều hướng luôn hiện trong WordPress

Thông thường các menu điều hướng xuất hiện ở phần đầu và biến mất khi người dùng cuộn chuột xuống. Bạn muốn menu điều hướng luôn gắn ở trên đầu khi người dùng cuộn xuống.

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

1234567891011121314 #top-menu {background:#2194af;height:60px;z-index:170;margin:0 auto;border-bottom:1px solid #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 CSS ID của menu điều hướng của bạn.

Đây là giao diện hiện thị trên trang demo của chúng tôi.

Để biết hướng dẫn chi tiết hơn và phương pháp thay thế, hãy tham khảo bài hướng dẫn của chúng tôi về cách tạo menu điều hướng luôn hiện trong WordPress.

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

Rất nhiều trang web sử dụng hình nền lớn hoặc full màn hình với mục đích nhất định. Việc dùng các menu trong suốt làm cho menu điều hướng của bạn hòa vào hình nền, sẽ giúp người dùng tập trung vào mục đích chính của trang web hơn.

Chỉ cần thêm CSS mẫu sau vào theme của bạn.

123 #site-navigation { background-color:transparent; }

Đây là giao diện hiện thị trên trang demo của chúng tôi.

Tùy thuộc vào theme 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 tuỳ biến cho menu điều hướng WordPress. Bạn có thể xem bài hướng dẫn của chúng tôi về cách thêm menu WordPress tương thích với điện thoại di động.

Nếu thích bài viết này, vui lòng đăng ký Kênh YouTube của chúng tôi để xem thêm các video hướng dẫn. Bạn cũng có thể theo dõi chúng tôi trên Twitter và Facebook.

Leave a Reply

Your email address will not be published. Required fields are marked *

+