플러그인을 사용하지 않고 워드프레스 기본 로그인 폼/등록 폼을 멋지게 바꾸는 방법

12

워드프레스의 기본 로그인 폼과 등록 폼을 플러그인을 사용하지 않고 다음과 같이 바꿀 수 있습니다.

수정된 워드프레스 로그인 양식
수정된 워드프레스 로그인 양식

 

그리고 이것은 수정된 등록 양식입니다.

수정된 워드프레스 등록 양식
수정된 워드프레스 등록 양식

워드프레스 로그인/등록 양식을 변경하는 과정은 앞에서 살펴본 "워드프레스 로그인 페이지에서 WordPress 로고 없애기"의 연장선상에 있습니다. 테마의 functions.php 파일에 다음 구문을 추가합니다.

function my_login_logo() { ?>
 <style type="text/css">
 body.login div#login h1 a {
 background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/site-login-logo.png);
 padding-bottom: 30px;
 }
 // 사용자 코드 추가하기
 </style>
 <?php }
 add_action( 'login_enqueue_scripts', 'my_login_logo' );

* 참고: 위의 코드에서 따옴표는 우리나라에서 사용하는 구부러진 모양의 따옴표가 아니라 모두 직선 모양의 따옴표(큰 따옴표, 작은 따옴표 모두)가 되어야 합니다.

위에서 사용자 코드 추가하기 부분에 원하는 CSS 코드를 추가하시면 워드프레스의 기본 로그인 폼과 등록 폼을 변경을 수 있습니다. CSS 코드는 이 페이지에 나와있는 로그인 양식을 응용하시면 쉽게 적용이 가능합니다.

또한, User Registration Aide 플러그인을 사용하면 아래와 같이 원하는 필드를 추가할 수 있습니다. 아래에는 카톡 ID를 넣을 수 있는 필드를 추가한 샘플입니다.
Final customized wp registration form Korean

이상으로 플러그인을 사용하지 않고 간단히 로그인 양식과 등록 양식을 수정하는 방법을 살펴보았습니다. 이 방법을 사용하여 나만의 워드프레스 로그인/등록 폼을 만들어보세요.

보다 세련된 로그인/회원 가입 폼을 원하는 경우 무료 혹은 유료 플러그인을 사용할 수 있습니다. Modal Login Register Forgotten WordPress Plugin은 모달 형식으로 로그인/회원등록/비밀번호 분실 양식을 표시해주는 플러그인입니다. 프로필 기능을 포함한 보다 종합적인 회원 관리 기능을 원하는 경우 UserPro, User Profiles Made Easy(UPME) 등과 같은 플러그인도 있습니다.

UserPro Login

참고:

12 개 댓글

  1. 테마의 functions.php에 my_login_logo 가 없습니다.

    이런 경우는 어떻게 찾아야 할까요?

    제가 사용 하는 테마는 vantage 1.5 입니다.

    • my_login_logo()는 그냥 사용자 함수 이름입니다. 직접 만들어주시면 됩니다. 반드시 자식 테마(차일드 테마)를 만들어서 진행하시기 바랍니다. 그렇지 않으면 나중에 테마가 업데이트되면 수정 사항이 모두 사라집니다.

  2. 로그인 창이 전면페이지 보다 앞서서 나타나게하는 방법이 없을까요?  팝업으로 되면 좋구요.

    • 안녕하세요? 팝업으로 로그인 창이 뜨는 형식을 원하시면 Modal Login으로 플러그인을 검색하여 적당한 플러그인을 사용해보시기 바랍니다.

  3. 검색해서 했습니다. 답변 감사합니다.
    p.message.register {
    display: none;
    }
    이 형태로 하니깐 되네요.

    그런데 이 블로그에 등록하기 부분만 없애고 싶은데 요소명이 같아 한꺼번에 없어지네요. 위에만 제거하려면 글을 지워야하는 거 같은데 방법을 알고 싶습니다.

    http://ohssac.dothome.co.kr/wp-login.php?action=register

    바쁘신데 지속적인 답변 감사합니다.

    • 안녕하세요?
      다음 코드를 한번 사용해보시겠어요?

      body.login.login-action-register.wp-core-ui.locale-ko-kr > #login > h1:first-child + p {
      display: none;
      }

      nth-child를 사용하면 쉽지만 인터넷 익스플로러 하위 버전에서 제대로 작동하지 않을 수 있어서 위와 같이 작성해봤습니다.

  4. 이 블로그에 등록하기는 어떻게 삭제하나요? 경로 찾아서 wp-login에서 수정하려는데 해당 소스가 안보이네요;;;

    • 안녕하세요?

      질문이 무엇인지 이해하는데 약간 시간이 걸렸네요.... "이 블로그에 등록하기"를 없애려면 CSS를 통해 가능합니다. CSS 코드를 위의 글에 나와있는 함수에서 "// 사용자 코드 추가하기" 부분에 추가하시면 됩니다. 요소 검사를 하여 "이 블로그에 등록하기" 부분의 요소를 찾아내어 "display: none" 속성을 주면 되겠습니다.

      • 문의가 좀 부정확 했네요;;;ㅎㅎ

        {display: none; 이 블로그에 등록하기;
        } //회원가입 페이지 문구 제거

        이렇게 삽입을 했는데 안되네요.. 잘못 입력을 한걸까요?

      • 안녕하세요?

        먼저 CSS의 기본 문법을 공부해보시기 바랍니다. 시중에 괜찮은 CSS 관련 책을 한 권 사셔서 기본적인 부분을 숙지하신 후에(전부 볼 필요는 없고 기본적인 부분만 보고, 외울 필요도 없습니다. 이해하고 넘어가시고 응용할 수 있으면 됩니다) 한 번 해보시기 바랍니다.

      • 넵~ 조언 감사합니다. 그런데 사이트 완성이 좀 급해서 이렇게 문의를 하게 되네요.

        {display: none; 이 블로그에 등록하기;
        } //회원가입 페이지 문구 제거

        이렇게 입력을 했는데 위 댓글에 잘못 달았네요;;; 해당 문법 삽입 부분은 찾아보고 있습니다.

      • 위의 css 코드는 잘못되었습니다.

        요소명 {
        display:none;
        }

        형태가 되어야 합니다.

        사이트 주소를 알려주시겠어요? 제가 확인하여 CSS 코드를 알려드리겠습니다.

댓글 남기기

댓글을 입력해주세요!
이름을 입력해주세요