워드프레스 로그인 페이지에서 WordPress 로고 없애기

워드프레스에서 기본적으로 제공하는 로그인 페이지 화면에는 다음과 같이 WordPress 로고가 있습니다.

wp_login_basic

그러면 위의 로고를 변경하거나 없앨 수 있을까요? 요소 검사를 통해 테스트해보면 로고가 없어집니다.

wp_login_basic_element_inspector

하지만 실제로 CSS 코드를 적용해보면 반영되지 않고 로고가 그대로 있습니다. 그렇다면 어떻게 하면 이 로고를 없앨 수 있을까요? 다음과 같은 방법을 통해 로고를 회사 로고로 변경이 가능합니다.

  1. 회사 로고 파일을 png 형식으로 만들고 site-login-logo.png로 이름으로 변경합니다.
  2. 이 파일을 …/images/ 폴더 아래에 복사합니다.
  3. 다음 함수를 추가합니다.
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' );

이제 로고가 회사 로고로 바뀝니다.
로고를 없애는 방법도 이제 아시겠죠? display:none;을 추가하면 됩니다.
그러면 로그인 페이지뿐만 아니라 등록 페이지 등에서도 로고가 바뀝니다.

  •  추가 1: 위의 코드를 복사했는데 잘 안 될 수 있습니다. 그런 경우 따옴표(큰 따옴표, 작은 따옴표)가 우리나라에서 사용하는 따옴표(curly quote mark)가 아닌 곧은 모양의 따옴표(straight quote mark)로 모두 바꾸어야 합니다. 위에서는 왜 그런지 모르겠지만 구부러진 따옴표 모양이네요. 수정했습니다.
  • 추가 2: images 폴더는 테마 폴더 아래에 만들어야 합니다.

관련 글: WordPress 기본 로그인 폼/등록 폼 수정하기


13개 댓글

  1. 안녕하세요.

    해당 포스트 내용을 참고하여 워드프레스 로고를 회사 로고로 바꾸는 것에 성공했습니다.
    감사합니다.
    그런데 두가지 문제가 생겼습니다.
    첫번째는 회사 로고 클릭 시 wordpress.org 링크로 연결되게 됩니다.
    두번째는 기존 워드프레스 로고가 차지하고 있던 공간이 그대로 남아있습니다.
    시간이 되신다면 한번 체크해주시면 감사하겠습니다.
    1. 안녕하세요

      로고 아래의 여백은 CSS로 조정해야 합니다.
      해보시고 잘 안 되시면 알려주시면 내일 한 번 봐드리겠습니다.

      로그인 페이지에서 로고의 URL 주소를 변경하는 방법은 https://www.thewordcracker.com/intermediate/change-wordpress-logo-url-in-login-page/ 글을 참고해보세요. 한 번 시도해보시고 잘 되는지 알려주시겠어요?

      그리고 이 페이지에서 이 블로그를 후원할 수 있습니다.

      그럼, 즐거운 하루 되시기 바랍니다.

      1. 빠른 답변 감사드립니다.

        첫뻔째 문제, 로고 클릭 시 회사 사이트로 링크 연결은 알려주신 포스트를 보고 수정했습니다.
        그런데 회사 로고에 마우스 호버시 powered by wordpress.org 문구가 아직 남아 있습니다.
        두번째 문제, 로고 아래의 여백의 문제가 아니라 기존 워드프레스의 로고가 차지하고 있던 공간이 그대로 남아 있습니다
        제 로고가 기존 워드프레스 로고보다 작아서 더 차이가 크게 보이는것 같습니다.
        감사합니다.
      2. 안녕하세요? 여백 문제는 말씀드렸듯이 CSS를 알면 해결할 수 있는 부분입니다. powred by wordpress.org도 함수를 통해 해결 가능할 것 같습니다. 원하시면 "서비스 문의" 페이지를 통해 문의사항을 제출해주시면 시간이 될 때 한 번 봐드리겠습니다.

        잘 안 되시면 Custom Login Plugin(https://wordpress.org/plugins/admin-custom-login/)이나 Custom Login Page Styler - Admin login page(https://wordpress.org/plugins/login-page-styler/) 같은 플러그인을 설치해보시기 바랍니다.

  2. 기본 로그인 폼의 로고를 없애기 위해 해당 파일 명으로 wp-admin/images/ 경로에 이미지 파일은 물론 function.php 마지막에 코드를 넣었는데 워드프레스 로고가 바뀌지 않네요. 워드프레스 로고 파일을 삭제도 해야하는지요?
    그리고 트랙백에 있는 방법도 활용하고자 넣었는데 적용이 안되네요. 행여 방법이 틀렸을 수도 있으니 좀 더 상세히 알려주셨으면 합니다....!

    1. 안녕하세요?

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

      왜 그런지는 모르겠지만 따옴표 모양이 우리나라에서 사용되는 구부러진 모양이로 되어 있네요. 수정했습니다. 따옴표 모양을 외국에서 사용하는 모양(straight quotes)이어야 하는데요, 그런 모양으로 바꾸어야 합니다.
      (글도 수정했습니다.)

      그리고 images 폴더는 테마 폴더 아래에 만드시기 바랍니다.

      해 보시고 잘 되는지 여부를 알려주세요.

      1. 빠른 답변 감사합니다. 우선 로고는 사라졌습니다. 그런데 제 로고가 등록은 안되네요.
        설명대로 theme 폴더 내에 images 폴더를 생성하여 넣었습니다.. 다른 폴더 적용이나 url 경로가 잘못되었는지도 봤는데 제대로 된 것 같거든요.. 확인 부탁드립니다.

      2. 안녕하세요? 저는 테스트해보니 잘 되네요.

        잘 안 되는 이유는 모르겠습니다. 위의 방법을 여러 사이트에 적용했는데, 문제가 없었거든요. 혹시 child theme을 사용한다면 child theme 폴더 아래에 images 폴더를 만들어 보시기 바랍니다.

        그리고 혹시나 해서 get_stylesheet_directory_uri()이 어떤 경로를 출력하는지를 테스트했는데, 정확히 테마 폴더를 출력합니다.

      3. 예를 들어, 테스트로 다음과 같은 코드를 index.php나 다른 php 파일의 적당한 곳에 추가하여 어떤 경로를 출력하는지를 확인하실 수 있습니다.

      4. 테마 내 이미지 폴더에 해당 파일을 삽입하니 나오네요. 감사합니다. ^^
        추후 회원가입 페이지 생성이나 조정 법도 이렇게 훌륭히 정보 주셨으면합니다~ 다시한 번 감사드려요 ㅋ

      5. 잘 해결되었다니 다행이네요. 위의 방법을 사용하면 회원 가입(등록) 페이지도 마찬가지로 적용됩니다. 회원 로그인/가입 폼을 더욱 정밀하게 조정하려면 https://www.thewordcracker.com/intermediate/how-to-customize-the-default-wordpress-login-and-registration-form-without-a-plugin/ 글을 참고하시기 바랍니다. "중급"으로 설정되어 있듯이 php와 css에 대한 약간의 지식이 있어야 어느 정도 이해가 되실 것입니다.

댓글 남기기

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