수고하십니다 ^^
업데이트 해주신 계층형 카테고리 기능으로 퓨어갤러리 스킨을 수정하여 제품소개를 구현했습니다.
기능이 잘 작동하나 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
고맙습니다.