将类别分解为单独的Div

时间:2016-09-09 作者:stucow88

我一直在和wp_list_categories( $args ); 显示分类法中的类别,我觉得这可能是错误的方法。现在我想知道是否有可能不将类别输出到无序列表中,而是将它们作为每个类别的单独div元素输出。有没有更好的替代方法?

<?php
   $args = array(
      \'show_option_none\'    => __( \'No treatment categories\' ),
      \'taxonomy\'            => \'treatment-categories\',
      \'title_li\'            => __( \'Treatment Categories\' )
   );

   wp_list_categories( $args );
?>
我最初的网站原型是使用网格系统,每个类别有单独的列。

Original site prototype demonstrating what I need to accomplish

我曾与get_categories( $args ); 我能够理解预期的内容,但我遇到了一个问题,即当用户单击“查看治疗”按钮时,我会尝试链接到每个类别,这会将用户带到404页面。这是我工作时创建的模板get_categories( $args );.

<?php get_header(); ?>

<section class="hero hero-sml hero-default no-marg-bottom">
   <div class="container clearfix">
      <h1>Treatments</h1>
   </div><!-- .container -->
</section><!-- .hero -->

<section class="margin-top container clearfix">
   <div class="row">

      <?php
         $args = array( 
            \'taxonomy\'  => \'treatment-categories\',
         );

         $categories = get_categories( $args );

         foreach( $categories as $category ) {
      ?>

      <div class="col-4 treatment-category">

         <h3>
            <?php echo $category->name; ?>
         </h3>

         <p>
            <?php echo $category->description; ?>
         </p>

         <p>
            <a class="btn btn-sml btn-clr btn-primary" href="<?php echo esc_url( $category_link ); ?>">
               View treatments
            </a>
         </p>

      </div><!-- .col-4 -->

      <?php
         }
      ?>

   </div><!-- .row -->

</section><!-- .container -->

<?php get_footer(); ?>
对于我如何实现这一目标的任何帮助,我都将不胜感激,因为我已经在这方面坚持了几周了。

2 个回复
SO网友:Dexter0015

您可以使用自定义Walker自定义呈现类别的方式,并将其作为函数的参数传递:


$args = array(
    \'show_option_none\'    => __( \'No treatment categories\' ),
    \'taxonomy\'            => \'treatment-categories\',
    \'title_li\'            => __( \'Treatment Categories\' )
    \'title_li\'            =>  \'\',
    \'walker\'              => new My_Walker_Category()
);
if ( count( get_categories( $args ) ) ) {
    wp_list_categories( $args );
}
其中,My\\u Walker\\u Category()扩展了Walker\\u类别。

该类只包含3个方法,您需要覆盖这些方法以满足您的需要。

例如,在start_lvlend_lvl 方法,您有一个相对于$args[\'style\']:


if ( \'list\' != $args[\'style\'] )
    return;
这与“style”参数或wp\\u list\\u类别有关:

“样式”(字符串)

用于显示类别列表的样式。如果是“列表”,类别将作为无序列表输出。如果留空或另一个值,类别将由标记分隔输出。默认“列表”。

因此,您可以在My\\u Walker\\u Category()中添加自定义样式(“div”为例),并根据需要自定义元素的渲染。

SO网友:cjbj

有几种方法可以实现这一点。最激进的是完全取代wp_list_categories. 这是您遵循的方法,但却被卡住了。Here is a tutorial 如何正确执行此操作。

其次,有一个过滤器wp_list_categories 它允许您操作函数输出的html。你可以使用regex expressions 要删除<ul> 标记并替换<li> 标记为<div>. 这种方法有点棘手,因为如果以错误的方式操作html,可能会导致页面损坏。使用jquery删除和添加标记可能更安全。

最后,根据您的目的,您可以保持html的原样并使用css 以你想要的方式得到东西。更具体地说:before:after 标记可用于在列表元素上添加各种效果。