플러그인 소개
WP Social Login 플러그인은 한 때 대표적인 워드프레스의 소셜 로그인 플러그인이었습니다. 개발자가 더이상의 유지관리를 하지 않은 이후 여러 사용자에 의해 코드가 변경되어 왔지만 현재 인터넷상에 존재하는 자료들은 더이상 네이버와 카카오를 통한 소셜 로그인 설정에 문제가 발생합니다.
Jetcraft에서 다운로드 받은 버전은 네이버와 카카오에 대한 어댑터 문제를 해결하고, 아이콘, 레이아웃, 추가 진행 페이지에 대한 레이아웃 그리고 부자연스럽던 한글화 부분이 수정되었습니다.
이 메뉴얼은 블로그 게시물의 연장이므로 ‘워드프레스에서 네이버와 카카오 소셜 로그인을 추가하는 방법’을 먼저 읽어보시기 바랍니다.
플러그인 사용시 유의사항
Jetcraft는 사이트 오너가 Jetcraft에 너무 많은 의존성을 가지는 것을 원치 않기에 자체적인 플러그인이나 위젯은 제작하지 않습니다. 하지만 보통 많은 소셜 로그인 플러그인에서 네이버나 카카오와 같은 국내 서비스 제공자에 대한 어댑터를 제공하지 않는 경우가 많고, 제공한다해도 매우 고가에 책정되어 있습니다.
Jetcraft에서 제공하는 플러그인은 유료 플러그인 구입에 대한 부담을 줄일 수 있지만 플러그인의 유지보수 및 보안문제 해결을 포함한 일체의 책임을 지지 않습니다. 더불어, 아래의 사항에 유의해 주십시오.
- 워드프레스 6.7 이상, PHP 버전 8.0 이상에서 정상작동을 확인했습니다.
- 네이버와 카카오 서비스 제공자에 대한 정상적인 로그인 및 회원가입 진행이 확인되었습니다.
- 이 플러그인은 네이버와 카카오 이외의 제공자(구글 혹은 페이스북)에 대한 어댑터는 수정하지 않았기 때문에 제대로 작동하지 않을 수 있습니다. 다른 외부 제공자는 여러 소셜 플러그인에서 이미 제공하기 때문에 해당 플러그인을 사용하십시오.
- 이 플러그인은 기존에 설치 된
WP Social Login플러그인을 업데이트 혹은 대체합니다. 이미 사용중이던 플러그인은 반드시 백업해 주세요. - 이 플러그인 사용으로 인해 발생하는 어떠한 문제도 Jetcraft는 책임지지 않으며, 유지보수에 대한 그 어떤 보장도 없습니다.
- Super Socializer는 현재 카카오 어댑터를 제공합니다. 국내 서비스 중 카카오 소셜 로그인만 필요하다면 이 플러그인이 대안이 될 수 있습니다. 향후 네이버에 대한 어댑터도 제공할 여지가 있으므로 눈여겨 두십시오.
플러그인의 설치
워드프레스에서 일반적인 플러그인 수동설치 방법대로 진행합니다. 아래 두 가지 방법 중 하나를 이용하세요.
- 다운로드 받은 압축파일의 압축을 풀고 /wp-content/plugins 디렉토리에 업로드.
- 워드프레스 관리자 메뉴 → Plugins → Add New Plugin → Upload Plugin 버튼을 클릭하여 다운로드 받은 압축파일 선택.
서비스 제공자 설정
워드프레스 관리자 메뉴 → Settings → WP Social Login에서 서비스 제공자에 대한 설정을 진행합니다. 네이버와 카카오에 대한 설정이 기본으로 나타납니다. 각 제공자는 Application ID와 Application Secret 키가 필요하며, 해당 아이디와 키는 각각 네이버, 카카오 개발자 센터의 개인 계정에서 받을 수 있습니다.
아래 링크의 문서들이 잘 설명하고 있으므로 참고해주세요.
해당 서비스 설정에서 Callback URL 필드에 넣을 값은, 플러그인의 Application ID와 Application Secret 필드 우측의 Where do I get this info?를 클릭하면 나타나는 설명문의 3번 항목에서 제공하는 url 주소를 복사하여 붙여 넣습니다. https://yourdomain.com/wp-content/plugins/wordpress-social-login/hybridauth/callbacks/kakao.php와 같은 형식입니다.
쇼트코드 삽입
소셜 로그인 버튼이 표시될 곳에 쇼트코드를 삽입합니다. 워드프레스 회원가입 혹은 로그인 페이지에 위치하는 것이 일반적입니다. 아래는 Ultimate Member 플러그인을 사용하는 경우의 예시입니다. 엘리멘터를 사용하는 경우, Shortcode Widget을 사용합니다.
- 워드프레스 관리자 메뉴 → Ultimate Member → Forms에서 로그인 혹은 회원가입 폼 편집화면 진입.
- 이미 존재는 필드 하단의 +아이콘(Add Field)을 눌러 Shorcode 필드를 선택.
Enter Shortcode필드에[wordpress_social_login]입력.
Elementor 빌더와 Jetcraft™를 사용하는 경우
만일 웹 사이트에서 Elementor Pro 버전과 Ultimate Member, Jetcraft 초기화 코드를 사용하고 있는 경우 아래와 같은 부분이 추가로 반영됩니다.
- 소셜 로그인 버튼이 기본 32×32 픽셀 크기를 사용하지 않고 많은 웹 사이트에서 일반적으로 사용하는 형태의 버튼으로 변경됩니다.
- ‘또는’과 같은 로그인 방식 연결문구의 스타일이 소셜 버튼 디자인에 맞게 변경됩니다.
자세한 내용은 #페이지 – 로그인 및 회원가입 매뉴얼을 참고하세요.
Jetcraft의 컬러셋을 사용하고 싶다면?
소셜 계정과 워드프레스 계정을 연결할 때 나타나는 화면에 Jetcraft의 컬러셋이나 모서리 처리를 사용하고 싶다면 functions.php 파일 혹은 Code Snippets 등의 플러그인에서 아래 코드를 추가합니다.
컬러셋의 색상을 변경하고 싶다면?
이미 정의되어 있는 Jetcraft의 컬러셋을 다른 색으로 변경하려면 functions.php 파일 혹은 Code Snippets 등의 플러그인에서 아래 코드를 추가합니다.
알려진 문제점
WP Social Login의 한국어에 대한 현지화를 위해 Loco Translate 플러그인을 사용할 때, Custom 위치에 별도의 사본을 두어 수정하면 페이지 에러가 발생할 수 있습니다. 이 에러는 다른 여러 플러그인에서도 나타나는 현상입니다. 만일 에러가 발생한다면 사본을 만들지 않고 원본의 내용을 수정해야 합니다.
하지만 원본을 수정하면 플러그인을 삭제하거나 업데이트 되었을 때 해당 번역 파일이 사라질 수 있으니 백업을 해두어야 합니다. 기본적으로 중요한 한국어 문장에 대한 현지화는 Jetcraft에서 이미 진행해 두었으니 되도록 수정하지 마십시오.
템플릿 CSS 스타일 수정
- Jetcraft의 템플릿은 공통된 방식으로 CSS 스타일을 수정할 수 있습니다. 자세한 내용은 템플릿의 스타일을 관리하는 방법 게시물을 참고해 주세요.
- 엘리멘터가 CSS를 처리하는 원리에 대해 이해하면 템플릿과 위젯의 CSS를 보다 장기적의고 체계적으로 관리할 수 있습니다. 엘리멘터 사용에 익숙해 졌다면 엘리멘터 위젯과 템플릿을 효과적으로 관리하는 법 블로그 게시물을 통해 보다 효율적으로 스타일을 관리하세요.