어제 독자분이 우커머스 쇼핑몰 상세 페이지의 리뷰 란에 이미지를 올릴 수 있는 방법이 있을까 문의를 하셔서 구글링을 해봤더니 이런 아이디어를 낸 분이 있더군요. 또 어떤 분은 리뷰가 아닌 댓글 시스템을 추가할 수 있는 방법이 있는지에 관한 내용도 구글에 있었으며 해결 방법도 있었습니다. 사람들의 생각은 참 여러 가지입니다. 뭔가 아이디어를 내면 누군가 해결하고 구글은 이런 모든 정보의 산실이죠. 사실 "워드프레스 쇼핑몰 만들기"라는 책도 구글링 반, 제 아이디어 반의 결과물이라 해도 과언이 아닙니다. 그러니 영어 잘 하고 검색 능력만 있으면 웹 개발은 쉽다는 얘기가 됩니다.
해결 방법은 디스커스(Disqus)라는 댓글 시스템을 이용하는 것입니다. 디스커스 댓글 시스템은 전세계적으로 가장 많이 쓰이는 댓글 시스템입니다. 워드프레스나 티스토리와 같은 콘텐츠 매니지먼트 시스템에 이미 사용되고 있는 댓글 시스템을 덮어씌울 수 있고 이미지나 동영상도 첨부할 수 있으며 광고까지 노출시킬 수 있어서 수익을 창출할 수도 있습니다. 얼마 전까지 한글 번역이 완료가 안돼서 설정시 Korean을 선택할 수 없었지만 이제 완료해서 잘 나타납니다.
독자님의 아이디어에 적합한 것이 이 디스커스라는 댓글 시스템입니다. 그래서 우커머스로 만들어진 워드프레스 쇼핑몰의 리뷰 탭에 디스커스를 추가해 보겠습니다.
우선 아래 링크의 글을 참고해서 디스커스에 가입하고 계정 설정을 합니다. 이미 가입을 하고 다른 사이트를 연결해 사용했다면 사이트를 추가할 수 있습니다. 여기서 중요한 것은 사이트 단축 이름(Short name)입니다.
http://martian36.tistory.com/1266
이미 티스토리를 위한 디스커스 댓글 시스템이 있지만 우커머스 쇼핑몰 데모 사이트에 추가하기 위해 Add new site를 이용해서 kopress를 추가했습니다. 이것이 사이트 이름이자 단축이름입니다.
디스커스 댓글 시스템은 실제 사이트에서 작동하니 웹호스팅의 사이트 파일을 편집하겠습니다. 간편하게 파일 편집을 하려면 파일질라를 이용합니다. 워드프레스 내장 편집기를 사용할 수도 있는데 테마의 서브 디렉토리의 파일은 열 수가 없습니다.
파일질라의 편집-설정을 클릭하면 창이 나옵니다. 파일편집을 선택하고 내 컴퓨터의 편집기를 선택합니다. 테마의 functions.php 파일을 열고 하단에 아래의 코드를 추가합니다. 워드프레스에 디스커스 댓글 시스템을 수동으로 사용하는 설정입니다. 디스커스 플러그인을 사용하지 않습니다.
function disqus_embed($disqus_shortname) {
global $post;
wp_enqueue_script('disqus_embed','http://'.$disqus_shortname.'.disqus.com/embed.js');
echo '<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = "'.$disqus_shortname.'";
var disqus_title = "'.$post->post_title.'";
var disqus_url = "'.get_permalink($post->ID).'";
var disqus_identifier = "'.$disqus_shortname.'-'.$post->ID.'";
</script>';
}
저장한 다음 파일질라에 와서 "파일이 변경됨" 메시지 창을 닫은 다음 이번에는 우커머스 디렉토리를 열고 single-product-reviews.php 파일을 편집기에 열고 모든 내용을 삭제하고 다음의 코드를 추가한 다음 저장합니다.
<?php disqus_embed('kopress'); ?>
괄호 안의 변수로 들어갈 이름은 단축 이름입니다. 저장하고 다시 파일질라로 와서 위 "파일이 변경됨" 창을 닫습니다. 파일질라를 이용해서 파일을 편집할 경우 위 창을 닫지 않으면 적용이 안됩니다.
쇼핑몰 상세 페이지에서 리뷰 탭을 선택하면 디스커스 댓글 시스템이 나타납니다. 이미지를 올리니 잘 나타납니다. 테스트 해보세요.