계층형 카테고리 문의입니다. (드롭다운 메뉴 형태)

수고하십니다 ^^

업데이트 해주신 계층형 카테고리 기능으로 퓨어갤러리 스킨을 수정하여 제품소개를 구현했습니다.

기능이 잘 작동하나 2 depth 메뉴의 장점인 하위 메뉴에 들어가지 않고 마우스 오버시 하위메뉴가 보여져서

한번에 하위메뉴로 들어갈 수 있게 하는것이 사용자를 더 배려하는것이 아닐까하는 생각이 들었습니다. (pc의 경우)

이런 이유로 퓨어갤러리 스킨 폴더의 list-category-tree-tab.php 를 살펴보았는데 온클릭시 하위 메뉴와

콘텐츠를 로딩시키는 구문인듯 보이더군요. 상위 메뉴에 마우스 롤오버시 하위 메뉴가 보여진 후 온클릭시 해당 메뉴의

콘텐츠를 로딩시키는 구조로 구현될 수 있는지 궁금합니다.

또 가능하다면 예시 코드를 알려주시면 감사하겠습니다.

 

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

    아래 코드를 넣어보시겠어요?

    2 depth 까지만 적용이 되는걸 확인했습니다.

    <div class="kboard-tree-category-search">
    	<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1">
    		<input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>">
    		<input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2">
    		<input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>">
    		
    		<div class="kboard-tree-category-wrap">
    			<?php $tree_category_list = $board->tree_category->getCategoryItemList()?>
    			<div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab">
    				<ul class="kboard-tree-category">
    					<li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li>
    					<?php foreach($tree_category_list as $item):?>
    					<li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>>
    						<a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a>
    						
    						<?php
    						$sub_tree_category_list = array();
    						foreach($board->tree_category->tree_category as $sub_item){
    							if($item['id'] == $sub_item['parent_id']){
    								$sub_tree_category_list[] = $sub_item;
    							}
    						}
    						?>
    						
    						<?php if($sub_tree_category_list):?>
    							<ul class="sub-tree-category">
    							<?php foreach($sub_tree_category_list as $sub_item):?>
    								<li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#"  onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')"><?php echo $sub_item['category_name']?></a></li>
    							<?php endforeach?>
    							</ul>
    						<?php endif?>
    					</li>
    					<?php endforeach?>
    				</ul>
    			</div>
    		</div>
    	</form>
    </div>
    
    <script>
    function kboard_tree_category_search_all(){
    	jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val('');
    	jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val('');
    	return kboard_tree_category_search('1', '');
    }
    function kboard_tree_category_search_1dapth(category1){
    	jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val('');
    	return kboard_tree_category_search('1', category1);
    }
    function kboard_tree_category_search_2dapth(category1, category2){
    	jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(category1);
    	return kboard_tree_category_search('2', category2);
    }
    </script>

     

    그리고 아래 CSS 코드도 추가를 해주세요.

    default 스킨 기준이기 때문에 사용하시는 스킨에 맞춰 코드를 반드시 수정해주셔야합니다.

    #kboard-default-list .kboard-tree-category { overflow: visible; }
    #kboard-default-list .kboard-tree-category>li { position: relative;  }
    #kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; }
    #kboard-default-list .sub-tree-category>li { display: block; margin: 0; padding: 0 5px; border: 0; list-style: none; }
    #kboard-default-list .sub-tree-category>li::before,
    #kboard-default-list .sub-tree-category>li::after { display: none; }
    #kboard-default-list .sub-tree-category>li>a { font-weight: normal !important; border-bottom: 2px solid transparent !important; }
    #kboard-default-list .sub-tree-category>li.kboard-category-selected a { font-weight: bold !important; }
    #kboard-default-list .kboard-tree-category>li .sub-tree-category { display: none; }
    #kboard-default-list .kboard-tree-category>li:hover .sub-tree-category { display: block; }

     

    앞으로 지속적으로 계층형 카테고리로 다양한 레이아웃을 만들 수 있도록 기능을 고도화해서 업데이트 하겠습니다.

    고맙습니다.

  • 안녕하세요~^^

    간단한 코드 수정으로는 어려울 듯합니다.

    직접 코드 수정이 가능하시다면 아래의 예제를 참고하신 후에 적용해보시겠어요?

    <script>
    var my_tree_category = kboard_current.tree_category;
    jQuery('.kboard-tree-category li').mouseover(function(){
    	var parent = jQuery(this).children('a').text();
    	jQuery.each(my_tree_category, function(index, element){
    		if(parent == element.category_name){
    			jQuery.each(my_tree_category, function(children_index, children_element){
    				if(element.id == children_element.parent_id){
    					jQuery('.kboard-tree-category').after('<div class="my-children">'+children_element.category_name+'</div>');
    				}
    			});
    		}
    	});
    });
    jQuery('.kboard-tree-category li').mouseout(function(){
    	jQuery('.my-children').remove();
    });
    </script>

    추후 연구 개발하여 계층형 카테고리 기능을 업데이트하도록 하겠습니다.

    고맙습니다.

  • 네 고맙습니다. 페이지에 적용해봤는데 작동하지 않아서 문의드렸습니다.

    아래는 퓨어 갤러리 스킨의 list-category-tree-tab.php 파일이고 위의 스크립트가 작동되는지 시간되실때 확인좀 부탁드리겠습니다.

     

    <script>
    var my_tree_category = kboard_current.tree_category;
    jQuery('.kboard-tree-category li').mouseover(function(){
    	var parent = jQuery(this).children('a').text();
    	jQuery.each(my_tree_category, function(index, element){
    		if(parent == element.category_name){
    			jQuery.each(my_tree_category, function(children_index, children_element){
    				if(element.id == children_element.parent_id){
    					jQuery('.kboard-tree-category').after('<div class="my-children">'+children_element.category_name+'</div>');
    				}
    			});
    		}
    	});
    });
    jQuery('.kboard-tree-category li').mouseout(function(){
    	jQuery('.my-children').remove();
    });
    </script>
    <div class="kboard-tree-category-search">
    	<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?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 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 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-2">
    						<?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 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>
  • 드롭다운 메뉴가 잘 구현되는것을 확인했습니다. 모바일에서의 표현방법에 대해서는 고민해봐야겠습니다.

    (예-대메뉴만 표시)

    소중한 시간 내어 도움주셔서 감사합니다 ^^

  • 저 코드를 기존 list.php 내용중 카테고리부분의 기존코드 삭제후 붙여넣었는데.. 이방법이 맞나요?

    했더니 아래 링크처럼 표시됩니다.

    https://imgur.com/gallery/aalbh

    첨부사진의 장면은..1차 카테고리중에서 나나나로 이동(클릭하진않고 마우스만 갖다댄상태)한 장면인데..

    2차카테고리가 바로아래로 말고 약간 우측으로 밀려서 표현되는데.. 좀 많이 우측밀려있어서.. 마치 다다다메뉴에 해당하는 것처럼 보여집니다.

    또한 1차카테고리 아래에 밑줄쫙 있는게,, 나나나로 이동을 하지않고 계속 가가가에 머물러 있습니다. (클릭을 하고나면 아주약간의 시간차를 두고 밑줄이 잘 이동합니다.)

    그리고 2차 카테고리가 드롭다운으로 보여질때 드롭다운의 배경 칼라를 약간이라도 더 어둡게해서 1차카테고리 메뉴와 구분이 되면 좋겠는데...

    위 세가지를 수정할 수 있을까요?

    초보라 질문이 많아 죄송합니다.

    감사합니다..

  • 안녕하세요.

    레이아웃 관련 문제는 저희가 직접 봐야 도움을 드릴 수 있습니다.

    확인 가능한 페이지 알려주시겠어요?

    드롭다운 배경색은 위의 코드 중에서 아래의 코드를

    #kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: #f9f9f9; }

    아래처럼 수정해주시면 됩니다.

    #kboard-default-list .sub-tree-category { position: absolute; padding: 0; min-width: 200px; background-color: black; }

    고맙습니다.

  • <div class="kboard-tree-category-search">
    	<form id="kboard-tree-category-search-form-<?php echo $board->id?>" method="get" action="<?php echo $url->toString()?>">
    		<?php echo $url->set('pageid', '1')->set('target', '')->set('keyword', '')->set('mod', 'list')->toInput()?>
    		
    		<input type="hidden" name="kboard_search_option[tree_category_1][key]" value="tree_category_1">
    		<input type="hidden" name="kboard_search_option[tree_category_1][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(1)?>">
    		<input type="hidden" name="kboard_search_option[tree_category_2][key]" value="tree_category_2">
    		<input type="hidden" name="kboard_search_option[tree_category_2][value]" value="<?php echo $board->tree_category->getCategoryNameWithDepth(2)?>">
    		
    		<div class="kboard-tree-category-wrap">
    			<?php $tree_category_list = $board->tree_category->getCategoryItemList()?>
    			<div class="kboard-search-option-wrap-1 kboard-search-option-wrap type-tab">
    				<ul class="kboard-tree-category">
    					<li<?php if(!$board->tree_category->getCategoryNameWithDepth(1)):?> class="kboard-category-selected"<?php endif?>><a href="#" onclick="return kboard_tree_category_search_all()"><?php echo __('All', 'kboard')?></a></li>
    					<?php foreach($tree_category_list as $item):?>
    					<li<?php if($board->tree_category->getCategoryNameWithDepth(1) == $item['category_name']):?> class="kboard-category-selected"<?php endif?>>
    						<a href="#" onclick="return kboard_tree_category_search_1dapth('<?php echo $item['category_name']?>')"><?php echo $item['category_name']?></a>
    						
    						<?php
    						$sub_tree_category_list = array();
    						foreach($board->tree_category->tree_category as $sub_item){
    							if($item['id'] == $sub_item['parent_id']){
    								$sub_tree_category_list[] = $sub_item;
    							}
    						}
    						?>
    						
    						<?php if($sub_tree_category_list):?>
    							<ul class="sub-tree-category">
    							<?php foreach($sub_tree_category_list as $sub_item):?>
    								<li<?php if($board->tree_category->getCategoryNameWithDepth(2) == $sub_item['category_name']):?> class="kboard-category-selected"<?php endif?>><a href="#"  onclick="return kboard_tree_category_search_2dapth('<?php echo $item['category_name']?>', '<?php echo $sub_item['category_name']?>')"><?php echo $sub_item['category_name']?></a></li>
    							<?php endforeach?>
    							</ul>
    						<?php endif?>
    					</li>
    					<?php endforeach?>
    				</ul>
    			</div>
    		</div>
    	</form>
    </div>
    
    <script>
    function kboard_tree_category_search_all(){
    	jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val('');
    	jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val('');
    	return kboard_tree_category_search('1', '');
    }
    function kboard_tree_category_search_1dapth(category1){
    	jQuery('input[name="kboard_search_option[tree_category_2][value]"]').val('');
    	return kboard_tree_category_search('1', category1);
    }
    function kboard_tree_category_search_2dapth(category1, category2){
    	jQuery('input[name="kboard_search_option[tree_category_1][value]"]').val(category1);
    	return kboard_tree_category_search('2', category2);
    }
    </script>

     

    위에서 언급하신 이 코드를

    워드프레스 관리자 -> 외모(테마 디자인) -> 테마 편집기 페이지에서 functions.php 파일 하단에 추가 하면 되는 건가요?

    감사합니다.

     

  • 안녕하세요.

    올려주신 코드를 테마 쪽 functions.php 파일이 아닌 스킨 쪽 파일을 수정해보시겠어요?

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

     

    만약, 아래 링크에 안내해드린 코드를 테마 쪽 functions.php 파일에 추가하셨다면

    해당 코드는 지우신 후 확인해주세요.

    https://www.cosmosfarm.com/threads/document/31320

    고맙습니다.

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