当前浏览:首页 / WordPress函数 / wp_dropdown_categories()

wp_dropdown_categories( array|string $args = '' )

显示或检索类别的HTML下拉列表

cat

category 分类more...

dropdown


描述

默认情况下禁用的“hierarchical”参数将覆盖depth参数,除非它为true。当参数为false时,它将显示所有类别。启用时,它将使用“depth”参数中的值。


参数

$args

(array|string)(可选) 用于生成类别下拉元素的数组或参数字符串。有关其他可接受参数的信息,请参阅WP_Term_Query::__construct()

  • 'show_option_all'
    (string) 显示所有类别的文本。
  • 'show_option_none'
    (string) 没有类别的显示文本。
  • 'option_none_value'
    (string) 未选定任何类别时使用的值。
  • 'orderby'
    (string) 用于排序类别的列。有关可接受值的列表,请参见get_terms()。默认值 'id' (term_id)。
  • 'pad_counts'
    (bool) 有关参数描述,请参见get_terms()。默认值为false。
  • 'show_count'
    (bool|int) 是否包括文章计数。接受0、1或其布尔等价项。默认值为0。
  • 'echo'
    (bool|int) 是回显还是返回生成的标记。接受0、1或其布尔等价项。默认值1。
  • 'hierarchical'
    (bool|int) 是否遍历分类层次结构。接受0、1或其布尔等价项。默认值为0。
  • 'depth'
    (int) 最大深度。默认值为0。
  • 'tab_index'
    (int) select元素的tab索引。默认值为0(无tabindex)。
  • 'name'
    (string) select元素的'name'属性的值。默认值'cat'。
  • 'id'
    (string) select元素的'id'属性的值。默认值为$name
  • 'class'
    (string) select元素的'class'属性的值。默认值'postform'。
  • 'selected'
    (int|string) 应选定的option的值。默认值为0。
  • 'value_field'
    (string) 应用于填充option元素的'value'属性的term字段。接受任何有效term字段:'term_id'、'name'、'slug'、'term_group'、'term_taxonomy_id'、'taxonomy'、'description'、'parent'、'count'。默认值'term_id'。
  • 'taxonomy'
    (string|array) 要检索的一个或多个分类法的名称。默认值'category'。
  • 'hide_if_empty'
    (bool) 如果未找到类别,则为True,则跳过生成标记。默认值为false(即使未找到任何类别,也创建select元素)。
  • 'required'
    (bool) <select>元素是否应该具有HTML5 'required'属性。默认值为false。
  • 'walker'
    (Walker) 用于构建输出的Walker对象。默认为空,导致使用Walker_CategoryDropdown实例。

默认值: ''


返回

(string) HTML类别下拉列表。


说明

如果要允许用户选择多个值,请使用wp_category_checklist()

wp_dropdown_cats 过滤器应用于输出字符串,在其被输出或返回之前。



源码

查看源码 官方文档


更新日志

版本描述
4.6.0引入了required参数。
4.2.0引入了value_field参数。
2.1.0开始引入

