계층형 카테고리 숏코드 문의입니다.

워드프레스 게시판 KBoard(케이보드) 사용중입니다.

계층형 카테고리를 페이지 마다 삽입하려고 하는데

어떻게 해야할지 모르겠습니다.

예제 하나만 써주실수 있나요?

카테고리는 product 밑에 1,2,3,4,5 이런 형식으로 되어있습니다

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    KBoard 플러그인에서 특정 게시판의 계층형 카테고리를 숏코드로 표시하시려면

    1. 워드프레스 관리자 -> 외모 -> 테마 편집기 페이지에서 functions.php 파일 하단에

    아래의 코드를 추가해보시겠어요?

    add_shortcode('kboard_tree_category', 'my_kboard_tree_category');
    function my_kboard_tree_category($atts=array()){
    	$board_id = isset($atts['id']) ? $atts['id'] : '';
    	$action = isset($atts['url']) ? $atts['url'] : '';
    	
    	$url = new KBUrl();
    	$board = new KBoard($board_id);
    	
    	if($board_id){
    		ob_start();
    		?>
    		<div class="kboard-tree-category-search">
    			<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $action?>">
    				<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    				
    				<div class="kboard-tree-category-wrap">
    					<?php $tree_category_list = $board->tree_category->getCategoryItemList()?>
    					<div class="kboard-search-option-wrap-<?php echo $board->tree_category->depth?> kboard-search-option-wrap type-tab">
    						<input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][key]" value="tree_category_<?php echo $board->tree_category->depth?>">
    						<input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)?>">
    						<ul class="kboard-tree-category">
    							<li<?php if(!$board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return my_kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '')"><?php echo __('All', 'kboard')?></a></li>
    							<?php foreach($tree_category_list as $item):?>
    							<li<?php if($board->tree_category->getCategoryNameWithDepth($board->tree_category->depth) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return my_kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a></li>
    							<?php endforeach?>
    						</ul>
    					</div>
    					
    					<?php foreach($board->tree_category->getSelectedList() as $key=>$category_name):?>
    						<?php $tree_category_list = $board->tree_category->getCategoryItemList($category_name)?>
    						<?php if($tree_category_list):?>
    						<div class="kboard-search-option-wrap-<?php echo $board->tree_category->depth?> kboard-search-option-wrap type-tab">
    							<input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][key]" value="tree_category_<?php echo $board->tree_category->depth?>">
    							<input type="hidden" name="kboard_search_option[tree_category_<?php echo $board->tree_category->depth?>][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)?>">
    							<ul class="kboard-tree-category">
    								<li<?php if(!$board->tree_category->getCategoryNameWithDepth($board->tree_category->depth)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return my_kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '')"><?php echo __('All', 'kboard')?></a></li>
    								<?php foreach($tree_category_list as $item):?>
    								<li<?php if($board->tree_category->getCategoryNameWithDepth($board->tree_category->depth) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return my_kboard_tree_category_search('<?php echo $board->tree_category->depth?>', '<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a></li>
    								<?php endforeach?>
    							</ul>
    						</div>
    						<?php endif?>
    					<?php endforeach?>
    				</div>
    			</form>
    		</div>
    		
    		<script>
    		function my_kboard_tree_category_search(index, value){
    			var length = jQuery('.kboard-search-option-wrap').length;
    			var tree_category_index = parseInt(index) +1;
    
    			if(value){
    				jQuery('input[name="kboard_search_option[tree_category_'+index+'][value]"]').val(value);
    			}
    			else{
    				jQuery('input[name="kboard_search_option[tree_category_'+index+'][value]"]').val('');
    			}
    			
    			for(var i=tree_category_index; i<=length; i++){
    				jQuery('.kboard-search-option-wrap-'+i).remove();
    			}
    			jQuery('#kboard-tree-category-search-form-1').submit();
    			
    			return false;
    		}
    		</script>
    		<?php
    		return ob_get_clean();
    	}
    }


     

    2. 워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보시겠어요?

    .kboard-tree-category-wrap { overflow: hidden; }
    .kboard-tree-category-wrap select { display: inline; margin: 0 0 5px 0; padding: 0; width: 100%; height: 28px; line-height: 28px; font-size: 12px; color: #666666; border-radius: 0; border: 1px solid #f1f1f1; background: white; vertical-align: middle; box-shadow: none; box-sizing: border-box; text-indent: 0; -webkit-appearance: menulist; -moz-appearance: menulist; appearance: menulist; }
    .kboard-tree-category-search .kboard-search-option-wrap.type-select { width: auto; }
    .kboard-tree-category-search .kboard-search-option-wrap.type-tab { width: 100%; }
    .kboard-tree-category { float: left; margin: 0 0 5px 0; padding: 0; width: 100%; list-style: none; border: 0; background-color: #f9f9f9; overflow: hidden; }
    .kboard-tree-category li { display: inline-block; *display: inline; zoom: 1; margin: 0; padding: 0 5px; border: 0; list-style: none; }
    .kboard-tree-category li::before,
    .kboard-tree-category li::after { display: none; }
    .kboard-tree-category li a { display: block; padding: 10px 10px 8px 10px; font-size: 13px; border: 0; border-bottom: 2px solid transparent; text-decoration: none; text-shadow: none; box-shadow: none; color: #515151; }
    .kboard-tree-category li.kboard-category-selected a { font-weight: bold; border-bottom: 2px solid #545861; color: #545861; }
    .kboard-tree-category-search { float: left; width: 100%; }
    .kboard-tree-category-search .kboard-search-option-wrap { margin-right: 5px; float: left; }

    3. 페이지나 위젯에 아래의 숏코드를 추가해보세요.

    [kboard_tree_category id="1" url="게시판주소"]

    위의 코드에서 id 부분은 실제 게시판 id로 적용해보세요.

    url 부분은 실제 게시판 주소로 적용해보세요.

     

    안내해드린 코드는 탭 형식 계층형 카테고리를 기준으로 안내해드렸습니다.

    셀렉트 형식 계층형 카테고리로 적용하시려면

    아래의 코드에서 생략된 부분의 코드를

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/list-category-tree-select.php 파일의 코드로 교체해보시겠어요?

    ob_start();
    ?>
    ...
    
    <script>

    고맙습니다.

  • 적용해 보겠습니다~ 감사합니다!!

이미지 사진은 imgur에 업로드한 뒤 링크 걸어주세요.
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기