본문 바로가기

블로그/HTML 팁

티스토리 - 카테고리 글 더보기 플러그인 위치 변경하기

* 사용한 소스는 MissFlash 님께서 제작하신 것입니다. [http://blog.missflash.com/543]
* 또한 SenseChef 님의 undefined error 처리를 함께 적용하였습니다. [http://sensechef.com/120]

티스토리의 플러그인들은 본문의 마지막에 추가되는 형태로 구현됩니다. 즉, [# #_article_rep_desc_# #] 에 포함되어 출력이 되기 때문에 사용자가 원하는대로 위치를 수정하기가 난감합니다.

지금 이야기하는 카테고리 글 더보기 플러그인 또한 마찬가지이기 때문에 저처럼 스킨을 수정하여 본문의 아래에 이것저것 붙여놓으신 분들은 카테고리 글 더보기의 위치가 다소 쌩뚱맞은 곳에 출력되는 현상이 발생하곤 합니다. 그게 아니더라도 카테고리 글 더보기 플러그인의 출력 위치가 마음에 들지 않을 수도 있죠. 그럴 땐 자바 스크립트를 통해 카테고리 글 더보기의 출력 위치를 원하는 곳으로 바꿀 수 있습니다.



1. 카테고리 글 더보기 플러그인 활성화

먼저 관리자 -> 플러그인 -> 플러그인 설정으로 들어가 카테고리 글 더보기 플러그인을 활성화합니다.





2. 소스 코드 추가

플러그인을 활성화하였으면 꾸미기 -> HTML/CSS 편집으로 들어간 후 skin.html 항목에 다음의 소스들을 추가합니다.

▼ <head></head> 사이에 아래의 두 소스를 삽입(그냥 </title> 바로 뒤에 차례로 삽입하시면 됩니다.)

<script type="text/javascript" language="javascript">
var MissFlash_Div_Num = 1;
</script>

<script type="text/javascript" language="javascript">
function getElementsByClass(MissFlash_Div_Num,searchClass,node,tag){
    // JavaScript function was developed by MissFlash (http://blog.missflash.com)
    var classElements = new Array();
    if(node == null) node = document;
    if(tag == null) tag = '*';
    var els = node.getElementsByTagName(tag);
    var elsLen = els.length;
    var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
    var j = 0;
    var MissFlash_Check = 1;
    var MissFlash_ID = "MF_Reference" + MissFlash_Div_Num;
    for(i=0; i<elsLen; i++){
        if(pattern.test(els[i].className)){
            classElements[j] = els[i];
            j++;
            if(els[i].id.indexOf("MF_Reference") == -1){
                var result = els[i].innerHTML;
                els[i].style.display = "none";
            }
        }
    }
    return result;
}
</script>


이제 아래의 소스를 본인이 원하는 위치에 넣어주시면 해당 위치에 카테고리 글 더보기 플러그인이 출력됩니다.

▼ 카테고리 글 더보기 플러그인을 넣고 싶은 위치에 아래의 소스를 삽입

<div id="MF_Reference" class="another_category another_category_color_gray"></div>
<script type="text/javascript">
//<![CDATA[
// Created by MissFlash(http://blog.missflash.com)
var MF_Reference = document.getElementById('MF_Reference');
MF_Reference.setAttribute("id", "MF_Reference" + MissFlash_Div_Num);
MF_Reference.className = "another_category another_category_color_gray";
var ref_source = getElementsByClass(MissFlash_Div_Num,"another_category");
if (ref_source == null) //카테고리로 분류되지 않은 글이 있는 경우 에러처리
 {
   // alert("Error of NULL data"); This article doesn't have categories.
   // return true;
 }
else     // This article is classified into some of categories.
 {
   MF_Reference.innerHTML = ref_source;
   MissFlash_Div_Num += 1;
   //]]>
 }
</script>

이 때 another_category_color_gray 부분만 본인이 원하는 색상에 맞춰  Gray, Red, Blue, Green, Violet 으로 수정하여 적용하시면 됩니다. 그 외의 나머지 부분은 손대지 않으시는 게 좋습니다.



3. 카테고리 글 더보기 박스의 추가적인 수정

추가적으로 아래와 같이 스타일을 적용하여 카테고리 글 더보기 박스의 크기를 조절할 수 있습니다. another_category 박스의 padding 이 상하좌우 10px 이고 border 가 1px 이니 width 값은 원하는 크기에서 -22px 를 적용하시면 됩니다. 가운데 정렬이 필요하면 여백을 Auto 로 설정하시면 됩니다.

<div style="width: 688px; margin: 0px auto;" id="MF_Reference" class="another_category another_category_color_gray"></div>

계산하기 귀찮으시면 어차피 박스의 width 가 100% 이니 그냥 원하는 크기의 박스로 감싸셔도 됩니다.

<div style="width: 710px; margin: 0px auto;">
    <div id="MF_Reference" class="another_category another_category_color_gray"></div>
</div>


또한 날짜 부분이 출력되질 않길 원하시는 분들이 계시는데 그런 분들은 style.css 에 다음과 같은 .another_category 클래스 스타일을 추가하시면 됩니다.

.another_category td {display: none;}


그 외에 카테고리 글 더보기 박스에 배경 이미지를 넣고 싶다면 스킨에 이미지 파일을 업로드하고 .another_category 클래스에 아래와 같은 식으로 배경 스타일을 지정해주시면 됩니다.

.another_category {background: transparent url(./images/이미지파일) no-repeat center center;}


카테고리 글 더보기 플러그인을 다시 사용하면서 정리해봤습니다. 그동안 블로그에 관한건 하나도 정리를 안 했더라고요. 자꾸 까먹는데 말이죠. 앞으로는 제가 블로그에 적용했거나 필요한 것들도 정리해보려고 합니다. 이상입니다.