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

게시 됨: 2022-01-02

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

사용자는 기본 WordPress 로그인 화면을 사용하여 등록하고 로그인합니다. WordPress는 자체 로고를 추가하거나 사이트에 있는 사용자 정의 테마 또는 브랜딩과 일치하도록 전체 모양과 느낌을 변경하기 위한 기본 제공 옵션을 제공하지 않기 때문입니다.

이것은 작은 웹사이트에서 잘 작동할 수 있습니다. 그러나 비즈니스 웹 사이트 또는 바쁜 온라인 커뮤니티를 운영하는 경우 WordPress 대신 자신의 브랜드를 표시하고 싶을 수 있습니다.

다음 두 가지 방법을 사용할 수 있습니다.

질문이 있는 경우 미국의 인기 있는 WordPress Development Company의 전문가에게 문의할 수 있습니다.

아래 솔루션을 계속 읽어봅시다!

1. 기존 WordPress 레이아웃을 사용합니다.

기존 것을 사용자 정의하는 것은 실제로 조용합니다.
로고를 변경하거나 완전히 다른 레이아웃을 제공하는 경우 시작할 위치는 login_enqueue_scripts 작업입니다.
여기에서 일반적이고 단순한 CSS 조각을 출력할지 또는 전체 CSS 파일에 대한 링크를 제공할지 결정할 수 있습니다. 사용하려는 JavaScript를 대기열에 추가할 수도 있습니다.
function.php에서

 add_action('login_head', 'my_custom_login');
함수 my_custom_login() {
echo '<link rel="stylesheet" type="text/css" href="' . get_bloginfo('stylesheet_directory') . '/your_login_styles.css" />';}

your_login_styles.css는 로그인 페이지를 사용자 정의하기 위해 생성되는 css 파일의 이름입니다.
여기서 주의해야 합니다. 기본 스타일을 무시할 수 있도록 매우 구체적인 선택기를 사용하고 있는지 확인하십시오.
기본적으로 로고는 모든 사람을 wordpress.org 주소로 연결합니다. functions.php 파일에서 아래 코드를 사용하여 사이트 URL로 변경할 수 있습니다.

 add_filter( 'login_headerurl', 'my_login_logo_url' );
함수 my_login_logo_url() {
반환 get_bloginfo( 'url' );
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );
함수 my_login_logo_url_title() {
return '귀하의 사이트 이름 및 정보';}

오류 메시지를 변경하는 가장 편리한 방법은 functions.php의 아래 코드를 사용하는 것입니다.

 add_filter('login_errors', 'login_error_override');
함수 login_error_override()
{
return '잘못된 로그인 정보.';
}

관련 : WordPress 대 Adobe Business Catalyst : 어떤 CMS가 개발에 가장 적합합니까?

2. 새 레이아웃을 만듭니다.

우선 로그인 페이지에 대한 사용자 정의 페이지 템플릿을 만들어야 합니다.
이를 위해 새 페이지 템플릿을 만들고 이름을 지정할 수 있습니다. 예: page-login.php.
그런 다음 WP Admin에서 새 페이지를 만드십시오. 로그인을 위한 퍼머링크를 설정합니다. 따라서 WordPress는 기본적으로 이 페이지에 대해 page-login.php 템플릿을 사용합니다.
로그인 양식을 표시하려면 page-login.php 페이지 템플릿에 wp_login_form 태그를 유지하십시오.

온라인에서 성장하고자 하는 기업에 신선하고 창의적인 디지털 서비스를 제공하는 글로벌 정보 기술 솔루션 에이전시입니다. 결과에 중점을 두고 당사의 기술 기술과 업계 통찰력을 사용하여 디지털 목표를 달성할 수 있도록 지원합니다. 인터랙티브한 웹 디자인으로 이탈률을 낮추 거나 웹사이트에 새로운 트래픽과 수입원을 가져오는 것이 무엇이든 상관없습니다 . 시작하려면 프로젝트에 대해 <a href="www.elsner.com/contact-us">Google에 문의</a>하십시오…

  </p>
</div>
<div class="로그인 양식">
<?php
$args = 배열(
'리디렉션' => home_url(),
'id_username' => '사용자',
'id_password' => '통과',
);
?>
<?php wp_login_form( $args ); ?>
</div>

개인 요구 사항에 따라 CSS를 만들 수 있습니다. 로그인 페이지는 이미 작동 중입니다.
로그인을 시도할 수 있습니다. 성공하면 위의 리디렉션 매개변수에 지정된 주소로 리디렉션됩니다. 그러나 해결해야 할 사항이 있습니다.

 add_action('초기화', '리디렉트_로그인_페이지'); 

함수 리디렉션_로그인_페이지() {
$login_page = home_url( '/로그인/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);
if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET')
{
    wp_redirect($login_page);
    출구;
}
}

– 로그인 페이지는 로그인 후 예상대로 작동할 수 있습니다. 잘못된 ID와 비밀번호 조합을 제출하거나 빈 공간을 제출하는 등의 오류가 발생하는 경우 wp-login.php로 리디렉션됩니다. 이 문제를 해결하기 위해 functions.php에 다음 함수를 추가할 수 있습니다.

 add_action( 'wp_login_failed', 'login_failed' );

함수 로그인 실패() {
$login_page = home_url( '/로그인/' );
wp_redirect( $login_page . '?login=실패' );
출구;
}

 add_filter( '인증', '사용자 이름_비밀번호 확인', 1, 3);

함수 verify_username_password( $user, $username, $password ) {
$login_page = home_url( '/로그인/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "?login=empty" );
출구;
}
}

– 마지막 문제는 사이트에서 로그아웃할 때 wp-login.php로 리디렉션된다는 것입니다. 따라서 로그아웃 시에도 리디렉션 URL을 지정해야 합니다.

 add_action('wp_logout','logout_page');
함수 logout_page() {
$login_page = home_url( '/로그인/' );
wp_redirect( $login_page . "?login=false" );
출구;
}

분실된 비밀번호 링크, 등록 링크, 개인화된 오류 메시지 추가와 같이 로그인 페이지를 개선하기 위해 할 수 있는 일이 많이 있습니다. 그러나 이 시점에서 사용자가 로그인 및 로그아웃하기에 충분하게 작동합니다. 더 발전된 로그인 페이지를 만드는 것이 좋은 출발이 될 수 있습니다.

그래서 그래! 그게 다야
몇 가지 간단한 조정으로 사이트의 모양과 느낌에 맞게 로그인 페이지를 매우 편안하게 개인화할 수 있습니다.

많은 테마 디자이너는 특히 WordPress 테마 설정이 아닐 때 로그인 페이지의 스타일을 지정하지 않습니다.

그러나 클라이언트 사이트를 만들 때 스타일, 특히 브랜드를 무시하면 로그인 페이지가 사용자 지정 테마가 있는 경우 사용자 경험을 깨뜨릴 수 있는 기회 상실로 판명될 수 있습니다.

사이트를 브랜드화할 수 있는 또 다른 기회는 사용자의 마음에 오래 지속되는 인상을 남기기도 합니다.