플러그인을 사용하지 않고 WordPress에서 로그인 페이지를 만드는 방법

플러그인 없이 기본 WordPress 로그인 페이지를 사용자 정의하지 않고 WordPress에서 로그인 페이지를 만드는 가장 좋은 방법을 찾고 있습니까? 인기 있는 WordPress 로그인 플러그인을 사용하지 않고 WordPress에서 로그인 페이지를 만들려면 단축 코드 또는 사용자 정의 페이지 템플릿에 로그인 코드를 추가하면 됩니다.

이 튜토리얼에서는 단축 코드 기능을 사용하여 WordPress에서 로그인 페이지를 만드는 방법과 사용자 정의 페이지 템플릿에서 로그인 기능을 사용하여 WordPress에서 로그인 페이지를 만드는 방법을 보여줍니다.

이러한 각 방법은 모든 WordPress 테마 또는 WordPress 호스팅 환경에서 원활하게 작동해야 합니다.

플러그인 없이 WordPress에 로그인 페이지 만들기

이 자습서의 목표는 로그인 후 WordPress 대시보드에 액세스할 수 있는 기본 WordPress 로그인과 같은 로그인 페이지를 만드는 데 도움이 되는 것입니다.

이상적으로는 이 사용자 정의 로그인 페이지는 사이트 사용자가 로그인하는 프런트엔드 로그인 페이지여야 합니다. 소개에서 언급했듯이 이 튜토리얼에서 다룰 두 가지 방법이 있습니다.

1. 로그인 페이지 단축 코드
2. 사용자 정의 페이지 템플릿 로그인

로그인 페이지 단축 코드 생성

워드프레스 어디에서나 로그인 페이지를 생성하려는 첫 번째 단계는 단축 코드를 사용하는 것입니다. 단축 코드는 모든 페이지, 게시물 또는 위젯 및 사용자 정의 페이지 템플릿에도 추가할 수 있습니다.

이 단계에서는 WordPress의 모든 페이지 또는 게시물에 로그인 양식을 게시하는 데 사용할 로그인 양식의 단축 코드를 만듭니다. 이 접근 방식을 통해 사용자는 사이트의 모든 섹션에서 로그인 페이지를 유연하게 만들 수 있습니다.

단축 코드를 생성하려면 다음 코드를 사용합니다.

 // 로그인 폼 숏코드 생성

기능 njengah_add_login_shortcode() {

                add_shortcode( 'njengah-login-form', 'njengah_login_form_shortcode' );

}

나중에 초기화할 수 있도록 함수에 단축 코드를 추가했습니다. add_shortcode 함수는 WordPress에서 단축 코드를 생성합니다. add_shortcode() 함수의 일반적인 표현은 다음과 같습니다.

 add_shortcode( 문자열 $tag, 호출 가능한 $callback )

보시다시피 이 함수에는 다음과 같은 두 개의 매개변수가 있습니다.

 //2단계: 숏코드 콜백
함수 njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
	return '<p>환영합니다. 로그인했습니다!</p>'; ?> 
		
<div 클래스 ="njengah-login-tutorial" >  
		
	<?php return wp_login_form( 
		정렬( 
			'에코' => 거짓,
			'label_username' => __( '귀하의 사용자 이름 ' ),
			'label_password' => __( '비밀번호' ),
			'label_remember' => __( '나를 기억해' )
			        )
	); ?> 
		
            </div>
  <?php 
   }

코드를 자세히 확인하면 사용자가 WordPress에 로그인했는지 확인하는 방법 에 대한 게시물에서 설명한 대로 사용자가 로그인했는지 확인하는 기능을 사용했음을 알 수 있습니다.

사용자가 로그인하지 않은 경우 wp_login_form() 함수를 사용하여 로그인 양식을 표시합니다. 사용자가 로그인한 경우 로그인 양식을 표시하는 대신 해당 페이지에 조건부로 환영 메시지를 표시합니다.

WP 함수 wp_login_form()

wp_login_form()은 테마 개발자에게 WordPress 양식을 어디서나 표시할 수 있는 방법을 제공하는 WordPress 함수입니다. 이 함수는 일반적으로 다음과 같이 표현할 수 있습니다.

 wp_login_form( 배열 $args = array() )

$args는 양식이 표시되는 방식을 제어하는 ​​옵션의 배열일 수 있습니다.

