VietNetwork.Vn

Bạn có muốn thêm các mục tùy chỉnh vào các menu WordPress cụ thể không?

Menu WordPress là menu điều hướng được hiển thị ở đầu hầu hết các trang web. Đôi khi bạn có thể muốn hiển thị các mục tùy chỉnh khác với các liên kết đơn giản trong menu điều hướng.

Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng thêm các mục tùy chỉnh vào các menu WordPress cụ thể.

1. Tại sao phải thêm các mục tùy chỉnh vào menu WordPress

Menu WordPress là các liên kết điều hướng thường được hiển thị ở đầu trang web. Trên thiết bị di động, chúng thường được hiển thị khi bạn nhấn vào biểu tượng menu.

Vì đây là một vị trí nổi bật trong bố cục trang web WordPress điển hình, nên thật thông minh khi tận dụng nó bằng cách đặt các mục tùy chỉnh không phải là liên kết đơn thuần trong menu.

Ví dụ: một số người dùng có thể muốn hiển thị biểu mẫu tìm kiếm giống như mình làm tại các website. Trang web thành viên có thể muốn hiển thị liên kết đăng nhập và đăng xuất hoặc bạn có thể muốn thêm biểu tượng hoặc hình ảnh vào menu của mình.

Theo mặc định, các menu điều hướng được thiết kế để hiển thị các liên kết văn bản thuần túy. Tuy nhiên, bạn vẫn có thể đặt các mục tùy chỉnh trong menu WordPress.

Chúng ta hãy xem cách bạn có thể thêm các mục tùy chỉnh vào các menu cụ thể trong WordPress trong khi vẫn giữ nguyên phần còn lại của menu điều hướng.

2. Thêm các mục tùy chỉnh vào menu điều hướng cụ thể trong WordPress

Có nhiều cách khác nhau để thêm các mục tùy chỉnh vào menu điều hướng trong WordPress. Nó phụ thuộc vào loại mục tùy chỉnh mà bạn đang cố gắng thêm vào.

Mình sẽ chỉ cho bạn một số ví dụ phổ biến nhất. Bạn sẽ cần sử dụng các plugin cho một số plugin, trong khi những plugin khác sẽ yêu cầu bạn thêm một số mã.

Nếu bạn muốn chuyển tiếp đến một phần nhất định, bạn có thể sử dụng mục lục sau:

• Thêm cửa sổ bật lên tìm kiếm vào menu WordPress của bạn
• Thêm biểu tượng hoặc hình ảnh vào menu của bạn
• Thêm liên kết đăng nhập / đăng xuất vào menu của bạn
• Thêm văn bản tùy chỉnh vào menu WordPress
• Thêm ngày hiện tại vào menu
• Hiển thị tên người dùng trong menu của bạn
• Hiển thị các menu khác nhau trên các trang khác nhau

2.1. Thêm cửa sổ bật lên tìm kiếm trong Menu WordPress

Thông thường, bạn có thể thêm biểu mẫu tìm kiếm vào thanh bên WordPress của mình bằng cách sử dụng tiện ích hoặc khối tìm kiếm mặc định. Tuy nhiên, không có cách nào để thêm tìm kiếm vào menu điều hướng theo mặc định.

Một số giao diện WordPress có tùy chọn để thêm hộp tìm kiếm vào khu vực menu chính của bạn. Nhưng nếu không, bạn có thể sử dụng phương pháp dưới đây.

Đối với điều này, bạn cần cài đặt và kích hoạt  plugin SearchWP Modal Search Form. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về  cách cài đặt plugin WordPress.

Plugin này là một addon cho SearchWP, là plugin tìm kiếm WordPress tốt nhất trên thị trường.

Addon này miễn phí và cũng sẽ hoạt động với tìm kiếm WordPress mặc định. Tuy nhiên, mình khuyên bạn nên sử dụng nó với SearchWP nếu bạn muốn cải thiện tìm kiếm WordPress của mình.

Sau khi cài đặt addon, chỉ cần truy cập trang Appearance >> Menus. Trong cột 'Add menu items', hãy nhấp vào tab 'SearchWP Modal Search Forms' để mở rộng nó.


Chọn công cụ tìm kiếm của bạn và sau đó nhấp vào nút Add to menu.

