优化WordPress短代码插件代码，消除冗余提升可读性

Hey there! Great job diving into WordPress plugin development and building this Bootstrap column shortcode—let's fix that redundant pageCol function and make it cleaner and more maintainable. The good news is your output buffer (ob_start()) setup plays nicely with both refactoring into methods or using template includes; we just need to eliminate the repetitive switch logic first.

Core Optimization: Ditch the Switch Statements #

The biggest issue is how you’re repeating almost identical HTML for each column type. Let’s break down the pattern in your code:

• When mobile="hide", the class follows: col-md-{size} col-lg-{size} d-none d-sm-none d-md-block
• When mobile="display", the class follows: col-sm-12 col-md-{size} col-lg-{size}

We can extract the column size from the type attribute and dynamically build the class string instead of hardcoding every case.

Refactored Code Example #

Here’s a cleaned-up version with safer content handling and no redundant logic:

public function pageCol($atts, $content) {
    // Safely sanitize allowed content (better than strip_tags)
    $allowed_tags = array(
        'p' => array(),
        'span' => array(),
        'div' => array(),
        'img' => array(
            'src' => array(),
            'alt' => array(),
            'class' => array(),
        ),
    );
    $content = wp_kses($content, $allowed_tags);

    // Parse shortcode attributes with defaults
    $val = shortcode_atts(array(
        'type' => 'col-12',
        'mobile' => 'display'
    ), $atts);

    // Extract column size from the "type" attribute (e.g., get "6" from "col-6")
    if (!preg_match('/col-(\d+)/', $val['type'], $matches)) {
        $size = '12'; // Fallback to full-width if type is invalid
    } else {
        $size = $matches[1];
    }

    // Dynamically build Bootstrap classes based on mobile setting
    if ($val['mobile'] === 'hide') {
        $class = "col-md-{$size} col-lg-{$size} d-none d-sm-none d-md-block";
    } else {
        $class = "col-sm-12 col-md-{$size} col-lg-{$size}";
    }

    // Option 1: Directly return the HTML string (most efficient for simple markup)
    return "<div class=\"" . esc_attr($class) . "\">" . $content . "</div>";

    // Option 2: Use a private method for rendering (great if you need to reuse logic)
    // return $this->renderColumn($class, $content);

    // Option 3: Use a template file (perfect for complex HTML structures)
    // ob_start();
    // include plugin_dir_path(__FILE__) . 'templates/column-template.php';
    // return ob_get_clean();
}

// If using Option 2, add this private method to your class
private function renderColumn($class, $content) {
    return "<div class=\"" . esc_attr($class) . "\">" . $content . "</div>";
}

Template File Example (for Option 3) #

If you prefer to keep HTML separate from logic, create templates/column-template.php in your plugin directory:

<div class="<?php echo esc_attr($class); ?>">
    <?php echo $content; ?>
</div>

The ob_start() will capture the output from this file just fine—no conflicts with your existing buffer setup.

Key Improvements #

1. No more redundant switch cases: The dynamic class generation handles all valid column types automatically.
2. Safer content sanitization: wp_kses() replaces strip_tags() to precisely control allowed tags and attributes (critical for WordPress security).
3. Flexible rendering options: Choose between direct string return, a reusable method, or a template file based on your future scaling needs.
4. Error handling: Falls back to full-width columns if the type attribute is malformed.

Extra Tips for Future Maintenance #

• Add validation for allowed column sizes (e.g., 3,4,6,8,12) if you want to restrict to standard Bootstrap options.
• Extend the class logic to support additional Bootstrap features (like offsets or alignment) by adding new shortcode attributes.
• Keep template files organized in a dedicated folder to separate presentation from business logic.

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