사용자 지정 WordPress 로그인 페이지를 만드는 방법 (궁극적 인 가이드)


귀하의 웹 사이트에 대한 사용자 지정 WordPress 로그인 페이지를 만드시겠습니까?

당신이 WordPress 회원 사이트 또는 온라인 매장, 많은 사용자는 종종 로그인 페이지를 보게됩니다. 기본 WordPress 로그인 페이지를 사용자 정의하면 더 나은 사용자 환경을 제공 할 수 있습니다.

이 궁극적 인 가이드에서는 사용자 지정 WordPress 로그인 페이지를 만드는 여러 가지 방법을 보여줍니다. 이 자습서를 사용하여 사용자 정의 WooCommerce 로그인 페이지를 생성 할 수도 있습니다.

귀하의 사이트에 대한 사용자 정의 WordPress 로그인 페이지를 쉽게 만드는 방법

이 가이드에서 배울 내용은 다음과 같습니다.

사용자 지정 WordPress 로그인 페이지를 만드는 이유는 무엇입니까?

워드 프레스는 강력한 기능을 제공합니다. 사용자 관리 시스템. 이렇게하면 사용자가에 계정을 만들 수 있습니다. 전자 상거래 상점, 회원 웹 사이트 또는 블로그에서.

기본적으로 로그인 페이지에는 WordPress 브랜딩 및 로고가 표시됩니다. 작은 블로그를 운영 중이거나 관리자 만 액세스 할 수있는 사람이라면 괜찮습니다.

기본 WordPress 로그인 화면

그러나 귀하의 웹 사이트 사용자가 등록 할 수 있도록 허용 로그인하면 사용자 정의 로그인 페이지가 더 나은 사용자 경험을 제공합니다.

자신의 로고와 디자인을 사용하면 사용자가 집처럼 편안하게 느낄 수 있습니다. 웹 사이트처럼 보이지 않는 기본 WordPress 로그인 화면으로 리다이렉트하는 대신 사용자에게 의심스러운 것처럼 보일 수 있습니다.

마지막으로 기본 로그인 화면에는 로그인 양식 외에는 아무 것도 들어 있지 않습니다. 사용자 정의 로그인 페이지를 작성하여 다른 페이지 또는 특별 프로모션을 홍보 할 수 있습니다.

즉, 맞춤 WordPress 로그인 페이지 디자인의 몇 가지 예를 살펴 보겠습니다.

WordPress 로그인 페이지 디자인 예제

웹 사이트 소유자는 다양한 스타일과 기법을 사용하여 WordPress 로그인 페이지를 사용자 정의 할 수 있습니다.

일부는 웹 사이트의 테마와 색상을 사용하는 사용자 정의 로그인 페이지를 만듭니다. 기타, 사용자 정의 배경, 색상 및 자체 로고를 추가하여 기본 로그인 페이지를 수정하십시오.

1. WPForms

WPForms

WPForms는 최고의 WordPress 연락처 양식 플러그인 시장에. 우연히도, 플러그인에는 아름다운 WordPress 로그인 및 등록 양식을 만드는 부가 기능이 포함되어 있습니다.이 양식은이 기사의 뒷부분에 표시됩니다.

사용자 정의 로그인 페이지는 2 열 레이아웃을 사용합니다. 왼쪽 열은 로그인 양식을 포함하고 오른쪽 열은 프로모션 및 기타 클릭 유도 문안을 강조 표시하는 데 사용됩니다. 위의 예에서는 로그인 페이지를 사용하여 연례 보고서를 공유하고 있습니다. 사용자 정의 브랜딩, 배경 일러스트레이션 및 브랜드 색을 사용하여 고유 한 로그인 환경을 만듭니다.

2. Rock My Wedding

락 내 결혼식

Rock My Wedding의 웹 사이트는 로그인 및 등록 양식을 표시하는 팝업 모달. 팝업을 사용하면 사용자가 페이지를 떠나지 않고 로그인 할 수 있다는 장점이 있습니다. 그것은 새로운 페이지로드에서 그들을 저장하고보다 빠른 사용자 경험을 제공합니다.

3. Jacquelynne Steves

Jacquelynne Steves

Jacquelynne Steeves는 예술가 및 공예품 웹 사이트로 작가가 집 꾸미기, 퀼트, 패턴, 자수 등을 제작하는 데 필요한 콘텐츠를 게시합니다. 그들의 로그인 페이지는 자신의 웹 사이트 테마와 일치하는 사용자 정의 배경 이미지를 오른쪽의 로그인 양식과 함께 사용합니다.

