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

아, 네, 워드프레스 로그인 페이지 - 워드프레스에서 가장 잘 알려진 페이지 중 하나죠?

그러나 동시에 WordPress 사이트에서 이 페이지를 기본 형식으로 유지하는 것이 항상 최상의 아이디어는 아닙니다.

왜요? - 물어.

답은 다음과 같습니다.

맞춤형 WordPress 로그인 페이지가 필요한 이유는 무엇입니까?

문제는 세 가지입니다.

1. 교통 . 트래픽이 많을수록 직접적인 결과로 "나쁜" 트래픽이 더 많이 발생합니다. 나쁜 트래픽 이란 악의적인 스크립트와 봇, 스패머 및 나쁜 의도로 사이트에 오는 모든 종류의 사용자를 의미합니다. WordPress 로그인 페이지를 사용자 지정하면 사이트를 더 안전하게 만들 수 있습니다.
2. 다중 사용자 사이트 . 사이트가 관리자 또는 작성자/블로거 등 여러 사람에 의해 관리되는 경우 로그인이 여러 번 발생합니다. 사용자 정의 로그인 양식을 제공하면 프로세스가 전반적으로 더 즐거워집니다.
3. 브랜딩 . 기본 로그인 페이지는 모두 좋지만 중앙에 큰 WordPress 로고가 있습니다. 이것을 전환하고 로그인 페이지를 자신의 페이지처럼 보이게 하는 것은 멋진 브랜딩 터치가 될 수 있습니다. 이것은 클라이언트를 위한 웹사이트를 구축하는 경우에 특히 유효합니다. 고객에게 일관된 경험을 제공하는 것은 분명히 고객이 감사할 일입니다.

위의 내용 중 하나라도 마음에 든다면 로그인 페이지를 사용자 지정 페이지로 전환하는 것을 고려해야 합니다. 방법은 다음과 같습니다.

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

두 가지 주요 방법이 있습니다.

• 수동 방식,
• 플러그인 방식.

두 가지 방법 모두 장단점이 있습니다. 수동 방식을 사용하면 최종 페이지의 모양을 더 잘 제어할 수 있습니다. 플러그인 방식은 특히 코딩 기술이 없는 경우에 따라하기가 더 쉽지만 플러그인에서 수행할 수 있는 작업으로 정착해야 합니다.

둘 다 커버합시다.

수동으로 사용자 정의 로그인 페이지 만들기

이렇게 하려면 테마의 소스 파일 중 일부를 조정해야 하지만 그렇게 어렵지는 않습니다. 여기서는 Twenty Fifteen을 예시로 사용하겠습니다.

재미는 page.php 파일과 content-page.php 파일의 복사본을 만드는 것으로 시작됩니다.

새 복사본의 이름을 각각 page-login.php 및 content-login.php 로 바꿉니다.

page-login.php 를 열고 한 줄만 변경합니다. 이것으로부터:

 get_template_part( 'content', 'page' );

이에:

 get_template_part( 'content', 'login' );

