まぐれヒットと秋の空

WordPressでブログを書きながら気付いたことや困ったことや乗り越えたことなど

WordPressのサイドバーに表示するコメント欄をおしゃれにカスタマイズ 顔画像と吹き出しで表示する方法 コピペでいけますよ!

calendar

WordPressでブログを運営していると、たまにもらえるコメントが凄くうれしいですよね。

今回はWordPressのサイドバーに表示される、「最近のコメント」一覧をおしゃれにカスタマイズする方法にチャレンジしました。

顔と吹き出しで、コメントした人が話している雰囲気にしてみましたよ。

スポンサーリンク

「最近のコメント」をカスタマイズ

通常のコメントは味気ない

WordPressの標準で入っている「最近のコメント」は少し味気ないですよね。

表示されるのはコメントがあった記事のタイトルと、それにコメントした人の名前だけです。

これをおしゃれにカスタマイズしてみたいと思います。

こちらを参考にさせていただきました

参考にさせていただいたのは超大御所ブログ寝ログさん。

こちらのコードを参考に、自分にあった表示方法にしてみました。

そのままだと

寝ログさんのコードではコメント一覧の中で、コメントした人のアイコン画像が<dt>で、コメント部分が<dd>といった定義リストと呼ばれるタグで表示しています。

しかしWordPress標準のコメント欄は、<ul><li>のリストになってるんですよね。

この違いによって、少し思った通りの表示にできない部分が出てくる可能性があります。

あくまで私が使っているテーマ、そして私が指定した色、という条件のもとでの話ですが、そのままコピペしてみたところ、次のような想定外の表示になってしまいました。

  • 上の「最新の投稿」には指定したカード形式の表示が適用されているけど、下の「最近のコメント」ではカード形式にならない。
  • 上の「最新の投稿」と下の「最近のコメント」で余白の幅が合わない。
  • 上の「最新の投稿」の文字色が白になったため背景と同化して見えなくなった。

などの事が起きてしまいました。

これはあくまで私が使っているテーマで、さらにそのテーマのCSSも少しいじってあるから起きた現象で、こうならない場合がほとんだと思います。

とは言え私は私のブログを思った通りにカスタマイズしたい!!

ということで改造します。

寝ログの管理人わいひらさんも「テーマによってスタイルは微調整する必要はあるかもしれません。」とおっしゃってますしね!

少しイジりました

ということで、次の目的のために少しイジりました。

  • カード形式でコメントを一覧にする。
  • 他のウィジェットと同じような表示になるようにコメントリストを<li>にする。
  • 顔アイコンから吹き出しでコメントが表示されるようにする。

1番めの「カード形式」についてはすでに土台はできています。

サイドバーウィジェットの中身をマテリアルデザイン風のカード表示にする方法はこちら。

また、3つめの目標を達成するため、こちらのサイトを参考にさせていただきました。

ありがとうございます。

こうなったよ

寝ログさんのコードに手を加えて、自分好みの表示にした結果がこちら。

コメントした人のアイコンから吹き出しが出るようにしました。

コードはこんな感じ

今回寝ログわいひらさんのコードを参考に、少しいじったコードがこちら。

ご利用になる場合は必ずバックアップをとってからコピペしてくださいね。

 

WordPressの管理画面 > 外観 > テーマの編集

と進んで、function.phpを開きます。

下記のコードをコピーしてfunction.phpの最後の?>の前に貼り付け。

 

次にカスタマイザーを開いて、

追加CSSを選択。

次のコードをコピーして貼り付け。

 

ウィジェットを挿入

これだけでは実はこのコメント欄は表示されません。

寝ログわいひらさんのコードは、標準のコメントとは別に「リッチなコメントウィジェットを追加する」ためのコードなのです。

ということで

WordPressの管理画面 > 外観 > ウィジェット

と進んで、「最近のコメント(リッチ)」をサイドバーの好きな場所に追加します。

これで新しいコメントウィジェットが表示されたはず。

もしWordPress標準のコメントウィジェットを設置していた場合は、忘れずにサイドバーから撤去しておいてくださいね。

 

コメントを大切に

コメントにもSEO的な効果があるというのが一般的な意見です。

こちらの記事は大変参考になります。

また寝ログわいひらさんもおっしゃっているように、コメント欄を飾ることで少しでもコメントがもらえるようなサイトになると、SEO面だけではなくモチベーション的にもいいことですよね。

ということで、わからないところとかあればこちらの記事にコメントよろしくお願いします。

少しでも誰かの参考になれば、まぐれヒット。

 

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください