Disqus 댓글 API 를 워드프레스에서 구현하는 방법

[ 이글은 2018년 06월 13일에 최종 수정되었습니다. ]
§

[Korbuddy 님을 위해 작성하는 글이기도 하고 Disqus 댓글을 워드프레스 사이트에 접목하는데 어려움을 겪는 분들을 위해 작성하는 글이기도 합니다.]

disqus

워드프레스에서 Disqus 댓글 API 를 사용하는 방법은 매우 간단합니다.

20만개도 넘는 사이트들이 사용하는 Disqus 공식 플러그인을 설치하면 됩니다.

Disqus Comment System 플러그인

99.99% 의 경우, 아무런 문제없이 잘 작동합니다. 하지만, 아주 간혹/정말 정말 드물게 Korbuddy 님 처럼 이해하기 힘든 자잘한 오류가 생기는 경우가 있습니다.

이런경우, Disqus API 를 직접 끌어다 쓸수 있는 방법이 있습니다.

오늘도 Hueman 테마를 기준으로 설명드립니다.

며칠전 Hueman child 테마를 만들때 style.css 와 functions.php 파일을 만들었습니다.

functions.php 파일을 열어봅시다.

그리고 아래 내용의 function 을 작성합니다. ctrl + c, v 합니다.

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>';
}

이런 모습이 되겠죠?

disqus_function

이제 본 테마에 있는 single.php 파일을 한벌 복사해서 이걸 child 테마 폴더에 넣어서 저장해 줍니다.

그리고 이 child 테마에 저장된 single.php 파일을 열어줍니다.

49번째 줄에 보시면

<?php comments_template('/comments.php',true); ?>

라고 써 있는게 보이실 겁니다.

일단 이 함수를 주석처리 합니다. 이렇게.

<?php //comments_template('/comments.php',true); ?>

그후, 바로 아래 disqus function 에 대한 handle 을 이렇게 넣어 줍니다.

<?php disqus_embed('hackyacomkr'); ?>

여기서 ‘hackyacomkr’ 은 제 한국어 disqus 계정 shortname 이고 본인의 disqus 계정 shortname 으로 바꿔주세요.

이런 모습이 되겠죠?

disqus_single

끝.

이제 Disqus 댓글이 잘 로딩 되는지 확인해 봅시다.

네. 잘 뜹니다.

disqus_result

뽀너스 하나.

댓글창은 각 글에 잘 달리는데, Disqus 에 최적화된 최신댓글을 보여주려면 어떻게 해야 하나요?

네. 맞습니다. 최신댓글 플러그인을 쓰시면 됩니다. 찾아보시면 몇개 나옵니다.

이런것도 있고.. https://wordpress.org/plugins/disqus-recent-comments-widget/

그중 맘에 드시는거 하나 쓰시면 됩니다.

그렇지만 이런 것 까지 플러그인을 쓰면 관리자 페이지가 너무 지저분해지죠.

자스 (javascript) 한줄 만 넣으면 최신 댓글이 보여지는 방법을 이제 알려드립니다.

위젯 페이지로 갑니다.

일단 워드프레스 최신 댓글 위젯을 삭제합니다.

delete_default_widget

그후 text 위젯 (text widget) 을 마우스로 잡아서 위로 쭉쭉 끌어다가 sidebar 에 집어 넣습니다.

text_widget

그리고 아래 자스를 ctrl+c,v 해서 붙여 넣습니다.

<script type="text/javascript" src="http://hackyacomkr.disqus.com/recent_comments_widget.js?num_items=5&hide_avatars=0&avatar_size=40&excerpt_length=70"></script>

이렇게.

insert_js

“Save”/저장하기 버튼을 누르시면 끝.

이 작업 하시는데 대략 5분정도 걸리실겁니다. 어려운 작업 아닙니다. 100% Disqus 가 제공하는 API 를 자스 (javascript) 로만 끌어다 구현하는 방식이기 때문에, 워드프레스 설정이나 다른 플러그인 문제로 Disqus 가 오작동할 가능성이 없는 확실한 방법입니다.

