콘텐츠에 별점 리뷰를 추가하기
워드프레스 활용 이야기
최근 앱들을 소개하려는 목적의 사이트 제작 요청이 있었는데, 핵심 기능은 각 콘텐츠에 별점 리뷰 기능이 들어가야 한다는 부분이었습니다.(기본 댓글이 있는 자리)
먼저, 예전에 쇼핑몰 상품 콘텐츠에 별점 리뷰를 적용하는 기능을 당시 아는 지식을 다 동원해서 적용했던 기억이 났습니다. 그런데 이걸 응용하자니 다시 구조 파악을 하는 데에도 시간이 걸릴 것 같아(당시 1주일 정도 작업), 혹시나 이후에 관련 플러그인들이 개발되진 않았을까 검색을 해 봤습니다. 그랬더니 이젠 원하던 기능에 평점도 훌륭한 플러그인들이 꽤 검색이 되네요. (※ ex: 구글에서 'wordpress content stars rating'로 검색)
콘텐츠에 별점을 넣기 위해선 워드프레스로는 어떤 방향으로 개발이 되어야 하는지 먼저 요약해 봅니다.
1. 글의 리뷰를 적기 위한 폼(form)이 필요하다. (+ 별점을 선택할 수 있는 필드 추가. 1~5점)
2. 폼을 통해 입력한 데이터를 댓글이 아닌 별도의 포스트 타입 콘텐츠로 저장 ('리뷰'라는 CPT를 추가)
3. 이때 '리뷰'라는 데이터와 평가를 입력한 '글(post)'의 연결고리를 위해 리뷰가 저장될 때 글의 id 정보도 같이 저장
4. 워드프레스의 포스트 타입에 맞게 데이터가 만들어졌으니 이제 원하는 곳에 리뷰들을 표시 및 활용 가능
(각 상품 하단에는 해당 상품의 리뷰 평점 및 리스트 표시. 전체 리뷰를 모아 한 곳에 보여주는 페이지 만들기 등)
이러한 프로세스를 가지고 있으면서 요청받은 사이트에 필요한 딱 최소한의 기능만 구현하고자 했을 때 적합한 플러그인은 제 판단에는 이거였네요.
> Site Reviews (데모 보기)
그럼 빠르게 적용한 순서대로 소개해 보겠습니다.
1. 플러그인 설치
'어드민 > 플러그인' 새 플러그인 추가로 'Site Reviews'를 검색 및 활성화합니다. 그러면, Reviews 메뉴가 보이고, 'Settings'에서 관련 설정이 가능합니다.
활성화 시 'site-review'라는 포스트 타입도 추가가 됩니다. 필요시 카테고리(site-review-category)로 콘텐츠를 묶을 수도 있습니다.
2. 플러그인 설정
크게 일반, 리뷰, 폼 설정이 필요합니다.
- 일반 : 기본 스타일, 승인 필요 여부, 로그인 필요 여부, 알림 등
- 리뷰 : 쌓인 리뷰를 모아 표시되는 모습에 대한 설정
- 폼 : 리뷰 작성 시 입력받을 필드들에 대한 설정
3. 댓글(comments) 대신 리뷰 폼과, 리뷰 목록 표시로 대체
리뷰 목록, 리뷰 평점, 폼을 표시하는 것은 쇼트코드를 이용합니다. (중괄호 내 있는 정보들은 해석되어서 최종 html, js, css 조합으로 표시됨)
'Site Reviews > Help & Support > Shortcodes'를 보면 쇼트코드를 확인할 수 있습니다. 이때 사이트 전체의 리뷰 대신 각 글의 리뷰를 작성하는 것이므로 [ ... assigned_posts="post_id" ]라는 인자값을 이용해서 현재 글의 id를 입력되도록 할 수 있습니다.
쇼트코드가 확인됐으니 이제 기존의 댓글 폼과 댓글 리스트가 표시되는 것 대신 리뷰들, 평점, 폼이 표시되도록 합니다. 부모 테마의 템플릿 파일 중 comments.php 파일을 복사하여 자식 테마의 같은 위치에 파일을 붙여 넣고 기본 글의 댓글을 쇼트코드 구조로 대체합니다.
이제 댓글 사용이 활성화된 글의 아래에는 댓글이 아닌 리뷰가 표시됩니다.
4. 리뷰 데이터의 활용
리뷰를 작성할 때 연결된 글의 메타 정보에는 동시에 리뷰 별점 평균, 별점 랭킹, 평가 개수 등이 같이 저장됩니다. (잘 만들어진 플러그인입니다!)
1) 평점을 다른 원하는 곳에 표시
이제 글의 메타 데이터를 가져다가 제목 아래 별점 정보를 크게 따로 표시하는 용도로 사용할 수 있습니다. 아까는 플러그인에서 제공하는 쇼트코드를 사용해서 php 파일에서 사용했다면, 반대로 내 쇼트코드를 만들어서 텍스트 편집 시 입력할 수도 있습니다. > https://codex.wordpress.org/Shortcode_API
숫자를 별점으로 표시하는 방법은 이 글을 참고했습니다.
> https://www.sitepoint.com/community/t/loop-to-display-rating-stars/44212/7
2) 글 목록을 작성일이 아닌 랭킹 점수를 기준으로 정렬
랭킹 점수는 평점과 함께 리뷰 수, 기타 조건과 연계하여 계산이 되는 것으로 이걸 가지고 글의 리스트를 정렬하면 정확한 랭킹에 따른 글의 리스트를 표시할 수 있게 됩니다. 워드프레스의 글은 기본적으로 작성한 날짜의 역순 또는 그 반대로 표시가 됩니다. 이걸 랭킹 점수로 순서를 바꾸려면 어찌할까요? 이런 경우를 위해 워드프레스는 'pre_get_posts'라는 훅(hook)을 제공합니다. 필요시 글 목록을 바꿀 수 있는 방법을 제공하는 것이죠.
자식 테마의 functions.php 파일에 랭킹점수를 기본으로 목록을 정렬시키는 코드를 추가합니다. (※ 참고했던 글)
그러면, 이제 글 목록들이 기본적으로 랭킹점수를 기준으로 역순으로 표시가 될 수 있게 됩니다.
테스트용 사이트
> https://oks-dev.tk/appreview/
(해외 호스팅이라 로딩이 느릴 수 있습니다)
워드프레스에서 제공하는 포스트 타입과 연결 고리를 사용하면, 글과 리뷰라는 콘텐츠를 서로 연결하여 표시를 할 수 있고, 이때 저장된 정보를 가지고 다시 콘텐츠를 표시하거나 정렬시키는 데 사용할 수 있습니다. 이때 잘 만들어진 플러그인이 있다면 노력과 시간을 상당 부분 절약할 수 있습니다.
댓글을 리뷰로 대체, 끝.