Plugin sẽ thêm tìm kiếm vào menu điều hướng của bạn. Nhấp vào 'Modal search form' bên dưới các mục menu của bạn để mở rộng nó và thay đổi nhãn thành Search hoặc bất kỳ thứ gì khác bạn muốn.


Đừng quên nhấp vào nút Save Menu để lưu trữ các thay đổi của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem Tìm kiếm được thêm vào menu điều hướng của bạn. Nhấp vào nó sẽ mở biểu mẫu tìm kiếm trong hộp đèn bật lên.


Để biết thêm chi tiết, hãy xem hướng dẫn của mình về cách thêm nút tìm kiếm vào menu WordPress.

2.2. Thêm các biểu tượng và hình ảnh tùy chỉnh vào menu cụ thể

Một mục tùy chỉnh phổ biến khác mà người dùng thường muốn thêm vào một menu cụ thể là hình ảnh hoặc biểu tượng.

Để làm được điều đó, bạn sẽ cần cài đặt và kích hoạt plugin Menu Image Icon. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy chuyển đến trang Appearance >> Menus và di chuyển chuột qua mục menu nơi bạn muốn hiển thị biểu tượng hoặc hình ảnh.


Nhấp vào nút Menu Image màu xanh lam để tiếp tục.

Điều này sẽ hiển thị một cửa sổ bật lên. Từ đây, bạn có thể chọn một hình ảnh hoặc biểu tượng để hiển thị với mục menu đó.


Bạn cũng có thể chọn vị trí của hình ảnh hoặc biểu tượng đối với mục menu. Ví dụ: bạn có thể hiển thị biểu tượng ngay trước mục menu như trong ví dụ dưới đây của mình, hoặc thậm chí ẩn tiêu đề menu để chỉ biểu tượng hiển thị.

Đừng quên nhấp vào nút Save changes để lưu cài đặt của bạn. Lặp lại quy trình nếu bạn cần thêm biểu tượng hoặc hình ảnh vào các mục menu khác.

Sau đó, bạn có thể truy cập trang web của mình để xem hình ảnh hoặc biểu tượng tùy chỉnh trong các mục menu cụ thể.


Để có hướng dẫn chi tiết hơn, hãy xem hướng dẫn của mình về cách thêm hình ảnh trong menu WordPress.

2.3. Thêm liên kết đăng nhập/đăng xuất vào menu WordPress cụ thể

Nếu bạn đang sử dụng plugin thành viên WordPress hoặc đang chạy một cửa hàng trực tuyến, thì bạn có thể muốn cho phép người dùng dễ dàng đăng nhập vào tài khoản của họ.

Theo mặc định, WordPress không có một cách dễ dàng để hiển thị liên kết đăng nhập và đăng xuất trong menu điều hướng.

Mình sẽ chỉ cho bạn cách thêm chúng bằng cách sử dụng một plugin hoặc bằng cách sử dụng đoạn mã.

Thêm Liên kết Đăng nhập / Đăng xuất vào Menu bằng Plugin

Phương pháp này dễ dàng hơn và được khuyến nghị cho tất cả người dùng.

Đầu tiên, bạn cần cài đặt và kích hoạt plugin Login or Logout Menu Item. Sau đó, bạn cần truy cập trang Appearance >> Menu và nhấp vào tab Login/Logout để mở rộng.


Từ đây, bạn cần chọn mục 'Log in|Log Out' và nhấp vào nút Add to Menu.

Đừng quên nhấp vào nút Save Menu để lưu trữ các thay đổi của bạn. Bây giờ bạn có thể truy cập trang web của mình để xem liên kết đăng xuất đăng nhập tùy chỉnh của bạn đang hoạt động.


Liên kết sẽ tự động thay đổi thành đăng nhập hoặc đăng xuất tùy thuộc vào trạng thái đăng nhập của người dùng.

Tìm hiểu thêm trong hướng dẫn của mình về cách thêm liên kết đăng nhập và đăng xuất trong menu WordPress.

Thêm liên kết đăng nhập / đăng xuất bằng cách sử dụng mã tùy chỉnh

Phương pháp này yêu cầu bạn thêm mã vào trang web WordPress của mình. Nếu bạn chưa làm điều này trước đây, hãy xem hướng dẫn của mình về cách thêm mã tùy chỉnh trong WordPress.