4. 교회 모션 그래픽

교회 모션 그래픽

이 모션 그래픽 디자인 회사의 로그인 페이지는 자신의 비즈니스가 무엇인지를 반영하는 화려한 배경을 사용합니다. 로그인 화면에서 동일한 사이트 머리글, 바닥 글 및 탐색 메뉴를 사용합니다. 로그인 폼 자체는 어두운 배경으로 아주 간단합니다.

5. MITSLoan 경영 검토

MITSLoan 경영 검토

MITSLoan Management Review 웹 사이트는 기본 WordPress 로그인 화면을 사용합니다. 자신의 로고가있는 사용자 정의 CSS를 사용하여 WordPress 브랜딩을 숨 깁니다.

WordPress에서 프런트 엔드 사용자 정의 로그인 페이지 만들기

WordPress에서 프런트 엔드 사용자 정의 로그인 페이지를 만드는 데 사용할 수있는 여러 가지 WordPress 플러그인이 있습니다. 두 가지 플러그인을 보여 드리며 가장 적합한 플러그인을 선택할 수 있습니다.

테마를 사용하여 WordPress 로그인 페이지 만들기 내 로그인

가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. 테마 내 로그인 플러그인. 자세한 내용은 단계별 가이드를 참조하십시오. WordPress 플러그인 설치 방법.

활성화시 Theme My Login은 사용자 정의 로그인, 로그 아웃, 등록, 비밀번호 분실 및 비밀번호 재설정 작업에 대한 URL을 자동으로 생성합니다.

이 WordPress 로그인 URL을 방문하여 맞춤 설정할 수 있습니다. 주제 내 로그인»일반 페이지. '굼벵이'섹션으로 스크롤하여 로그인 작업을 위해 플러그인에서 사용하는 URL을 수정하십시오.

주제 내 로그인 페이지

테마 내 로그인을 사용하면 단축 코드를 사용하여 사용자 정의 로그인 및 등록 페이지를 만들 수 있습니다. 각 작업에 대한 페이지를 만든 다음 페이지 슬러그 여기에서 플러그인이 사용자를 찾아 올바르게 리디렉션 할 수 있도록합니다.

로그인 페이지부터 시작하겠습니다.

머리 끝까지 페이지»새로 추가 새 WordPress 페이지를 만들 수 있습니다. 귀하의 페이지에 제목을 부여한 다음 컨텐츠 영역 내에 다음 단축 코드 "(theme-my-login)"을 입력해야합니다.

단축 코드 추가

이제 페이지를 게시하고 미리보기를 통해 사용자 정의 로그인 페이지를 실제로 볼 수 있습니다.

사용자 정의 WordPress 로그인 페이지

다음 단축 코드를 사용하여 다른 페이지를 만드는 과정을 반복하십시오.

(theme-my-login action = "register") 등록 양식.

(theme-my-login action = "lostpassword")를 입력하십시오.

(theme-my-login action = "resetpass") 비밀번호 재설정 페이지에서 사용하십시오.

WPForms를 사용하여 사용자 지정 WordPress 로그인 페이지 만들기

WPForms 는 시장에서 최고의 WordPress 양식 빌더 플러그인입니다. 웹 사이트에 대한 사용자 정의 로그인 및 등록 양식을 쉽게 작성할 수 있습니다.

WPForms는 프리미엄 WordPress 플러그인이며 사용자 등록 애드온에 액세스하려면 최소한 프로 계획이 필요합니다. WPBeginner 사용자는 우리의 제품을 사용하여 50 % 할인을받을 수 있습니다. WPForms 쿠폰 코드: SAVE50

가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. WPForms 플러그인. 자세한 내용은 단계별 가이드를 참조하십시오. WordPress 플러그인 설치 방법.

활성화가되면 방문해야합니다. WPForms»설정 페이지에서 라이센스 키를 입력하십시오. 이 정보는 WPForms 웹 사이트의 계정에서 찾을 수 있습니다.

WPForms 라이센스

라이센스 키를 입력하면 추가 기능을 설치할 수 있습니다. 계속해서 방문하십시오. WPForms»애드온 페이지에서 사용자 등록 Addon을 찾습니다.

사용자 등록 애드온 설치

그런 다음 Addon 설치 버튼을 클릭하여 애드온을 다운로드하고 활성화하십시오. 이제 사용자 정의 로그인 양식을 만들 준비가되었습니다.

머리 끝까지 WPForms»새로 추가 페이지에서 '사용자 로그인 양식'템플릿으로 스크롤하십시오. 계속하려면 '사용자 로그인 양식 만들기'버튼을 클릭해야합니다.

