Thêm button log in/log out vào menu cho users trong WordPress

Trang chủ Tin tức LẬP TRÌNH PHP Thêm button log in/log out vào menu cho users trong WordPress

Bạn muốn tạo button log in / log out cho user của website wordpress, bằng cách chèn tag <li> vào trong tag <ul> của menu, nhưng không phải là custom code của theme, có cách đơn giản hơn dành cho bạn. Bạn code vào file functions.php của theme.

Code trong functions.php của theme

add_filter( 'wp_nav_menu_items', function( $items, $args ) {

	// nhập menu đã khởi tạo của theme đang dùng
	if ( 'main-menu' != $args->theme_location ) {
		return $items;
	}

	// Add custom item
	$items .= '<li class="my-custom-login-logout-link menu-button menu-item">';

		// Log-out link
		if ( is_user_logged_in() ) {

			$text            = 'Logout';
			$logout_redirect = home_url( '/' ); // Change logout redirect URl here

			$items .= '<a href="'. wp_logout_url( $logout_redirect ) .'" title="'. esc_attr( $text ) .'" class="wpex-logout"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';

		}

		// Log-in link
		else {

			$text      = 'Login';
			$login_url =  wp_login_url();

			$items .= '<a href="'. esc_url( $login_url ) .'" title="'. esc_attr( $text ) .'"><span class="link-inner">'. strip_tags( $text ) .'</span></a>';

		}

	$items .= '</li>';

	return $items;

}, 20, 2 );

Bạn nhớ review code trước khi chạy.
wp_logout_url( $logout_redirect ) là function return link log out của wordpress, biến $logout_redirect là url bạn muốn sau khi log out thành công – có thể trống.
wp_login_url() là function return link login mặc định của wordpress.
is_user_logged_in() là function kiểm tra user hiện tại có login chưa, return true / false.

Lưu ý nhỏ:

if ( 'main-menu' != $args->theme_location ) {
		return $items;
	}

code khi chạy sẽ kiểm tra xem ‘main-menu’ có phải là menu của theme bạn đã đăng ký không, cho nên bạn hãy tìm đúng tên của menu mà theme đăng khởi tạo, vì có thể sẽ khác nhau. Thường thì theme wp sẽ đăng ký menu bằng lệnh register_nav_menus($location), là từ khoá để bạn search cho nhanh.

Cuối cùng: bạn hãy css để hiển thị đẹp hơn

.my-custom-login-logout-link a{
	background: #ca0f0f;
	padding: 10px 20px;
	border-radius: 15px;
	color: #fff !important;
}

Thành công!