WordPressの「最近のコメント」表示をちょっとカスタマイズ!

スポンサーリンク

スポンサーリンク

ブログのサイドバーに表示される「最近のコメント」欄。ウィジェットでWordPress標準のを使っていましたが、何となく見た目がパッとしない。

もうちょい見やすくしたいな。そう思ったのでプラグインを使ってカスタマイズ。使用したプラグインは以下です。

  • Better WordPress Recent Comments (以下BWP RC)

以前はこんなの(↓)だったのが、

BWP_RecentComments_201312_01

こんなふう(↓)になりました。少しは見やすくなったかな。

BWP_RecentComments_201312_02

BWP RCの設定の手順は以下の通り

  1. BWP RCをイントールして有効化
  2. 左メニューにあるBWP RCをクリック
  3. 「General Options」タブの編集
    1. 最大表示件数を12件へ変更:「Show at most」→「5」から「12」recent comments
    2. アバター(GRAvatar:Globally Recognized Avatar)は使わない:「Enable gravatars?」のチェックを外す
    3. 日付フォーマット:「Choose a date format」→「Md日」
    4. 他はとりあえずデフォルトのまま
  4. 「Template Options」タブの編集
    1. 「Template for comments」を以下の通り変更
      1
      2
      3
      4
      5
      6
      7
      8
      <li <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"rcli"</span>>
       <span class="xml"><span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rc-author"</span>></span>%author% さんより(%time%)<span class="hljs-tag"></<span class="hljs-name">span</span>></span></span>
       <span class="xml"><span class="hljs-tag"><<span class="hljs-name">br</span> /></span>
       <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rc-text"</span>></span>%excerpt%<span class="hljs-tag"></<span class="hljs-name">div</span>></span>
       <span class="hljs-tag"><<span class="hljs-name">span</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"rc-plink"</span>></span
        <span class="hljs-tag"><<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"%link%"</span>></span>%post_title%<span class="hljs-tag"></<span class="hljs-name">a</span>></span>
       <span class="hljs-tag"></<span class="hljs-name">span</span>></span>
      <span class="hljs-tag"></<span class="hljs-name">li</span>></span></span>
    2. 他はとりあえずデフォルトのまま
  5. 左メニューから「外観」-「ウィジェット」をクリック
  6. 「BWP Recent Comments」ウィジェットを好きなところへ挿入し、[Title:]欄に「最近のコメント」と入れて「保存」
  7. 「最近のコメント」ウィジェットを「削除」

以上です。

ただし、これだけでは以下のように表示されます。
コメントの内容が全文表示されるので長い。見た目も悪いです。

BWP_RecentComments_201312_03

CSSを編集して、見た目を良くしておきます。以下をCSSに追記。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<span class="hljs-comment">/**
|------------------------
| =Better WordPress Recent Comments
|------------------------
*/</span>
 
<span class="hljs-selector-class">.widget</span> <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-class">.rcli</span> {
    <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">12px</span>;
}
<span class="hljs-selector-class">.rcli</span> {
    <span class="hljs-attribute">display</span>:block;
    <span class="hljs-attribute">margin</span>:<span class="hljs-number">0</span> <span class="hljs-number">0</span> <span class="hljs-number">20px</span> <span class="hljs-number">0</span>;
    <span class="hljs-attribute">background</span>:none <span class="hljs-meta">!important</span>;
    <span class="hljs-attribute">padding</span>:<span class="hljs-number">0</span> <span class="hljs-meta">!important</span>;
}
<span class="hljs-selector-class">.rcli</span> <span class="hljs-selector-class">.rc-author</span> {
    <span class="hljs-attribute">font-weight</span>: bold;
}
<span class="hljs-selector-class">.rcli</span> <span class="hljs-selector-class">.rc-text</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
    <span class="hljs-attribute">overflow</span>: hidden;
    <span class="hljs-attribute">width</span>: <span class="hljs-number">300px</span>;
    <span class="hljs-attribute">word-wrap</span>: normal; <span class="hljs-comment">/* IE */</span>
    <span class="hljs-attribute">white-space</span>: nowrap;
    <span class="hljs-attribute">text-overflow</span>: ellipsis;
    <span class="hljs-attribute">-moz-text-overflow</span>: ellipsis; <span class="hljs-comment">/* Firefox */</span>
    <span class="hljs-attribute">-o-text-overflow</span>: ellipsis; <span class="hljs-comment">/* Opera */</span>
}
<span class="hljs-selector-class">.rcli</span> <span class="hljs-selector-class">.rc-plink</span> {
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">12px</span>;
}

[参考]
WordPressBetter WordPress Recent Comments « WordPress Plugins
WordPressプラグイン「Better WordPress Recent Comments」で最近のコメント欄からピンバックを非表示に – キーワードノート
CSSで出来る!決められた文字数を超えた場合に「…」を表示させるコード – キーワードノート

タイトルとURLをコピーしました