avatar_size 는 글 작성자 avatar 크기
items 는 보여주고 싶은 댓글 숫자
excerpt_length 는 요약글 길이

맘에 드시는 수치로 변경하셔서 쓰시면 됩니다.

끝.

하라는 회사일은 안하고 튜토리얼 글이나 쓰고 있고 잘하는 짓이다. ㅠㅠㅠㅠ

마지막으로 Disqus 댓글 다실때, 이미지 첨부, 유튜브 동영상 첨부, 하다못해 예제 코드 까지 (php, js, css, SQL 등등 표시 안되는게 없습니다), 모두다 표기 됩니다.

여러 html 태그들도 사용할 수 있습니다.

https://help.disqus.com/customer/portal/articles/466253-what-html-tags-are-allowed-within-comments-

이모티콘도 넣을 수 있습니다. (html 이모티콘 코드를 그냥 넣으시면 됩니다.)

트위터 링크 같은걸 넣으면 트위터가 표시되기도 하고, 이외에 저도 모르는 기능들이 많을 겁니다. 그 어느 게시판 솔루션 보다도 더 풍부한 기능을 갖고 있습니다.

간략한 개별 게시판도 생성할 수 있습니다. 예를 들자면 쇼핑몰 사이트 구축할때 한국 개발자 분들은 무조건 K보드 같은 게시판 플러그인들을 사용하시거든요.

각 호스팅에서/클라우드에서 별의별 오류가 발생하는 것 말고도 이 K보드가 엄청나게 무겁습니다. 우커머스 보다 더 무겁습니다. P3 profiler 돌려보시면 기절할 겁니다. 별 기능도 없는 주제에 여기에 별도의 DB 까지 생성을 합니다. 사이트 이전하게 되면 극혐이죠. 개인적으로 여러모로 기피해야 할 플러그인 이라 생각합니다. 물론 상황에 따라서 요긴하게 쓰여질 수도 있겠죠.

다시 쇼핑몰 예로 돌아가서, 상품리뷰, 상품발송, 이런 기능 때문에 게시판을 쓰곤 하는데, (뭐랄까요, 한국개발자들 고유의 게시판-centric 한 사고?) 이게 사용자 입장에서 무지 혼동스럽고 UX 측면에서 보면 절대 피해야 하는 구축 방식 입니다.

모든 통지를 하나의 게시판에 몰아넣고 보여주는건데, 이러면 매우 혼동스럽습니다. 상품리뷰 같은것도, 각 상품에 리뷰글이 달려야지, 이게 동떨어져 있는 게시판에 글이 달리면 이게 뭔 황당한 상황?

위 튜토리얼에서 보여드렸듯이 Disqus 댓글창을 쉽게 각 상품에 달아줄 수 있고, 댓글이 달려야 하는 어느 페이지/ 요소에도 쉽게 달아 줄수 있기 때문에, Disqus 가 훨씬 더 좋은 선택입니다. 더 versatile 한 솔루션 인겁니다.

그리고 가장 큰 장점. 이 Disqus 댓글 기능을 보여주기 위해, 제 서버는 아무런 일도 하지 않는다는점!!! 뭐하러 필요도 없이 내 서버를 힘들게 하나요?

사이트 로딩속도도 개선되고, 내 서버 resource 도 줄일 수 있고. 대략 1석4조 정도 됩니다.

*간혹 미국 웹개발 관련 게시판이나 stackoverflow 같은데도 보면 Disqus 때문에 사이트 로딩이 늦어져서 못쓰겠다는 글이 올라오는데, 그럴때 쓰라고 비동기식 로딩 기법이 있는겁니다.

hackya 는

Attorney, front-end developer, digital media artist, WordPress enthusiast, & a father of 4 wonderful children.

Tags: , , ,

카테고리: ,

Ω