워드프레스 SimpleModal Login 플러그인
SimpleModal Login 플러그인은 워드프레스용 Modal Ajax 로그인, 회원 가입 등의 기능을 제공하는 워드프레스용 플러그인입니다. 현재 업데이트된지 1년 정도 되어 최신 버전에서는 제대로 작동되지 않을 수도 있을 것 같습니다. (가까운 시일 내에 업데이트되기를 기대해봅니다.)
※ 2020년 5월 업데이트: 이 플러그인은 5년 이상 업데이트되지 않았기 때문에 최신 워드프레스 버전에서는 제대로 작동하지 않을 것 같습니다. 그리고 오랫동안 업데이트가 되지 않으면 보안상 문제가 있을 수도 있습니다. 대신 다음 글에서 소개하는 무료 또는 유료 플러그인을 참고해보시기 바랍니다.
워드프레스 팝업 플러그인을 원하는 경우 우리나라 업체에서 한국 환경에 맞게 제작된 단순한 이미지 팝업 플러그인을 사용해볼 수 있습니다.
워드프레스 심플 로그인 플러그인
SimpleModal Login 플러그인을 메뉴에 추가하는 방법을 간략히 살펴보겠습니다.
이 플러그인의 Installation 섹션에 보면 아래와 같은 이 플러그인을 사용하는 방법이 설명되어 있습니다. 이 플러그인은 테마의 wp_loginout()이나 wp_register()를 이용하여 작동하고, SimpleModal Login은 loginout 및 register 필터를 사용하여 simplemodal-login 클래스나 simplemodal-register class를 각 링크에 추가합니다. 즉, 테마에서 wp_loginout()을 사용하여 로그인/로그아웃 기능을 구현한다면 자동으로 작동할 것 같습니다.
참고로 가장 인기를 끌고 있는 워드프레스 유료 테마인 아바다(AVADA) 테마에서 로그인 메뉴에 simplemodal-login 클래스를 추가해보니 Modal 기능이 제대로 작동하지 않네요. (AVADA 테마에서는 아래의 방법을 사용하면 완벽하지는 않지만 작동합니다.)
만약 테마에서 wp_loginout()을 사용하지 않는 경우 다음 HTML 코드를 삽입하여 로그인/로그아웃 메뉴를 추가할 수 있습니다.
<a href="/wp-login.php" class="simplemodal-login">Log In</a> <a href="/wp-login.php?action=register" class="simplemodal-register">Register</a>
위의 코드를 테마 소스에 직접 추가해도 되지만, 필터를 통해 함수 파일에 추가할 수 있습니다.
// 메뉴 추가
add_filter( 'wp_nav_menu_items', 'wti_loginout_menu_link', 10, 2 );
function wti_loginout_menu_link( $items, $args ) {
if (!is_user_logged_in() && $args->theme_location == 'main_navigation') {
$items .= '<li class="right"><a href="/wp-login.php" class="simplemodal-login">로그인</a></li>';
$items .= '<li class="right"><a href="/wp-login.php?action=register" class="simplemodal-register">회원 가입</a></li>';
}
return $items;
}
위와 같은 코드를 사용자 함수 파일에 추가하면 됩니다. 위에서 "theme_location"은 확인하여 해당 메뉴 위치 이름으로 바꾸어주어야 합니다. 그러면 아래와 같이 로그인 팝업과 회원가입 팝업이 Modal 방식으로 표시됩니다.
아래는 회원가입 화면입니다.
SimpleModal Login 플러그인은 괜찮은 레이아웃을 제공하지만 업데이트가 된 지 오래된 관계로 여러 가지 문제가 발생하는 것 같습니다.
이외에 Ciusan Register Login이라는 무료 플러그인도 있지만 이 플러그인도 업데이트한 지 1년이 지났네요. 적절한 플러그인을 찾지 못한 경우 "팝업 로그인 플러그인 – Modal Login Plugin" 글에 설명된 플러그인을 참고해보시기 바랍니다.