플랫 UI로 사용자 정의 WordPress 로그인 양식 만들기

최종 업데이트 - 2021년 7월 8일

WordPress는 상당한 시간 동안 사용되었습니다. 블로거를 위한 포털로 시작한 것이 이제 전 세계 전체 웹사이트의 거의 절반을 운영하는 콘텐츠 관리 시스템이 되었습니다. 간단하면서도 직관적인 인터페이스와 사용자 정의 가능한 디자인은 웹사이트를 처음부터 구축하려는 전 세계 웹 개발자와 디자이너에게 최고의 선택이 되었습니다.

WordPress를 사용하는 사람은 누구나 사용자 경험을 향상하고 클릭률을 높이기 위해 세부 사항과 독창성을 관찰합니다. 대부분의 개발자는 주로 테마에만 집중하지만 멤버십 사이트 및 기타 플랫폼의 경우 시작점은 로그인 페이지입니다. 웹사이트에 새로 가입한 회원이 되어 비회원과 비슷한 화면으로 로그인을 하면 그 영향력이 약간 줄어들고 다소 불만족스러운 느낌이 든다고 생각해 보십시오. 그러나 비즈니스의 요구 사항과 미학에 맞게 맞춤화된 WordPress 로그인 페이지는 방문자에게 더 나은 인상을 주고 관심을 끌 수 있습니다.

이를 돕기 위해 웹사이트 디자인 체계와 시각적으로 통합되는 맞춤형 WordPress 로그인 페이지에 스타일을 포함하는 몇 가지 간단한 지침을 요약했습니다.

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

선택한 테마의 function.php 파일에서 소스 코드를 업데이트하여 WordPress 로그인 페이지를 여러 번 변경할 수 있습니다. 그러나 WordPress를 업데이트하면 이러한 변경 사항이 손실됩니다. 이는 로그인 페이지의 테마 스타일시트가 WordPress 테마 설정의 일부가 아니기 때문에 사용자 정의 로그인 페이지를 위한 다른 스타일시트를 생성해야 합니다.

먼저 테마 폴더에 "Login"이라는 폴더를 만들고 이름이 custom-login-style.css인 .txt 파일을 추가합니다 . 그런 다음 로그인 페이지에 고유성을 사용자 지정하고 추가하기 위해 몇 가지 기본적인 수정 작업을 진행할 수 있습니다.

배경 변경

페이지 또는 특정 버튼의 배경색을 업데이트하려면 background-color: #222222 를 선택하고 헥사 코드를 원하는 색상으로 변경합니다. 색상 팔레트를 사용하여 비즈니스 미학을 보완하고 시각적으로 매력적인 색상을 선택하십시오.

