맞춤형 WordPress 로그인 페이지를 만드는 방법

로그인 페이지가 모든 WordPress 사이트에서 가장 중요한 페이지라고 주장할 수 있습니다. 로그인 기능이 없으면 블로그 소유자가 다른 방법으로 훌륭한 콘텐츠를 게시할 수 있습니까? 콘텐츠 생성 외에도 다양한 WordPress 구성 옵션을 사용할 수 있습니다.

기본 로그인 페이지는 매우 간단하며 목적에 매우 적합합니다. 사용자가 WordPress 자격 증명을 입력하는 데 필요한 필드가 있으며 페이지는 등록된 사용자만 로그인할 수 있도록 관리 화면에 대한 액세스를 제어합니다.

디자이너로서 당신은 아마도 완벽한 웹사이트 디자인을 만드는 데 많은 시간을 할애했을 것입니다. 모든 사용자가 로그인 페이지와 상호 작용하지 않더라도 전체 사용자 경험을 통해 해당 디자인을 수행하는 것이 중요합니다. 이것은 추가 세부 정보를 추가할 수 있는 또 다른 기회이며 사이트에 정기적으로 로그인하는 사용자에게 긍정적인 인상을 남길 것입니다. (게다가 페이지를 덜 명확하게 URL로 이동하는 것이 WordPress 보안 모범 사례로 간주됩니다!) 일반적으로 WordPress 테마 설정의 일부는 아니지만 WordPress 로그인 페이지를 사용자 정의하는 것은 매우 간단합니다.

WordPress 로그인 페이지에 액세스하는 방법

귀하의 사이트 책임이 포함되어 있더라도 이 페이지에 액세스하는 데 매우 익숙할 것입니다. 그러나 시간이 지난 경우를 대비하여 일반적으로 웹 사이트의 루트 디렉토리에서 찾을 수 있습니다. 로그인 페이지는 일반적으로 www.mysite.com/wp-login.php 와 같습니다. 보시다시피 아직 스타일이 지정되지 않았습니다.

경우에 따라 자체 하위 디렉토리에 WordPress 설치가 있을 수 있습니다. 그러면 www.mysite.com/directory-name/wp-login.php 와 같을 것입니다.

WordPress 로그인 페이지를 사용자 정의하는 방법

다음 단계에서 CSS는 스타일 지정 목적으로 사용됩니다. 또한 사용자 정의 페이지를 만들기 위해 functions.php 파일에 테마별 코드가 추가됩니다.

대부분의 자습서와 마찬가지로 먼저 테스트 환경에서 이것을 시도하고 싶을 것입니다. 좋은 테스트 환경 도구를 찾고 있다면 로컬에 익숙해지고 싶을 것입니다. 라이브를 시작하기 전에 사이트에서 새로운 것을 효율적으로 테스트할 수 있습니다.

변경 사항이 어떻게 작동하는지 볼 수 있도록 이 튜토리얼에서 functions.php 파일을 수정할 것입니다. 그러나 이러한 개념을 사용하여 플러그인을 만들고 functions.php 파일이 아닌 잠재적인 수정 사항을 추가하는 옵션도 있습니다. 이 튜토리얼의 경우 로그인 페이지의 디자인 변경 사항은 매우 테마에 따라 다르므로 플러그인을 만드는 대신 테마에 추가하기로 결정했습니다.

사용자 정의를 위한 새 폴더 만들기

테마에 사용자 정의를 추가할 때 정리하는 것이 중요합니다. 이러한 변경 사항을 위해 특별히 새 폴더를 만들고 싶을 것입니다. 그렇게 하려면 현재 활성 테마를 찾은 다음 "로그인"이라는 폴더를 만드십시오.

다음으로 사용자 정의 로그인 스타일을 참조하려면 CSS 파일이 필요합니다. 새 로그인 폴더에서 빈 CSS 파일을 만들고 기억하기 쉬운 이름을 지정합니다. 이 경우에는 login-styles.css 입니다.

이 스타일시트는 어떻게 연결되나요? 테마의 functions.php 파일에서 참조해야 합니다. functions.php 파일을 열고 다음 스니펫을 붙여넣습니다. ( login-styles.css 와 다른 것을 사용한 경우 CSS 파일의 고유한 이름을 포함해야 합니다.)

function custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . 'login/login-styles.css" />';
}
add_action('login_head', 'custom_login');


로고 변경
이것은 매우 쉽게 변경할 수 있으며 브랜딩 개선에 많은 영향을 미칩니다. 브라우저 검사기 도구는 페이지 구조를 결정하는 데 큰 도움이 됩니다. 이 예에서는 Chrome 개발자 도구가 사용되었습니다. WordPress 로고를 자신의 것으로 변경하려면 이 제목과 관련된 CSS 스타일을 변경해야 합니다.
		


<h1><a href="http://wordpress.org/" title="Powered by WordPress">Your Site Name</a></h1>


		


우리는 CSS를 특정하게 만들고 싶습니다. 그래서 .login 클래스로 div 를 타겟팅하면 해당 div 내부의 제목과 링크 스타일을 지정할 수 있습니다.

정리를 위해 별도의 이미지 폴더를 만들었습니다. 이것은 선택 사항이며 원하는 경우 다른 위치에 있는 파일을 참조할 수 있습니다. 파일 경로가 사용하려는 이미지에 맞는지 확인하십시오.
.login h1 a {
  background-image: url('images/login-logo.png');
}



