1

由于似乎没有一个足够且仍在积极开发的 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; ?>')">►&lt;/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 个。为什么？

4

1 回答 1

1

您的代码存在问题：

  • 你有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\')">‣&lt;/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;
}
于 2013-10-09T01:45:56.427 回答