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」を以下の通り変更
       
      <li class="rcli">
       <span class="rc-author">%author% さんより(%time%)</span>
       <br />
       <div class="rc-text">%excerpt%</div>
       <span class="rc-plink">» 
        <a href="%link%">%post_title%</a>
       </span>
      </li>
      
    2. 他はとりあえずデフォルトのまま
  5. 左メニューから「外観」-「ウィジェット」をクリック
  6. 「BWP Recent Comments」ウィジェットを好きなところへ挿入し、[Title:]欄に「最近のコメント」と入れて「保存」
  7. 「最近のコメント」ウィジェットを「削除」

以上です。

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

BWP_RecentComments_201312_03

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

/**
|------------------------
| =Better WordPress Recent Comments
|------------------------
*/

.widget ul li.rcli {
    margin-bottom: 12px;
}
.rcli {
    display:block;
    margin:0 0 20px 0;
    background:none !important;
    padding:0 !important;
}
.rcli .rc-author {
    font-weight: bold;
}
.rcli .rc-text {
    font-size: 12px;
    overflow: hidden;
    width: 300px;
    word-wrap: normal; /* IE */
    white-space: nowrap;
    text-overflow: ellipsis;
    -moz-text-overflow: ellipsis; /* Firefox */
    -o-text-overflow: ellipsis; /* Opera */
}
.rcli .rc-plink {
    font-size: 12px;
}

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

スポンサーリンク

 

SNSシェアボタン

  • このエントリーをはてなブックマークに追加