如何在WordPress中实现左侧点击标题右侧显示详情功能？

Hey there! Let me walk you through practical ways to build that left-title-click-to-right-detail setup in WordPress—no overly fancy stuff, just solutions that work.

If you don’t want to mess with code, these plugins get the job done fast:

• Accordion Blocks: While it’s built for collapsible sections, you can tweak it with custom CSS to turn it into a left-right layout. Each heading gets paired with a content panel; just style the headings to sit on the left and content on the right, and clicks will toggle visibility.
• Tabs Widget for WordPress: This one natively supports vertical tab layouts. Pick the vertical mode, and you’ll get a left-side title bar with right-side content panels—super straightforward to configure.
• WPBakery Page Builder: If you already use this visual editor, its Tabs module lets you switch to a vertical layout with just a few clicks. Drag-and-drop your content, set the orientation, and you’re good to go.

For total style flexibility, building your own shortcode setup is the way to go. Here’s how:

Step 1: Add the Shortcode to Your Theme #

Pop this into your child theme’s functions.php file (always use a child theme to avoid losing code on theme updates):

function left_right_detail_shortcode($atts, $content = null) {
    static $item_count = 0;
    $item_count++;
    $atts = shortcode_atts(array(
        'title' => 'Default Title',
    ), $atts);
    
    ob_start(); ?>
    <div class="lr-detail-item">
        <button class="lr-detail-title" data-target="#lr-detail-content-<?php echo $item_count; ?>">
            <?php echo esc_html($atts['title']); ?>
        </button>
        <div id="lr-detail-content-<?php echo $item_count; ?>" class="lr-detail-content">
            <?php echo do_shortcode($content); ?>
        </div>
    </div>
    <?php return ob_get_clean();
}
add_shortcode('lr_detail', 'left_right_detail_shortcode');

Step 2: Add Styling with CSS #

Paste this into your theme’s Custom CSS section (Appearance > Customize > Additional CSS):

.lr-detail-container {
    display: flex;
    gap: 20px;
    margin: 20px 0;
}
.lr-detail-title {
    width: 250px;
    padding: 12px 15px;
    border: none;
    background: #f5f5f5;
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}
.lr-detail-title:hover, .lr-detail-title.active {
    background: #2d3748;
    color: white;
}
.lr-detail-content {
    flex: 1;
    padding: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    display: none;
}
.lr-detail-content.active {
    display: block;
}

/* Make it responsive for mobile */
@media (max-width: 768px) {
    .lr-detail-container {
        flex-direction: column;
    }
    .lr-detail-title {
        width: 100%;
        border-bottom: 1px solid #e2e8f0;
    }
}

Step 3: Add the JavaScript Toggle #

Drop this script into your theme’s footer.php (right before </body>) or use a custom JS plugin:

document.addEventListener('DOMContentLoaded', function() {
    const titleButtons = document.querySelectorAll('.lr-detail-title');
    
    titleButtons.forEach(button => {
        button.addEventListener('click', function() {
            // Reset all active states
            titleButtons.forEach(btn => btn.classList.remove('active'));
            document.querySelectorAll('.lr-detail-content').forEach(content => content.classList.remove('active'));
            
            // Activate current item
            this.classList.add('active');
            const targetContent = document.querySelector(this.getAttribute('data-target'));
            if (targetContent) targetContent.classList.add('active');
        });
    });
    
    // Auto-activate the first item on page load
    if (titleButtons.length > 0) titleButtons[0].click();
});

How to Use It #

In your WordPress page/post, add this structure:

<div class="lr-detail-container">
    [lr_detail title="First Section Title"]
    Here’s the detailed content for the first section—you can add text, images, or even other shortcodes here!
    [/lr_detail]
    
    [lr_detail title="Second Section Title"]
    This is the content that shows up when you click the second title.
    [/lr_detail]
    
    [lr_detail title="Third Section Title"]
    And this is the third section’s content.
    [/lr_detail]
</div>

• Plugin Selection: Always pick plugins with recent updates and high user ratings—this avoids compatibility issues with newer WordPress versions.
• Child Theme First: Never edit your parent theme’s files directly; use a child theme to preserve custom code through theme updates.
• Gutenberg Alternative: If you prefer the Block Editor, you can build a custom block using WordPress’s Create Block tool. It’s a bit more work, but integrates seamlessly with the editor.
• Performance: If you’re using multiple such sections, consider minifying your CSS/JS to keep page load times snappy.

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