로그인아웃 메뉴 커스텀

안녕하세요.

지난번 폭풍 질문을 남겼는데도 친절하게 답변해주셔서 고맙습니다!

대부분 해결되었는데 로그인아웃 메뉴만 아직 해결하지 못하고 있습니다ㅠㅠ

참고사이트 를 보시면 푸터 메뉴는 직접 코딩해서 넣었고 메뉴 오른쪽에 로그인 버튼을 넣었습니다.

비로그인 사용자에겐 로그인 메뉴와 로그인 이미지를, 로그인 사용자에겐 마이페이지 메뉴와 회원정보 이미지를 보이게 하고싶은데 어떻게 하면 가능할까요?

혹시 코드를 직접 써주신다면 아래에 제가 쓴 푸터메뉴 코드에 넣어서 써주시면 감사하겠습니다!

(써주신 코드를 받아서 php 파일에 올리는 형태가 되면 그 div위치를 position: fiexd로 잡아놓게되면 디바이스마다 위치가 달라져서요..! / 말이 좀 이상하지만ㅠㅠ)

 

<div class="footerbar">
	<div class="notic" onclick="location.href='http://www.carediem.co.kr';" >
		<img class="notic_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/notice.png" alt="notic">
		<p>notic</p>
	</div>
	<div class="brand" onclick="location.href='http://www.carediem.co.kr';">
		<img class="brand_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/pill.png" alt="brand">
		<p>brand</p>
	</div>
	<div class="event" onclick="location.href='http://www.carediem.co.kr';">
		<img class="event_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/event-1.png" alt="event">
		<p>event</p>
	</div>
	<div class="cs" onclick="location.href='http://www.carediem.co.kr';">
		<img class="cs_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/channel.png" alt="channel">
		<p>cs</p>
	</div>
	<div class="login" onclick="location.href='http://www.carediem.co.kr';">
		<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
		<p>login</p>
	</div>
</div>

