워드프레스 로그인 화면 로고 변경 하기

워드프레스 로그인 화면

워드프레스를 정상적으로 설치 했다면, 이제 내 사이트의 URL에 /wp-admin 또는 /wp-login.php 를 추가하여 나의 Wordpress 사이트에 로그인 할 수 있습니다.Wordrpess 로그인 페이지는 웹사이트에 로그인 하기 위해 먼저 열어야 하는 매우 중요한 페이지 중 하나 입니다. 기본적으로 로그인 페이지에 Wordpress 로고가 표시 되도록 되어 있습니다.

오늘은 로그인 페이지에서 기본 Wordrpess 기본 Wordpress 로고를 변경하는 방법을 설명해 드리려고 합니다. 코드수정 (functions.php 와 Css)그리고 플러그인을 이용해서 수정할 수 있는 방법 입니다.

 

Wordpress 로고를 변경하는 이유는 무엇 일까요?

이전에는 워드프레스를 설치하게 되면 Wordpress.org 공식 사이트의 검은색 Wordpress로고가 기본적으로 나오게 되어있었습니다. 그러나 지금은 이후 워드프레스 버전에서 Wordpress.com에서 사용하는 파란색 로고가 사용되도록 변경 되었습니다. 자신이 운영하는 사이트를 확인 하기 위해 또는 사용자의 구독을 허용하거나 제품을 판매하고 포럼을 운영하는 경우 모든 사용자가 사이트에 로그인 할 때 Wordrpess 로고를 보게 됩니다. 이것은 내가 만들어 가는 브랜드에 좋은 방법이 아닙니다.

 

사이트가 전문적이고 특정 브랜드의 역량을 강화하려면 자신의 로고를 제공하는 것이 좋습니다. 예를 들어 기본적으로 제공하는 하단에 wordrpess링크와 powered by wordpress를 자신의 브랜드 네임으로 변경하는 것과 마찬가지 입니다.

 

워드프레스 로고를 변경하는 방법.

1. 테마의 Functions.php를 이용하여 수정하기

 

먼저 Functions.php를 이용하여 수정하는 방법을 적는 이유는 이전 포스트에 말씀드렸듯이 플러그인을 많이 사용하는 방법은 좋은 방법이 아닙니다. 하지만 자신의 취향에 맞는 방법으로 수정하시는 것을 추천 드립니다.

 

워드프레스 공식 사이트의 Codex에서 설명하고 있는 방법 입니다. 저의 경우는 이 방법을 주로 사용합니다.

이 방법을 사용하실때는 꼭 차일드테마를 만들어서 사용하시는 것이 좋습니다.

 

function login_logo() { ?>
    <style type="text/css">
        #login h1 a, .login h1 a {
            background-image: url(<?php echo get_stylesheet_directory_uri(); ?>/images/your_new_logo.png);
}
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'login_logo' );

사용하고 있는, 활성화 된 테마의 디렉토리 아래에 이미지 디렉토리에 변경할 이미지를 업로드 합니다.

/theme/images 아래에 위의 코드에서 your_new_logo.png를 업로드 합니다.

 

사용중인 테마에 위 코드를 추가 한 후 저장 하세요.

 

이 내용은 기본 테마에 적용하는 방법 입니다. 사용하는 테마에 따라 경로가 다르거나 기능이 다를 수 있습니다.  위에서 설명 드린 대로 Child Theme(자식테마) 를 만들어서 사용하셔 CSS/PHP가 업데이트 되어도 테마의 업데이트에 문제가 없습니다. 유료 테마의 경우 Child Theme(자식테마)를 제공해 주기도 하지만,

Child Theme(자식테마)를 직접 생성하셔야 하는 경우도 있습니다.

 

2. 이미지를 변경하여 수정하기

이미지의 이름과 경로를 알아야 이미지를 변경하고 교체할 수 있습니다. 크롬 사용을 기준으로 설명 드리겠습니다.

워드프레스 로고에 우클릭으로 메뉴를 펼쳐서 검사를 선택해 주세요

 

 

이제 FTP를 이용해서 로그인 후 /wp-admin/images/ 경로에 만들어 놓은 로고의 이름을 w-logo-blue.png 변경한 후에 덮어 씌워 주기만 하면 됩니다. 로고의 크기가 다른 경우 CSS를 이용해서 조정해 주어야 합니다.

기본적인 워드프레스 로고의 크기는 80*80 이니 참고하세요

 

 

3. CSS를 이용하여 워드프레스 로고를 수정하기

CSS를 이용하여 워드프레스 로고를 수정하려면 먼저 만들어 놓은 로고를 업로드 해야 합니다.

관리자 > 미디어 > 새로 추가

 

 

 

이미지를 업로드 하고 업로드 한 이미지의 경로를 복사해야 합니다.

업로드 한 이미지를 클릭하면 이미지에 대한 정보와 이미지의 경로가 표시 됩니다. 오른쪽 중간 쯤에 보이는 copy url을 클릭해서 이미지의 경로를 복사해 줍니다.

 

이제 FTP로 접속 후  /wp-admin/css/ 의 경로로 이동 후 login.css 를 다운로드 받아서 수정하거나 notepad++ 등을 이용해서 직접 수정해 주시면 됩니다.

 

.login h1 a 를 검색해서 찾았습니다. 이제 아까 복사해 둔 이미지의 경로를 지금의 이미지 경로와 교체 해 주시면 됩니다.

 

.login h1 a {
	background-image: url(../images/w-logo-blue.png?ver=20131202);
	background-image: none, url(../images/wordpress-logo.svg?ver=20131107);
	background-size: 84px;
	background-position: center top;
	background-repeat: no-repeat;
	color: #444;
	height: 84px;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0 auto 25px;
	padding: 0;
	text-decoration: none;
	width: 84px;
	text-indent: -9999px;
	outline: none;
	overflow: hidden;
	display: block;
}

위 CSS에서 

 

background-image: url(../images/w-logo-blue.png?ver=20131202);
background-image: none, url(../images/wordpress-logo.svg?ver=20131107);

 

w-logo.blue.png 부분을 아까 복사 한 이미지 경로로 교체 해 주면 됩니다.

 

background-image: url( 복사 해 놓은 새로운 로고의 이미지 주소);
background-image: none, url( 복사 해 놓은 새로운 로고의 이미지 주소 );

저장하고 업로드 해 줍니다.

 

같은 경로에서 login.min.css 파일에서도 동일하게 수정 해 주어야 합니다.

 

4. 플러그인으로 변경하기

플러그인으로 워드프레스 로고를 변경하는 방법을 마지막으로 적는 이유는 플러그인을 사용하는 방법을 개인적으로는 추천드리지 않지만, 위 방법들에 비해 간단하고 빠르게 워드프레스 로고를 변경할 수 있기 때문 입니다.

 

가장 많이 사용되고 있는 플러그인으로 두가지 정도가 가장 적당할 것 같습니다.

 

wordpress.org/plugins/login-logo/

Login Logo

wordpress.org/plugins/loginpress/

Custom Login Page Customizer | LoginPress