이제 content-login.php 를 편집하고 <?php the_content(); ?> 바로 아래에 한 줄을 추가해 보겠습니다. <?php the_content(); ?> . 이렇게:

 <?php the_content(); ?> <?php wp_login_form( array('redirect' => home_url()) ); ?> <?php wp_link_pages( array( ...

메모. 이 단계에서 원하는 경우 다양한 다른 사용자 정의(예: 디자인/레이아웃 조정, 사이드바 제거)를 수행할 수 있지만 모두 선택 사항입니다. 새 WordPress 로그인 페이지에서 매우 최소한의 접근 방식을 사용하려는 경우 이 두 줄만 변경하면 됩니다.

이제 wp-admin 에서 새 페이지를 만들고 간단히 "login"이라고 부르겠습니다. 영구 링크도 "로그인"인지 확인하십시오.

이렇게 하면 WordPress page-login.php 템플릿 파일을 자동으로 사용합니다.

지금 새 페이지를 방문하면 다음과 같이 보일 것입니다.

이 단계에서 할 일은 궁극적으로 WordPress의 기본 로그인 페이지를 제거하도록 리디렉션을 설정하는 것뿐입니다. functions.php 파일의 끝에 다음 줄을 배치하면 됩니다.

 /* Main redirection of the default login page */ function redirect_login_page() { $login_page = home_url('/login/'); $page_viewed = basename($_SERVER['REQUEST_URI']); if($page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); /* Where to go if a login failed */ function custom_login_failed() { $login_page = home_url('/login/'); wp_redirect($login_page . '?login=failed'); exit; } add_action('wp_login_failed', 'custom_login_failed'); /* Where to go if any of the fields were empty */ function verify_user_pass($user, $username, $password) { $login_page = home_url('/login/'); if($username == "" || $password == "") { wp_redirect($login_page . "?login=empty"); exit; } } add_filter('authenticate', 'verify_user_pass', 1, 3); /* What to do on logout */ function logout_redirect() { $login_page = home_url('/login/'); wp_redirect($login_page . "?login=false"); exit; } add_action('wp_logout','logout_redirect');

(코드 조각은 [1][2]를 기반으로 작성되었습니다.)

현재 액세스할 수 있는 유일한 로그인 페이지는 귀하가 만든 새 로그인 페이지입니다. 여기에서 가장 좋은 점은 WordPress의 기본 페이지 편집기를 통해 자유롭게 편집할 수 있다는 것입니다(다른 페이지를 편집하는 것처럼).

플러그인으로 맞춤형 WordPress 로그인 페이지 만들기

이 방법은 완전히 새로운 로그인 페이지를 만드는 대신 실제로 기본 페이지를 수정하기 때문에 약간 다르게 작동합니다.

먼저, 우리가 사용할 플러그인은 Custom Login Page Customizer입니다.

설치 및 활성화한 후 모양 > 로그인 사용자 정의 도구 로 이동하여 사용자 정의 패널을 시작할 수 있습니다.

이 플러그인의 옵션은 매우 훌륭하며 다음과 같이 조정할 수 있습니다.

• 기본 WordPress 로고 대신 표시되도록 로고를 설정합니다.
• 전체 로그인 페이지의 배경을 설정합니다.
• 양식 자체의 배경을 설정합니다.
• 양식의 스타일과 양식에 대한 모든 세부 사항(글꼴, 크기, 색상, 필드)을 조정합니다.
• 보안 추가 기능을 설치하여 양식에 추가 보안 문자 필드를 가져옵니다(스팸 로그인/봇을 방지하는 데 좋습니다).

예를 들어, 플러그인으로 몇 분만 작업하면 다음과 같은 결과를 얻을 수 있습니다.

다른 플러그인 옵션

살펴볼 가치가 있는 또 다른 사용자 정의 로그인 페이지 플러그인은 로그인 디자이너입니다. 이 플러그인은 디자인에 유연성을 제공하면서 WordPress 로그인 페이지를 매우 쉽게 사용자 정의할 수 있도록 하는 것을 목표로 합니다.

사용 편의성을 달성하는 한 가지 방법은 사용자 지정 프로세스를 친숙하게 만드는 것입니다. 모든 옵션과 도구는 WordPress Customizer에 바로 통합되어 있습니다. 따라서 테마 옵션을 변경하기 위해 사용자 지정 프로그램을 사용하는 데 익숙하다면 집에 있는 것처럼 느껴질 것입니다.

플러그인 작동 방식에 대한 개요는 이 비디오를 확인하십시오.

수동 또는 플러그인을 통해 ?

당신의 선택 방법은 무엇입니까? 수동으로 코딩하는 것을 선호합니까 아니면 플러그인으로 모든 것을 처리하는 것을 선호합니까? 자유롭게 공유하세요.