<style>
	

	.footerbar{
		position: fixed;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 4em;
		border-top: 0.22px solid #000;
		opacity: 1;
		background: #fff;
		z-index: 999;

	}
	.notic{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 20%;
		height: 4em;
		text-align: center;
		color: #000;
	}
	.brand{
		position: fixed;
		bottom: 0;
		left: 20%;
		width: 20%;
		height: 4em;
		text-align: center;
		color: #000;
	}
	.event{
		position: fixed;
		bottom: 0;
		left: 40%;
		width: 20%;
		height: 4em;
		text-align: center;
		color: #000;
	}
	.cs{
		position: fixed;
		bottom: 0;
		left: 60%;
		width: 20%;
		height: 4em;
		text-align: center;
		color: #000;
	}
	.login{
		position: fixed;
		bottom: 0;
		left: 80%;
		width: 20%;
		height: 4em;
		text-align: center;
		color: #000;
	}

	.notic_img{
		width: 20px;
		padding-top: 10px;
	}
	.brand_img{
		width: 20px;
		padding-top: 10px;
	}
	.event_img{
		width: 20px;
		padding-top: 10px;
	}
	.cs_img{
		width: 20px;
		padding-top: 10px;
	}
	.login_img{
		width: 20px;
		padding-top: 10px;
	}
	.footerbar p{
		font-size: 12px;
	}
	.mobile-header{
		display: none !important;
	}

 

 

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    올려주신 코드 대신 아래의 코드로 적용해보시겠어요?

    <div class="footerbar">
    	<div class="notic" onclick="location.href='http://www.carediem.co.kr';" >
    		<img class="notic_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/notice.png" alt="notic">
    		<p>notic</p>
    	</div>
    	<div class="brand" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="brand_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/pill.png" alt="brand">
    		<p>brand</p>
    	</div>
    	<div class="event" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="event_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/event-1.png" alt="event">
    		<p>event</p>
    	</div>
    	<div class="cs" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="cs_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/channel.png" alt="channel">
    		<p>cs</p>
    	</div>
    	<?php if(is_user_logged_in()):?>
    	<!-- 로그인 시 표시됩니다.  -->
    	<div class="login" onclick="location.href='http://www.carediem.co.kr';">
    		<?php echo get_avatar(get_current_user_id(), 20)?>
    		<p>마이페이지</p>
    	</div>
    	<?php else:?>
    	<!-- 비로그인 시 표시됩니다.  -->
    	<div class="login" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
    		<p>login</p>
    	</div>
    	<?php endif?>
    </div>
    
    <style>
    	.footerbar{
    		position: fixed;
    		bottom: 0px;
    		left: 0px;
    		width: 100%;
    		height: 4em;
    		border-top: 0.22px solid #000;
    		opacity: 1;
    		background: #fff;
    		z-index: 999;
    
    	}
    	.notic{
    		position: fixed;
    		bottom: 0;
    		left: 0;
    		width: 20%;
    		height: 4em;
    		text-align: center;
    		color: #000;
    	}
    	.brand{
    		position: fixed;
    		bottom: 0;
    		left: 20%;
    		width: 20%;
    		height: 4em;
    		text-align: center;
    		color: #000;
    	}
    	.event{
    		position: fixed;
    		bottom: 0;
    		left: 40%;
    		width: 20%;
    		height: 4em;
    		text-align: center;
    		color: #000;
    	}
    	.cs{
    		position: fixed;
    		bottom: 0;
    		left: 60%;
    		width: 20%;
    		height: 4em;
    		text-align: center;
    		color: #000;
    	}
    	.login{
    		position: fixed;
    		bottom: 0;
    		left: 80%;
    		width: 20%;
    		height: 4em;
    		text-align: center;
    		color: #000;
    	}
    
    	.notic_img{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.brand_img{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.event_img{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.cs_img{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.avatar{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.login_img{
    		width: 20px;
    		padding-top: 10px;
    	}
    	.footerbar p{
    		font-size: 12px;
    	}
    	.mobile-header{
    		display: none !important;
    	}
    </style>

    워드프레스의 is_user_logged_in 함수로 로그인 여부를 확인할 수 있습니다.

    get_avatar 함수는 프로필 이미지를 표시할 수 있습니다.

    고맙습니다.

  • 아직 해결이 되지않아 다시 한 번 부탁드립니다..!

    코드는 아래와 같이 삽입하였으나

    <div class="footerbar">
    	<div class="notic" onclick="location.href='http://www.carediem.co.kr';" >
    		<img class="notic_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/notice.png" alt="notic">
    		<p>notic</p>
    	</div>
    	<div class="brand" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="brand_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/pill.png" alt="brand">
    		<p>brand</p>
    	</div>
    	<div class="event" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="event_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/event-1.png" alt="event">
    		<p>event</p>
    	</div>
    	<div class="cs" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="cs_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/channel-1.png" alt="channel">
    		<p>cs</p>
    	</div>
    	<?php if(is_user_logged_in()):?>
    	<!-- 로그인 시 표시됩니다.  -->
    	<?php echo get_avatar(get_current_user_id(), 20)?>
    	<div class="mypage" onclick="location.href='http://www.carediem.co.kr/mypage';">
    		<img class="mypage_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/cart.png" alt="event">
    		<p>mypage</p>
    	</div>
    	<?php else:?>
    	<!-- 비로그인 시 표시됩니다.  -->
    	<div class="login" onclick="location.href='http://www.carediem.co.kr/login';">
    		<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
    		<p>login</p>
    	</div>
    	<?php endif?>
    </div>
    
    
    
    <style>
    	.footerbar{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 4em; border-top: 0.22px solid #000; opacity: 1; background: #fff; z-index: 999; }
    	.notic{ position: fixed; bottom: 0; left: 0; width: 20%; height: 4em; text-align: center; color: #000; }
    	.brand{ position: fixed; bottom: 0; left: 20%; width: 20%; height: 4em; text-align: center; color: #000;}
    	.event{ position: fixed; bottom: 0; left: 40%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.cs{ position: fixed; bottom: 0; left: 60%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.login{ position: fixed; bottom: 0; left: 80%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.mypage{ position: fixed; bottom: 0; left: 80%; width: 20%; height: 4em; text-align: center; color: #000; }	
    	.notic_img{ width: 20px; padding-top: 10px; }
    	.mypage_img{ width: 20px; padding-top: 10px; }
    	.brand_img{ width: 20px; padding-top: 10px; }
    	.event_img{ width: 20px; padding-top: 10px; }
    	.cs_img{ width: 20px; padding-top: 10px; }
    	.avatar{ width: 20px; padding-top: 10px; }
    	.login_img{ width: 20px; padding-top: 10px; }
    	.footerbar p{ font-size: 12px; }
    	.mobile-header{ display: none !important;}
    </style>

    1. 로그인과 비로그인 시 보여야 할 이미지가 동시에 겹쳐보이는 점

    2. 로그인과 비로그인 시 클릭하면 이동되는 url이 바뀌어야 하지만 바뀌지 않는점

    의 문제가 있습니다ㅠㅠ 게스트 아이디 마련해놓았으니 한 번 봐주시겠어요?

    ID: support

    PW: support123

  • 안녕하세요.

    현재는 다른 코드가 적용되어 있는지요?

    마이 페이지나 로그인 버튼이 review 버튼으로 적용되어있는 듯합니다.

    만약, 아직도 해결되지 않으셨다면

    확인 가능한 실제 페이지 주소도 알려주시겠어요?

    고맙습니다.

  • 참고사이트에서 확인 부탁드립니다..!

     

    현재 적용 코드는 그대로 복사해서 넣겠습니다!

    <div class="footerbar">
    	<div class="notic" onclick="location.href='http://www.carediem.co.kr';" >
    		<img class="notic_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/notice.png" alt="notic">
    		<p>notic</p>
    	</div>
    	<div class="brand" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="brand_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/pill.png" alt="brand">
    		<p>brand</p>
    	</div>
    	<div class="event" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="event_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/event-1.png" alt="event">
    		<p>event</p>
    	</div>
    	<div class="cs" onclick="location.href='http://www.carediem.co.kr';">
    		<img class="cs_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/channel-1.png" alt="channel">
    		<p>cs</p>
    	</div>
    	<?php if(is_user_logged_in()):?>
    	<!-- 로그인 시 표시됩니다.  -->
    		<div class="mypage" onclick="location.href='http://www.carediem.co.kr/mypage';">
    		<img class="mypage_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/cart.png" alt="event">
    		<p>mypage</p>
    	</div>
    	<?php else:?>
    	<!-- 비로그인 시 표시됩니다.  -->
    	<div class="login" onclick="location.href='http://www.carediem.co.kr/login';">
    		<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
    		<p>login</p>
    	</div>
    	<?php endif?>
    </div>
    
    
    
    	.footerbar{ position: fixed; bottom: 0px; left: 0px; width: 100%; height: 4em; border-top: 0.22px solid #000; opacity: 1; background: #fff; z-index: 999; }
    	.notic{ position: fixed; bottom: 0; left: 0; width: 20%; height: 4em; text-align: center; color: #000; }
    	.brand{ position: fixed; bottom: 0; left: 20%; width: 20%; height: 4em; text-align: center; color: #000;}
    	.event{ position: fixed; bottom: 0; left: 40%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.cs{ position: fixed; bottom: 0; left: 60%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.login{ position: fixed; bottom: 0; left: 80%; width: 20%; height: 4em; text-align: center; color: #000; }
    	.mypage{ position: fixed; bottom: 0; left: 80%; width: 20%; height: 4em; text-align: center; color: #000; }	
    	.notic_img{ width: 20px; padding-top: 10px; }
    	.mypage_img{ width: 20px; padding-top: 10px; }
    	.brand_img{ width: 20px; padding-top: 10px; }
    	.event_img{ width: 20px; padding-top: 10px; }
    	.cs_img{ width: 20px; padding-top: 10px; }
    	.avatar{ width: 20px; padding-top: 10px; }
    	.login_img{ width: 20px; padding-top: 10px; }
    	.footerbar p{ font-size: 12px; }
    	.mobile-header:{ display: none !important;}

    ID: support

    PW: support123

     

     

    ---

    현재 잘 적용이 안돼서 다른 페이지(로그인 페이지 포함)에서는 해당 자리에 리뷰페이지 링크를 걸어놨습니다!

    참고사이트 주소에만 위의 코드를 삽입해두고 다른 페이지는 다른 코드가 적용되어있는데 혹시 그게 문제가 될런지요??

    리뷰로 적용되어 보이신 것은 해당 페이지에서 로그인을 누르면 로그인 페이지로 이동하고 로그인 페이지는 제가 리뷰 버튼을 넣어놔서 그런 것 같습니다!

    로그인 하신 후 참고사이트 링크로 다시 이동하셔서 확인 부탁드립니다..!

  • 안녕하세요.

    올려주신 참고 페이지 확인해봤습니다.

    현재는 코드가 아래와 같이 적용이 되어 있습니다. (주석 처리)

    PHP 코드를 추석 처리하셨기 때문에 원치 않는 결과가 나오신 듯합니다.

    아래의 코드를

    <!--?php if(is_user_logged_in()):?-->
    <!-- 로그인 시 표시됩니다.  -->
    <div class="mypage" onclick="location.href='http://www.carediem.co.kr/mypage';">
    	<img class="mypage_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/cart.png" alt="event">
    	<p>mypage</p>
    </div>
    <!--?php else:?-->
    <!-- 비로그인 시 표시됩니다.  -->
    <div class="login" onclick="location.href='http://www.carediem.co.kr/login';">
    	<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
    	<p>login</p>
    </div>
    <!--?php endif?-->

    아래의 코드로 교체해보시겠어요?

    <?php if(is_user_logged_in()):?>
    <!-- 로그인 시 표시됩니다.  -->
    <div class="mypage" onclick="location.href='http://www.carediem.co.kr/mypage';">
    	<img class="mypage_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/cart.png" alt="event">
    	<p>mypage</p>
    </div>
    <?php else:?>
    <!-- 비로그인 시 표시됩니다.  -->
    <div class="login" onclick="location.href='http://www.carediem.co.kr/login';">
    	<img class="login_img" src="http://www.carediem.co.kr/wp-content/uploads/2018/10/login.png" alt="">
    	<p>login</p>
    </div>
    <?php endif?>

    고맙습니다.

  • 작성해주신대로 그대로 복사해서도 넣어보고 혹시나 다른 <!-- 로그인 시 표시됩니다. -->라는 주석이 문제를 만드는건가싶어서 삭제도 해보았는데 저는 절대 주석처리를 하지 않았는데도 저절로 주석처리가 되네요ㅠㅠ 관리자 아이디를 보내드릴테니 직접 페이지 수정을 도와주실 수 있나요? 공식 메일을 주신다면 관리자 계정 생성해서 보내드리겠습니다!

  • 안녕하세요.

    우선, 테마나 다른 플러그인 쪽에서 PHP 코드를 주석 처리하고 있는지 확인해보셔야 할 듯합니다.

    잠시 다른 테마로도 테스트해보시고 모든 플러그인을 비활성화한 후에도 확인해보시겠어요?

     

    테마나 다른 플러그인의 문제가 아니라면

    저희 고객지원 쪽 이메일로 워드프레스 관리자 계정과 FTP 접속 정보를 보내주시면

    해결을 보장해드리진 못하지만 비용이 들지 않는 선에서 점검해드리겠습니다.

    고맙습니다.

  • 메일로 관리자 정보와 ftp 접속 정보 남겨드렸습니다...!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기