WordPressに少しリッチな「最近のコメント」ウィジェットを設置するカスタマイズ方法。プラグイン不要コピペのみ。

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

WordPressには、デフォルトで「最近のコメント」ウィジェットがあります。

Wordpressデフォルトの「最近のコメント」ウィジェット

ただこれだと、どうも味気ない上に、見づらいというか。

そこで、もう少し見やすく分かりやすくするために、自作で「最近のコメント」ウィジェットを以下のような見た目となるように作成してみました。

最近のコメント(リッチ)ウィジェットの表示

今回は、このカスタマイズ方法を紹介したいと思います。カスタマイズといっても、基本的にコピペのみで行えるカスタマイズになっています。

スポンサーリンク
レクタングル(大)広告

主な手順

pexels-photo-68562-large

今回行うテーマカスタマイズの主な手順は以下です。

  1. functions.phpにコードをコピペ
  2. style.cssにコードをコピペ

コードを2回コピペするだけなので、かなり手軽に行えるカスタマイズかと思います。

利用中のテーマがSimplicity 2.1.8以降の場合は、この実装が施されているのでカスタマイズ不要です。

functions.phpにコードをコピペ

まずは、functions.phpに以下のコードを追記する形でコピペしてください。

今回は、Wordpress管理画面の「ウィジェット」から、取り外しができて、簡単な設定も行えるようにてみました。

最近のコメントを表示するPHPコードは、以下を参考にさせていただきました。

参考 WordPress「最近のコメント」ウィジェットをプラグイン無しでリッチ表示

functions.phpの編集に失敗した場合は重大なエラーが出ます。PHP編集に慣れていない場合は、戻すことができなくなる場合もあるかもしれないのでバックアップしてから編集してください。

style.cssにコードをコピペ

あとはテーマのstyle.cssなどに以下のスタイルシートを貼り付けます。

これでカスタマイズは完了です。

テーマによってスタイルは微調整する必要はあるかもしれません。

ウィジェットを設置する

あとは、Wordpressの管理画面の「外観 → ウィジェット」をひらきます。

「ウィジェット」画面で、「最近のコメント(リッチ)」ウィジェットをドラッグ&ドロップでウィジェットエリアに配置します。

ウィジェットをウィジェットエリアに設置

ウィジェットエリアにウィジェットを設置すると以下のように、ちょっとした設定も行うことができます。

最近のコメント(リッチ)ウィジェットの設定項目

  • タイトル:ウィジェットのタイトルの設定
  • 表示するコメント数:ウィジェットに最近のコメントを何個まで表示するかを設定
  • コメント文字数:コメントの文字数を何文字まで表示するかを設定
  • 管理者の除外:管理者コメントを表示するかの設定

設定を変更したら「保存」ボタンを押してください。

あとは、ブラウザから設定したウィジェットエリアを見てみると以下のように表示されているかと思います。

最近のコメント(リッチ)ウィジェットの表示

WordPressオフシャルテーマでもある「Twenty Eleven」でも同様のカスタマイズを行ってもちゃんと動作していました。

「Twenty Eleven」テーマで最近のコメントウィジェットの動作確認

まとめ

こんな感じで今回は、「リッチな最近のコメントウィジェット」を追加してみました。

Googleは、コメントも含めてコンテンツの品質を評価しています。

今回のカスタマイズをしたからといって、コメントの品質が上がったりするわけではないですが、たとえ微量であっても、コメント欄の活性化につながれば良いかなと思います。

というわけで、「従来のコメントウィジェットでは物足りない」とか「コメントの書き込み状態を分かりやすくウィジェットで見たい」なんて場合は、今回のカスタマイズを試してみても良いかもしれません。

プラグインで「リッチな最近のコメントウィジェット」を設置するなら、以下のような方法もあります。

Wordpressの「最近のコメント」ウィジェットがちょっとリッチな表示になるプラグインのまとめ
最近、コメント欄に書き込みがあったかどうか、サイト上からでもわかるようにしたく思いました。 そこで、サイドバーに「最近のコメン...

『WordPressに少しリッチな「最近のコメント」ウィジェットを設置するカスタマイズ方法。プラグイン不要コピペのみ。』へのコメント

  1. 名前:よしぱん 投稿日:2016/08/25(木) 13:08:48 ID:05f467af0

    この記事のお陰でコメントウィジェットを望み通りのモノに変更できました!とっても嬉しいです、ありがとうございました!

  2. わいひら 名前:わいひら 投稿日:2016/08/25(木) 18:02:42 ID:d2af57c93

    記事がお役に立てたのであれば幸いです。
    このコメントウィジェットが素適なサイトに利用してもらえて嬉しいです。

  3. 名前:Lognote 投稿日:2016/09/21(水) 12:15:19 ID:945c61ce4

    いつも拝見しております。
    こちらのコードも使わせていただいているのですが、
    function.phpの56行目の下に、それから63行目のはではないでしょうか。
    そうでないと表示は問題ないですがコード上でエラーが出ました。
    私の勘違いなら申し訳ございません。

  4. 名前:Lognote 投稿日:2016/09/21(水) 12:17:43 ID:945c61ce4

    コードをそのまま記述したら消えてしまいましたのでもう一度書きます、すみません……
    function.phpの56行目の下に/dd、それから63行目のdivはddではないでしょうか。

  5. わいひら 名前:わいひら 投稿日:2016/09/21(水) 18:08:16 ID:00703a618

    コードをチェックしてみたところ、僕の見たところではddは問題ないように思います。
    けれど、余計なdivが一つあったようです。
    コードを修正して改行を入れて見やすくしておきました。
    ご指摘ありがとうございます!

  6. 名前:Lognote 投稿日:2016/09/22(木) 11:54:01 ID:ea998e73b

    なるほど、div一つで済んだのですね。
    ddから修正してしまったので私の勘違いでした。
    コードまた参考にさせていただきます!