srcmini这是wp列表类别的输出：
Personal Area
Allergy Asthma Dust
Restaurant
Cafe
Bar
Chemical & Smoke
Airport
Dump & Mold
Pet & Dander
Commercial Area
Commercial child 1
Commercial child 1-2
Commercial child 1-3
Commercial child 2
Commercial child 2-1
这是我在front-page.php上的代码
<?php wp_list_categories('taxonomy=product_category&hide_empty=0&orderby=id&title_li=');?>
该类别有2个深度子级。我想自定义带有每个类别级别的背景图像的输出html, 并单击功能显示每个孩子
这是我要在wp列表类别中添加的html：
<div class="row">
<div class='col-md-6 pr-0'>
<a href="#">
<div class="personal text-right">
<p>I want to improve air quality in my</p>
<h4>PERSONAL AREA</h4>
</div>
</a>
</div>
<div class='col-md-6 pl-0'>
<a href="#">
<div class="commercial text-left">
<p>I want to have better air quality in my</p>
<h4>COMMERCIAL AREA</h4>
</div>
</a>
</div>
</div>
这是当单击父类别时的子HTML：
<div class="row">
<div class='col-md-12 pr-0'>
<a href="#">
<div class="personal text-right">
<h4>What do you want to get rid off ?</h4>
<p>Allergy Asthma Dust</p>
<p>Chemical & Smoke</p>
<p>Dump & Mold</p>
<p>Pet & Dander</p>
</div>
</a>
</div>
这是更新的PHP代码
<?php
$product_categories = get_terms( array(
'taxonomy' => 'product_category', 'hide_empty' => false, 'orderby' => 'ID', ) );
$cnt = 0;
foreach($product_categories as $product_category) :
$cnt++;
if( count(get_term_children( $product_category->term_id, 'product_category' )) == 0) $catlink = 'document.location.href=\''.get_term_link( $product_category->term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category->term_id.')'; // check last child category and change link
if($product_category->parent == 0 && $cnt % 2 != 0) { // top-level parent
echo '<div class="col-md-6 pr-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
<a href="javascript:void(0);" onClick="'.$catlink.'">
<div class="personal text-right">
<p>'.$product_category->description.'</p>
<h4>'.$product_category->name.'</h4>
</div>
</a>
</div>';
}
if($product_category->parent == 0 && $cnt % 2 == 0) { // top-level parent
echo '<div class="col-md-6 pl-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
<a href="javascript:void(0);" onClick="'.$catlink.'">
<div class="commercial text-left">
<p>'.$product_category->description.'</p>
<h4>'.$product_category->name.'</h4>
</div>
</a>
</div>';
}
else { // child
if($product_category->term_id == 4) {
echo '<div class="col-md-12 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
<h2>What do you want to get rid of ?</h2>
</div>';
}
if($product_category->term_id == 10) {
$parentname=get_term_by('id', $product_category->parent, 'product_category');
echo '<div class="col-md-12 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
<h2>Where do you want to get rid of</h2>
<h3>'.$parentname->name.'</h3>
</div>';
}
echo '<div class="col-md-2 border2 cat-parent-'.$product_category->term_id.' cat-children cat-item-'.$product_category->parent.' hide">
<a href="javascript:void(0);" onClick="'.$catlink.'">
<h5>'.$product_category->name.'</h5>
</a>
</div>';
}
endforeach;
?>
#1
你可以使用get_terms()实现自定义布局。
<?php
$product_categories = get_terms( array(
'taxonomy' => 'product_category', 'hide_empty' => false, 'orderby' => 'ID', ) );
foreach($product_categories as $product_category) :
if($product_category->parent > 0) $hideshow='cat-item-'.$product_category->parent.' hide'; else $hideshow='cat-parent cat-parent-'.$product_category->parent.' show'; // hide child categories and append parent category
echo '<div class="col-md-6 pr-0 cat-parent-'.$product_category->term_id.' '.$hideshow.'">
<a href="javascript:void(0);" onClick="toggleChildCategories('.$product_category->term_id.');">
<div class="personal text-right">
<p>'.$product_category->description.'</p>
<h4>'.$product_category->name.'</h4>
</div>
</a>
</div>';
endforeach;
?>
添加此JS, 这将在单击父类别时切换适当的子类别。
<script>
function toggleChildCategories(catid)
{
jQuery('.cat-parent-'+catid).hide(); // hide particular parent
jQuery('.cat-parent').hide(); // hide all parents
jQuery('.cat-item-'+catid).slideToggle(100); // toggle child
}
</script>
最初使用此CSS隐藏所有子类别。
<style>
.hide{display:none;}
</style>
希望这可以帮助。但是请注意, 这只是一个想法, 你需要进行必要的更改。
更新：父类别(仅顶层)和子类别的不同模板。
<?php
$product_categories = get_terms( array(
'taxonomy' => 'product_cat', 'hide_empty' => false, 'orderby' => 'ID', ) );
foreach($product_categories as $product_category) :
if( count(get_term_children( $product_category->term_id, 'product_category' )) == 0) $catlink = 'document.location.href=\''.get_term_link( $product_category->term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category->term_id.')'; // check last child category and change link
if($product_category->parent == 0) { // top-level parent
echo '<div class="col-md-6 pr-0 pl-0 cat-parent-'.$product_category->term_id.' cat-parent cat-parent-'.$product_category->parent.' show">
<a href="javascript:void(0);" onClick="'.$catlink.'">
<div class="personal text-right">
<p>'.$product_category->description.'</p>
<h4>'.$product_category->name.'</h4>
</div>
</a>
</div>';
}
else { // child
echo '<div class="col-md-2 border2 cat-parent-'.$product_category->term_id.' cat-item-'.$product_category->parent.' hide">
<a href="javascript:void(0);" onClick="'.$catlink.'">
<h5>'.$product_category->name.'</h5>
</a>
</div>';
}
endforeach;
?>
评论前必须登录！
注册