Startup Schwag Bag #9 – DISQUS Shirt Photo by homard.net

ちょっとした事ですが、目鱗だったのでシェア。

ワタクシ、あるときからコメント投稿&表示にDisqusというサービスを利用しております。
WordPressのコメント&ピンバックと連携させるためにプラグインも使ってます。

アイコン表記が素敵☆

WordPress › Disqus Comment System « WordPress Plugins

WordPressコメント系プラグインのDISQUSがアイコン表記でいい感じ！再び利用中！ | なまら春友流

今回はDisqusについてのチョイ技紹介。

モバイルテーマがなんかしょぼい

最近唐突にテーマを変えてしまったのですが、半日ずれくらいでモバイルテーマも自作しました。

デザインブック買ったら無性にWordPressテーマ再自作したくなって気づいたら一日でできてしまった その1 | けんけん.com

ちょっとだけよ。つづきはWebで。（ここもWebだった。）

以前のテーマでもDisqusを使っていたのですが、いかんせん思うのは表示がなんかショボイということ。

百聞は一見にしかずという。これをご覧いただこう。

うん、しょぼいね。

シンプルといえば聞こえはいいのですが、Disqusの象徴であるリアクションのアイコンも、ピンバックも表示されていません。ｶｺﾜﾙｲ
（コメントだけは表示できるようです。）

PCと表示を合わせる方法

PCスタイルに合わせる方法がありました。

まず、Disqusのダッシュボードにアクセスします。

自分のサイトを選んで、

「Setting」の

「Appearance」を選びます、タイポｺﾜｲ

いままで使ってたのはモバイルテーマだった

ここにチェックが入っていると、モバイルで見たときにDisqusモバイル用のしょぼいテーマに自動変更されます。

つまり個々のチェックを外せばPCスタイルにできるというわけですな。

チェックを外したらうまくいきました。簡単やー。
と、思ったら・・・

CSSの調整が必要な場合もある

私は@kuroji1987さんの記事に沿ってテーマづくりしました。これでほぼ枠内に収まると思います。

参考: WordPressでモバイル専用テーマをカスタマイズする時に使ったいろいろ | NANOKAMO BLOG

惜しい。ピンバックの部分が枠からはみ出してしまいました。なければ問題はないのですがたまにいただくのでね (´∀｀*)ｳﾌﾌ。

改善するにはCSSに少し追加をしてあげます。
プラグインでDisqusを使っている場合はsingle.phpとかでDisqusを表示したい部分にWordPressのコメント用テンプレートタグを書けばできます。

例えばこんな感じ。

<div class="comment">
    <h2 class="post_h2">コメント</h2>
    <?php comments_template(); ?>
</div>

この場合CSSはこのようにするとよいです。

.comment {
	overflow: hidden;
}

「はみ出た分は表示しないよ」ってことですね。スクロールで見られるようにしたい場合はhiddenの部分をautoにすればおｋです。

PC表示ｶｺ(・∀・)ｲｲ!!

そんな感じでPCスタイル良い感じ。
ｶｺ(・∀・)ｲｲ!!だけでなく、

1. リアクション
2. ピンバック

がちゃんと見られます。

おそらく何も設定していないとチェックがオンになっているのでしょうね。Disqusを設定している方はみんなモバイル表示でした。
PCスタイルへの変更をぜひおすすめしたいです。

とりま、サイドバーにトップリンクを貼らせてもらったラクイシロクの@rakuishi07さんに教えたいな。同期らしいから@rakuishi07くんと呼ぶべきか。

ちょっとしたことですがオススメですし、目鱗だったので紹介してみました。みんなやるといいさ。