【QooQ】投稿日の横にコメント数を表示させる

｜2023/09/06
アイキャッチ

当ブログではトップページの記事一覧や記事ページの投稿日の横にコメント数を表示させています。

先日「ふじ庵」でこのやり方を教えてほしいとのコメントを頂き、返信にて簡単に説明したのですが、ひょっとしたら需要あるかもしれない？と思ったもんで、記事としてもう少し詳しく書いておくことにしました。

特にコメントが多いブログだと今回のカスタマイズで便利さが増すと思うのでオススメです。

CONTENTS

基本的なカスタマイズ手順

基本的なやり方はこちらの「TZLOG」さんの記事を参考にしています。

ファビコンTZLOG
サムネイル
【QooQ】トップ画面にコメント件数を表示する方法【カスタマイズ】
エディタ作成よりもブログのカスタマイズ方法を調べていました。知りたかったのは記事のコメント件数をトップ画面に表示する方法です。私のブログは多分コメントが書き込まれることは無いと思うんですけど(コメントして頂けました。ありがとうございます)、
https://tz-log.com/qooq-display-number-of-comments/

こちらの手順通りやればちゃんとコメント数が表示されるので別に問題はないのですが…

ふじろじっく独自仕様

上記の記事では全ての記事にコメント数を表示する仕様になっているため、パッと見でコメントがある記事とない記事の区別が付きづらいというのと、滅多にコメントが来ないようなブログだとズラッと 0 が並ぶことになってしまってちょっと微妙な感じがする？という訳でうちではコメントがある記事のみで表示させるようにしてあります。また、上記記事では記事ページで表示させるやり方が書かれていませんので、その手順も合わせて説明しておきます。

カスタマイズ手順

HTMLを編集しますので必ず予めバックアップを取ってから行って下さい。もしくはテスト用の環境(別ブログ)を用意してそちらで試されることをおすすめします。
何も弄っていないプレーンな状態の QooQ(v1.30)ではテスト済みですが、既に当該部分をカスタマイズされている環境だと上手く表示されない可能性がありますのでご注意下さい。

Font Awesome アイコン準備

Font Awesome の吹き出しアイコン を使用しますので、まだ導入されてない場合はテーマ編集画面(HTML)にて以下のタグを </head> の上に設置して下さい。

<link href='//use.fontawesome.com/releases/v5.15.4/css/all.css' rel='stylesheet' type='text/css'/>

Font Awesome 等のアイコンを使わないやり方も後で説明します。

①トップページの記事一覧の投稿日の横に表示

まず HTML編集画面にて以下のコードを検索で探します。

<p class='list-item-date'>

<p class='list-item-date'> から </p> までの部分を以下のコードと置き換えます。

<p class='list-item-date'><data:post.date/>
<b:if cond='data:post.numComments gt 0'>
<i class='far fa-comment-dots'/>
<data:post.numComments/>
</b:if>
</p>

<b:if cond='data:post.numComments gt 0'> と </b:if> の部分はコメント数が「0」より多い場合のみ表示させるための条件分岐タグです。このタグを削除すると全ての記事で表示されるようになります。

2022/08/01 追記: ※ウィジェットバージョン2 のテーマの場合は以下のタグにしないとエラーになるので要注意です。
<b:if cond='data:post.numberOfComments gt 0'>

「…」の無い吹き出しアイコン の方がお好みの方は <i class='far fa-comment'/> にして下さい。

アイコンを使わない文字だけのシンプル表示にする場合

表示例: コメント(2) 

<p class='list-item-date'><data:post.date/>
<b:if cond='data:post.numComments gt 0'>
コメント(<data:post.numComments/>)
</b:if>
</p>

<data:post.numComments/> の部分が数値に置き換わりますので、この部分を生かしてお好きな表示にしてみて下さい。

②記事ページの投稿日の横に表示

HTML編集画面にて以下のコードを検索で探します。

<p id='single-header-date'>

<p id='single-header-date'> から </p> までの部分を以下のコードと置き換えます。

<p id='single-header-date'><data:post.dateHeader/>
<b:if cond='data:post.numComments gt 0'>
<i class='far fa-comment-dots'/>
<data:post.numComments/>
</b:if>
</p>

文字だけのシンプル表示化は上記の記事一覧でのやり方と同じです。

コメント欄へのリンクを付ける

クリックするとコメント欄にジャンプします。マウスホバー時に「○件のコメント」というツールチップが出ます。
赤文字の部分のコードを追記して下さい。

<p id='single-header-date'><data:post.dateHeader/>
<b:if cond='data:post.numComments gt 0'>
<a expr:title='data:post.commentLabelFull' href='#comments'>
<i class='far fa-comment-dots'/>
<data:post.numComments/>
</a>
</b:if>
</p>

以上です。

最後に

もし上手く表示されない等の問題があった場合や、ご質問がある方はコメントでお知らせ下さい。

尚、当ブログではトップページ記事一覧のコメント数にはリンクを付けていないため説明は省きましたが、付けたいという方は上記の「TZLOG」さんの記事をご参照下さい。