求助：如何在自定义WordPress插件的短代码中引入Bootstrap

Hey there! Let's get your Bootstrap integration working smoothly with your WordPress plugin shortcode. I'll walk you through the complete implementation, including best practices to avoid conflicts and optimize loading.

First, let's finish the enqueue_styles and enqueue_scripts methods in your My_Wp_Tools_Public class. Make sure your file structure matches (Bootstrap CSS/JS in my-plugin/public/css and my-plugin/public/js):

class My_Wp_Tools_Public {
    private $plugin_name;
    private $version;

    public function __construct( $plugin_name, $version ) {
        $this->plugin_name = $plugin_name;
        $this->version = $version;
    }

    // Enqueue Bootstrap CSS
    public function enqueue_styles() {
        // Register and enqueue Bootstrap CSS
        wp_register_style(
            $this->plugin_name . '-bootstrap-css',
            plugin_dir_url( __FILE__ ) . 'css/bootstrap.min.css',
            array(), // No dependencies
            $this->version,
            'all' // Media type
        );
        wp_enqueue_style( $this->plugin_name . '-bootstrap-css' );
    }

    // Enqueue Bootstrap JS (plus Popper.js for Bootstrap 5 components like modals/dropdowns)
    public function enqueue_scripts() {
        // Register Popper.js (required for Bootstrap 5)
        wp_register_script(
            $this->plugin_name . '-popper-js',
            plugin_dir_url( __FILE__ ) . 'js/popper.min.js',
            array( 'jquery' ), // Depends on WordPress's built-in jQuery
            $this->version,
            true // Load in footer for better performance
        );

        // Register Bootstrap JS
        wp_register_script(
            $this->plugin_name . '-bootstrap-js',
            plugin_dir_url( __FILE__ ) . 'js/bootstrap.min.js',
            array( 'jquery', $this->plugin_name . '-popper-js' ),
            $this->version,
            true
        );

        // Enqueue both scripts
        wp_enqueue_script( $this->plugin_name . '-popper-js' );
        wp_enqueue_script( $this->plugin_name . '-bootstrap-js' );
    }
}

Loading Bootstrap site-wide can cause conflicts with your theme's styles/scripts. Instead, load it only on pages/posts that use your shortcode:

Modify the enqueue methods to check for your shortcode:

public function enqueue_styles() {
    global $post;
    // Replace 'my_custom_shortcode' with your actual shortcode slug
    if ( isset( $post ) && has_shortcode( $post->post_content, 'my_custom_shortcode' ) ) {
        wp_register_style(
            $this->plugin_name . '-bootstrap-css',
            plugin_dir_url( __FILE__ ) . 'css/bootstrap.min.css',
            array(),
            $this->version,
            'all'
        );
        wp_enqueue_style( $this->plugin_name . '-bootstrap-css' );
    }
}

// Do the same for enqueue_scripts
public function enqueue_scripts() {
    global $post;
    if ( isset( $post ) && has_shortcode( $post->post_content, 'my_custom_shortcode' ) ) {
        wp_register_script(
            $this->plugin_name . '-popper-js',
            plugin_dir_url( __FILE__ ) . 'js/popper.min.js',
            array( 'jquery' ),
            $this->version,
            true
        );
        wp_register_script(
            $this->plugin_name . '-bootstrap-js',
            plugin_dir_url( __FILE__ ) . 'js/bootstrap.min.js',
            array( 'jquery', $this->plugin_name . '-popper-js' ),
            $this->version,
            true
        );
        wp_enqueue_script( $this->plugin_name . '-popper-js' );
        wp_enqueue_script( $this->plugin_name . '-bootstrap-js' );
    }
}

Now register your shortcode and render Bootstrap-powered content:

Add these methods to your My_Wp_Tools_Public class:

public function register_shortcodes() {
    // Replace 'my_custom_shortcode' with your shortcode slug
    add_shortcode( 'my_custom_shortcode', array( $this, 'render_shortcode_content' ) );
}

public function render_shortcode_content( $atts ) {
    // Set default shortcode attributes
    $atts = shortcode_atts( array(
        'title' => 'My Plugin Content',
    ), $atts );

    // Output Bootstrap markup (use ob_start/ob_get_clean to avoid output issues)
    ob_start();
    ?>
    <div class="container my-4">
        <div class="card shadow-sm">
            <div class="card-header">
                <h3 class="card-title"><?php echo esc_html( $atts['title'] ); ?></h3>
            </div>
            <div class="card-body">
                <p class="card-text">This is a Bootstrap-styled component from your plugin!</p>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#pluginModal">
                    Open Modal
                </button>
            </div>
        </div>

        <!-- Bootstrap Modal Example -->
        <div class="modal fade" id="pluginModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Plugin Modal</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        This modal uses Bootstrap's JS!
                    </div>
                </div>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

Don't forget to hook the shortcode registration in your define_public_hooks method:

$this->loader->add_action( 'init', $plugin_public, 'register_shortcodes' );

If your theme already loads Bootstrap, you might run into style/JS conflicts. Try these fixes:

• Use scoped CSS (Bootstrap 5.3+): Wrap your plugin's Bootstrap styles in a custom class (e.g., .my-plugin-bootstrap) so styles only apply to your shortcode content.
• Deregister theme Bootstrap (carefully): If you need to use your own Bootstrap version, deregister the theme's assets, but note this might break theme styling.

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