리뷰 글을 쓰는데 바람의 불편 호소, 별점 리뷰에 사용할 별 반개 특수 문자가 없다는 것!
그러한 애송 바람의 불편을 해결해주기 위해 이런저런 방법을 고뇌한 결과, 어떻게든 만들어냈다. 그 결과가 지난 번에 쓴 글이다.
별점 리뷰에 필요한 별 반개가 특수문자에 없는 이유
별 반개(⯪)는 이미 특수문자가 존재한다.
그런데, 요즘 웹서핑을 많이하는 안드로이드나 IOS같은 모바일 시스템에서는 글자가 깨져보인다.
그 이유가 대부분의 모바일 시스템 글꼴에 별 반개짜리 유니코드가 포함되지 않아서 깨지는 형태로 보인다고 한다.
나는 블로그를 주로 PC로 관리하고, 바람은 폰으로 관리하다보니 나는 되는데 바람은 안되는 거였다.
그래서 다른 사람들의 글들을 찾아보니 별 반개는 이미지로 만들어서 표현한다고 한다.
워드프레스에 구현된 별점 평가
분명 별점을 통한 리뷰나 평가는 수요가 많은데, 워드프레스에도 구현이 되어있을 것 같다는 생각에 여기서는 어떻게 표현하고 있는지를 먼저 알아봤다.
아니나 다를까 별점 평가 전용 블럭을 만들어 두고 있었다.
이렇게…
그럼 해결인데, 무엇이 문제냐 하면
블럭으로 지정되어있어서 텍스트 사이에 넣을 수가 없다!
바람이 별점 리뷰를 남기는 방식으로는 텍스트 사이사이에 별점을 넣어야하는데…
해결 방법!!
워드프레스에서 기본으로 구현되어있는 방법이 내가 원하는게 아닐 때 선택할 수 있는 방법 두 가지
- 원하는걸 구현할 수 있는 플러그인을 설치해서 사용하기
- 직접 코드 짜서 만들어버리기
나는 그냥 코드 짜서 만들어버리기로 했다.
뭔가 플러그인을 찾아보고 뭐가 적당하겠다 이런 생각을 거친건 아니고,
플러그인이 내가 딱 원하는 대로 구현된걸 찾기가 귀찮았고, 뭔가 코드가 너무 복잡하지도 않을 것 같아서 해볼만 할 것 같았다.
워드프레스에서 텍스트 안에 원하는걸 삽입할 수 있는 것 중 하나가 이미지다.
인라인 이미지라는 이름으로 잘 구현되어있는 것 같다.
그래서 기본적인 구현 방법은 인라인 이미지로 별점을 삽입하겠다는 계획이다.
그럼 이미지로 별점을 삽입하는데, 여기서도 방법이 두가지로 나뉜다.
- 이미지를 별 1개, 별 0.5개, 별 0개 이렇게 세 개의 이미지만 만들어두고 매 별점마다 총 5개의 이미지를 인라인으로 삽입하는 방법
- 이미지를 별점 0점~5점까지 총 11개의 이미지를 만들어두고 매 별점마다 해당하는 한 개의 이미지를 인라인으로 삽입하는 방법
여기서 코드가 길어지는 것 보다는 이미지 호출 횟수를 줄이는 것이 로딩 속도에 유리하겠다 싶어서 2번의 방법을 선택했다.
사실 첫번째 방법을 코드로 다 짠 뒤에 든 생각이라서 코드는 남아있다..ㅎ
이 방법의 장점은 별점의 한계가 없다는거다!
5점 만점 기준으로 코드를 짰지만, 7점 만점, 10점 만점 등 원하는 최대 점수에 대해서 코드 한 줄만 수정하면 바로 적용이 된다는거다!
(이 코드가 필요하신 분이 계시다면 댓글로 남겨주세요)
그리고 글 중간에 별점이 이미지로 들어가는데 그 크기가 글과 따로 놀면 안되기 때문에 세로 높이를 글의 서식을 따라가게 했다.
그리고 무엇보다 아무리 잘 만들었다고 해도 쓰기가 불편하면 잘 안쓰게 되기 마련!
바람이 쓰기 편하게 어떤 명령어로 하는게 편할지 얘기해서 [rating=별점] 형태로 결정!
그래서 지금 여기에서는 [rating=x.x] (x.x=3.5) 라고 입력하면 
이렇게 나온다.
더 작은 글씨로 별점을 입력하면 따라서 나오고
더 큰 글씨로 별점을 입력하면 따라서 나온다!
그런데 하나 아쉬운 점은 이미지로 삽입하는 방식이다 보니까 색깔 까지 바꾸기는 쉽지 않다.
별점을 구현하기 위한 코드도 이 글에 같이 남기려고 했는데 너무 길어져서 다음 글에 남겨야겠다ㅎㅎ
회사에서 일하기 싫어서 글을 썼는데, 이제 일 해야지…
별점 명령어 쇼트 코드는 아래 게시글을 확인해주세요!
2 thoughts on “별점 리뷰 명령어를 추가하자! (별 반개 포함!!) (1)”