Simplicityの特徴 › フォーラム › 要望・機能追加など › コメント欄の名前の欄に特定のキーワードを入れることでアイコンや背景を入れられるようにしたい
- このトピックには11件の返信、2人の参加者があり、最後にヒロにより7年、 1ヶ月前に更新されました。
-
投稿者投稿
-
-
2017年3月3日 11:08 AM #50738たけしゲスト
いつもSimplicity使わせて頂いています。
お世話になります。質問というか相談なのですが、Simplicityのコメント欄のの名前欄に
特定のキーワードを入れることで何らかのアクション、
例えば名前の横にアイコンを入れたり、背景にキャラ画像を加えたいです。イメージ画像
具体的に理想の動作を行ってるサイトはこちらです。
最初はあんまり必要性は感じられなかったのですが、
このような機能を追加したブログのコメント数は大幅に上昇しており、
SEO的にも効果があるのではないかなと思います。また、最近になってこのように手を加えるブログが増えてたので、
(特にスポーツ、ゲーム系では顕著)
そのような傾向とは裏腹に、それらの機能をもつプラグインが見つからなかったので、
標準装備の機能で、できたらいいなぁと思い、
このトピック作成に至りました。また、技術的な面で分かっているのは
JavaScriptを使用して、コメント欄に動作を加えているということ、
厳密にいえばjQueryを使ってコメント欄の「お名前」部分を取り出し、配列に入れた文字列が入っていたらそれと画像を置換しているということです。できれば、スマホにも対応できるのが望ましいなと思います。
お忙しいとは存じますが宜しくお願い致します。
Attachments:
-
2017年3月3日 11:12 AM #50740たけしゲスト
すいません。
リンクがうまく貼れていなかったようです。 -
2017年3月3日 3:47 PM #50743Hidekichiゲスト
コメントの名前で背景画像を分ける | 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の追記を対応させることでいくつでもその人の名前で決定された背景を入れることができます。
-
2017年3月3日 5:00 PM #50747Hidekichiゲスト
何かしらのキーワードは、何かしら具体例を書いてみて下さい。
-
2017年3月3日 5:43 PM #50748たけしゲスト
迅速な返信ありがとうございます。
この形式の場合、
yhira(ラーメン大好き)などの場合でもyhiraの画像を表示することは可能でしょうか? -
2017年3月3日 6:43 PM #50749たけしゲスト
あ、少し例が悪かったです
yhiraという言葉さえ名前欄に含んでいればyhiraに登録してある画像を表示することは可能でしょうか?
また、画像表示に優先順位を付けることは可能でしょうか? -
2017年3月3日 10:28 PM #50751Hidekichiゲスト
> yhiraという言葉さえ名前欄に含んでいれば
> yhiraに登録してある画像を表示することは可能でしょうか?サンプルで言えば、名前に「わいひら」とあればyhiraというクラスを返すということです。正規表現で絞れば、キーワードが含んでいさえすればそれに対応するクラスを返すのはできると思います。
> 画像表示に優先順位を付けることは可能でしょうか?
どういう時にどうするかという感じで、具体例を書いて下さい。
-
2017年3月5日 7:36 PM #50796わいひらキーマスター
書き込まれた機能は、汎用的な機能(多くの人が利用する機能)とは言えないので、標準機能として追加することはないと思います。
また、例に出されているサイトなどは、そのサイトに合った画像が表示されています。また、そうでないと意味がないと思います。
標準機能で、どんなサイトのイメージにでも合う画像(独自性を出せる画像)を表示させるのは不可能です。
ですので、hidekichiさんが書かれているように、独自カスタマイズで対応したいただければと思います。 -
2017年3月10日 4:46 PM #50914ヒロゲスト
いつもお世話になっております。
このアイデアも使い方次第では面白そうなので試しにやってみたのですが
上手く出来ません。
それで少し確認と質問をさせて下さい。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のスクリプトはそのままコピーをしたのですが合っていますか?
スタイルシートみたいに何かしら選ぶ項目があるのでしょうか?
宜しくお願いします。 -
2017年3月11日 12:02 AM #50930Hidekichiゲスト
> 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で正しく画像が読み込まれているかどうかの確認がまず必要です。
あわせてコンソールにエラーがでていないかどうかの確認も必要です。サンプルでは、質問に合わせて背景を変えていますが、本来は、名前部分に「管理人」とかとテキストを入れたり、あるいは他に何かしら一般のコメントと変化を付けたい場合に使うようなものなので、管理人だけというのであればもっと簡単に書けるわけですが、他の誰か、あるいはキーワードを含めたものに変化を付ける場合はひと工夫必要です。
-
2017年3月12日 12:41 AM #50955たけしゲスト
わざわざ返信をくださったのに風邪をこじらせてしまって確認できずすみません。
Hidekichiさんのサンプルを使ってみたのですが、
デフォルトでは動くみたいですね。某スレッド風とかはできないのでやはりクラスの違いみたいですね
あとは自分でできそうなので頑張ってみます。
ありがとうございました!!
-
2017年3月13日 2:50 AM #50997ヒロゲスト
Hidekichiさん
大変お手数おかけ致しまして申し訳ございませんでした。あれからいろいろ試しながらトライしてやっと解決出来ました。
本当に初歩的なミスで恥ずかしながら言わせて頂きますと
コメントの名前の欄に割り当てれた名前を入れたら表示出来るようになりました。
素晴らしいスクリプトの提供心から感謝いたします。
ありがとございました!
-
-
投稿者投稿
- トピック「コメント欄の名前の欄に特定のキーワードを入れることでアイコンや背景を入れられるようにしたい」には新しい返信をつけることはできません。