이전 글에서 우커머스 쇼핑몰의 상세 페이지에 디스커스 댓글 시스템을 추가하는 방법을 알아봤는데 이 방법은 리뷰 탭에 우커머스의 리뷰 기능을 제거하고 이곳에 디스커스를 추가했습니다. 그래서 탭의 제목에는 리뷰라고 돼있지만 리뷰의 숫자가 계속 0으로 나타나는 단점이 있습니다. 디스커스의 댓글 수를 우커머스 리뷰 숫자로 가져오는 방법을 제공하지 않고 있기 때문에 발생하는 문제입니다.
그래서 우커머스의 리뷰 기능을 제거한 상태에서 디스커스의 댓글 시스템을 탭에 배치하지 않고 탭의 상단이나 하단에 배치할 수도 있습니다. 또한 우커머스 리뷰 기능은 그대로 유지하고 디스커스를 추가할 수도 있습니다. 이번 글에서는 이런 방법을 알아보겠습니다.
워드프레스 쇼핑몰 만들기 책에서 우커머스의 템플릿 구조에 대해 파악하는 방법을 알아봤는데 이 과정을 숙지하신 분들은 방법을 충분히 알 수 있을 것입니다. 즉 디스커스 댓글을 어느 곳에 배치할지 자유롭게 선택할 수 있다는 것입니다.
이전 글에서 woocommerce 폴더 안의 single-product-reviews.php 파일에서 내용을 제거하고 <?php disqus_embed('kopress'); ?>를 추가했습니다. 이 코드를 제거하고 다른 곳에 붙여넣으면 됩니다.
woocommerce 폴더에서 content-single-product.php 파일을 열고 위에서 제거한 <?php disqus_embed('kopress'); ?>를 추가합니다. 위치는 탭을 관장하는 do_action( 'woocommerce_after_single_product_summary' ); 이전이나 이후에 넣으면 됩니다. 코드를 추가한 다음 div 태그로 감싸고 클래스 선택자를 추가해서 스타일을 설정합니다. 여기서는 편의상 인라인 스타일시트를 사용했습니다. 제목으로 "리뷰"나 "댓글"이라고 추가할 수도 있습니다.
<div class="discus" style="margin:20px 0;padding:10px 0;clear:both;border-top:1px solid #ddd;border-bottom:1px solid #ddd;"> <h3 style="border-bottom:1px solid #ddd;">댓글</h3> <?php disqus_embed('kopress'); ?> </div>
single-product-reviews.php 파일에서 <?php disqus_embed('kopress'); ?>를 제거했으므로 이 파일을 그대로 두면 우커머스 리뷰탭만 나타나고 내용은 나오지 않으니 원상복구하려면 이 파일을 제거하면 됩니다. 우커머스 플러그인에 같은 파일이 있으니 이것을 사용하게 됩니다. 리뷰 탭 자체를 나타나지 않게 하려면 다음의 코드를 functions.php 파일에 추가합니다.
add_filter( 'woocommerce_product_tabs', 'sb_woo_remove_reviews_tab', 98); function sb_woo_remove_reviews_tab($tabs) { unset($tabs['reviews']); return $tabs; }
탭 아래 배치한 경우입니다.
탭 위에 배치하면 위와 같고 사이트에서는 아래처럼 나옵니다.
http://kopress.org/?product=woo-ninja-2