워드프레스 로그인 페이지 수정하기

들어가며

이전 글에서 플러그인을 사용하지 않고 워드프레스 기본 로그인 폼/등록 폼을 멋지게 바꾸는 방법을 살펴보았습니다. 이전 글에서는 별도의 CSS 파일을 만들지 않고 테마 함수 파일(functions.php) 내에서 코드를 입력하는 방법으로 워드프레스 기본 로그인 화면을 수정하는 방법을 설명했습니다.

워드프레스 기본 로그인 커스터마이징 코드 샘플

예를 들어 다음과 같은 간단한 코드를 함수 파일에 추가할 수 있습니다.

// 워드프레스 기본 로그인 페이지 커스터마이징
function my_login_logo() { ?>
<style type="text/css">
body.login div#login h1 a {
display: none; // 워드프레스 기본 로고를 없앰. 새로운 로고로 대체하는 방법은 이 글을 참고하세요.
}
body.login.login-action-login {
background-color: #374433;
}

form#loginform {
border-radius: 10px;
}
body.login.login-action-login,
.login.login-action-register,
.login.login-action-lostpassword {
background: url(bakcground.jpg) no-repeat center center fixed!important; // 배경 이미지. 실제 사용할 배경 이미지 경로로 교체
-moz-background-size: cover!important;
-webkit-background-size: cover!important;
-o-background-size: cover!important;
background-size: cover!important;
}

.login #backtoblog a, .login #nav a {
text-decoration: none;
color: #ffffff;
}

</style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

그러면 로그인 페이지(예: www.example.com/wp-login.php)에 접속하면 다음과 비슷하게 로그인 페이지가 바뀝니다(배경은 임의로 지정한 것으로 적절한 배경으로 바꾸시기 바랍니다). 위의 코드를 테마 함수에 추가하는 방법은 이 글을 참고하세요.

Change login page in WordPress

글자 색상이나 박스 라운딩 등은 CSS 코드를 적절히 수정하셔서 조정하시면 됩니다. 그리고 "사용자명이나 이메일 주소"와 같은 문구도 "ID" 등으로 바꿀 수 있습니다. 이에 대한 내용은 워드프레스 회원가입 폼/로그인 폼에서 “사용자명”을 “아이디”로 바꾸기 글을 참고해보시기 바랍니다. 이외에도 로그인/등록 페이지와 관련하여 다양한 커스터마이징이 이 블로그에 수록되어 있습니다.

다른 방법

만약 로그인 폼을 새롭게 만들고 싶은 경우(예를 들어 별도의 플러그인을 사용하지 않고 사이드바에 로그인 폼을 넣고자 하는 경우, 또는 새로운 나만의 로그인 페이지를 만들고자 하는 경우) 다음 글을 참고해보시기 바랍니다.

링크된 글에서는 <?php wp_login_form(); ?>을 사용하여 새롭게 로그인 페이지를 만들고, 새로운 로그인 페이지를 만들었을 경우 발생할 수 있는 여러 가지 문제에 대응하여 적절히 수정하는 방법을 설명합니다. wp_login_form()에 대한 자세한 내용은 WordPress Codex 페이지개발자 페이지를 참조하십시오.

그리고 이 wpmudev 글에서는 CSS를 사용자 테마 함수에 넣는 대신 새로운 CSS 스타일시트를 만들어서 적용하는 방법을 설명하고 있습니다. 이외에도 "비밀번호를 잃어버렸나요" 링크와 "~로 돌아가기" 링크를 없애는 방법이 추가되어 있습니다. (사실 이런 내용은 맨 위의 코드에 적절한 CSS 코드를 삽입하여 쉽게 해결이 가능한 부분입니다.)

로고 URL 변경

이외에 유용한 코드로, 다음 코드를 사용하면 로고 URL을 변경할 수 있습니다. 워드프레스 로그인 페이지의 로고를 클릭하면 wordpress.org로 연결됩니다. 이 URL을 변경하는 방법이 이 블로그의 이 글에도 설명되어 있습니다.

