書きたい記事を書きたいように書くFreeブログ

かきてぃーのプロフィールはこちらをクリック!

【WordPress-カスタマイズ】最近のコメントデザインをライン風にしてみた

 
  2018/06/24
 
スポンサーリンク
スポンサーリンク
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら

こんにちは。皆さん。本日のカスタマイズはコメント欄です。

「AFFINGER4」でも出来ると思いますが、特に指定されたロジックではないので、タイトルは「WordPress」としています!

で、今回オシャレにしたいのは「最近のコメント」ってやつ。

ウィジェットで追加すると、コメントが表示されるアレです。それがまあダサい

サメくん
うわぁ…ダセェ…しかもバグまであるし…
イルカさん
名前が全部「匿名」になっているね。「functions.php」のバグかな?

今回の目標は以下の通り

  • 「匿名」がループされてしまうバグ?を直す
  • コメント欄をどうにかオシャレに
  • 出来れば、ライン風にしたい

早速、やってきましょう。

「Simplicity」のコメント投稿者が同じになるバグを修正

コメント欄で、○○よりの○○。上記の画像でいうと「匿名」が重複している!?

ちゃんと、取得出来ていないようです。。

サメくん
コメント書いた人も「匿名」で返信も「匿名」ってどんだけ匿名さんいるんだよ

まずはここから直していかないと…

ウィジェットとして出力しているのを見ると、恐らく「functions.php」に書かれているだろう。と予想し「comment」とかで検索してみました。

すると、614行目付近に気になるロジックが…

サメくん
ボク…英語ワカンナイ…

とりあえず、日本語のコメントを挿入してみましょうか。

ダメなのは3,4行目。

global $comment;

ですね。

何がダメかって、コメントウィジェットは global 変数の $comment にコメントオブジェクトを入れないのです。

[参考]: https://ja.wordpress.org/support/topic/コメントが無記名である時の「匿名」という名前の変更/

つまり、いくらif文で分岐しようが結果は同じ…。

公式サイトにも解決法が記載されていましたね。

https://nelog.jp/anonymous-comment-author-name

日本語コメントを挿入したモノを貼っておきます。

つまり、匿名のみを「functions.php」で対応するようにしたようです。

上記のロジックに置き換えたところ、コメント作成者の名前が正常に取得できるようになりました。

スポンサーリンク

「最近のコメント」をオシャレにカスタマイズするよ!

修正対象のファイルは以下のとおり!

  • functions.php(子テーマ)
  • style.css(子テーマ)

たった二つでオシャレに出来ちゃいます!

イメージは、

  • 新たなコメント取得ウィジェットを作成して出力形式を変更
  • style.cssでデザインをライン風に変更
サメくん
うっひっひ。楽しみじゃい。うっひっひ
イルカさん
サメくん…気持ち悪い…

「functions.php」のカスタマイズ

これを子テーマにどーーーーんと貼ってください。

追加すると、ウィジェットに「最新のコメント(リッチ)」が増えます。

追加したコメントウィジェットは

と4つの機能が存在し、ユーザが自由に設定できるようになっています。

また、コメント作成者と管理人のコメントデザインを分ける為に、47行目に管理者の名前を設定して下さい。

完全一致にしてあるので、スペースや大文字小文字まで全てが一致していないとFalseになってしまうので気を付けて下さい。

Speech bubble」のプラグインを導入すること

コメントエリアのデザインは、レスポンシブとか設定が面倒だったので「Speech bubble」のプラグインデザインをそのまま利用しています。

なので、「Speech bubble」プラグインが導入されていない場合…

こうなります。

「プラグイン」→「新規追加」から「Speech bubble」を導入するようにしてください。

style.css」にてデザインを調整する

これでも良かったんですが、もうちょっとオリジナリティを出したいと考え、更にカスタマイズしました。

これが完成系です。

サメくん(改)
すっげー!めっちゃオシャレになった!!
イルカさん
うん!最初と比べるとイイ感じだね!
サメくん(改)
…ねぇねぇ。なんか気づかない?ねぇねぇ。
イルカさん
無視。無視…。
サメくん(改)
俺もオシャレになったんだけどなぁ~
イルカさん
サングラス歪んでるよ……
  • コメントタイトルをデザインした
  • 管理者とコメント作成者のデザインを分けた
  • 日付をタグ風にしてデザインした

これだけですが、まあ上出来です。

かきてぃー
同じようなデザインが希望ならば、上記のcssを設定すればOKです!
検証していませんが、恐らくどのテーマでも有効だと思います。
次は、個別投稿ページのコメント欄をカスタマイズするぜっ!
かきてぃー
それでは、本日もお疲れ様でした!
この記事を書いている人 - WRITER -
かきてぃー
21歳に社会へ出て荒波に揉まれ逃げること数回。 2013年にネットビジネスに出会い色んなことに挑戦。無料ブログ系・物販アフィリエイト・ブログアフィリエイト。が、2度挫折し3度目再始動中。 現在の管理サイトはメイン4つのサブ20で合計24サイト運営しています。 主な稼ぎはWEBコンサルやHP制作、FXで月数十万の稼ぎです。 IT業界で学んだスキルを活かしたツールの紹介やテーマ・プラグインのカスタマイズ、実体験を元にした体験記事をメインに書いています。
詳しいプロフィールはこちら
スポンサーリンク











コメントはこちらです

Copyright© 書きタレ , 2013 ~ 2017 All Rights Reserved.