다음은 양식이 표시되는 방식을 변경하기 위해 배열에서 사용할 수 있는 인수입니다.

예를 들어, 인수 배열을 설정하고 다음과 같이 이 함수에 전달할 수 있습니다.

 <?php 

wp_login_form( 

	 정렬(
			'에코' => 사실,
			// 기본 '리디렉션' 값은 사용자를 요청 URI로 되돌립니다.
			'리디렉션' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
			'form_id' => '로그인 정보',
			'label_username' => __( '귀하의 사용자 이름' ),
			'label_password' => __( '비밀번호' ),
			'label_remember' => __( '나를 기억해' ),
			'label_log_in' => __( '로그인' ),
			'id_username' => 'user_login',
			'id_password' => 'user_pass',
			'id_remember' => '기억',
			'id_submit' => 'wp-제출',
			'기억하다' => 사실,
			'값_사용자 이름' => '',
			// '값_기억'을 true로 설정하여 '기억하기' 확인란을 기본으로 선택합니다.
			'값_기억' => 거짓,
		);
		
); ?>

양식은 기본 WordPress 로그인 양식 레이블과 달리 배열에 추가한 새 레이블로 표시됩니다. 위의 코드에서 사용자 이름을 Your Username으로, 비밀번호를 Your Password로 변경했습니다.

단축 코드와 콜백 함수를 생성한 후에는 초기화해야 WordPress 게시물이나 페이지 어디에서나 단축 코드를 사용하여 사용자 정의 로그인 양식을 추가할 수 있습니다.

다음은 로그인 양식 단축 코드를 초기화하는 코드입니다.

 // 3단계: 숏코드 함수 초기화

add_action( '초기화', 'njengah_add_login_shortcode' );

WordPress에서 로그인 양식 단축 코드를 생성하는 전체 코드 스니펫

이제 이 모든 코드 조각을 하나의 코드 조각으로 모아 활성 WordPress 테마의 functions.php에 코드를 추가한 다음 단축 코드([ njengah-login-form])를 사용하여 WordPress 로그인 양식을 표시할 수 있습니다.

다음은 WordPress 로그인 양식 단축 코드를 추가하기 위해 functions.php 파일에 추가해야 하는 전체 코드 스니펫입니다.

 /**
 * 플러그인 없이 사용자 정의 WordPress 로그인 양식 만들기 [ WordPress 로그인 양식 단축 코드 ] 
 * @저자 Joe Njengah 
 * @ 요지 - https://gist.github.com/Njengah/fa96025717308df1b979e77e5da3eef2
 */ 


// 1단계: 숏코드 생성
기능 njengah_add_login_shortcode() {
	add_shortcode( 'jay-login-form', 'njengah_login_form_shortcode' );
}

//2단계: 숏코드 콜백
함수 njengah_login_form_shortcode() {
	
	if (is_user_logged_in())
		
		return '<p>환영합니다. 로그인했습니다!</p>'; ?> 
		
		<div 클래스 ="njengah-login-tutorial" >  
		
			<?php return wp_login_form( 
							정렬( 
								'에코' => 거짓,
								'label_username' => __( '귀하의 사용자 이름 ' ),
								'label_password' => __( '비밀번호' ),
								'label_remember' => __( '나를 기억해' )
			              )
			); ?> 
		
		</div>
  <?php 
   }

// 3단계: 숏코드 함수 초기화
add_action( '초기화', 'njengah_add_login_shortcode' );

//4단계: [njengah-login-form] 단축 코드를 사용하여 페이지 또는 게시물에 로그인 양식을 포함합니다. 

이 코드를 functions.php에 추가할 때 로그인 페이지를 만들고 단축 코드 [ njengah-login-form]를 추가하여 로그인 양식을 게시해야 합니다. 로그인 양식은 아래 이미지와 같이 나타나야 합니다.

WordPress 로그인 양식 스타일링

로그인 양식을 매력적으로 만들고 사용 중인 테마 디자인을 사용하기 위해 다음 스타일을 추가했습니다.

 .njengah-login-tutorial {
    배경: #6379a4;
    패딩: 20px;
    최대 너비: 70%;
    여백: 0 자동;
    색상: #fff;
}

.login-password 레이블 {
    여백 오른쪽: 120px;
}

.로그인 사용자 이름 {
    패딩 상단: 30px;
}

로그인 양식 사용자 정의 페이지 템플릿 만들기

