워드프레스 케이보드 오션 별점 스킨 게시판 커스텀 작업

케이보드 오션 별점 스킨은 워드프레스 제품 및 이용 후기 등 리뷰 작성용 게시판을 위한 스킨으로 Cosmosfarm 스토어에서 판매되고 있습니다.

사용자들의 제품 후기 게시판을 필요한 경우 이 케이보드 스킨을 고려할 수 있습니다. Cosmosfarm 스토어에는 이외에도 다양한 케이보드용 스킨이 판매되고 있습니다.

KBoard 오션 별점 게시판의 레이아웃을 변경하고 몇 가지 소소한 기능을 적용하는 커스텀 작업을 진행했습니다. 케이보드 스킨을 편집하는 방법을 알면 커스터마이징하는 데 도움이 될 것입니다.

워드프레스 케이보드 오션 별점 스킨 게시판 커스텀 작업

케이보드의 오션 별점 게시판은 아래와 같습니다.

이대로 사용해도 되지만, 클라이언트께서 레이아웃을 바꾸기를 원하셨습니다.

PC에서는 2열로 표시되도록 하고 썸네일 크기를 70x70px에서 130x130px(모바일에서는 100x100px)로 변경하였습니다. 이외에도 글자 크기, 글자색 등도 변경했고, 내용이 한 줄로 표시되었는데, 이것을 두 줄로 표시되도록 바꾸었습니다. 또한, 이름의 경우 첫 자만 표시되고 나머지는 별표(*)로 표시되도록 설정했습니다(예: 홍길동 → 홍**).

일부 기능은 스킨을 직접 편집해야 했습니다. 스킨 편집을 위해서는 FTP/SFTP에 접속해야 합니다. 고객사 워드프레스 사이트가 고대디에서 호스팅되고 있었는데, SFTP를 활성화하여 작업했습니다. 파일 브라우저를 사용하는 것도 가능하지만 편집 작업이 잦거나 파일을 업로드/다운로드하는 작업이 많을 경우에는 불편한 것 같습니다.

해외호스팅 고대디(GoDaddy): 워드프레스 자동 로그인 & 파일 브라우저 사용하기

케이보드 스킨 파일의 구조를 알면 어느 파일을 수정해야 하는지를 대강 알 수 있습니다.

게시글이 표시되는 게시판은 list.php 파일에서 제어됩니다. 게시글을 클릭했을 때 이동하여 표시되는 콘텐츠는 document.php 파일과 관련이 됩니다. 그리고 게시판 글을 작성하는 화면은 editor.php 파일에서 제어됩니다.

홈페이지(전면 페이지)에도 제품 리뷰를 표시했는데, 게시글을 클릭하면 홈페이지에서 게시판이 있는 부분에 게시글 내용이 표시되어 원하는 대로 작동하지 않았습니다. 홈페이지에서 리뷰 글을 클릭하면 리뷰 페이지에서 해당 글 내용이 표시되기를 원했습니다. 이를 위해 자바스크립트를 이용하여 전면 페이지에서 게시판 글을 클릭하면 리뷰 페이지로 이동하도록 만들었습니다.

예를 들어, 다음과 같은 자바스크립트 코드로 이와 같이 작동하도록 할 수 있습니다.

document.addEventListener("DOMContentLoaded", function() {
    if (document.body.classList.contains("home")) { // body에 .home 클래스가 있는지 확인
        setTimeout(function() {
            document.querySelectorAll('a[href^="/?mod="]').forEach(function(link) {
                let currentHref = link.getAttribute("href");
                let updatedHref = currentHref.replace("/?mod=", "/제품후기/?mod=");
                link.setAttribute("href", updatedHref);
            });
        }, 1000); // 1초(1000ms) 지연 적용
    }
});

처음에는 클라이언트가 요구하는 사항이 복잡하게 보여 시간이 걸릴 것 같았지만, 생각보다 빨리 작업이 마무리되었습니다.😄

케이보드 오션 별점 스킨은 Cosmosfarm 스토어에서 구입할 수 있습니다.

스킨은 1개 사이트에 적용이 가능하고 보증기간은 구입일로부터 1년이라고 합니다. 아마 1년 동안 지원과 업데이트가 제공될 것 같습니다.

워드프레스 커스텀 작업이나 워드프레스 또는 웹호스팅 관련 문제(예: 멀웨어, 500 서버 내부 오류 등등) 해결에 어려움을 겪는 경우 여기에서 서비스(유료)를 의뢰하실 수 있습니다.

참고

https://avada.tistory.com/3458

블루호스트에서 멀웨어 치료 및 클라우드웨이즈로 워드프레스 이전 작업

https://avada.tistory.com/2897

엘리멘터 무료 버전 vs. 프로 버전 비교

https://avada.tistory.com/3417

아바다 테마가 설치된 워드프레스 사이트에서 멀웨어 (악성코드) 제거 작업