태그 게시판 만들기 > 기술자료

• 목록

테그 게시판으로 변경하는 방법입니다.



1. skin / board / style.css 끝에 내용 추가
/* 태그 */
.tagList{width:100%;height:auto;overflow:hidden;font-size:0.7em;}
.tagList.view{padding-bottom:30px;position:relative;box-sizing:border-box;padding-left:30px}
.tagList.view i.material-icons{display:block;width:30px;height:30px;position:absolute;left:0;top:0;line-height:30px;text-align:center;color:#34c3d4}
.tagList.view .tagListIpt{height:auto;border:none;padding:0}
.tagList.view .tagListIpt ul li.tag{padding-right:10px}
.tagList.view .tagListIpt ul li.tag:hover{background:none}
.tagList.view .tagListIpt ul li.tag a{color:#34c3d4;}
.tagList.view .tagListIpt ul li.tag a:hover{text-decoration:underline}
.tagList .tagListTit{width:100%;height:auto;overflow:hidden;line-height:30px;box-sizing:border-box;padding-left:30px;position:relative}
.tagList .tagListTit u{color:#666;text-decoration:none}
.tagList .tagListTit i{width:30px;height:30px;position:absolute;left:0;top:0;text-align:center;line-height:30px;}
.tagList .tagListTit span{display:inline-block;float:right;color:#666;padding-right:10px;line-height:30px}
.tagList .tagListTit span a{color:#34c3d4;margin:0 5px}
.tagList .tagListTit span a:hover{color:#666}
.tagList .tagListIpt{background:#fff;width:100%;height:auto;overflow:hidden;box-sizing:border-box;padding:10px;border:1px solid #ccc}
.tagList .tagListIpt ul li{display:inline-block;float:left;color:#34c3d4;position:relative;padding-left:10px;padding-right:30px;line-height:30px}
.tagList .tagListIpt ul li.tag{cursor:pointer}
.tagList .tagListIpt ul li.tag:hover{background:#34c3d4;color:#fff}
.tagList .tagListIpt ul li i{display:block;width:30px;height:30px;line-height:30px;position:absolute;top:0;right:0;}
.tagList .tagListIpt ul li input[type='text']{padding:0 10px;color:#34c3d4;height:30px;background:none;border:none}
.tagList .tagListIpt ul li span.overlap{ color: #e82727; }

.tagInfo{width:100%;height:auto;overflow:hidden;margin-top:10px;min-height:30px}
.tagInfo a{display:inline-block;line-height:30px;color:#34c3d4;margin-right:5px}
.tagInfo a.onTag{color:#ff28ee;text-decoration:underline}
.tagInfo a:hover{text-decoration:underline}



2. skin / board / basic / list.skin.php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
아래에 내용 추가

// wr_tag 필드 추가
$field_query = "SHOW COLUMNS FROM {$write_table} WHERE `Field` = 'wr_tag';";
$field_row = sql_fetch( $field_query );
if(!$field_row['Field']) {
    sql_query(" ALTER TABLE `{$write_table}` ADD `wr_tag` varchar(255) default '' ", true);
}



3. skin / board / basic / write.skin.php

3-1. 페이지 상단에 css 추가하기
add_stylesheet('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">', 0);


3-2. 태그 입력창 추가
    <input type="hidden" name="wr_tag" id="wr_tag">
    <div class="tagList">
        <div class="tagListTit">
            <i class="material-icons">label</i>    태그입력 <u>( 최대15글자 / 10개 / <b>spacebar</b>를 이용해 작성 )</u>
        </diV>
        <div class="tagListIpt">
            <ul>
                <?php
                if($write['wr_tag']){
                    
                    $tags = explode(',',$write['wr_tag']);
                    for($i=0; $i<count($tags); $i++){
                        echo '<li class="tag">#<span>'.$tags[$i].'</span><i class="material-icons">clear</i></li>';
                    }
                }
                ?>
                <li class="tabTxt"><input type="text" id="tagIpt" placeholder="태그를 입력해주세요!" maxlength="15"></li>
            </ul>            
        </div>
    </div>


3-3. 페이지 하단에 script 추가
    <script>
    // 태그 스크립트
    $(window).ready(function(){
        
        $(document).on('click','.tag > i',function(){
            $(this).parent().remove();
        });
        
        $(".ppTag").click(function(){
            inputTag($(this).data('word'));
            return false;
        });

        $("#tagIpt").on("keyup", function(event) {
            $(".tagListIpt ul li span").removeClass('overlap');
            if(event.keyCode == 32){
                $(this).val($(this).val().replace(/ /gi, ""));
                inputTag($(this).val());
            }
        });

    });

    function inputTagList(){
        var linCnt = $(".tagListIpt ul li.tag").length;
        var tag = '';
        for(var i=0; i<linCnt; i++){
            var j = i+1;
            if(!tag){
                tag = $(".tagListIpt ul li:nth-child("+j+") span").html();
            }else{
                tag += ','+$(".tagListIpt ul li:nth-child("+j+") span").html();
            }
        }
        tag = tag.replace(" ", "");
        console.log('after replace : '+tag);
        $("#wr_tag").val(tag);
    }

    function chkOverlap(a){
        var linCnt = $(".tagListIpt ul li.tag").length;
        var overlap = false;
        for(var i=0; i<linCnt; i++){
            var j = i+1;
            if(a == $(".tagListIpt ul li:nth-child("+j+") span").html()){
                $(".tagListIpt ul li:nth-child("+j+") span").addClass('overlap');
                overlap = true;
            }
        }
        return overlap;
    }

    function inputTag(a){
        a = a.replace(/ /g, '');
        var linCnt = $(".tagListIpt ul li.tag").length;
        if(chkOverlap(a) == false){
            if(linCnt < 10){
                var taghtml_ = '';
                taghtml_ += '<li class="tag">#<span>';
                taghtml_ += a;
                taghtml_ += '</span><i class="material-icons">clear</i></li>';    
                
                $(".tabTxt").before(taghtml_);
            }else{
                alert('태그틑 최대 10개까지 입력가능합니다.');    
            }
            $("#tagIpt").val('');
        }
    }
    </script>



4. skin / board / view.skin.php

4-1. 상단에 css 추가
add_stylesheet('<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">', 0);


4-2. 테그가 보일 위치에 내용 추가    
    <!-- 태그 -->
    <?php
    //echo "wr_tag = ". $view['wr_tag'];
    if($view['wr_tag']){
        $tags = explode(',',$view['wr_tag']);
    ?>
        <div class="tagList view">
            <i class="material-icons">label</i>
            <div class="tagListIpt">
                <ul>
                    <?php for($i=0; $i<count($tags); $i++){?>
                        <li class="tag"><a href="<?php echo G5_BBS_URL; ?>/board.php?bo_table=<?php echo $bo_table?>&sfl=wr_tag&stx=<?php echo $tags[$i]?>"># <?php echo $tags[$i]?></a></li>
                    <?php }?>
                </ul>            
            </div>
        </div>
    <?php
    }
    ?>