Disqus 댓글 시스템 워드프레스에 보기좋게 설치하는 법

Disqus(디스커스) 댓글 시스템은 웹사이트나 블로그에 기본 댓글 기능이 없더라도 편리하게 댓글을 주고받을 수 있도록 해주는 댓글 기능을 추가합니다.

워드프레스 기존 환경에 통합하여 사용할 수 있기 때문에 연속성을 유지할 수 있고, 사용중에는 작성한 댓글이 워드프레스 서버에도 백업되므로 중간에 사용을 중지하고 다시 기본 댓글 시스템으로 돌아간다고 하더라도 유실되는 자료가 없습니다.

Disqus 댓글 적용, 장점은?

제가 워드프레스를 멀티사이트로 운영해서 그런지 최근 네이티브 댓글 시스템에 오류가 생겼는데 어디를 만져야 할까 고민하다가 다시 디스커스를 사용해보기로 했습니다.

  1. 댓글 관리 부담 감소 : 외부 서비스를 통으로 삽입하는 형태이니까 유지보수 부담이 줄어듭니다. 홈페이지에 동영상을 직접 올려서 보여주는 것과 유튜브를 끼워넣어서 보여주는 것의 차이랄까요. 댓글 호스팅 주체가 바뀌면 확실히 편해지는 부분이 있습니다. 또한 향후 다른 사이트로 이사를 간다든지 해도 댓글의 보관/이동/설치가 간편합니다.
  2. SEO 유리함 : 댓글 하나하나가 고유주소를 가지고 널리널리 유포될 가능성과, 그러한 댓글의 내용을 타고넘어 내가 쓴 본문으로 유입되는 방문 확률이 증가합니다. 내 블로그의 댓글에도 좋은 컨텐츠가 많다면 방문자 증가에 도움이 될 것입니다.
  3. 개인적으로는 이메일 알림 시스템이 편리하더군요. 워드프레스 앱에서도 댓글 관리가 어려운 건 아니지만, 개별 댓글이 이메일로 날라오면 그냥 메일 앱에서 답장을 눌러 바로 답할 수 있어 좋습니다. 내가 보낸 답장은 댓글 쓴 사람에게 답변으로 달리게 되고 웹에도 노출됩니다.

Disqus 사용에 따른 불편은?

  1. 결국 원래 있던 시스템에 뭔가 추가 설치하는 것이므로 사이트는 무거워지고, 페이지 로딩 속도는 떨어집니다.
  2. SNS 계정 로그인이나 기타 간편한 기능은 이제 워드프레스 Jetpack 플러그인에서도 제공하고 있어서, 기본 기능만으로 충분한 경우 반드시 설치해야 할 필요를 못 느낄 수 있습니다.
  3. 설치는 일반적으로 Disqus 플러그인을 이용하는데, 기존 워드프레스 댓글을 불러오거나, 새로 Disqus 시스템에 작성하는 댓글을 워드프레스 데이터베이스에도 자동 백업하는 기능을 제공하고 있지만 … 여러 버그가 보고되고 있으며 업데이트/대응이 그리 빠릿한 편이 아니어서 플러그인에 대한 평가는 좋지 않은 편입니다.

Disqus 시스템 워드프레스에 설치하기

2019년 8월 기준, 다음과 같은 순서로 설치를 완료하였습니다.

1) Disqus Conditonal Load 플러그인 설치

워드프레스 관리자 페이지에서 새로운 플러그인을 설치합니다.

DCL 플러그인과 Disqus 공식 플러그인.
△ Disqus 공식 플러그인은 업데이트 되지 않았다.

두 개가 나오는데, 오리지날 플러그인보다 오히려 Disqus Conditional Load 플러그인(이하 DCL)을 추천합니다. 원래 버전의 모든 기능을 제공하면서, 훌륭한 몇 가지 기능을 덤으로 제공하고 있기 때문입니다. 가령, 본문 스크롤 내리기 전까지는 댓글을 로딩하지 않고 기다려서 처음 도착한 사람들이 일단 기사를 빨리 볼 수 있도록 한다든지, shortcut로 원하는 위치에 댓글을 삽입한다든지, 가로 크기 조정 옵션을 준다든지, 기타 검색 최적화를 위한 옵션 등등을 제공하지요.

플러그인을 설치 후 활성화하고 일단, 브라우저의 새 탭을 열어 Disqus 홈페이지에 접속하세요.

