コメント欄の名前の欄に特定のキーワードを入れることでアイコンや背景を入れられるようにしたい

すいません。
リンクがうまく貼れていなかったようです。

参考サイトURL
http://blog.domesoccer.jp/archives/52094224.html

http://scahigh.blog58.fc2.com/blog-entry-799.html

コメントの名前で背景画像を分ける | codepen
※ cssはscssで書いてます。css欄下向き三角のview compiledでcssに変換できます。

こんな感じでしょうか？

JQueryの先頭あたりにあるdataの中身を変えれば、複数対応できます。
c: "yhira"
などは、返すclassです。

#comment-areaの.comment-bodyにクラスを付与して、

#comment-area .comment-body.yhira {
  background-image: url(画像のパス);
}

と言うようなことをしています。なので、jQueryのdataとstyle.cssの追記を対応させることでいくつでもその人の名前で決定された背景を入れることができます。

何かしらのキーワードは、何かしら具体例を書いてみて下さい。

迅速な返信ありがとうございます。
この形式の場合、
yhira（ラーメン大好き）などの場合でもyhiraの画像を表示することは可能でしょうか？

あ、少し例が悪かったです
yhiraという言葉さえ名前欄に含んでいればyhiraに登録してある画像を表示することは可能でしょうか？
また、画像表示に優先順位を付けることは可能でしょうか？

> yhiraという言葉さえ名前欄に含んでいれば
> yhiraに登録してある画像を表示することは可能でしょうか？

サンプルで言えば、名前に「わいひら」とあればyhiraというクラスを返すということです。正規表現で絞れば、キーワードが含んでいさえすればそれに対応するクラスを返すのはできると思います。

> 画像表示に優先順位を付けることは可能でしょうか？

どういう時にどうするかという感じで、具体例を書いて下さい。

いつもお世話になっております。
このアイデアも使い方次第では面白そうなので試しにやってみたのですが
上手く出来ません。
それで少し確認と質問をさせて下さい。

CSSは機能しているようなんですがJSが動きません。
JSは子テーマのjavaスクリプトに入れました。

(function($){
	
	var data = [
		{name: "わいひら", c:"yhira"},
		{name: "みき", c: "miki"},
		{name: "Mori", c: "mori"}
	];
	
	var name2return = function(key) {
		var result = $.map(data,function(v,i){
			//console.log(v.name)
			if (v.name == key) {
				return v.c;
			}
		});
		return result[0];
	}
	
	
	$(function(){
		var postName = $("#comment-area .vcard").find(".fn");
		
		postName.each(function(){
			var targetName = $(this).text();
			var checkClass = name2return(targetName);
			//var getClass = checkClass;
			//console.log(checkClass);
			if (checkClass) {
				$(this).closest(".comment-body").addClass(checkClass);
			}
		});
	});
})(jQuery);

JSのスクリプトはそのままコピーをしたのですが合っていますか？

スタイルシートみたいに何かしら選ぶ項目があるのでしょうか？
宜しくお願いします。

> CSSは機能しているようなんですがJSが動きません。
> JSは子テーマのjavaスクリプトに入れました。

これだけの情報だと何がどうおかしくて、何が機能していないかなどの改善ポイントはわかりません。
どのように試したか、エラーはでていないか、利用しているjQueryにmapは含まれているかなどがわからないと何とも言えない所です。

サンプルはjQuery3.1.1で動作させていますが、3.1.1でしか動作しないようには書いてないので2系でもmapが入ってれば動作するかと思います。
子テーマjavascript.jsにまんま入れてもらえば動作するかとは思いますのでそこはコピペミスも考えにくいのでそれで良いかと思います。
あとコメント欄のスタイルがデフォルトでないと使われているクラスなどが異なるかも知れません。

動作しているかの確認方法としては、コメント欄の.comment-bodyに、もし仮に「わいひら」として投稿した場合、class="comment-body yhira" という感じでクラスが追加されているかどうかと、デベロッパーツールで.comment-bodyを見た時、background-imageで正しく画像が読み込まれているかどうかの確認がまず必要です。
あわせてコンソールにエラーがでていないかどうかの確認も必要です。

サンプルでは、質問に合わせて背景を変えていますが、本来は、名前部分に「管理人」とかとテキストを入れたり、あるいは他に何かしら一般のコメントと変化を付けたい場合に使うようなものなので、管理人だけというのであればもっと簡単に書けるわけですが、他の誰か、あるいはキーワードを含めたものに変化を付ける場合はひと工夫必要です。

わざわざ返信をくださったのに風邪をこじらせてしまって確認できずすみません。

Hidekichiさんのサンプルを使ってみたのですが、
デフォルトでは動くみたいですね。

某スレッド風とかはできないのでやはりクラスの違いみたいですね

あとは自分でできそうなので頑張ってみます。

ありがとうございました！！

Hidekichiさん
大変お手数おかけ致しまして申し訳ございませんでした。

あれからいろいろ試しながらトライしてやっと解決出来ました。

本当に初歩的なミスで恥ずかしながら言わせて頂きますと

コメントの名前の欄に割り当てれた名前を入れたら表示出来るようになりました。

素晴らしいスクリプトの提供心から感謝いたします。

ありがとございました！