플러그인 없이 WordPress에서 로그인 페이지를 만드는 다른 방법은 사용자 정의 페이지 템플릿을 만들고 wp_login_form() 함수를 사용하여 해당 페이지에 로그인 양식을 게시하는 것입니다.

다음은 사용자 정의 페이지 템플릿에 있는 사용자 정의 로그인 페이지를 생성하기 위한 코드입니다.

 <?php
/**
 * 템플릿 이름: 로그인 페이지 
 */
 
 get_header(); 
 
 
 if (is_user_logged_in()){
	 
	     echo '<p>환영합니다. 로그인했습니다!</p>'; 
		 
 }또 다른{ 
	 
	 wp_login_form( 

		 정렬(
				'에코' => 사실,
				// 기본 '리디렉션' 값은 사용자를 요청 URI로 되돌립니다.
				'리디렉션' => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
				'form_id' => '로그인 정보',
				'label_username' => __( '귀하의 사용자 이름' ),
				'label_password' => __( '비밀번호' ),
				'label_remember' => __( '나를 기억해' ),
				'label_log_in' => __( '로그인' ),
				'id_username' => 'user_login',
				'id_password' => 'user_pass',
				'id_remember' => '기억',
				'id_submit' => 'wp-제출',
				'기억하다' => 사실,
				'값_사용자 이름' => '',
				// '값_기억'을 true로 설정하여 '기억하기' 확인란을 기본으로 선택합니다.
				'값_기억' => 거짓,
			)
						
		);
    }			
	
get_footer();		
				

이 코드를 파일에 저장하고 이름을 login-page.php로 지정하고 WordPress 테마의 루트 폴더에 저장되었는지 확인합니다.

새 페이지를 생성하면 아래와 같이 페이지 속성 템플릿 옵션에서 로그인 템플릿을 사용할 수 있음을 알 수 있습니다.

템플릿을 선택하고 페이지를 게시합니다. 프론트엔드를 확인하면 로그인하지 않은 사용자에게는 로그인 양식이 표시되고 로그인한 사용자에게는 환영 메시지가 표시되는 것을 볼 수 있습니다.

결론

이 게시물에서는 WordPress 페이지에 로그인 양식을 추가하는 두 가지 방법에 대해 설명했습니다. 단축 코드 기능을 사용하여 WordPress 로그인 양식 단축 코드를 생성하거나 사용자 정의 페이지 템플릿을 사용하여 플러그인 없이 WordPress에 로그인 페이지를 생성할 수 있습니다. 이제 이러한 방법 중 하나를 구현하여 WordPress 사이트에서 사용자 지정 프런트엔드 로그인 양식을 만들 수 있기를 바랍니다.

유사한 기사

1. 사용자 정의 게시물 유형에 대한 WordPress 페이지 매김을 만드는 방법
2. 사이트 보호를 위한 30가지 최고의 WordPress 보안 플러그인
3. 프로그래밍 방식으로 WordPress에서 페이지를 만드는 방법
4. WordPress 관리자 대시보드에 액세스하거나 WordPress 대시보드에 로그인하는 방법
5. 맞춤 주문 수신 페이지를 만드는 방법 WooCommerce
6. Printful을 WooCommerce에 연결하는 방법
7. WooCommerce 확장 프로그램을 업데이트하는 방법
8. 페이지 스토어프론트 테마 상단에 검색창을 추가하는 방법
9. 쉬운 연락을 위한 40개 이상의 WordPress 연락처 양식 플러그인
10. WordPress WooCommerce에서 분류되지 않은 카테고리를 제거하는 방법
11. WordPress 페이지에서 사이드바를 제거하거나 WordPress 사이드바를 숨기는 방법
12. 예제를 사용하여 WordPress에서 사용자 지정 쿼리 페이지 매김을 만드는 방법
13. WooCommerce 대 Magento: 최고의 전자 상거래 플랫폼은 무엇입니까?
14. WooCommerce 데이터베이스를 백업하는 방법
15. 상위 30개 이상의 최고의 WordPress 양식 플러그인 » 최고의 WordPress 양식 플러그인
16. WooCommerce에서 별도의 로그인 및 등록 페이지를 만드는 방법
17. 35개 이상의 최고의 자유형 플러그인 WordPress
18. Shopify에서 WooCommerce로 마이그레이션하는 방법