自定义输出 wp 列表类别

Question

这是 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 个深度 child。我想自定义输出 html 每个类别级别的背景图像和点击功能以显示每个 children

这是我想添加到 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>

这里是 children html 当点击 parent 类别时：

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

Answer 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;     
?>

自定义输出 wp 列表类别

Custom output wp list category

php

wordpress

wordpress-theming

custom-wordpress-pages