Trước tiên, bạn cần tìm ra tên mà giao diện WordPress của bạn sử dụng cho vị trí menu điều hướng cụ thể.

Cách dễ nhất để tìm thấy điều này là truy cập trang Appearance >> Menus và đưa chuột đến khu vực vị trí menu.


Nhấp chuột phải để chọn công cụ Kiểm tra và sau đó bạn sẽ thấy tên vị trí trong mã nguồn bên dưới. Ví dụ: giao diện demo của mình sử dụng menu chính, chân trang và thanh trên cùng.

Lưu ý tên được sử dụng cho vị trí mục tiêu của bạn nơi bạn muốn hiển thị liên kết đăng nhập / đăng xuất.

Tiếp theo, bạn cần thêm mã sau vào tập tin functions.php của giao diện hoặc một plugin dành riêng cho trang web.

add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
    if (is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
    }
    elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
        $items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
    }
    return $items;
}
Sau đó, bạn có thể truy cập trang web của mình và bạn sẽ thấy đăng nhập liên kết đăng xuất của mình trong menu điều hướng của bạn.


Liên kết động này sẽ tự động chuyển sang trạng thái đăng nhập hoặc đăng xuất dựa trên trạng thái đăng nhập của người dùng.

2.4. Thêm văn bản tùy chỉnh vào menu điều hướng WordPress của bạn

Điều gì sẽ xảy ra nếu bạn chỉ muốn thêm văn bản chứ không phải liên kết vào menu điều hướng của mình?

Có hai cách bạn có thể làm điều đó.

Thêm văn bản tùy chỉnh vào một menu cụ thể (cách dễ dàng)

Chỉ cần truy cập trang Appearance >> Menus và thêm liên kết tùy chỉnh với dấu # làm URL và văn bản bạn muốn hiển thị dưới dạng văn bản liên kết của mình.


Bấm vào nút Add to Menu để tiếp tục.

WordPress sẽ thêm văn bản tùy chỉnh của bạn dưới dạng một mục menu ở cột bên trái. Bây giờ, hãy nhấp để mở rộng nó và xóa dấu #.


Đừng quên nhấp vào nút Save Menu và xem trước trang web của bạn. Bạn sẽ nhận thấy văn bản tùy chỉnh của mình xuất hiện trong menu điều hướng.

Nó vẫn là một liên kết, nhưng nhấp vào nó không làm được gì cho người dùng.


Thêm văn bản tùy chỉnh vào menu điều hướng bằng mã

Đối với phương pháp này, bạn sẽ thêm một đoạn mã vào trang web của mình. Trước tiên, bạn sẽ cần phải tìm ra tên của vị trí giao diện của mình như được mô tả ở trên trong phần liên kết đăng nhập / đăng xuất.

Sau đó, bạn cần thêm mã sau vào tập tin functions.php của theme hoặc một plugin dành riêng cho trang web.

add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
    if ( $args->theme_location == 'primary') {
        $items .= '<li><a title="">Custom Text</a></li>';
    }
    return $items;
}
Chỉ cần thay thế nơi có nội dung 'Văn bản tùy chỉnh' bằng văn bản của riêng bạn.

Giờ đây, bạn có thể lưu các thay đổi và truy cập trang web của mình để xem văn bản tùy chỉnh được thêm vào cuối menu điều hướng.

Phương pháp mã này có thể hữu ích nếu bạn muốn lập trình thêm các phần tử động vào menu WordPress cụ thể.

2.5. Thêm ngày hiện tại trong Menu WordPress

Bạn có muốn hiển thị ngày hiện tại bên trong menu điều hướng trong WordPress không? Thủ thuật này rất hữu ích nếu bạn chạy một blog được cập nhật thường xuyên hoặc một trang web tin tức.

Chỉ cần thêm mã sau vào tập tin functions.php của giao diện của bạn hoặc một plugin dành riêng cho trang web.

add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
    if( $args->theme_location == 'primary')  {
         
        $todaysdate = date('l jS F Y');
        $items .=  '<li><a>' . $todaysdate .  '</a></li>';
 
    }
    return $items;
}
Đừng quên thay thế 'primary' bằng vị trí menu của bạn.

