워드프레스 회원가입 폼/로그인 폼에서 '사용자명 또는 이메일 주소' 라벨을 '아이디'로 바꾸기

보통 웹사이트에 가입할 때 "아이디"라는 필드 이름을 많이 사용하지만 워드프레스에서는 "사용자명"을 사용합니다. 워드프레스 회원가입 폼과 로그인 폼에서 "사용자명 또는 이메일 주소"를 "아이디" 또는 "ID"로 바꾸려면 몇 가지 방법을 생각해볼 수 있습니다.

Poedit나 Loco Translate를 사용하여 '사용자명'을 '아이디' 또는 'ID'로 변경)

PC용 프로그램인 Poedit나 워드프레스 번역 플러그인인 Loco Translate를 사용하여 워드프레스 한글 번역을 수정할 수 있습니다.

Loco Translate를 설치한 경우 워드프레스 관리자 페이지 > Loco Translate > WordPress를 클릭합니다.

워드프레스 한글 번역 수정 - '사용자명'을 '아이디'로 변경하기

Edit을 클릭하여 한국어 언어 파일을 수정하는 화면으로 이동합니다.

번역할 문구를 찾아서 수정한 다음 저장하도록 합니다.

워드프레스 한글 언어 파일 수정

워드프레스가 업데이트되면 여기에서 수정한 내용이 업데이트된 언어 파일로 대체됩니다. Loco Translate 플러그인 사용 방법은 다음 글을 참고하시기 바랍니다.

후크 사용하여 '사용자명' 번역 변경하기

다른 방법으로 워드프레스 후크(hook)를 사용할 수 있습니다. 다음 코드를 테마의 함수 파일에 추가합니다.

// 워드프레스 '사용자명' 라벨을 '아이디'로 변경하기
// Change "Username" to "ID" in WordPress login / Register page
function login_function() {
add_filter( 'gettext', 'username_change', 20, 3 );
function username_change( $translated_text, $text, $domain )
{
if ($text === 'Username' || $text === 'Username or Email Address')
{
$translated_text = '아이디'; // You can replace "아이디" with "ID" or something else.
}
return $translated_text;
}
}
add_action( 'login_head', 'login_function' );

반드시 차일드 테마를 만들어 작업하시기 바랍니다. 그렇지 않으면 테마가 업데이트될 경우에 변경 사항이 사라집니다.

로그인 페이지를 확인해보면 "사용자 이름" 혹은 "사용자 이름 또는 이메일 주소"가 "아이디"로 변경된 것을 확인할 수 있습니다.

워드프레스 로그인 페이지 사용자 이름 라벨 변경

참고로 gettext에 대한 자세한 내용은 워드프레스 공식 문서를 참고해보시기 바랍니다.

로그인 페이지 커스텀 플러그인

로그인 페이지를 입맛대로 꾸미고 싶은 경우 직접 커스텀을 하거나 다음 글에서 소개하는 로그인 페이지 커스텀 플러그인을 사용할 수 있습니다.

회원 가입 플러그인 사용하기

Ultimate Member나 WP-Members 같은 플러그인을 사용할 수 있습니다. 이러한 플러그인을 사용하면 회원제 사이트를 운영할 수 있습니다. 하지만 플러그인이 무겁기 때문에 회원제 사이트를 운영할 필요가 없는 경우 위에서 제시한 코드를 응용하는 것이 더 바람직한 것 같습니다.

우커머스 쇼핑몰을 운영하는 경우 우커머스 전용 멤버십(회원제) 플러그인을 사용하면 편리할 것입니다.

참고:

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

10개 댓글

  1. 안녕하세요. unity라는 영문 테마를 사용중인데
    회원가입 페이지와 로그인 페이지를 한글로 바꾸고 싶어서
    글을 보고 Loco Translate 플러그인을 설치 후 번역하기 눌렀는데
    먼저 자동번역은 되지 않더라구요. 초록 눈금이 나타나지 않았고 0%로
    몇가지 직접 검색을 했는데 일부는 검색이 되지 않아서(예:Username or email) 되는 것만 (예: password -> 비밀번호) 이런식으로 바꾸었는데 적용이 되지 않더라구요. 뭐가 문제인걸까요?

    1. 안녕하세요, 호빵님. 시간이 될 때 확인해보고 본문의 방법이 작동하지 않는 경우 새로운 방법이 있다면 글 내용을 업데이트하도록 하겠습니다.

  2. 안녕하세요.

    우선 좋은 정보 감사드립니다.

    다만 저는 'Kleo'라는 테마를 사용중인데,

    로그인 화면에서는 '사용자이나 이메일주소' -> '아이디사용자명이나 이메일주소'로 바뀌는데 어디서 잘못 했을까요? https://uploads.disquscdn.com/images/97163ce2b90d96d87a3d51ba471d87073ec25fae45d9d6adec6ee56698e26aca.jpg

    그리고 회원가입을 할때 '사용자명(필수)' 로 나와서 가입자들이 '이름'을 입력하다보니 가입에 불편함이 생겨서 '아이디 (영문, 숫자)' 이런 것으로 변경하고 싶은데 방법이 있을까요...?

    1. 안녕하세요?

      블로그를 방문해주셔서 감사합니다.

      Loco Translate 플러그인을 사용하여 해당 문자열을 찾아서 번역을 변경해보시기 바랍니다. Loco Translate를 플러그인 추가하기에서 찾아서 설치하신 후에, 워드프레스 한글 파일이나, 테마 파일 등에서 사용자명(필수) 등을 찾아서 수정하시면 될 듯 합니다.

      아래 글을 참고해보세요.

      https://avada.co.kr/wordpress/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%85%8C%EB%A7%88%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EB%AC%B8%EC%9E%90%EC%97%B4ui-%EB%B2%88%EC%97%AD%ED%95%98%EA%B8%B0/

  3. 좋은 정보 감사드립니다.  

    그럼  register 창에서 사용자명을 '이메일입력'  으로  이메일을 '이메일 재입력'을 바꾸려면 어디를 수정해야하는지요?

    1. 안녕하세요?

      <style type="text/css">
      // CSS 코드
      </style>

      <style>... </style> 사이에 원하는 CSS 코드를 추가하면 될 것입니다.

      참고로 위의 예는 텍스트를 원하는대로 바꾸는 예제입니다. 실제로 필드를 바꾸지는 않습니다.  CSS를 조금 아시면 쉽게 가능하실 것입니다.

      그리고 CSS를 사용하여 텍스틀 바꾸는 또 다른 방법을 https://www.thewordcracker.com/miscellaneous/replace-text-with-css/ 글에서 확인할 수 있습니다.

      하지만 위의 방법보다는 WP-Members와 같은 플러그인을 사용하면 쉽게 이메일 확인 필드를 추가할 수 있습니다.

    1. ㅎㅎ 잘 된다니 다행이네요. (간혹 테마에 따라 결과가 다를 수 있거든요.) 즐거운 주말 보내시기 바랍니다.

  4. "이 블로그에 등록하기” 문구도 변경하려면 위의 코드를 다음과 같이 바꾸어보시기 바랍니다.

    function my_login_logo() { ?>
    <style type="text/css">
    label[for="user_login"] {
    font-size: 0px;
    }
    label[for="user_login"]::before {
    content: "아이디"!important;
    font-size: 14px;
    }
    p.message.register {
        font-size: 0;
    }
    p.message.register::before {
        content: "사이트 등록하기";
        font-size: 14px;
    }
    </style>
    <?php }
    add_action( 'login_enqueue_scripts', 'my_login_logo' );

댓글 남기기

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