jQuery를 사용하여 WordPress_jquery에서 @ID 부동 디스플레이 구현

예: A가 메시지를 남겼고 B가 A에게 @로 답장을 보냈으므로 B의 답장은 다음과 같습니다.

@A
돈이 얼마나 있나요?

즉, @A에 마우스를 올리면 A의 댓글 내용이 플로팅 영역에 표시됩니다.

구현 단계
여기서는 iNove 테마를 예로 들어 설명하겠습니다.
1. 다음 코드를 commenttips.js로 저장하세요.

jQuery(document).ready(
 function(){
 var id=/^#comment-/;
 var at=/^@/;
 jQuery('#thecomments li p a').each(
  function() {
  if(jQuery(this).attr('href').match(id)&& jQuery(this).text().match(at)) {
   jQuery(this).addClass('atreply');
  }
  }
 );
 jQuery('.atreply').hover(
  function() {
  jQuery(jQuery(this).attr('href')).clone().hide().insertAfter(jQuery(this).parents('li')).attr('id','').addClass('tip').fadeIn(200);
  }, 
  function() {
  jQuery('.tip').fadeOut(400, function(){jQuery(this).remove();});
  }
 );
 jQuery('.atreply').mousemove(
  function(e) {
  jQuery('.tip').css({left:(e.clientX+18),top:(e.pageY+18)})
  }
 );
 }
)

2. commenttips.js 파일을 inove/js 디렉터리에 넣습니다.

3. style.css에 다음 스타일 코드를 추가합니다.

#thecomments .tip {
 background:#FFF;
 border:1px solid #CCC;
 width:605px;
 padding:10px !important;
 padding:10px 10px 0;
 margin-top:0;
 position:absolute;
 z-index:3;
}
#thecomments .tip .act {
 display:none;
}
*+html #thecomments .tip {
 padding:10px 10px 0 !important;
}

4. 테마에서 JavaScript를 호출하는 코드를 추가합니다. template/end.php를 열고