워드프레스 함수로 사이드바에 기본 로그인 폼 추가하기

저장소 플러그인이나 코딩이 필요하다고 생각할 수 있는 요소 중에 워드프레스가 기본으로 제공하는 것들이 있는데, 로그인 폼이 그중 하나입니다. 여기서 로그인 폼은 로그인 페이지(wp-login.php)의 로그인 폼이 아닙니다.

템플릿 파일에 함수 추가

사이드바(또는 위젯)나 페이지(또는 페이지 템플릿)에 워드프레스 기본 제공 로그인 폼을 출력하려면 wp_login_form() 함수를 사용하면 간단합니다. 예를 들어, sidebar.php 파일에 다음처럼 wp_login_form 함수를 추가하면 사이트 사이드바에 로그인 폼이 출력됩니다. 테마 2016(twentysixteen) 기준입니다.

<?php
/**
 * The template for the sidebar containing the main widget area
 *
 * @package WordPress
 * @subpackage Twenty_Sixteen
 * @since Twenty Sixteen 1.0
 */
?>

<?php if ( is_active_sidebar( 'sidebar-1' )  ) : ?>
    <aside id="secondary" class="sidebar widget-area" role="complementary">
        <?php wp_login_form(); ?>
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </aside><!-- .sidebar .widget-area -->
<?php endif; ?>

함수에서 지원하는 파라미터를 함께 사용하면, 위의 wp_login_form 함수는 다음으로 변경하여 사용할 수 있습니다.

$args = array(
    'echo'           => true,
    'remember'       => true,
    'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
    'form_id'        => 'loginform',
    'id_username'    => 'user_login',
    'id_password'    => 'user_pass',
    'id_remember'    => 'rememberme',
    'id_submit'      => 'wp-submit',
    'label_username' => __( 'Username or Email Address' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'value_username' => '',
    'value_remember' => false
);
wp_login_form( $args );

로그인 전∙후 출력 제어

그러나, 이 함수로 출력한 로그인 폼은 로그인 후에도 그대로 출력되므로 추가 코드로 제어해야 합니다. 로그인 후에 로그인 아이디와 로그아웃 링크를 출력한다고 가정하면 다음처럼 정의할 수 있습니다.

global $current_user; // 또는 $current_user = wp_get_current_user();
/**
    $current_user->display_name;
    $current_user->user_login;
    $current_user->user_email;
    $current_user->user_firstname;
    $current_user->user_lastname;
*/
if (is_user_logged_in()) {
    echo $current_user->display_name . '. <a href="', wp_logout_url(), '" title="로그아웃">로그아웃</a>';
} else {
    $args = array(
    'echo'           => true,
    'remember'       => true,
    'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
    'form_id'        => 'loginform',
    'id_username'    => 'user_login',
    'id_password'    => 'user_pass',
    'id_remember'    => 'rememberme',
    'id_submit'      => 'wp-submit',
    'label_username' => __( 'Username or Email Address' ),
    'label_password' => __( 'Password' ),
    'label_remember' => __( 'Remember Me' ),
    'label_log_in'   => __( 'Log In' ),
    'value_username' => '',
    'value_remember' => false
    );
    wp_login_form($args);
}

로그아웃 후 이동 페이지도 로그인 후 이동 페이지처럼 원하는 주소로 정의할 수 있으며, 코드의 form_id 파라미터 값, 폼 필드 속성, 사이드바(위젯) 영역 및 페이지 CSS 클래스 기준으로 로그인 폼 스타일을 원하는 형태로 정의할 수 있습니다.

로그인 폼을 페이지에 추가하기

페이지 템플릿을 만들고, 위의 로그인 폼을 추가하면 사용자 정의 로그인 페이지를 구성할 수 있으며, 메뉴를 추가하여 해당 페이지로 링크하면 로그인 페이지에 쉽게 접근할 수 있습니다.

이때는 워드프레스 기본 로그인 페이지의 접근을 막기 위한 몇 가지 상황에 대비하여 필터 훅과 함께 리디렉트 정의가 필요합니다. 이 포스트에서는 안내하지 않으며, “Custom Login Page”, “Redirect” 키워드로 검색하면 많은 예시가 나오므로 참고하면 됩니다.

템플릿 파일에 함수 추가

로그인 전∙후 출력 제어

로그인 폼을 페이지에 추가하기

이 글 공유하기: