ブログのサイドバーに表示される「最近のコメント」欄。ウィジェットでWordPress標準のを使っていましたが、何となく見た目がパッとしない。
もうちょい見やすくしたいな。そう思ったのでプラグインを使ってカスタマイズ。使用したプラグインは以下です。
- Better WordPress Recent Comments (以下BWP RC)
以前はこんなの(↓)だったのが、
こんなふう(↓)になりました。少しは見やすくなったかな。
BWP RCの設定の手順は以下の通り
- BWP RCをイントールして有効化
- 左メニューにあるBWP RCをクリック
- 「General Options」タブの編集
- 最大表示件数を12件へ変更:「Show at most」→「5」から「12」recent comments
- アバター(GRAvatar:Globally Recognized Avatar)は使わない:「Enable gravatars?」のチェックを外す
- 日付フォーマット:「Choose a date format」→「Md日」
- 他はとりあえずデフォルトのまま
- 「Template Options」タブの編集
- 「Template for comments」を以下の通り変更
12345678
<
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
>
- 他はとりあえずデフォルトのまま
- 「Template for comments」を以下の通り変更
- 左メニューから「外観」-「ウィジェット」をクリック
- 「BWP Recent Comments」ウィジェットを好きなところへ挿入し、[Title:]欄に「最近のコメント」と入れて「保存」
- 「最近のコメント」ウィジェットを「削除」
以上です。
ただし、これだけでは以下のように表示されます。
コメントの内容が全文表示されるので長い。見た目も悪いです。
CSSを編集して、見た目を良くしておきます。以下をCSSに追記。
12345678910111213141516171819202122232425262728293031 <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>;
}
[参考]
▶ WordPress › Better WordPress Recent Comments « WordPress Plugins
▶ WordPressプラグイン「Better WordPress Recent Comments」で最近のコメント欄からピンバックを非表示に – キーワードノート
▶ CSSで出来る!決められた文字数を超えた場合に「…」を表示させるコード – キーワードノート