정말 쉬운 티스토리 이모티콘 사용 방법


티스토리 블로그를 시작하면서 개인적으로 실망스러웠던 부분중에 하나는 이모티콘이 다양하지 않다는 점이었습니다.

플러그인 메뉴도 찾아봤지만 원하는 설정은 찾아볼수 없었습니다. 



그럼 다른 블로거분들은 어떻게 사용하고 있을까?

구글링을 해보니 많은 블로거들이 평균적인 방법으로 글을 작성할때 이모티콘 이미지 파일을 업로드하고 이것을 본문에 첨부하여 사용하고 있었습니다.

그러나 이런 방식은 매번 글을 작성할때 마다 이미지 파일을 업로드 해야 한다는점이 생각보다 불편할것 같아서 나름대로 다른 방법을 생각해 스크립트로 작성해 보았습니다.

원리 및 유의사항

로드된 본문 내용과 댓글의 내용중 일치하는 단어가 있다면 이모티콘 이미지로 변환합니다.

이때 실제 작성한 글을 영구적으로 바꾸는것이 아니기 때문에 스트립트를 제거하면 원래의 작성한 내용을 볼수 있습니다.

단점으로는 스킨마다 레이아웃의 구조가 다른탓에 수정을 하기 위해서는 HTML에 대해 조금은 알아야 합니다.

그리고 본문, 댓글 작성중에는 매치되는 단어가 있더라도 이모티콘 이미지로 바뀌지 않습니다.

(이유 : 글 작성 페이지에서는 임의의 스트립트를 사용할수 없기 때문, 미리보기 사용가능)

사전준비



사용할 이모티콘 이미지 파일을 "HTML / CSS 편집" 에 업로드 합니다.

업로드된 파일을 찾아 마우스 오른쪽 클릭하여 링크주소를 복사해 둡니다.

그리고 </s_t3> 바로앞에 아래의 스크립트 코드를 넣어줍니다.

* 스크립트가 정상 작동하지 않는다면 주석처리(//~~) 되어 있는곳의 태그를 찾아 변경해야 합니다.

* 그래도 문제가 있다면 댓글을 남겨주세요.


<script>

// 매치단어를 이곳에서 추가

var withu_emoticon_list = {

"(매치단어)": "링크주소 이곳에(변환될 이미지)",

"(kakao_love)": "//tistory4.daumcdn.net/tistory/2458039/skin/images/kaka_love.png"

};


// 본문의 내용을 담고 있는 태그

var withu_content = "tt_article_useless_p_margin p";

// 댓글 전체를 포함하는 상단 태그의 Class Name

var withu_comment_list = "comment-list"; 

// 댓글의 내용을 담고 있는 태그

var withu_comment = "comment-content p"; 

// 댓글 더보기 버튼의 Class Name

var withu_comment_more = "tt_more_preview_comments_text";

// 댓글 더보기(마지막) 버튼의 Class Name

var withu_comment_more_last = "tt_more_preview_comments_wrap"; 


var withu_emoticon = function (aData) {

$.each(withu_emoticon_list, function(txt, url) {

if (aData.html().indexOf(txt) != -1) {

var reg = txt.replace(/([()_])/g, "\\$&");

aData.html(aData.html().replace(new RegExp(reg, "g"), '<img src="' + url + '">'));

}

return true;

});

}

$("." + withu_content + "," + " ." + withu_comment).each(function () {

withu_emoticon($(this));

});


$('.comments-wrap').on('click', 'input[type="submit"], .' + withu_comment_more, function() {

$(document).bind('DOMNodeInserted', "." + withu_comment_list, function(e) {

var target = $(e.target).attr("class");

if(target == withu_comment_list || target == withu_comment_more || target == withu_comment_more_last) {

$("." + withu_comment).each(function () {

withu_emoticon($(this));

});

}

});

});

</script>


이모티콘 withu.txt


사용법



스크립트에서 아래와 같이 설정했다면 본문에 (phone)이라는 단어가 있으면 핸드폰 이미지가 자동 출력됩니다.

ex) "(phone)": "핸드폰 이미지"


프로그래밍을 아무래도 독학으로 혼자하다보니 부족한 부분이 많습니다.

이점 감안해 주시고 ㅠ_ㅠ... 문제가 있는 부분은 댓글로 알려주시면 수정하도록 하겠습니다.

WithU

모바일 어플 및 PC 관련정보 제공

    이미지 맵

    유틸리티(PC) 다른 글

    댓글 2

    *

    *

    이전 글

    다음 글

    티스토리 툴바