2) Disqus 홈페이지 가입과 사이트 만들기

우선 Disqus.com 에 가서 가입을 해줍니다. 가입 후엔 프로필 편집 페이지에서 아바타 이미지 정도는 넣어주면 좋아요.

이제 내가 댓글을 설치할 사이트와 연결되는 디스커스 “사이트”를 만들어야 하는데요. Register Site (사이트 등록) 페이지로 바로 접속하시면 됩니다.

△ Disqus 새로운 사이트 설정 화면

웹사이트 이름은 영어로 써주시고, 위에 보시는 바와 같이 myid.disqus.com 의 형식으로 디스커스 홈페이지 안에 내 사이트 댓글 관리 주소가 만들어지는 것을 알 수 있습니다. 카테고리는 아무거나 고르고 페이지 하단의 Create 버튼 눌러서 생성합니다.

△ 무료 플랜으로 시작하자

그 다음 화면은 유료 플랜 광고인데, 스크롤해서 일단 무료 플랜으로 시작하시기 바랍니다. Subscribe Now 를 클릭합니다.

3) Disqus 연동 플랫폼 지정

△ 설치 플랫폼으로 워드프레스를 선택

이제 디스커스 댓글 시스템을 어디에 설치할 것인지 묻는 화면이 보입니다. 워드프레스를 선택했습니다.

△ 워드프레스에 Disqus 설치 과정 요약

위와 같이 설치 과정을 요약하여 안내하고 있습니다. 플러그인을 설치하고 활성화하는 과정은 이미 마쳤으므로 4번부터 따라가면 되겠습니다.

4) 플러그인 최초 세팅

플러그인 활성화 후, 사이드바의 Disqus 메뉴로 들어가면 Install 탭에 Disqus account 있냐고 물을 겁니다.

△ Disqus 계정 연결

그리고 Disqus 홈페이지에서 연결할 사이트 만들어두었냐고 묻습니다. YES.

이제 저 3번의 토큰 주소를 복사 후, 아까 열어두었던 설치 화면에 붙여넣기 합니다.

Install 을 눌러 설치를 시작하세요.

△ Disqus 연결을 완료한 화면에서 configure를 클릭
Disqus 사이트 설정 화면
△ Disqus 사이트 설정

다음에 나오는 위와 같은 화면에서 웹사이트 주소, 사진이 특별히 없는 경우 사용하게 될 기본 아바타 사진의 모양 정도를 정해주고 마무리하셔도 됩니다. 웹사이트 주소는 http:// 로 시작해서 전체 주소를 적어주세요.

5) 워드프레스와 댓글 동기화

새로 댓글 시스템을 시작하게 되면 어떤 글에 달려있던 예전 댓글들은 이제 보이지 않게 됩니다. 이어서 하던 얘기가 있었다면 당황스러울텐데요. 플러그인 설정화면을 통해 간단하게 기존 댓글들을 불러들여 댓글의 맥락이 끊기지 않게 할 수 있습니다.

Disqus 플러그인 동기화 메뉴
△ Disqus 와 워드프레스 댓글 동기화

먼저 사이드바 메뉴를 통해 Syncing 탭을 눌러 진입합니다. 그리고 Import Comments 를 눌러 기존 워드프레스 댓글을 Disqus로 불러들여봅시다.

△ Disqus로 워드프레스 댓글을 복사한다

위와 같이 Pending … 이후에 각 게시물마다 Complete 불이 켜지면서 댓글 불러오기가 차례로 완성됩니다. 만약 Pending .. 에서 멈추고 아무리 기다려도 제자리라면 워드프레스와 Disqus 사이의 연결에 문제가 있는 것입니다.

Enable Auto Syncing은 반대로 디스커스에서 앞으로 작성한 댓글의 복사본을 워드프레스 자체 데이터베이스에도 보내어 백업해놓는 기능입니다. 앞으로 방문자는 Disqus 화면만 보게 되고 그 위에서 댓글 활동을 하게 되는데 만약에 사용을 중지하게 되면 댓글도 사라지게 되므로 미리미리 백업을 해두었다가 워드프레스 자체 댓글 시스템으로 언제라도 돌아갈 수 있도록 하는 것입니다. 완전한 실시간은 아닙니다. 만약 싱크게 문제가 생기면 오류가 표시되고 수동으로 동기화할 수 있는 옵션도 제공하고 있습니다.