使用示例

  • 示例1

    您可以将Walker与此函数wp_dropdown_categories结合使用。

    示例–

    class Walker_custom_CategoryDropdown extends Walker_CategoryDropdown {
    
    	public function start_el( &$output, $category, $depth = 0, $args = array(), $id = 0 ) {
    		$pad = str_repeat('&nbsp;', $depth * 3);
     
    		/** This filter is documented in wp-includes/category-template.php */
    		$cat_name = apply_filters( 'list_cats', $category->name, $category );
     
    		if ( isset( $args['value_field'] ) && isset( $category->{$args['value_field']} ) ) {
    			$value_field = $args['value_field'];
    		} else {
    			$value_field = 'term_id';
    		}
     
    		$output .= "\t<option class=\"level-$depth\" value=\"" . esc_attr( $category->{$value_field} ) . "\"";
     
    		// Type-juggling causes false matches, so we force everything to a string.
    		if ( (string) $category->{$value_field} === (string) $args['selected'] )
    			$output .= ' selected="selected"';
    		
    		$output .= ' data-uri="'.get_term_link($category).'" '; /* Custom */
    		
    		$output .= '>';
    		$output .= $pad.$cat_name;
    		if ( $args['show_count'] )
    			$output .= '&nbsp;&nbsp;('. number_format_i18n( $category->count ) .')';
    		$output .= "</option>\n";
    	}
    }
    
    $cat_arg=array(
    	'taxonomy'=> 'category',
    	'class' => 'form-control',
    	'value_field' => 'term_id',
    	'selected' => $taxonomy_id,
    	
    	'orderby' => 'name',
    	'show_count' => 0,
    	'hierarchical' => true,
    	'hide_if_empty' => true,
    	
    	'walker'  => new Walker_custom_CategoryDropdown()
    );
    
  • 示例2

    本例使用JavaScript而不是submit按钮显示类别下拉列表,其中包含无选择option(label为“Select category”):

    <h2><?php _e( 'Posts by Category', 'textdomain' ); ?></h2>
    	<?php wp_dropdown_categories( 'show_option_none=Select category' ); ?>
    <script type="text/javascript">
    	<!--
    	var dropdown = document.getElementById("cat");
    	function onCatChange() {
    		if ( dropdown.options[dropdown.selectedIndex].value > 0 ) {
    			location.href = "<?php echo esc_url( home_url( '/' ) ); ?>?cat="+dropdown.options[dropdown.selectedIndex].value;
    		}
    	}
    	dropdown.onchange = onCatChange;
    	-->
    </script>
    
  • 示例3

    在本例中,使用了回显参数(echo=0)。一个简单的preg_replace插入JavaScript代码。它甚至可以在没有JavaScript的情况下工作(submit按钮由noscript标记包装)。

    <h2><?php _e( 'Posts by Category', 'textdomain' ); ?></h2>
    <form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
    
    	<?php
    	$args = array(
    		'show_option_none' => __( 'Select category', 'textdomain' ),
    		'show_count'       => 1,
    		'orderby'          => 'name',
    		'echo'             => 0,
    	);
    	?>
    
    	<?php $select  = wp_dropdown_categories( $args ); ?>
    	<?php $replace = "<select$1 onchange='return this.form.submit()'>"; ?>
    	<?php $select  = preg_replace( '#<select([^>]*)>#', $replace, $select ); ?>
    
    	<?php echo $select; ?>
    
    	<noscript>
    		<input type="submit" value="View" />
    	</noscript>
    
    </form>
    
  • 示例4

    默认情况下,wp_dropdown_categories仅返回已分配给至少一个文章的类别。要覆盖此设置,请将hide_empty参数设置为false("0")。

    <?php wp_dropdown_categories( 'hide_empty=0' ); ?>
  • 示例5

    在带有提交按钮的HTML选择表单中显示分层类别下拉列表,其中包含每个类别中的文章数。

    <h2><?php _e( 'Categories:', 'textdomain' ); ?></h2>
    <form id="category-select" class="category-select" action="<?php echo esc_url( home_url( '/' ) ); ?>" method="get">
    	<?php wp_dropdown_categories( 'show_count=1&hierarchical=1' ); ?>
    	<input type="submit" name="submit" value="view" />
    </form>
    
  • 示例6

    在以下示例中,当选择“类别”时,可以自动重定向到“类别详细信息”页面。

    <?php wp_dropdown_categories(); ?>
    
    <script>
      document.getElementById('cat').onchange = function(){
    	// if value is category id
        if( this.value !== '-1' ){
          window.location='/?cat='+this.value
        }
      }
    </script>
  • 示例7

    在下面的示例中,您将选定的添加到当前标签存档页面。

    <?php
    $tag_slug = get_query_var( 'tag' );
    wp_dropdown_categories(array('taxonomy'=> 'post_tag', 'selected'=>$tag_slug, 'show_option_none'=> 'Select an option', 'hide_empty' => 0, 'name' => 'listofoptions', 'value_field' => 'slug' ));?>
    <script>
    document.getElementById('listofoptions').onchange = function(){
    window.location='/tag' + '/' +this.value
    }
    </script>