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

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

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

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

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

고맙습니다.

위에서 언급하신 이 코드를

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

감사합니다.

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

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

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

#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; }

고맙습니다.

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

https://imgur.com/gallery/aalbh

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

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

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

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

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

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

감사합니다..

(예-대메뉴만 표시)

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

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

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; }

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

고맙습니다.

아래는 퓨어 갤러리 스킨의 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>

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

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

<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>

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

고맙습니다.