Bây giờ bạn có thể truy cập trang web của mình để xem ngày hiện tại trong menu WordPress của mình.


Bạn cũng có thể thay đổi định dạng ngày tháng theo ý muốn của mình. Xem hướng dẫn của mình về cách thay đổi định dạng ngày và giờ trong WordPress.

2.6. Hiển thị tên người dùng trong Menu WordPress

Bạn muốn thêm một chút cá nhân hóa vào menu điều hướng của mình? Bạn có thể chào người dùng đã đăng nhập bằng tên của họ trong menu điều hướng của bạn.

Trước tiên, bạn sẽ cần thêm mã sau vào tập tin functions.php của giao diện hoặc một plugin dành riêng cho trang web.

add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
    foreach ( $menu_items as $menu_item ) {
        if ( strpos($menu_item->title, '#profile_name#') !== false) {
             if ( is_user_logged_in() )     {
                $current_user = wp_get_current_user();
                 $user_public_name = $current_user->display_name;
                $menu_item->title =  str_replace("#profile_name#",  " Hey, ". $user_public_name, $menu_item->title . "!");
             } else {
             $menu_item->title =  str_replace("#profile_name#",  " Welcome!", $menu_item->title . "!");
             }
        }
    }
 
    return $menu_items;
}
Đầu tiên, mã này sẽ kiểm tra xem bạn đã thêm một mục menu có #profile_name# làm văn bản liên kết hay chưa. Sau đó, nó thay thế mục menu đó bằng tên người dùng đã đăng nhập hoặc một lời chào chung chung cho người dùng chưa đăng nhập.

Tiếp theo, bạn cần đến trang Appearance >> Menus và thêm một liên kết tùy chỉnh mới với #profile_name# văn bản dưới dạng Liên kết.


Đừng quên nhấp vào nút Save Menu để lưu trữ các thay đổi của bạn. Sau đó, bạn có thể truy cập trang web của mình để xem tên người dùng đã đăng nhập trong menu WordPress.


2.7. Hiển thị động các menu có điều kiện trong WordPress

Cho đến nay, mình đã chỉ cho bạn cách thêm các loại mục tùy chỉnh khác nhau vào các menu WordPress cụ thể. Tuy nhiên, đôi khi bạn có thể cần hiển thị động các mục menu khác nhau cho người dùng.

Ví dụ: bạn có thể muốn hiển thị menu chỉ cho những người dùng đã đăng nhập. Một tình huống khác là khi bạn muốn menu thay đổi dựa trên trang mà người dùng đang xem.

Phương pháp này cho phép bạn tạo một số menu và chỉ hiển thị chúng khi các điều kiện nhất định được khớp.

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

Sau khi kích hoạt, bạn cần truy cập trang Appearance >> Menus. Từ đây, bạn cần tạo một menu mới mà bạn muốn hiển thị. Ví dụ, trong ví dụ này, mình đã tạo một menu mới chỉ dành cho người dùng đã đăng nhập.


Sau khi bạn đã tạo menu, hãy chuyển sang tab Manage Locations.

Từ đây, bạn cần nhấp vào liên kết Conditional Menus bên cạnh vị trí trình đơn.


Sau đó, bạn cần chọn menu bạn đã tạo trước đó từ menu thả xuống.

Sau đó, nhấp vào nút '+ Conditions' để tiếp tục.


Thao tác này sẽ hiển thị một cửa sổ bật lên.

Từ đây, bạn có thể chọn các điều kiện cần đáp ứng để hiển thị menu này.


Plugin cung cấp một loạt các điều kiện để bạn lựa chọn. Ví dụ: bạn có thể hiển thị menu dựa trên trang cụ thể, danh mục, loại bài đăng, phân loại và hơn thế nữa.

Bạn cũng có thể hiển thị các menu khác nhau dựa trên vai trò của người dùng và trạng thái đã đăng nhập. Ví dụ: bạn có thể hiển thị menu khác cho các thành viên hiện có trên trang web thành viên.

Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách thêm các mục tùy chỉnh vào các menu WordPress cụ thể. Bạn cũng có thể muốn xem hướng dẫn của mình về cách chọn phần mềm thiết kế web tốt nhất hoặc so sánh chuyên gia về phần mềm trò chuyện trực tiếp tốt nhất cho doanh nghiệp nhỏ.