Bạn đang xem bài viết Cách Tạo Thêm Menu Trong WordPress được cập nhật mới nhất trên website Hoisinhvienqnam.edu.vn. Hy vọng những thông tin mà chúng tôi đã chia sẻ là hữu ích với bạn. Nếu nội dung hay, ý nghĩa bạn hãy chia sẻ với bạn bè của mình và luôn theo dõi, ủng hộ chúng tôi để cập nhật những thông tin mới nhất.
Đáng lẽ ra bài này mình đã nên viết lâu rồi nhưng do thời gian qua mình tập trung vào nhiều cái quá nên mãi hôm nay mới có thể viết đầy đủ được. Sở dĩ mình viết bây giờ là do sắp tới mình có làm một tutorial làm việc với một starter theme cơ bản nên chắc chắn sẽ cần đến phần này, do đó mình cũng hy vọng là các bạn có thể nắm bắt được tốt nhất.
Tính năng menu trong WordPress phải nói là rất mạnh mẽ và linh hoạt trong việc tạo menu cho website, họ cũng không giới hạn số lượng menu tạo ra và bạn cũng có thể chèn nó vào bất cứ đâu.
Cần xem trước khi đọc bài này
Bước 1. Khởi tạo Menu Location
Để tạo một menu location không có gì là khó khăn, chỉ với một vài dòng đặt vào file chúng tôi là bạn tạo được. Nhưng trước khi tạo menu location, hãy chắc chắn là theme của bạn đã hỗ trợ tính năng menu bằng cách kiểm tra xem có đoạn dưới trong file function của theme chưa, nếu chưa thì thêm vào.
add_theme_support( 'menus' );Xong rồi, bây giờ ta sẽ có một hàm tên là register_nav_menus() với một tham số duy nhất là tên location như sau:
register_nav_menus( array( ) );Ở đoạn trên, chúng ta sẽ tạo ra một menu location mang tên Menu chính với slug là main-nav. Cái slug sẽ là tên để chúng ta xác định khi viết code hiển thị ra ngoài, không khoảng trắng, không dấu và không in hoa.
Thế nếu muốn thêm nhiều location thì sao? Đơn giản, chỉ việc thêm nhiều tham số vào hàm bên trên như sau:
register_nav_menus( array( ) );Bước 2. Hiển thị location ra ngoài theme
Bạn cứ hiểu là location được chỉ định hiển thị ở đâu thì menu sẽ xuất hiện ở đó khi bạn thêm vào trong Dashboard.
Để hiển thị location, ta sẽ dùng hàm wp_nav_menu(). Hàm này nó có nhiều tham số hơn là cái hàm tạo location. Bây giờ hãy thử mở theme của bạn lên và chèn hàm này vào vị trí mà bạn thích, như file chúng tôi chẳng hạn.
<?php wp_nav_menu( array(Bước 3. Thêm menu
Sau khi chèn xong, hãy vào trang quản lý thêm menu vào location để nó hiển thị ra.
Bây giờ ra ngoài theme và dùng Firebug xem cấu trúc menu ta sẽ thấy tương tự như sau:
.main-nav ul { text-align: left; margin: 0; padding: 15px 4px 17px 0; list-style: none; } .main-nav ul li { font: bold 12px/18px sans-serif; display: inline-block; margin-right: -4px; position: relative; padding: 15px 20px; background: #fff; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; } .main-nav ul li:hover { background: #555; color: #fff; } .main-nav ul li ul { padding: 0; position: absolute; top: 48px; left: 0; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .main-nav ul li ul li { background: #555; display: block; color: #fff; text-shadow: 0 -1px 0 #000; } .main-nav ul li ul li:hover { background: #666; } .main-nav ul li:hover ul { display: block; opacity: 1; visibility: visible; }Kết quả ta tạm có
Mình muốn nói gì ở bài này?
Trong bài này mình không hướng dẫn bạn làm thế nào để có một menu đẹp và lộng lẫy như các trang khác, mà mình chỉ muốn cho các bạn biết cách tạo một menu trong WordPress như thế nào. Từ đó bạn có thể tự mình chuyển các mẫu menu từ HTML, CSS sang menu của WordPress một cách dễ dàng.
Do đó, nếu bạn cần làm menu thêm đẹp mắt và lộng lẫy thì nên học vững CSS và jQuery vì nói thật là thật khó để hướng dẫn tạo một menu theo đúng ý tất cả mọi người.
Cách Tạo &Amp; Chỉnh Sửa Menu Trong WordPress * Kiến Càng
Trang web mình có 2 menu. Một cái ở trên logo:
Nếu bạn để ý, có thể rất lâu sau bạn mới tạo logo chính thức cho website, nhưng menu thì phải có sau vài ngày hoặc cùng lắm là vài tuần khi web chính thức online.
Một trang web bao giờ cũng có ít nhất 1 menu, và vị trí cũng như số lượng thực tế của nó được quy định trước bởi giao diện mà bạn chọn. Menu có thể nằm ở trên, dưới, bên tay trái, vân vân.
Giờ chúng ta vào phần thực hành.
Edit Menus: nghĩa là Sửa Trình Đơn, ở phần này bạn sẽ sửa sang lại menu, thêm, xóa các liên kết, mục cho nó.
Mange Locations: nghĩa là Quản Lý Vị Trí Trình Đơn, ở phần này bạn sẽ đưa menu mà bạn tạo vào vị trí mà theme WordPress của bạn cung cấp. Nó có thể ở trên, bên trái hoặc ở dưới.
Select a menu to edit: nghĩa là Chọn Menu Để Sửa, một trang web có thể có nhiều menu, và bạn muốn chọn menu nào để sửa thì chọn ở đây, sau đó nhấn vào nút Select bên cạnh.
B. Các thao tác cơ bản
1. Tạo menu mới trong WordPress
Bạn nhấn vào create a new menu (ngay bên cạnh nút Select ở phần đầu) để tạo một menu mới, bạn đặt tên cho menu muốn tạo rồi nhấn Create Menu:
Pages: Là các trang trên trang web của bạn
Posts: Là các bài đăng trên trang web của bạn
Custom Links: Là các liên kết tùy chỉnh (tự do) mà bạn muốn thêm vào
Categories: Là các chuyên mục (thư mục) trên trang web của bạn
Bạn muốn thêm phần nào chỉ cần tick chọn và nhấn Add to Menu.
Giả sử tôi tick chọn như sau:
Với Pages:
URL: là liên kết mà bạn muốn xuất hiện trên Menu, nó có thể là bất kỳ liên kết nào, thuộc trang web của bạn hoặc hướng tới các website khác.
Link Text: là nội dung đại diện cho liên kết đó hiện trên menu.
Với Categories:
OK. Khi bạn nhấn Add to Menu, bạn sẽ thấy bên tay phải nội dung được đưa vào menu:
2. Chọn vị trí cho menu trong WordPress
Tạo được menu mới chỉ xong một nửa công việc, menu của bạn vẫn không hiện ra ngoài cho đến khi bạn chọn vị trí chính thức cho nó.
Để chọn vị trí bạn vào Manage Locations, và tùy vào theme, bạn sẽ thấy số lượng cũng như các kiểu menu khác nhau.
Chẳng hạn như cái này chỉ có 2 menu:
Quay lại vấn đề chính, chọn menu để nó hiện ra bên ngoài.
Bạn nhìn vào cột Theme Location / Vị trí trong giao diện. Thường menu chính sẽ là cái xếp đầu tiên và có tên như Top Menu, Main Menu hay Primary Menu.
Quay ra trang chủ để kiểm tra, bạn sẽ thấy kết quả như thế này:
3. Chỉnh sửa menu trong WordPress
Để chỉnh sửa menu bạn phải tạo được ít nhất một menu rồi hoặc là giao diện cung cấp sẵn một menu cho bạn (thì mới có cái để mà sửa chứ).
Đây chính là phần Edit Menus mà chúng ta đã nói sơ qua ở phần đầu. Bạn chỉ cần chọn menu tương ứng rồi nhấn nút Select:
C. Video hướng dẫn
Làm Thế Nào Để Thêm Vào Các Navigation Menus Trong WordPress
Bạn có muốn thêm vào các custom navigation menus vào giao diện WordPress của mình không? Với mặc định thì các giao diện WordPress đi cùng với các địa điểm và bố trí menu được định sẵn. Trong bài viết này, chúng tôi sẽ chỉ cho bạn cách làm thế nào để thêm vào các meunu điều hướng trong giao diện WordPress của mình.
Khi nào thì bạn cần dùng đến custom navigation menus này?
Phần lớn các giao diện WordPress với ít nhất là một nơi mà bạn có thể hiển thị các links điều hướng cho trang của bạn trong một mennu.
Bạn có thể quản lý các mục menu từ một giao diện dễ dàng sử dụng bên trong khu vực admin WordPress của bạn.
Hướng dẫn này được thực hiện để hướng tời các người dùng muốn tự mình làm, những người mà xây dựng giao diện WordPress của riêng mình hoặc ai đó cần thêm vào các vị trí cho menu mới với giao diện WordPress đang tồn tại.
Tạo ra các custom navigation menus trong các giao diện WordPress
Navigation menus là một tính năng của các giao diện WordPress. Một giao diện có thể xác định các vị trí menu và hỗ trợ menu của chính họ. Để thêm vào một navigation menus, điều đầu tiên bạn cần làm là đăng ký navigation menus mới của mình bằng việc thêm code này vào file chúng tôi của giao diện.
function wpb_custom_new_menu() { register_nav_menu('my-custom-menu',__( 'My Custom Menu' )); } add_action( 'init', 'wpb_custom_new_menu' );Bạn giờ có thể đi đến Appearance, chọn Menus trong WordPress admin của bạn và tạo ra hoặc chỉnh sửa một menu mới. Bạn sẽ thấy “My Custom Menu” lựa chọn về vị trí giao diện.
Nếu bạn muốn thêm vào nhiều hơn một vị trí navigation menus mới thì bạn sẽ cần phải sử dụng một code như thế này:
function wpb_custom_new_menu() { register_nav_menus( array( 'my-custom-menu' =&amp;gt; __( 'My Custom Menu' ), 'extra-menu' =&amp;gt; __( 'Extra Menu' ) ) ); } add_action( 'init', 'wpb_custom_new_menu' );Một khi bạn đã thêm vào vị trí menu đó, hãy tiếp tục và thêm vài mục menu vào WordPress admin bằng việc làm theo hướng dẫn của chúng tôi về việc làm thế nào để thêm các navigation menus cho người dùng mới.
Việc này sẽ cho phép chúng ta di chuyển đến bước tiếp theo mà sẽ làm hiển thị menu trong giao diện của bạn.
Hiển thị ra các navigation menus tùy chỉnh trong các giao diện WordPress
Tiếp theo, chúng ta cần làm hiện ra navigation menus mới này trong giao diện mới của bạn. Nơi phổ biến nhất mà các navigation menus thường được đặt là ở phần header của một website ngay sau tiêu đề và logo của trang.
Tuy nhiên, bạn có thể thêm navigation menus của mình tại bất cứ đâu mà bạn muốn.
Bạn sẽ cần phải thêm code này vào template file của bạn, nơi mà bạn muốn hiển thị menu của mình.
&amp;lt;?php wp_nav_menu( array( 'theme_location' =&amp;gt; 'my-custom-menu', 'container_class' =&amp;gt; 'custom-menu-class' ) ); ?&amp;gt;Theme location là cái tên mà chúng tôi chọn trong bước trước đó.
Lớp container là lớp CSSS mà sẽ được thêm vào navigation menus của bạn. Menu sẽ xuất hiện như một danh sách gạch đầu dòng rõ ràng trong website.
Bạn có thể sử dụng lớp CSS .custom_menu_class để thiết kế menu của mình. Đây là một CSS mẫu để giúp bạn bắt đầu.
div.custom-menu-class ul { list-style-type: none; list-style: none; list-style-image: none; } div.custom-menu-class li { padding: 20px; display: inline; }Nếu bạn cần nhiều hơn các hỗ trợ về CSS và các cách bố trí menu thì chúng tôi khuyên dùng một trong những giao diện WordPress starter này để xây dựng các giao diện tùy chỉnh của bạn.
Tạo ra các menu thân thiện với các thiết bị di động trong WordPress
Với sự gia tăng trong việc sử dụng các thiết bị di động, bạn có thể sẽ muốn làm cho các menu thân thiện hơn với các thiết bị di động bằng việc thêm vào một trong rất nhiều các hiệu ứng phổ biến.
Bạn có thể thêm một hiệu ứng trượt ra, hiệu ứng thả xuống và thậm chí là hiệu ứng chuyển đổi cho các menu trên di động.
Làm nhiều việc hơn với các navigation menus WordPress
Các navigation menus là một công cụ thiết kế web mạnh mẽ. Chúng cho phép bạn chỉ cho người dùng các phần quan trong nhất trong website của bạn. WordPress cho phép bạn làm nhiều việc hơn chỉ là hiển thị ra các links trong menu của mình. Đó là tất cả, chúng tôi hy vọng rằng hướng dẫn sau cùng này giúp bạn biết được làm thế nào để thêm một navigation menus trong WordPress. Bạn có thể cũng muốn xem danh sách của chúng tôi về 25 WordPress widgets hữuích nhất cho trang của bạn.
Cách Tạo Style Cho Navigation Menus WordPress
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.
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.
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.
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…
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.
Ư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ẻ.
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:
Đ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 {}
#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.
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.
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.
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.
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.
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.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
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.
Và đây là kết quả hiển thị trên trang web demo của chúng tôi.
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.
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.
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.
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:
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:
Và đây là kết quả trên trang demo của chúng tôi.
Cập nhật thông tin chi tiết về Cách Tạo Thêm Menu Trong WordPress trên website Hoisinhvienqnam.edu.vn. Hy vọng nội dung bài viết sẽ đáp ứng được nhu cầu của bạn, chúng tôi sẽ thường xuyên cập nhật mới nội dung để bạn nhận được thông tin nhanh chóng và chính xác nhất. Chúc bạn một ngày tốt lành!