关于自动生成含分类及文章的目录侧边栏组件的技术问询

Great question—this is a super common need for sites that add content regularly, and you’ve got a few solid options to get this auto-updating, category-linked sidebar menu up and running. I’m assuming you’re using WordPress (since you mentioned sidebar widgets and category structures), but let me know if you’re on a different platform and I can adjust my recommendations!

First: Does Native WordPress Support This? #

Short answer: Not out of the box. The default Categories widget can show nested subcategories, but it doesn’t display posts under each category—and while the Recent Posts widget shows new content, it doesn’t tie it to category hierarchies. So you’ll need either a plugin or custom code to get the full auto-updating, category-linked post list you want.

Recommended Plugins (No Code Needed) #

These plugins are built to handle exactly what you’re asking for—they auto-sync new categories and posts, display nested hierarchies, and let you sort posts by publish date:

• Collapsible Categories Widget: A lightweight, focused plugin that creates a collapsible category/subcategory list. You can enable showing posts under each category, set post sorting to "publish date" (descending or ascending), and it will automatically update whenever you add a new category or publish a post. It also lets you tweak default expand/collapse behavior and basic styling.

• Advanced Sidebar Menu: A more feature-rich option that supports custom post types (if you need them), lets you exclude specific categories, and auto-detects new content. You can configure post sorting by date, show post counts, and customize the menu’s appearance to match your theme. It’s great if you want more control beyond the basics.

Custom Code Solution (For Full Control) #

If you prefer not to use plugins (or need a tailored setup), you can create a custom widget that pulls categories, subcategories, and posts dynamically—so it’s always up to date. Here’s a working example:

Step 1: Add the Widget Code #

Paste this into your theme’s functions.php file (or a child theme to avoid losing changes when you update your theme):

function custom_category_posts_widget() {
    register_widget('Custom_Category_Posts_Widget');
}
add_action('widgets_init', 'custom_category_posts_widget');

class Custom_Category_Posts_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'custom_category_posts_widget',
            __('Auto-Updating Category & Posts Menu', 'text_domain'),
            array('description' => __('Displays collapsible categories, subcategories, and posts sorted by date, auto-updates with new content.', 'text_domain'))
        );
    }

    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }

        // Fetch top-level categories
        $categories = get_categories(array(
            'parent' => 0,
            'orderby' => 'name',
            'order' => 'ASC'
        ));

        echo '<ul class="collapsible-category-menu">';
        foreach ($categories as $category) {
            echo '<li>';
            echo '<a href="' . get_category_link($category->term_id) . '">' . $category->name . '</a>';
            
            // Get subcategories for this category
            $subcategories = get_categories(array(
                'parent' => $category->term_id,
                'orderby' => 'name',
                'order' => 'ASC'
            ));
            
            // Get posts in the main category
            $posts = get_posts(array(
                'category' => $category->term_id,
                'numberposts' => -1,
                'orderby' => 'date',
                'order' => 'DESC'
            ));

            // Show subcategories and posts if they exist
            if (!empty($subcategories) || !empty($posts)) {
                echo '<ul class="subcategory-posts">';
                
                // Render subcategories and their posts
                foreach ($subcategories as $subcat) {
                    echo '<li>';
                    echo '<a href="' . get_category_link($subcat->term_id) . '">' . $subcat->name . '</a>';
                    
                    $subcat_posts = get_posts(array(
                        'category' => $subcat->term_id,
                        'numberposts' => -1,
                        'orderby' => 'date',
                        'order' => 'DESC'
                    ));
                    
                    if (!empty($subcat_posts)) {
                        echo '<ul class="category-posts">';
                        foreach ($subcat_posts as $post) {
                            echo '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
                        }
                        echo '</ul>';
                    }
                    echo '</li>';
                }
                
                // Render posts in the main category
                if (!empty($posts)) {
                    echo '<li class="main-category-posts">';
                    echo '<ul class="category-posts">';
                    foreach ($posts as $post) {
                        echo '<li><a href="' . get_permalink($post->ID) . '">' . $post->post_title . '</a></li>';
                    }
                    echo '</ul>';
                    echo '</li>';
                }
                
                echo '</ul>';
            }
            echo '</li>';
        }
        echo '</ul>';

        echo $args['after_widget'];
    }

    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : __('Category & Posts Menu', 'text_domain');
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>"><?php _e('Title:'); ?></label> 
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php 
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }
}

Step 2: Add CSS for Collapsible Behavior #

Add this to your theme’s style.css file (or the Customizer’s Additional CSS section) to make the menu collapsible on hover:

.collapsible-category-menu .subcategory-posts {
    display: none;
    margin-left: 1.5rem;
    list-style-type: circle;
}

.collapsible-category-menu li:hover .subcategory-posts {
    display: block;
}

.collapsible-category-menu .category-posts {
    margin-left: 1.5rem;
    list-style-type: square;
}

Step 3: Activate the Widget #

Go to Appearance > Widgets in your WordPress dashboard, find the "Auto-Updating Category & Posts Menu" widget, and drag it to your sidebar. You can set a custom title, and it will automatically update whenever you add new categories or publish posts.

内容的提问来源于stack exchange，提问作者pistacchio