또한 로그인 페이지의 배경 이미지를 변경하려면 background-image: url(logo_login.png') 코드 라인을 선택하고 파일 이름인 logo_login.png 를 업데이트된 이미지 파일 URL로 바꾸 십시오. .

고객이 브랜드를 기억하기를 원하는 기업은 WordPress 로고를 맞춤형 로고로 변경할 수 있습니다. 사용자 정의 로고 이미지 파일을 로그인 폴더에 저장한 후 background-image: url('logo_login') 코드에서 파일 이름을 사용자 정의 로고로 바꾸십시오.

패딩 및 여백을 조정하여 로그인 양식 사용자 정의

개발자는 로그인 양식을 조정하여 페이지를 매력적으로 만들고 사이트 모양에 적절하게 맞출 수 있습니다. 버튼의 패딩에서 라벨의 색상 및 글꼴 크기 등에 이르기까지 패딩을 늘리면 텍스트가 압착되어 나타나지 않도록 버튼 내부에 더 많은 공간을 추가할 수 있습니다. 코드 패딩의 숫자를 12px 12px 12px 12px로 늘리면 됩니다. 주변 요소가 꽉 채워지지 않도록 버튼 외부에 더 많은 공간을 만들려면 코드 여백의 여백 공간을 12px 12px 12px 12px로 늘리면 됩니다. 몇 개의 공백을 추가하는 것과 같은 간단한 작업이라도 종합적으로 로그인 페이지의 최종 모양에 영향을 미치고 통합된 것처럼 보이게 할 수 있습니다.

글꼴 크기 및 색상 변경

원하는 크기 로 숫자를 조정하여 font-size: 15px 코드를 사용하여 단락 텍스트, 링크 또는 양식 필드의 글꼴 크기를 변경할 수 있습니다 . 코드 색상: #222222 의 색상을 업데이트하고 색상을 대체하여 글꼴 색상에 대해서도 동일한 작업을 수행할 수 있습니다.

로그인 오류 메시지 수정

인터넷에서 사이버 범죄와 사기가 증가함에 따라 웹 개발자와 비즈니스 소유자는 웹 사이트에서 어떠한 기회도 잡을 수 없으며 기밀 데이터를 잃을 수 있습니다. 사용자가 급하게 잘못된 로그인 자격 증명을 입력하면 기본 오류 메시지가 자동 생성됩니다. 이것은 사용자에게 이 오류를 알리기 위한 것이지만 해커가 로그인 데이터를 시도하고 크랙할 수 있는 틈이 될 수 있습니다. 따라서 해커를 막는 가장 좋은 방법은 function.php 파일의 오류 메시지를 변경하는 것입니다.

결론적으로 CSS에 대한 광범위한 노하우를 가진 사람들은 WordPress 로그인 양식의 스타일 및 사용자 정의를 궁극적으로 제어할 수 있습니다. 그러나 코딩 기술이 부족하고 맞춤 로그인 페이지를 만드는 데 제한이 있다고 해도 걱정하지 마십시오! WordPress 저장소에는 WordPress 웹 개발 프로세스 를 간소화하기 위해 원하는 대로 사용할 수 있는 다양한 플러그인 옵션 이 있으며 가장 인기 있는 플러그인을 나열했습니다.

로그인 사용자 정의 플러그인

로그인 사용자 지정 프로그램은 가장 사용자 친화적인 플러그인 중 하나이며 WordPress 사용자 지정 프로그램에서 바로 변경할 수 있습니다. 간단한 설치 과정을 거친 후 모양 탭 의 WordPress 대시보드 에서 쉽게 액세스할 수 있습니다 . 사용자 지정 시작 을 클릭 하면 원하는 대로 모든 영역을 재설계하는 사용자 지정 화면으로 리디렉션됩니다.

Colorlib 로그인 커스터마이저

Colorlib Login Customizer는 프리미엄 플러그인에서 볼 수 있는 모든 기능을 제공하지만 비용은 무료로 제공하는 풍부하고 유연한 도구입니다. 광범위한 고유 기능으로 인해 사용자를 위한 맞춤형 솔루션을 구축하려는 웹 개발자에게 최고의 선택이 됩니다. 이 또한 WordPress Customizer를 통해 사용자 정의할 수 있으므로 로그인 페이지를 쉽게 탐색하고 리모델링할 수 있습니다.

요약해서 말하자면

결국 로그인 페이지를 사용자 정의하는 방법은 두 가지 이상이며 모든 경험 수준의 개발자가 시도해 볼 수 있습니다. 중요한 것은 사용자 정의 WordPress 로그인 페이지가 실제 사이트의 미학과 일치하고 보완하여 사용자 경험을 향상시킨다는 것입니다. 사이트의 로그인 페이지를 사용자 정의하는 것은 클라이언트를 기쁘게 하고 브랜드 아이덴티티를 구축하는 간단하면서도 효과적인 방법입니다. 단순하게 시작하여 기본을 구축하면 단순한 화면을 멋진 화면으로 바꾸고 고객에게 이전에 본 적이 없는 개인화된 온라인 경험을 제공할 수 있습니다.