기본 스타일에서 84px의 지정된 높이를 사용하여 이 작업을 수행했습니다. 더 크거나 작게 만들고 싶다면 이 CSS 스타일시트에서 지정할 수 있습니다. 다른 여백과 패딩도 지정할 수 있습니다.
		



원래 로고를 바꿀 수 없는 이유는 무엇입니까? 그 이유는 WordPress가 업데이트되면 지워질 수 있기 때문입니다.
이 간단한 스타일을 사용하면 이제 일반적인 WordPress 로고와 작별할 수 있습니다. 이 로고 교체는 훨씬 더 개인적이고 브랜드화된 느낌을 줍니다.

사용자 정의 배경 스타일 지정
배경은 단색, 패턴 또는 이미지 기반일 수 있습니다. 이 예에서는 흑백의 추상적인 "기술적인" 사진을 배경에 추가합니다.

브라우저 개발 도구를 사용하여 구조를 연구할 수 있습니다. 검사할 때 본문에 배경 스타일이 설정되었음을 알 수 있습니다. 상황은 매우 일반적이므로 더 구체적으로 만들면 원하지 않는 전역 변경을 수행하지 않도록 할 수 있습니다. .login 이라는 바디에 적용되는 클래스가 있는데 이것은 매우 유용할 것입니다(이것은 선택기의 일부였기 때문에 위의 예에서 로고에 사용한 것입니다).
		



body.login {
  background-image: url('images/example-image.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
}


이미지가 표시되지 않으면(나는 인정하고 싶은 것보다 더 많이 이런 일이 몇 번 발생했습니다), 이미지 경로가 올바른지 다시 확인하십시오.

여기에서 상황이 형성되기 시작했습니다. 이러한 사소한 변경만으로도 로그인 페이지는 기본 페이지보다 훨씬 브랜드화되고 흥미롭게 보입니다.
		


로고 링크 조정
이것은 확실히 눈에 띄는 것은 아니지만 로그인 페이지에 자신의 로고가 있으므로 실제 웹 사이트로 연결되어야 합니다. 현재 wordpress.org 로 이동합니다. wordpress.org 는 인기 있고 도움이 되는 곳이기 때문에 괜찮습니다. 하지만 제 생각에는 이에 대한 브라우저 북마크가 있으면 충분합니다. 프로젝트 사이트에 빠르게 접근할 수 있는 방법이 더 유용해 보이기 때문에 로그인 페이지의 일부일 필요는 없습니다.
로고가 WordPress 사이트에 연결되도록 링크 값을 변경하려면 이 기능을 사용하십시오(그리고 자신의 웹사이트 URL을 삽입하는 것을 잊지 마십시오).
		


function login_logo_url() {
    return 'https://www.mysite.com';
}
add_filter('login_headerurl', 'login_logo_url');


필터가 어디에서 왔는지 궁금하다면 login_headerurl 및 login_headertitle 을 찾기 위해 함수 참조를 살펴봐야 했습니다.
이제 링크가 올바른 위치로 이동하지만 제목 텍스트는 어떻습니까? 로고에 마우스를 가져가면 제목 태그로 "Powered by WordPress"가 표시됩니다. 이것은 절대적으로 괜찮지만 링크가 어디로 가는지 완전히 설명하지는 않습니다. 이것은 매우 빠르고 쉽게 수정할 수 있으므로 추가 시간을 들일 가치가 있습니다. 보다 정확한 제목을 위해 이 간단한 기능을 추가하십시오.
function login_logo_text() {
    return 'The Title';
}
add_filter('login_headertitle', 'login_logo_text');


더 많은 스타일링 옵션
CSS에 미친 듯이 여기에서 우리가 한 일을 확장하십시오. CSS를 사용하여 WordPress 로그인 페이지의 모든 HTML 요소에 스타일을 지정할 수 있습니다. 위의 예는 표면을 긁었습니다. 버튼, 링크 및 양식 배경은 모두 사용자 지정할 수 있습니다. 타이포그래피도 사용자 정의할 수 있으므로 잊지 마십시오.

양식 스타일을 개발한 경우 해당 스타일을 로그인 페이지로 전달하는 것은 원활한 경험이 될 것입니다. 버튼도 마찬가지입니다. 이를 통해 일관된 경험을 제공하고 실제 사이트에서 사용되는 것과 완전히 다른 버튼을 사용하여 사용자를 실망시키지 않습니다. 웹 스타일 가이드를 만든 경우 로그인 페이지에 일관된 디자인을 적용하는 방법을 결정하는 데 매우 유용합니다.
CSS가 마음에 들지 않는 경우 사용자 지정 WordPress 로그인 페이지를 만드는 데 도움이 되는 기존 WordPress 플러그인이 있습니다. 다음은 확인할 가치가 있는 몇 가지 옵션입니다.

내 로그인 테마
사용자 정의 로그인
사용자 정의 로그인 페이지 사용자 정의

로그인 페이지는 종종 잊혀지지만 이 페이지의 잠재력을 알면 쉽게 디자인 프로세스의 일부가 될 수 있습니다. 몇 가지 간단한 수정으로 WordPress 로그인 페이지를 사이트의 모양과 느낌에 맞게 쉽게 개인화할 수 있습니다.