[워드프레스] CSS를 사용하여 로그인 사용자에게만 특정 요소 표시하기

참고: 인기 테마인 BE 테마(33%)The 7(35%) 할인 행사를 진행하고 있습니다.
참고

로그인하지 않은 비로그인 사용자(게스트)에게는 특정 요소를 보이지 않고 로그인한 사용자에게만 표시하려는 경우 보통 is_user_logged_in() 함수를 사용하여 구현할 수 있습니다. 가령 다음과 같은 코드를 사용하면 로그인 사용자에게는 “안녕하세요? 회원님!”이, 게스트 사용자(비로그인 사용자)에게는 “안녕하세요? 손님!”이 출력됩니다.

<?php
if ( is_user_logged_in() ) {
echo '안녕하세요? 회원님!';
} else {
echo '안녕하세요? 손님!';
}
?>

만약 CSS로 로그인 사용자에게만 특정 요소를 보이고 싶다면 :not 선택자를 사용하는 것도 한 방법이 될 것입니다. 워드프레스에서는 일반적으로 로그인한 사용자에 대하여 logged-in 클래스가 추가됩니다.

아바다 테마에서 logged-in 클래스

예를 들어, 아바다 테마에서 메인 메뉴에 추가되는 검색 아이콘을 로그인 사용자에게만 표시하고 게스트에게는 숨기려는 경우(이것이 왜 필요한지 모르겠지만, 실제로 이런 문의를 하는 사람이 있네요), 다음과 비슷한 CSS 코드를 사용할 수 있습니다.

body:not(.logged-in) li.fusion-main-menu-search {
display: none;
}

다른 요소의 경우에도 비슷한 방식으로 응용할 수 있습니다.

:not 셀텍터에 대한 자세한 내용은 여기에서 확인해볼 수 있습니다. :not 셀렉터는 IE 9부터 지원됩니다.

참고:



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.