Hướng dẫn tạo dynamic Menu wordpress

Trong bài hôm nay mình hướng dẫn các bạn cách tạo menu động hiển thị dựa theo trạng thái login và cho người dùng truy cập. Cách duy nhất là hiển thị các menu khác nhau cho user đăng nhập, sử dụng template tag để kiểm tra, nhưng trước tiên bạn cần chuẩn bị 2 menu, một menu sẽ hiển thị cho logged user và menu kia cho người viếng thăm đọc nội dung thông thường.

register_nav_menus( array(
  'logged-in'  => __( 'Logged-in Menu Area',  'yourtheme' ),
  'visitor' => __( 'Visitor Menu Area', 'yourtheme' ),
));

Cách đơn giản nhất, bạn sử dụng hàm is_user_logged_in() để switch trực tiếp. Gọi hàm chèn menu wp_nav_menu vào trong file header.php

if (is_user_logged_in()){
  wp_nav_menu( array(
    'menu'            => 'Logged In Menu',
    'container_class' => 'logged-in-menu',
    'theme_location'  => 'logged-in'
  ));
} else {
  wp_nav_menu( array(
    'menu'            => 'Visitor Menu',
    'container_class' => 'visitor-menu',
    'theme_location'  => 'visitor'
  ));
};

Tuy có cách khác không cần thay đổi cấu trúc này, tư duy hướng lập trình nâng cấp code đễ dàng, bạn có thể sử dụng hook wp_nav_menu_args, để sửa lại tham số của hàm wp_nav_menu. Đăng ký thêm menu bằng cách clone từ các menu đã tạo trước đó. Chúng ta có hàm lấy danh sách các menu có đăng ký trong theme của bạn bởi hàm register_nav_menu.

// we're cloning existing theme_locations and creating _loggedin ones. 
add_action( 'init', 'register_loggedin_menus', 9999 );
function register_loggedin_menus() {
  $default_menus = get_registered_nav_menus();
  $loggedin_menus = array();
  
  foreach ($default_menus as $slug => $name){
  $loggedin_menus[$slug . '_dmlu_loggedin'] = $name . ' Loggedin';
  }
  
  register_nav_menus(
	$loggedin_menus
  );
}

Kiểm tra nếu user logged-in, và nội dung menu tạo trong admin có gán vào theme_location mà bạn sẽ hiển thị thay thế menu cũ. Code trong hook wp_nav_menu_args vào file functions.php như sau:

// depending on the current menu arguments, if there exists a _loggedin theme location we're using that when user is logged in.
add_filter('wp_nav_menu_args', 'serve_different_menu');
function serve_different_menu($content){
 
	$loggedin_theme_location = $content['theme_location'] . '_dmlu_loggedin';
	$active_menu_locations = get_nav_menu_locations();
	
	if ( is_user_logged_in() && !empty($content['theme_location']) && $active_menu_locations[$loggedin_theme_location] != 0 && array_key_exists($loggedin_theme_location, $active_menu_locations) ) { 
		$content['theme_location'] = $content['theme_location'] . '_dmlu_loggedin';
		return $content;
	} else {
		return $content;
	}
}

Đó là cách sử lý cơ bản, tùy theo website bạn thiết kế, sẽ thay đổi code. Chúc bạn thành công.

Nếu bạn thích bài viết này, hãy ủng hộ chúng tôi bằng cách đăng ký nhận bài viết mới ở bên dưới và đừng quên chia sẻ kiến thức này với bạn bè của bạn nhé. Bạn cũng có thể theo dõi blog này trên Twitter và Facebook