自定义输出wp列表类别 _WordPress自定义页面

这是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="http://www.srcmini.com/#"> < 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="http://www.srcmini.com/#"> < 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="http://www.srcmini.com/#"> < 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>

【自定义输出wp列表类别】这是更新的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=http://www.srcmini.com/''.get_term_link( $product_category-> term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category-> term_id.')'; // check last child category and change linkif($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=http://www.srcmini.com/''.get_term_link( $product_category-> term_id, 'product_category' ).'\''; else $catlink = 'toggleChildCategories('.$product_category-> term_id.')'; // check last child category and change linkif($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; ?>