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为真：Function_Reference/get_categories。
即使没有子猫，您也在运行子类别foreach。
InnerHTML不适用于我，已更改html()。

我最喜欢的小部件是Text Widget。为什么？因为我们可以在其中放置Shortcodes并通过我们的函数执行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;
}

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

1 个答案: