使用 get_categories(）构建动态类别树

由于似乎没有一个足够且仍在积极开发的WordPress插件，允许我在不必使用小部件的情况下显示可折叠的类别树（我个人不喜欢小部件），我决定自己写一个。

我写了这段代码：

<script type="text/javascript">
    function toggleCatDiv(id) {
        if (jQuery("#catTogglerDiv-"+id).is(":visible")) {
            jQuery("#catToggler-"+id).innerHTML="►";
        }
        else {
            jQuery("#catToggler-"+id).innerHTML="▼";
        }
        jQuery("#catTogglerDIV-"+id).slideToggle("normal");
    }
</script>
<?php
$args = array('orderby' => 'name', 'parent' => 0 );
$categories = get_categories( $args );
foreach ( $categories as $category ) {
?>
<span style="cursor:pointer" id="catToggler-<?php echo $category->cat_ID; ?>" onclick="toggleCatDiv('<?php echo $category->cat_ID; ?>')">►</span> <a href="<?php echo get_category_link( $category->term_id ); ?>"><?php echo $category->name;?></a><br />
<div id="catTogglerDIV-<?php echo $category->cat_ID; ?>" style="margin-left:3em;visibility:hidden">
    <?php
    $args = array(
      'child_of'     => $category->cat_ID
    );
    $subcats = get_categories($args);
    foreach ( $subcats as $subcat ) {
        <a href="<?php echo get_category_link( $subcat->term_id ); ?>"><?php echo $subcat->name;?></a>
    }
    ?>
</div>
<?php
}
?>

如您所见，它旨在获取"主要类别"列表，并在单击每个子类别上的箭头时显示子类别列表。

现在单击箭头什么都不做（甚至不是 JS 错误），实际上只显示了 4 个主要类别中的 2 个。为什么？

代码问题：

你有catTogglerDIV和catTogglerDiv.为您的函数和变量指定有意义且一致的名称，当其中许多函数和变量具有相似的名称时，很容易迷失方向。
某些类别不显示，因为默认情况下show_empty为 true：Function_Reference/get_categories。
即使没有子猫，您也在运行子类别foreach。
InnerHTML对我不起作用，为html()而改变.

我最喜欢的小部件是文本小部件。为什么？因为我们可以将简码放在那里并通过我们的函数执行任何类型的输出。通常，我不做小部件，我做简码并使用这种技术。

启用此功能需要以下筛选器：

add_filter( 'widget_text', 'do_shortcode', 11 );

还有一个工作示例：

add_shortcode( 'cat_toggle', 'shortcode_so_19260684' );
function shortcode_so_19260684()
{
    wp_enqueue_script('jquery'); // Load jQuery only when shortcode present.
    # Start the output string
    $return = '
    <script type="text/javascript">
        function doToggle( id ) 
        {
            if ( jQuery( "#subCategories-" + id ).is( ":visible" ) )
                jQuery( "#catToggler-" + id ).html( "‣" );
            else
                jQuery( "#catToggler-" + id ).html( "▾" );
            jQuery( "#subCategories-" + id ).slideToggle( "normal" );
        }
    </script>';
    $categories = get_categories( array(
        'orderby'    => 'name', 
        'parent'     => 0, 
        'hide_empty' => false 
    ));
    foreach ( $categories as $category ) 
    {
        $subcats = get_categories( array(
            'child_of'   => $category->cat_ID, 
            'hide_empty' => false
        ));
        # Maybe useful
        if( !$subcats )
            $change_the_folding_indicator = 'ø';
        $return .= sprintf(
            '<span style="cursor:pointer" id="catToggler-%1$s" onclick="doToggle(''%1$s'')">‣</span> <a href="%2$s">%3$s</a><br />
            <div id="subCategories-%1$s" style="margin-left:3em;display:none">',
            $category->cat_ID,
            get_category_link( $category->term_id ),
            $category->name
        );
        # Add this level only if subcats not empty
        if( $subcats ) 
        {
            foreach ( $subcats as $subcat ) 
            {
                $return .= sprintf(
                    '<a href="%s">%s</a>',
                    get_category_link( $subcat->term_id ),
                    $subcat->name
                );
            }
        }       
        $return .= '</div>';
    }
    return $return;
}

使用 get_categories(） 构建动态类别树

Building a dynamic category tree with get_categories()