disquskazu

DISQUSを導入したのでサイドバーにコメント表示とCSS設定して、ついでにコメント数も表示する

DISQUSでサイドバーなどにコメントを表示する方法とコメント数を出力する方法を解説しています。
投稿日: 2012/02/21
最終更新日: 2015/12/29
 

ワードプレスのプラグインでDISQUSというコメントシステムを導入したので
その他の設定について書いちゃいますよ!

サイドバーに受け付けたコメントを出力する

したいですよね?コメントもらったらサイドバーに表示したいですよね?

DISQUSでサイドバーにコメント表示

けど、DISQUSって英語で説明書いてあるから理解するのがとてつもなく面倒くさいんですよね!わかります!面倒くさかったです!調べついでに解説します!

あと、コメント下さい!誰も書いてくれない( ;∀;)

DISQUS導入した時の記事は必読

下記は読んでおいて下さい!これが出来てないと動かないです。
WordPressに素敵なコメントシステムDISQUSを導入したのでついでに記事にしてみたよ!

コメント表示用のソースコードはDISQUSの管理画面にあります。

Toolsタブの中にコメント表示用のソースコードがあるのでコレをコピペします。
4つほど種類があるので下記で解説。

Combination - 下記を全部まとめたやつ
Recent Comments - 最近のコメント
Popular Threads - 人気のページ
Top Commenters - コメント数が多い人

それなりのコメント数が集まらないと「Recent Comments」以外は役に立ちそうにありません。

好きなところにソースを埋め込んで表示

私の場合は、「Recent Comments」をサイドバーに埋め込みました。
ソースをコピペするだけですが・・・。

このソースコードだけで表示はされると思います!

Recent Commentsに絞ってCSS設定

そのままでも十分使えるわけなんですが、デフォルトの設定だと何かと不便なのでCSSでフォントサイズなどを修正します。

Settingsのタブをクリックして「Appearance」ページに移動。
最下部に「Custom CSS」という欄があるのでココにCSSを記述したらいいのです!

DISQUSカスタムCSS

書き方にはちょいとコツがいります。

DISQUSのCSS設定での注意点

まず、設定したい要素(idやclass)を探します。
私が調べた時には下記のようなスタイルとHTMLで設定されていました。
カラーリングして別々で表示します。

CSSの設定

<style media="screen" type="text/css">
.dsq-widget ul.dsq-widget-list { padding: 0; margin: 0;	 text-align: left; }	 
img.dsq-widget-avatar {	 width: 32px; height: 32px; border: 0px; margin: 0px; padding: 0px 3px 3px 0px; float: left; }
a.dsq-widget-user { font-weight: bold;	 }
a.dsq-widget-thread { font-weight: bold; }
p.dsq-widget-meta { clear: both; font-size: 80%;padding: 0; margin: 0;	 }
li.dsq-widget-item { margin: 15px 0; list-style-type: none;	 clear: both; }
span.dsq-widget-clout {	padding: 0 2px;	 background-color: #ff7300; color: #fff; }
table.dsq-widget-horiz td { padding-right: 15px; }
</style>

見やすさのためCSSとHTMLを分割してお送りしております。

次にhtmlの表記です

<div class="dsq-widget" id="recentcomments">
<script src="http://moreiic-promeshi.disqus.com/recent_comments_widget.js?num_items=5&amp;hide_avatars=0&amp;avatar_size=32&amp;excerpt_length=200" type="text/javascript"/>
<!--ここに上記CSSの記述-->
<ul class="dsq-widget-list">
<li class="dsq-widget-item">
<a href="http://disqus.com/moreiic/">
<img src="http://mediacdn.disqus.com/uploads/users/2214/9603/avatar92.jpg?1329548377" 
class="dsq-widget-avatar"/></a>
<a href="http://disqus.com/moreiic/" class="dsq-widget-user">moreiic</a>
<span class="dsq-widget-comment">誰もコメントくれないから自分でコメントしてみよう!(ΦωΦ)フフフ…<br/><br/></span>
<p class="dsq-widget-meta"><a href="http://www.promeshi.com/archives/249">PHPで文字列を指定した文字数に丸める方法(mb_strimwidth)が簡単なのにアッサリ忘れるので備忘録 - ぷろめし|プログラミングよりも飯が好き</a> · <a href="http://www.promeshi.com/archives/249#comment-442639717">14 hours ago</a></p></li></ul>
</div>

上記を参考に設定したい要素を見つけ出して上書きするCSSを先ほどの「Custom CSS」に書き加えればいいのです!
普通のCSSと同じ書き方なんで省略しますが、既に設定されているCSSを無視させることが必要なんです。

つまり、下記の記述が絶対必要なのです!

!important;

私は、コメントのフォントサイズとカラーが気にくわなかったので下記の要素を上書きします。

.dsq-widget-comment{ color:#464646; font-size:13px; !important; }

上記を「Custom CSS」に入力して保存します!

CSS記述例

これで設定完了です!

※注意
問題が1つあります。コメント表示のCSSカスタマイズしてもDISQUSのコメントフォームを
そのページで読み込んでいないとカスタムしたCSSが適用されないようです。

ごめんなさい。追記します。

追記:2012/02/21-8時
カスタムCSSが読み込まれないことが原因なので直接ソースに下記を追加すれば
問題なく修正されます。

<style type="text/css">
.dsq-widget-comment{color:#464646;font-size:13px; !important;}
</style>

続いてコメント数のカウントです。

コメント数の表示方法

ごめんなさい。コピペで完了ですw

ソースコードはログイン後、下記URLからコピーして下さい。
http://docs.disqus.com/developers/universal/

注意としてコメントをカウントするページのURLに書き換えてくださいね!
ワードプレスならこんな感じでいいでしょう。

<a href="<?php the_permalink();?>#disqus_thread">Comments</a>

aタグの間は何入れても動きます。
1番目のソースが動かなかったので2番目のURL指定で表示する方法をチョイスしてます!

これであなたのサイトにもコメント数を表示することができますよっ!

DISQUSコメント数出力結果

コメント0が悲しすぎるので・・・どうぞ・・・お願いしますm(_ _)m
あぁ~疲れた!間違えてたら教えて下さい!

 
最新情報をお届けします
筆者のご紹介
角政典@moreiic
真性のお家大好きフリーランスです。プログラムよりご飯の方が断然好き!博多出身のデブデザイナー。インドアだけど遊んでくれる人募集中!
Twitter / google+
よく検索されてる記事