워드프레스에 별점 리뷰 명령어를 추가하자! (별 반개 포함!!) (2)

지난번 글에 이어서 워드프레스에 별점 리뷰용 명령어를 추가해보자
추가하려는 명령어는 처럼 글 사이에 인라인 이미지로 추가하는 방법이다.

젯팩 플러그인을 설치하면 별점 평가 블록이 제공되지만 1편에서도 언급했다시피 별도의 블록으로 지정되어서 한 줄을 통째로 차지하기 때문에 바람의 바람대로 되지 않는다.

그래서 별점 0점부터 11점까지 총 11개의 이미지를 등록해두고 명령어를 입력하면 인라인으로 호출하는 코드를 짜서 사용 중이다.
그리고 인라인으로 삽입되는 텍스트의 크기에 맞춰서 사이즈도 조절되게 해놨다.

1. 별점 이미지 준비

---

먼저 서버에 저장해둘 이미지를 준비해야한다.
5점 만점 기준으로 0.5점 단위로 총 11개의 이미지를 워드프레스 미디어 라이브러리에 업로드 해뒀다.

이렇게 총 11개의 이미지를 만들어서 미디어 라이브러리에 업로드 해두고, 그 경로를 잘 기억해야한다.

이미지를 호출할 경로를 정확히 입력해야하기 때문에 URL을 잘 확인해야한다.

그리고 등록하는 이미지 파일명도 잘 기억해둬야한다.
파일명을 기준으로 이미지를 호출하기 때문에 정확한 파일명을 알아야한다.
나는 star_rating_0.0.png ~ star_rating_5.0.png 까지로 지정해뒀다.

2. 별점 입력용 쇼트 코드 작성

---

우선 코드를 실행할 명령어를 결정해야 한다.
나는 바람과 이야기해서 어떻게 하는게 별점 입력할 때 안까먹고 잘 써먹을 수 있겠냐고 이야기해서 결정했다.

우리의 코드 명령어는 [rating=X.X] !!
X.X에 별점을 입력하면 그 별점에 맞는 이미지가 호출된다.
4.5점은 처럼

입력해야할 쇼트 코드는 아래와 같다.

function render_star_rating_single_image_shortcode($content) {
    return preg_replace_callback('/\[rating=([\d\.]+)\]/', function ($matches) {
        $score = round(floatval($matches[1]) * 2) / 2;  // 0.5 단위로 반올림
        $score = max(0, min(5, $score)); // 범위 제한 (0.0 ~ 5.0)

        $filename = 'star_rating_' . number_format($score, 1) . '.png';
        $url = '별점 이미지를 삽입한 URL에서 확인한 경로' . $filename;

        return '<img src="' . esc_url($url) . '" alt="별점 ' . $score . '점" style="height:1em; vertical-align:middle;">';
    }, $content);
}
add_filter('the_content', 'render_star_rating_single_image_shortcode');

굵은 글씨로 해둔 부분은 각자의 셋팅에 따라서 입력하면 된다.

• $filename 부분에서 ‘star_rating_‘은 파일 명에서 점수를 제외한 부분, ‘.png‘는 업로드한 이미지 파일의 확장자명
• $url 부분에서 ‘별점 이미지를 삽입한 URL에서 확인한 경로‘는 이미지를 업로드한 파일의 경로 (경로에서 파일명은 빼고 입력!!)

코드 동작 순서는 이렇다.

1. 입력한 별점이 0.5 단위이겠지만, 혹시나 조금 세분화 했을 때 에러가 나지 않게 하도록 반올림 처리해서 0.5 단위로 맞춰준다.
2. 그렇게 재가공 별점의 텍스트를 별점 이미지 파일명인 star_rating_x.x.png 의 x.x로 대체해서 별점에 맞는 파일 명을 결정한다.
3. 그런 다음 파일이 있는 경로와 파일명을 이용해서 해당 경로와 해당 파일명을 갖는 이미지를 인라인 이미지로 호출한다.
4. 마지막으로는 별점이 삽입된 글의 크기에 맞도록 이미지 크기를 조절한다.
5. 이미지 로딩에 오류가 있을 경우에는 대체 텍스트로 ‘별점 X.X점’으로 표기될 거다.

3. 쇼트 코드 추가하기

---

당연한 얘기지만 2번에서 작성한 코드를 워드프레스에 삽입해야 작동한다.
워드프레스에서 쇼트 코드는 php 파일을 편집해서 추가해야한다.

php 파일은 워드프레스가 설치된 경로를 따라 파일탐색기에서 직접 php 파일을 수정할 수도 있고, 워드프레스 관리자 페이지에서 수정할 수도 있다.

여기서는 워드프레스 관리자 페이지에서 수정하는게 심플해서 관리자 페이지를 이용한다.

나는 언어를 한글로 설정해서 그냥 한글 메뉴를 바탕으로 설명하겠다.

관리자 페이지에서
모양>테마 파일 편집기로 들어가면 오른쪽여 여러 php 파일이 나타난다.
여기서 function.php 파일에 추가하려고 하는 쇼트 코드를 삽입하고 파일 업데이트를 하면 입력한 코드가 작동한다.

나는 나중에라도 입력했던 코드를 수정하고 싶어질 때 알아보기 쉽게 각주로 이름과 추가한 날짜를 표기한다.

이렇게 쇼트 코드를 입력해서 업데이트 했다면 코드가 잘 작동할 것이다.

워드프레스에서 글을 쓸 때 텍스트 중간 어디서든 [rating=X.X]을 입력하면 X.X에 맞는 별점이 추가될 거다!

다만, 글을 쓸 때는 명령어 형태 그대로 나타나고, 글을 게시했을 때 읽는 페이지에서 별점이 표기된다.

예를 들면 별점 3점을 남기고 싶을 때, 이라고 입력하면 글을 쓰는 페이지에서는

처럼 나타나지만, 글을 게시하면

이렇게 보일 것이다!

---

워드프레스에서 리뷰나 평가를 할 때 별점을 많이 사용할 것 같은데, 바람처럼 텍스트 중간 중간 별점을 남기고 싶을 때는 이 쇼트 코드를 사용하면 상당히 편리하게 남길 수 있다!

별점 만점이 5점이 아니라 그 이상 또는 그 이하 원하는 만큼 지정하고 싶다면 또 다른 방법이 있다. 그건 향후에 요청이 있다면 정리해보겠다.

그 코드는 이미지를 빈 별, 반절만 채워진 별, 꽉 채워진 별 이렇게 새 개만 등록하고 코드에서 별점에 맞게 각각의 이미지를 호출하는 방식이다.

이렇게 하면 이미지 개수는 줄지만 별점을 한 번 남길 때 마다 별 개수만큼의 이미지를 호출하기 때문에 뭔가 속도가 느려질 것 같다.

그런데 5점 만점이 아닐 때 만점을 특정하지 않고 원하는 만큼 주고 싶을 때는 훨씬 편리하긴 하다.

이 코드들을 참고하는 글을 쓰거나 하실 때는 출처와 댓글을 남겨주시면 좋을 것 같아요.
그래야 뿌듯함도 생기고 재미가 있으니까…ㅎ