로그인 양식 만들기

WPForms는 필수 입력란과 함께 사용자 로그인 양식을로드합니다. 필드를 클릭하여 자신의 설명이나 텍스트를 추가 할 수 있습니다.

WPForms 폼 빌더

다른 설정도 변경할 수 있습니다. 예를 들어, 자동으로 버튼 제목으로 '제출'을 추가합니다. 그것을 클릭 한 다음 로그인으로 변경할 수 있습니다.

양식 설정

사용자가 성공적으로 로그인하면 어떤 일이 발생할지 결정할 수도 있습니다. 설정»확인 탭을 클릭하고 작업을 선택하십시오.

리디렉션 된 로그인 사용자

사용자를 다른 URL로 리디렉션하거나, 홈페이지로 리디렉션하거나, 현재 로그인 한 메시지를 표시 할 수 있습니다.

양식 설정에 만족하면 화면의 오른쪽 상단에있는 저장 버튼을 클릭하고 양식 작성기를 닫습니다.

사용자 지정 로그인 양식을 WordPress 페이지에 추가

WPForms를 사용하면 모든 WordPress 게시물이나 페이지에 사용자 정의 로그인 양식을 쉽게 추가 할 수 있습니다.

로그인 양식을 추가하거나 새 양식을 작성하려는 페이지를 편집하기 만하면됩니다. 페이지 편집 화면에서 컨텐츠 영역에 WPForms 블록을 추가하십시오.

게시물에 WPForms 블록 추가하기

그런 다음 이전에 생성 한 로그인 폼을 선택하면 WPForms 블록이 컨텐트 영역에 자동으로로드합니다.

로그인 양식 미리보기

이제 로그인 양식 페이지를 계속 편집하거나 변경 사항을 저장하고 게시 할 수 있습니다.

WordPress 로그인 양식 페이지 디자인 사용자 정의

기본적으로 사용자 정의 WordPress 로그인 페이지는 테마의 페이지 템플리트 및 스타일을 사용합니다. 테마의 탐색 메뉴, 머리말, 꼬리말 및 사이드 바 위젯이 있습니다.

전체 페이지를 완전히 차지하고 처음부터 무언가를 디자인하고 싶다면 다음을 사용할 수 있습니다. WordPress 페이지 빌더 플러그인.

페이지 빌더 플러그인을 사용하면 사용자 정의 페이지 레이아웃을 만든 다음 Theme My Login 또는 WPForms에서 제공하는 로그인 양식 위젯을 추가 할 수 있습니다.

아래 스크린 샷에서 우리는 인기있는 비버 빌더 플러그인. 전체 화면 레이아웃에서 배경 이미지를 사용한 다음 두 개의 열을 추가했습니다. 한 열에는 텍스트와 버튼이 추가되었습니다. 다른 열에서는 WPForms 위젯을 추가했습니다.

페이지 빌더 플러그인을 사용하여 사용자 정의 로그인 페이지 작성

이익 비버 빌더 그것이 100 % 끌어서 놓기 솔루션이라는 것입니다.

노트 : 이미 로그인되어 있기 때문에 테마 내 로그인과 WPForms 플러그인 모두 로그인 양식의 실시간 미리보기를 표시하지 않을 수 있습니다. WPForms 플러그인에는 양식 설정에서이 옵션을 끌 수있는 옵션이 있습니다.

WordPress 페이지 빌더 플러그인이 당신의 일이 아니라면, 다음을 사용할 수 있습니다. 맞춤 CSS 양식과 로그인 페이지 자체의 스타일을 지정합니다. 또는, CSS Hero 플러그인 쉽게 사용자 정의 CSS 스타일을 추가 할 수 있습니다.

웹 사이트에 대해 완전히 사용자 정의 된 WordPress 로그인 페이지를 만들 필요는 없습니다. 사실, 많은 웹 사이트가 기본 로그인 페이지를 사용하면서 WordPress 로고와 로고 URL을 대체합니다.

로그인 화면의 WordPress 로고를 자신의 로고로 바꾸려면 WordPress 플러그인을 사용하거나 사용자 정의 코드를 추가하면됩니다. 우리는 당신에게 가장 적합한 것을 사용할 수있는 두 가지 방법을 보여줄 것입니다.

플러그인을 사용하여 WordPress 로그인 로고 및 URL 변경

가장 먼저해야 할 일은 설치하고 활성화하는 것입니다. Colorlib 로그인 사용자 정의 프로그램. 플러그인. 자세한 내용은 단계별 가이드를 참조하십시오. WordPress 플러그인 설치 방법.

