如何为WordPress主题Donovan添加双侧边栏（优先代码实现）

Hey there! Let's break down how to add left + right dual sidebars to the Donovan theme, starting with the code-based approach you prefer (since it’s more maintainable and customizable than plugins long-term).

Step 1: Set Up a Child Theme First #

Never modify the parent Donovan theme directly—updates will wipe your changes. Create a child theme in 2 minutes:

1. Make a new folder named donovan-child in your wp-content/themes/ directory.
2. Inside it, create a style.css file with this code:

/*
Theme Name: Donovan Child
Theme URI: https://your-site-url.com/
Description: Child theme for Donovan
Author: Your Name
Template: donovan
Version: 1.0.0
*/

3. Create a functions.php file in the child folder to enqueue the parent theme’s styles:

<?php
add_action( 'wp_enqueue_scripts', 'donovan_child_enqueue_styles' );
function donovan_child_enqueue_styles() {
    wp_enqueue_style( 'donovan-parent-style', get_template_directory_uri() . '/style.css' );
}

Activate this child theme in your WordPress dashboard before moving on.

Step 2: Register a Left Sidebar #

Add this code to your child theme’s functions.php to register a new left sidebar (mirroring the existing right sidebar’s setup):

function donovan_child_register_sidebars() {
    register_sidebar( array(
        'name'          => __( 'Left Sidebar', 'donovan-child' ),
        'id'            => 'sidebar-left',
        'description'   => __( 'Widgets for the left sidebar', 'donovan-child' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget'  => '</aside>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'donovan_child_register_sidebars' );

Now you’ll see a "Left Sidebar" option in Appearance > Widgets to add your widgets.

Step 3: Update Template Files to Display Both Sidebars #

Donovan uses templates like page.php, single.php, and archive.php for main content. Copy these files from the parent donovan theme folder to your donovan-child folder, then edit each one:

Look for the main content structure—you’ll see something like this (simplified):

<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <!-- Content here -->
    </main>
</div>
<?php get_sidebar(); ?>

Replace that with this structure to include both sidebars:

<div class="dual-sidebar-container">
    <?php get_sidebar( 'left' ); ?> <!-- Load left sidebar -->
    <div id="primary" class="content-area">
        <main id="main" class="site-main" role="main">
            <!-- Content here -->
        </main>
    </div>
    <?php get_sidebar(); ?> <!-- Keep existing right sidebar -->
</div>

Step 4: Style the Dual Sidebar Layout #

Add this CSS to your child theme’s style.css to adjust widths, spacing, and add the green border styling you referenced:

/* Dual Sidebar Container */
.dual-sidebar-container {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Left Sidebar */
#sidebar-left {
    width: 25%;
    border: 2px solid #2ecc71; /* Green border matching your example */
    padding: 15px;
}

/* Main Content Area */
.content-area {
    width: 50%;
}

/* Right Sidebar */
#sidebar {
    width: 25%;
    border: 2px solid #2ecc71; /* Green border for consistency */
    padding: 15px;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .dual-sidebar-container {
        flex-direction: column;
    }
    #sidebar-left, .content-area, #sidebar {
        width: 100%;
        margin-bottom: 20px;
    }
}

Tweak the widths, border colors, or padding to match your exact design needs.

Alternative: Plugin Solution (If Code Feels Overwhelming) #

If you’d rather skip coding, use a sidebar management plugin like Custom Sidebars or Widget Options:

• Install and activate the plugin.
• Create a new "Left Sidebar" widget area.
• Use the plugin’s template assignment tool to add the left sidebar to your desired pages/posts alongside the existing right sidebar.
• Adjust the layout with the plugin’s built-in styling options or custom CSS.

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