个性化阅读
专注于IT技术分析

自定义输出wp列表类别

这是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;     
?>
赞(0) 打赏
未经允许不得转载:srcmini » 自定义输出wp列表类别
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