활성화되면, 플러그인은 'Login Customizer'라는 새 메뉴 항목을 WordPress의 관리자 사이드 바에 추가합니다. 이를 클릭하면 로그인 사용자 정의 프로그램이 시작됩니다.

로그인 사용자 정의 프로그램

로그인 사용자 정의 프로그램은 왼쪽의 사용자 정의 옵션과 오른쪽의 실시간 미리보기로 기본 WordPress 로그인 화면을로드합니다.

자신의 워드 프레스 로고를 바꾸려면 오른쪽에있는 '로고 옵션'탭을 클릭하십시오. 여기에서 WordPress 로고를 숨기고 사용자 정의 로고를 업로드하고 로고 URL과 텍스트를 변경할 수 있습니다.

로그인 페이지에 맞춤 로고 업로드

플러그인을 사용하면 기본 WordPress 로그인 페이지를 완전히 사용자 정의 할 수 있습니다. 열, 배경 이미지, 로그인 양식 색상 변경 등을 추가 할 수 있습니다.

기본적으로 기본 WordPress 로그인 URL을 변경하지 않고도 사용자 지정 WordPress 로그인 페이지를 만들 수 있습니다.

작업이 끝나면 게시 버튼을 클릭하여 변경 사항을 저장하십시오. 이제 WordPress 로그인 페이지를 방문하여 사용자 정의 로그인 양식을 확인하실 수 있습니다.

사용자 정의 로고가있는 사용자 정의 WordPress 로그인 페이지

WordPress 로그인 로고 및 URL (플러그인 없음) 변경

이 방법을 사용하면 수동으로 로그인 화면의 WordPress 로고를 자신의 로고로 바꿀 수 있습니다 맞춤 로고.

먼저 사용자 정의 로고를 미디어 라이브러리에 업로드해야합니다. 이동 미디어»새로 추가 페이지를 만들고 사용자 정의 로고를 업로드하십시오.

이미지를 업로드하고 옆에있는 '수정'링크를 클릭하십시오. 그러면 파일 URL을 복사하여 컴퓨터의 빈 텍스트 파일에 붙여 넣어야하는 미디어 편집 페이지가 열립니다.

다음으로 테마에 다음 코드를 추가해야합니다. functions.php 파일 또는 사이트 특정 플러그인.


함수 wpb_login_logo () {?>
    
<? php}
add_action ( 'login_enqueue_scripts', 'wpb_login_logo');

배경 이미지 URL을 이전에 복사 한 파일 URL로 바꾸는 것을 잊지 마십시오. 다른 CSS 속성을 사용자 정의 로고 이미지와 일치하도록 조정할 수도 있습니다.

이제 WordPress 로그인 페이지를 방문하여 실제 로고를 볼 수 있습니다.

사용자 정의 로고가있는 WordPress 로그인 페이지

이 코드는 WordPress 로고 만 대체합니다. WordPress.org 웹 사이트를 가리키는 로고 링크는 변경되지 않습니다.

이걸 바꾸자.

테마의 functions.php 파일이나 사이트 별 플러그인에 다음 코드를 추가하기 만하면됩니다. 이전에 추가 한 코드 바로 아래에이 코드를 추가 할 수 있습니다.


function wpb_login_logo_url () {
    return home_url ();
}
add_filter ( 'login_headerurl', 'wpb_login_logo_url');

function wpb_login_logo_url_title () {
    '귀하의 사이트 이름 및 정보'를 반환하십시오.
}
add_filter ( 'login_headertitle', 'wpb_login_logo_url_title');

'사이트 이름 및 정보'를 사이트의 실제 이름으로 바꾸는 것을 잊지 마십시오. 이제 로그인 화면의 사용자 정의 로고가 사이트의 홈 페이지를 가리 킵니다.

그게 다야. 이 기사가 귀하의 웹 사이트에 대한 WordPress 로그인 페이지를 만드는 다양한 방법을 배우는 데 도움이되기를 바랍니다. 당신은 또한 우리의 최고의 WordPress 보안 가이드 WordPress 로그인 보안 개선 팁.

이 기사가 마음에 들면, 유튜브 채널 WordPress 비디오 자습서. 우리를 찾을 수도 있습니다. 지저귀다페이스 북.

게시물 사용자 지정 WordPress 로그인 페이지를 만드는 방법 (궁극적 인 가이드) 처음 등장하다 WPBeginner.

Source link

Leave a Comment

+ 88 = 89