javascript - 使用 get_categories() 构建动态类别树

Question

由于似乎没有一个足够的且仍在积极开发的 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 个。为什么？

Answer 1

您的代码存在问题:

• 您有 catTogglerDIV 和 catTogglerDiv。为您的函数和变量提供有意义且一致的名称，当许多函数和变量具有相似的名称时，很容易迷失方向。

• 某些类别未显示，因为默认情况下 show_empty 为 true:Function_Reference/get_categories .

• 即使没有子类别，您也正在运行子类别foreach。

• InnerHTML 对我来说不起作用，已更改为 html()。

我最喜欢的小部件是文本小部件。为什么？因为我们可以将简码放在那里并执行 any kind of output通过我们的职能。通常，我不做小部件，我做短代码并使用这种技术。

启用此功能需要以下过滤器:

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