블로그를 운영한지 어언 4개월.. 조용해서 좋지만 한편으로는 소통이 너무 없다는 생각이 든다.
워드프레스 블로그 게시물에 사람들이 자신의 네이버 계정으로 자유롭게 댓글달 수 있었으면 좋겠다는 생각이 들었고, 그 방법을 모색했다.
내 능력 부족으로 인터넷 검색은 실패.
하지만 챗봇으로부터는 아래와 같이 안내받았다.
| **1. 워드프레스에 로그인 기능 추가** – 플러그인 사용: WordPress Social Login, Nextend Social Login 등 – 소셜 공급자 중에서 네이버를 선택 **2. 네이버 DB 연동 – 오픈 API 신청** – 네이버 개발자 센터(https://developers.naver.com/)에서 오픈 API 신청 – 로그인 API 키와 시크릿 키 발급 **3. 네이버 로그인 적용** – 다음 코드를 워드프레스 테마의 functions.php 파일에 추가하세요. “`php function naver_login_init() { $naver_client_id = ‘네이버 클라이언트 ID’; $naver_client_secret = ‘네이버 클라이언트 시크릿’; $naver_redirect_uri = ‘네이버 리디렉트 URI’; $wp_auth_callback = home_url(‘/wp-admin/admin-ajax.php?action=naver_login_callback’); $naver_login = new Naver_Login($naver_client_id, $naver_client_secret, $naver_redirect_uri, $wp_auth_callback); $naver_login->init(); } add_action(‘init’, ‘naver_login_init’); function naver_login_callback() { $naver_login = new Naver_Login(); $naver_login->callback(); } add_action(‘wp_ajax_naver_login_callback’, ‘naver_login_callback’); add_action(‘wp_ajax_nopriv_naver_login_callback’, ‘naver_login_callback’); “` – 클래스를 구현하는 Naver_Login.php 파일 추가 **4. 댓글 템플릿에 네이버 로그인 버튼 추가** – 다음 코드를 댓글 템플릿 파일에 추가하세요. “`php <?php if (is_user_logged_in()) { ?> <p>네이버 계정으로 댓글 달기</p> <a href=”<?php echo esc_url($naver_login->get_auth_url()); ?>” class=”naver-login-button”>네이버 계정으로 로그인</a> <?php } ?> “` 이렇게 하면 네이버 계정으로 워드프레스 게시물에 댓글을 달 수 있게 됩니다. |
일단 <**1. 워드프레스에 로그인 기능 추가**> 부터 차근차근 해 보자..
0. dashboard – appearance 에서 로그인/로그아웃 메뉴 추가해 보기 – 기각
Dashboard > Appearance > Menus 탭에서 수동으로 로그인 로그아웃 도메인을 추가해 보았다.
custom links 로 해서 로그인(도메인/wp-login.php)링크와 로그아웃(도메인/wp-login.php?loggedout=true)링크를 만들어 넣으면 끝.
그런데 이 방법은 로그인과 로그아웃 버튼이 동시에 나오기 때문에 적절치 않다.
OceanWP 테마에서 로그인 링크 기능 삽입
로그인/로그아웃은 사실 <기능>이라고 부르기도 어렵고, 그냥 워드프레스 로그인/로그아웃 페이지로 가는 버튼을 추가하는 작업만 해 주면 되는 것이었다. 따라서 나는 내가 사용하는 테마, <OceanWP>를 활용해서 이 버튼을 넣어보기로 했다.
1. OceanWP -> Ocean Extra 플러그인 설치
우선 내가 헤더를 재조정할 수 있도록 헤더를 <Custom Header>로 바꾸었다.
이후 Custom Header Settings 으로 가니 Dashboard > OceanWP > My Library 에서 헤더 템플릿을 직접 만들어서 삽입하란다.
그런데 내 Dashboard 에는 OceanWP 메뉴가 없었다;;;
보통 플러그인을 설치하면 Dashboard에 해당 메뉴가 생기므로, Plugins > OceanWp 를 검색하면 나오는 <Ocean Extra> 플러그인을 다운받아 보았다.
요시!
Dashboard 좌측에 OceanWp 메뉴가 생겼다.
2. 헤더 템플릿 만들기
Dashboard > OceanWP > My Library 에서 헤더 템플릿을 직접 만들었다. 그냥 header 이라고 검색하면 기본적으로 제공하는 템플릿들이 여러 개 있길래, 이 중 깔끔해 보이는 놈으로 골랐다.
4. Custom Header 선택
Customize > Header 에서 내가 만들어 놓은 헤더를 선택했다.
Publish!
잘 적용 된다는 거 확인!
5. Custom Header 조정해서 로그인/로그아웃 링크 만들기
이제 Custom Header 에 로그인 로그아웃 버튼을 추가했다.
그냥 shboard > OceanWP > My Library 저장해 둔 Custom Header 에서 로그인/로그아웃 블록을 하나 추가하였다.
정신 사나운 페이지 메뉴는 제거했다.
(로그인 중) Log Out 버튼 보이는거 확인.
시크릿 모드로 들어가면 Log in 버튼이 Log out 버튼으로 잘 전환되어 나오는거 확인했다.
간단하지만 나 혼자 오래 걸린 헤더 재정비 및 로그인 버튼 삽입 일단 끄읏
계속..
