워드프레스 로그인 버튼 - wodeupeuleseu logeu-in beoteun

WordPress Optimization is a key goal for us at Crunchify. Having less and less plugin and customize theme without Plugins is a best way to go.

In this tutorial we will go over list of below things.

• How to Add the WordPress Logout Link
• Login or Logout Menu Item without Plugin
• How to Add a Login/Logout Link to Your WordPress Menu
• Add A Login/Logout Button To Main Menu
• How to Add a Conditional Log in and Log out Link to Your WordPress page/post?

If you have any any of above question then you are at right place.

Tips-1. How to add Login / Logout Menu link in WordPress main header menu?

It’s very simple to add Login and Logout without any plugin. Just add below code to your theme’s functions.php file and you should start seeing Login / Login on your main header.

This code adds wp_nav_menu_items wordpress hook. Make sure you customize your style as peryour theme. Here I’ve just added style: float=right.

add_filter('wp_nav_menu_items', 'crunchify_add_login_logout_menu', 10, 2);
function crunchify_add_login_logout_menu($items, $args) {
        ob_start();
        wp_loginout('index.php');
        $loginoutlink = ob_get_contents();
        ob_end_clean();
        $items .= '<li style=" float: right;">'. $loginoutlink .'</li>';
    return $items;
}

Here is a short WordPress Login/Logout Menu short YouTube video

Now let’s go over to next section.

Tips-2. How to add Conditional Login / Logout link with simple WordPress Shortcode?

As you may have noticed in our main menu, we have Login / MyAccount menu under PRO section.

For my usage, I wanted to have conditional login / logout link for my users. So they could login and logout from My Account page once they finish uploading their Premium Plugins.

Let’s get started on how to add Login/Logout button without any plugin. Here is Crunchify’s Login / Logout Shortcode:

Just add below code to to show Login/Logout conditional link as you see in above images.

• Use this shortcode where you want to show button: [crunchify_login_logout]

add_shortcode( 'crunchify_login_logout', 'crunchify_login_logout' );
function crunchify_login_logout() {
	ob_start();
    if (is_user_logged_in()) : 
    ?>
     	You are logged in. <a role="button" href="<?php echo wp_logout_url(get_permalink()); ?>">Log Out</a>. 
	<?php 
    else : 
	?>
    	If you want, you could <a role="button" href="<?php echo wp_login_url(get_permalink()); ?>">Log In</a> and complete purchase.
	<?php 
    endif;

	return ob_get_clean();
}

Tips-3. How to show only Logout button conditionally on your MyAccount page?

I wanted to add only Logout button on My Account page. I don’t want to show Login button as I would like to use Easy Digital Download’s default sign-in/login form.

Simply add below code to your theme’s functions.php file and you should be good.

• Use this shortcode where you want to show button: [crunchify_only_logout]

add_shortcode( 'crunchify_only_logout', 'crunchify_only_logout' );
function crunchify_only_logout() {
	
	ob_start();
    if (is_user_logged_in()) : 
    ?>
    	<a class="existing-user edd-submit button" role="button" href="<?php echo wp_logout_url(get_permalink()); ?>">Log Out</a>
	<?php 
    endif;

	return ob_get_clean();
}

And that’s it. There are so many ways you could customize WordPress menu. Let me know if you face any issue running this and modifying login/logout menu or button.

Join the Discussion

If you liked this article, then please share it on social media. Still have any questions about an article, leave us a comment.

워드프레스 로그인/로그아웃 버튼을 만들기 위해서  “Nav Menu Roles“이라는 플러그인을 사용하면
메뉴 항목을 로그인 여부 또는 권한등급(회원 등급)에 따라 다르게 표시할 수 있습니다.
Nav Menu Roles 플러그인을 설치하고 활성화 한 후에 메뉴 항목을 추가하면

각 메뉴 항목에 다음 그림과 비슷한 옵션이 추가로 생성됩니다.

Logged Out Users – 로그인하지 않은 사용자(게스트 사용자)에게만 표시됩니다.

Logged In Users – 로그인한 사용자에게만 표시됩니다.

By Role – 역할(회원등급)별로 표시를 제어할 수 있습니다.

로그인 했을 때 와 로그인 하지 못했을 때의 상황을 판단하여

버튼의 형태와 링크되는 주소를 다르게 만들 수 있습니다.

메뉴에서 “사용자정의 링크” 로  버튼을 각각 “로그인” 과 “로그아웃” 으로 두개를 만들고

로그인 버튼의 URL에      “http://사이트주소/wp-login.php?action=login&redirect_to=http://사이트주소” 를

로그아웃 버튼의 URL에  “http://사이트주소/wp-login.php?action=logout&redirect_to=http://사이트주소”

를 입력하여 각각 동작을 다르게 지정하여 사용 할 수 있습니다.

공유하기

게시글 관리

저작자표시

'기타 > 블로그 홈피' 카테고리의 다른 글