[英]Custom output wp list category
Here is the output from the wp list categories:这是 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
This is my code on front-page.php这是我在 front-page.php 上的代码
<?php wp_list_categories('taxonomy=product_category&hide_empty=0&orderby=id&title_li=');?>
The category have 2 depth child.该类别有 2 个深度孩子。 I want to custom the output html with background images each categories level and on click function to show each children我想自定义输出 html 和背景图像每个类别级别和单击功能以显示每个孩子
This is the html i want to added in wp list catgeories :这是我想在 wp list catgeories 中添加的 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>
Here is for the children html when click parent category:这是单击父类别时的子 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>
Here is the updated php code这是更新的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;
?>
You can use get_terms()
to achieve a custom layout.您可以使用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;
?>
Add this JS which would toggle appropriate child categories when the parent category clicked.添加此 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>
Use this CSS to hide all the child categories initially.最初使用此 CSS 隐藏所有子类别。
<style>
.hide{display:none;}
</style>
Hope this helps.希望这可以帮助。 But please note that this is just an idea and you need to make necessary alterations.但请注意,这只是一个想法,您需要进行必要的更改。
Update: Different templates for parent (top level alone) and child categories.更新:父(仅顶级)和子类别的不同模板。
<?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;
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.