function my_login_logo_url() {
return get_bloginfo( 'url' );
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

위의 코드를 함수 파일(functions.php)에 추가하면 로고를 클릭하면 자신의 홈페이지로 이동합니다.

로그인 오류 메시지 표시되지 않도록 하기

로그인 오류 시 "유효하지 않은 사용자 이름" 또는 "사용자이름이나 이메일 주소가 올바르지 않습니다." 같은 오류 메시지가 표시됩니다.  이 오류 메시지는 매우 유용하지만 해커에 의해 악용될 수 잇다고 하네요. 이런 점이 우려가 되면 로그인 에러(오류) 메시지가 표시되지 않도록 다음 코드를 사용할 수 있습니다.

function login_error_override()
{
return 'Incorrect login details.';
}
add_filter('login_errors', 'login_error_override');

마치며

위에 설명한 방법에 따라 코드를 테마 함수 파일에 추가하고 수정하는 작업이 쉽지 않은 경우 적당한 플러그인을 사용하실 수 있습니다. 다양한 플러그인을 테스트하여 마음에 드는 것을 사용하시기 바랍니다. 유료 플러그인으로는 UserPro, UPME(User Profiles Made Easy) 등 여러 가지가 있습니다.

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

16개 댓글

  1. 수고하십니다.
    eduma 테마를 작업중입니다.테마를 만든회사에 문의해도 정확한 답변이 없어서 문의드립니다.
    윗젯 팝업 로그인페이지에 회원가입(Register now) url을 변경하고싶은데 팝업 어디를 수정해야되는지 한달째 고민중입니다.(자체 윗젯에는 url 페이지변경 기능이 없습니다)
    변경url-->http://angol6.cafe24.com/account-2/
    login-popup.php 여기서 수정이 가능한지 문의드립니다.-------------->
    <code>
    array( 'thim_widget_group' ),
    'panels_icon' => 'thim-widget-icon thim-widget-icon-login-popup'
    ),
    array(),
    array(
    'text_register' => array(
    'type' => 'text',
    'label' => esc_html__( 'Register Label', 'eduma' ),
    'default' => 'Register',
    ),
    'text_login' => array(
    'type' => 'text',
    'label' => esc_html__( 'Login Label', 'eduma' ),
    'default' => 'Login',
    ),
    'text_logout' => array(
    'type' => 'text',
    'label' => esc_html__( 'Logout Label', 'eduma' ),
    'default' => 'Logout',
    ),
    'text_profile' => array(
    'type' => 'text',
    'label' => esc_html__( 'Profile Label', 'eduma' ),
    'default' => 'Profile',
    ),
    'layout' => array(
    'type' => 'select',
    'label' => esc_html__( 'Layout', 'eduma' ),
    'default' => 'base',
    'options' => array(
    'base' => esc_html__( 'Default', 'eduma' ),
    'icon' => esc_html__( 'Icon', 'eduma' ),
    ),
    ),
    'captcha' => array(
    'type' => 'checkbox',
    'label' => esc_html__( 'Use captcha?', 'eduma' ),
    'description' => esc_html__( 'Use captcha in register and login form.', 'eduma' ),
    'default' => false
    ),
    'term' => array(
    'type' => 'text',
    'label' => esc_html__( 'Terms of Service link', 'eduma' ),
    'description' => esc_html__( 'Leave empty to disable this field.', 'eduma' ),
    'default' => '',
    ),
    'shortcode' => array(
    'type' => 'text',
    'label' => esc_html__( 'Shortcode', 'eduma' ),
    'description' => esc_html__( 'Enter shortcode to show in form Login.', 'eduma' ),
    'default' => '',
    )

    )
    );
    }

    /**
    * Initialize the CTA widget
    */
    function get_template_name( $instance ) {
    $this->ins = $instance;
    add_action( 'wp_footer', array( $this, 'thim_display_login_popup_form' ), 5 );

    return 'base';
    }

    function get_style_name( $instance ) {
    return false;
    }

    function thim_display_login_popup_form() {
    global $wp;
    $instance = $this->ins;

    if ( ! is_user_logged_in() ) {
    $registration_enabled = get_option( 'users_can_register' );
    ?>

    <div
    class="thim-login-container">

    <form name="loginpopopform"
    action=""
    method="post">

    <input type="text" name="log"
    placeholder=""
    class="input required" value="" size="20"/>

    <input type="password" name="pwd"
    placeholder=""
    class="input required" value="" size="20"/>

    <input type="text" data-captcha1=""
    data-captcha2=""
    placeholder=""
    class="captcha-result required"
    name="thim-eduma-recaptcha-rs"/>
    <input name="thim-eduma-recaptcha[]" type="hidden"
    value=""/>
    <input name="thim-eduma-recaptcha[]" type="hidden"
    value=""/>

    <?php echo '<a href="' . thim_get_lost_password_url() . '" title="' . esc_attr__( 'Lost Password', 'eduma' ) . '" rel="nofollow ugc">' . esc_html__( 'Lost your password?', 'eduma' ) . '</a>'; ?>

    <input type="submit" name="wp-submit"
    class="button button-primary button-large"
    value=""/>
    <input type="hidden" name="redirect_to"
    value=""/>

    <input type="hidden" name="nonce"
    value=""/>

    <?php

    if ( $registration_enabled ) {
    echo '' . esc_html__( 'Not a member yet? ', 'eduma' ) . ' <a href="' . esc_url( thim_get_register_url() ) . '" rel="nofollow ugc">' . esc_html__( 'Register now', 'eduma' ) . '</a>';
    }
    ?>

    <form class="" name="registerformpopup"
    action=""
    method="post" novalidate="novalidate">

    <input placeholder=""
    type="text" name="user_login" class="input required"/>

    <input placeholder=""
    type="email" name="user_email" class="input required"/>

    <input placeholder=""
    type="password" name="password" class="input required"/>

    <input
    placeholder=""
    type="password" name="repeat_password" class="input required"/>

    <input type="text"
    data-captcha1=""
    data-captcha2=""
    placeholder=""
    class="captcha-result required"/>

    <?php printf( __( 'I accept the <a href="%s" rel="nofollow ugc">Terms of Service</a>', 'eduma' ), esc_url( $instance['term'] ) ); ?>

    <input type="submit" name="wp-submit"
    class="button button-primary button-large"
    value=""/>

    <input type="hidden" name="redirect_to"
    value=""/>
    <!---->

    <?php echo '' . esc_html_x( 'Are you a member? ', 'Login popup form', 'eduma' ) . ' <a href="' . esc_url( thim_get_login_page_url() ) . '" rel="nofollow ugc">' . esc_html_x( 'Login now', 'Login popup form', 'eduma' ) . '</a>'; ?>

    <i></i>

    <i></i><i></i><i></i><i></i>

    <?php
    }
    }
    }
    }

    function thim_login_popup_widget() {
    register_widget( 'Thim_Login_Popup_Widget' );

    }

    add_action( 'widgets_init', 'thim_login_popup_widget' );</code>

    1. 안녕하세요?

      Eduma 테마를 설치하여 조금 살펴보니 다음 파일을 수정해야 할 것 같습니다: eduma/wp-content/themes/eduma/inc/widgets/login-popup/tpl/base.php.

      다음 라인을 적절히 수정하면 잘 작동하는지 테스트해보시기 바랍니다.

      <code> if ( $registration_enabled && 'base' == $layout ) {
      if ( $register_text ) {
      echo '<a class="register js-show-popup" href="' . esc_url( thim_get_register_url() ) . '" rel="nofollow ugc">' . ( $register_text ) . '</a>';
      }
      }

      if ( $login_text ) {
      echo '<a class="login js-show-popup" href="' . esc_url( thim_get_login_page_url() ) . '" rel="nofollow ugc">' . ( $login_text ) . '</a>';
      }</code>

      1. 답변감사합니다. 그런데 형식이 이런게 맞나요? 오류가 나네요.
        else {
        if ( $registration_enabled && 'base' == $layout ) {
        if ( $register_text ) {
        echo '<a href="http://angol6.cafe24.com/account-2/" rel="nofollow ugc">' . ( $register_text ) . '</a>';
        }
        }

        if ( $login_text ) {
        echo '<a href="' . esc_url( thim_get_login_page_url() ) . '" rel="nofollow ugc">' . ( $login_text ) . '</a>';
        }
        }
        // End login popup link output
        ?>

      2. 어디에 주소를 넣어야될지 자꾸 오류가 나네요.

        174번째 줄인데...url 넣는곳을 모르겠네요.
        /*<a href="http://angol6.cafe24.com/account-2/' . esc_url( thim_get_register_url() ) . '" rel="nofollow ugc">' . esc_html__( 'Register now', 'eduma' ) . '</a>/
        여기서 안보이시면 죄송한데 이메일로 174번줄 url수정하신거 캡쳐파일로 보내주시면 고맙겠습니다.

      3. 말씀드렸듯이 URL을 교체해도 원하는 대로 작동하지 않습니다.

        <a href="http://angol6.cafe24.com/account-2/" rel="nofollow ugc">'

      4. 구글 코리아주소 댓글 확인못했습니다.
        편집이 쉽지않네요.
        그럼 아래 Not a member yet? Register now 이내용을 안보이게 할수는 없을까요?

    2. 늦은밤 도움주셔서 너무 감사드립니다.
      css 적용하니 아래 문구가 안보입니다.
      도움주셔서 조금이나마 후원했습니다.
      마지막으로 하나만 더 여쭤도 되겠습니까?
      모바일 페이지에서 url접속후 주소창이 사라지게 (올라가게) 하는 방법좀 문의드릴께요.

  2. 질문이 있습니다.
    컴퓨터는 잘 모릅니다만, 인터넷신문을 운영중인데요.
    러시아(우크라이나)로 추정되는 자들의 들어와서 불경스러운 문장을 넣고 가는 경욱 하루에 5~6차례가 있어 괴롭습니다.
    또한 댓글을 끊임없이 영어로 쓸데 없는 내용과 수량으로 붙여놔 댓글을 아예 막아놓았습니다.
    혹시, 전문가 선생님이나 선배님들이 계시면 도움을 주시기 바랍니다.
    고맙습니다.
    == Personal information deleted == 뉴스아이신문 드림

댓글 남기기

* 이메일 주소는 공개되지 않습니다.