Disqus 댓글 수동 동기화 버튼
△ 수동 댓글 동기화

Manual Sync는 자동 동기화에 문제가 생겨서 에러가 표시되거나 할 때 특정 기간 사이에 작성된 댓글들을 워드프레스 자체 데이터베이스에도 저장하도록 수동 명령하는 기능입니다.

6) Disqus 가로폭 (width) 조절하기

디스커스 스타일 조정에 관한 홈페이지의 안내는 다소 초보자에겐 친절한 설명이 아니지 싶습니다. 특히 사람들이 많이 궁금해하는 게 가로폭 조정 옵션의 존재 여부인데, 홈페이지에서는 두 가지 접근을 추천합니다.

  1. “원래 100% width로 설정되어 있으니 이 댓글이 출력되는 위치를 감싸는 부모 HTML 요소의 스타일을 적절히 조정하면 Disqus 출력 부분도 따라서 조정될 것이다.
  2. 댓글 부분이 `<div id=”disqus_thread”> … 와 같이 출력되기 때문에 스타일시트에서 disqus_thread ID에 대하여 가로폭과 기타 스타일 속성을 적용하라.

그러나 DCL 플러그인에서는 아주 손쉽게 댓글 출력의 폭을 지정할 수 있습니다. 화면 크기에 따라 변하되 상대적으로 여유를 좀 가지도록 100%를 90% 등과 같이 변경할 수도 있고, 언제나 고정폭 픽셀로 출력되도록 하는 것도 가능합니다.

Disqus Conditional Load 플러그인에서 출력 가로폭 조정
△ DCL 플러그인에서 댓글출력 가로폭 지정

위와 같은 설정으로도 보통은 만족스럽겠으나, 가령 들고 있는 기기의 화면 사이즈별로 레이아웃을 변형시키면서 컨텐츠를 보여주는 반응형 테마를 사용하고 있는 경우에 기기에 따라, 또는 세로/가로 화면 돌리기 동작이 있을 때 댓글 출력 부분이 제대로 본문을 따라가며 예쁘게 달라붙지 않는 경우가 있더군요.

그러므로 disqus_thread 클래스의 스타일을 좀 더 조건에 따라 반응하도록 수정한 아래 코드를 사용해보시는 걸 추천합니다. 출처는 Github의 aronjayvo/wp-disqus-width.css 입니다.

아래 코드를 사용하고 있는 테마의 사용자CSS 에 추가하거나, 차일드테마를 만지거나, 아니면 메인 style.css 에 추가하세요.

#disqus_thread {
	padding: 12px 10px 0;
	margin: 0 auto;
	max-width: 800px;
}

@media screen and (min-width: 673px) {
	#disqus_thread {
		padding-left: 30px;
		padding-right: 30px;
	}
}

@media screen and (min-width: 1040px) {
	#disqus_thread {
		padding-left: 15px;
		padding-right: 15px;
	}
}

@media screen and (min-width: 1110px) {
	#disqus_thread {
		padding-left: 30px;
		padding-right: 30px;
	}
}

적용하면, 본문을 따라 예쁘게 달라 붙으며 좌우 여백을 확보합니다.

화면 너비에 따라 Disqus 댓글 출력 가로폭을 조절하는 화면
△ 적용했을 때(좌측) vs. 안 했을 때(우측)

이 코드가 좋은 게~ 극단적으로 폭이 좁아지는 환경이 오면 본문의 폭을 무시하고 최대한 가로폭을 확보하려고 합니다.

폭이 좁은 모바일 화면에서 Disqus 댓글 출력 가로폭을 100%로 확보한 화면
△ 스마트폰 화면 비율에서 댓글 가로폭을 충분히 확보

결론

댓글 달 수 있게 준비해주는 게 꼭 이용자 배려는 아닙니다. 또한, 쓰고 싶다면 기본 댓글 시스템 만으로도 충분할 때가 많고요.. 그러나 △ 댓글 유지/보수/관리를 남에게 맡기고 내용에만 신경 쓰고 싶으면서, △ 댓글로 인한 사이트 유입을 기대하고, △ 댓글 쓰는 사람이 좀 더 익숙한 화면에서 편하게 쓸 수 있도록 배려할 수 있는 점에 끌리신다면 추천합니다.

(2019년 8월)

댓글 남기기

이메일은 공개되지 않습니다.