WordPress手工插件短代码开发及联动下拉框数据获取求助

Hey there! Let's break down how to solve both of your plugin challenges—getting that country-language dropdown联动 working and setting up shortcodes so you can embed your plugin's functionality anywhere. Since you already know the JS/HTML side of the联动, let's focus on the WordPress plugin-specific bits to get your data flowing and shortcodes up and running.

WordPress has a secure, standard way to pass PHP data from your plugin to frontend JavaScript: wp_localize_script. Here's how to integrate this into your class-based plugin:

Step 1: Add a Data Retrieval Method to Your Plugin Class #

First, create a method in your plugin class that returns your country-language mapping. Replace the sample data with your actual stored data (e.g., from custom post types, options table, or a custom database table):

class Country_Language_Plugin {
    public function __construct() {
        // Your existing initialization hooks (e.g., registering admin menus, scripts)
        add_action('admin_enqueue_scripts', array($this, 'enqueue_admin_assets')); // Use this if it's a backend plugin
        // OR use wp_enqueue_scripts for frontend-facing functionality
    }

    // New method: Get your country-language pairs
    public function get_country_language_map() {
        // Replace this with your actual data source
        return array(
            'usa' => array('English', 'Spanish'),
            'france' => array('French'),
            'germany' => array('German'),
            'canada' => array('English', 'French'),
        );
    }

    // Enqueue scripts and pass data to frontend
    public function enqueue_admin_assets() {
        // Register your custom JS file
        wp_register_script(
            'clp-dropdown-script',
            plugin_dir_url(__FILE__) . 'js/dropdown联动.js',
            array('jquery'),
            '1.0',
            true
        );

        // Pass PHP data to JavaScript
        wp_localize_script(
            'clp-dropdown-script',
            'CLP_Data', // This will be the global JS variable name
            array('countryLanguages' => $this->get_country_language_map())
        );

        wp_enqueue_script('clp-dropdown-script');
    }
}

Step 2: Use the Data in Your JavaScript #

Now you can access the data via the CLP_Data global variable in your JS file. Here's a quick example to tie into your existing联动 logic:

jQuery(document).ready(function($) {
    const $countrySelect = $('#country-select');
    const $languageSelect = $('#language-select');

    $countrySelect.on('change', function() {
        const selectedCountry = $(this).val();
        $languageSelect.empty().append('<option value="">-- Select Language --</option>');

        // Use the plugin's data to populate the language dropdown
        if (CLP_Data.countryLanguages[selectedCountry]) {
            CLP_Data.countryLanguages[selectedCountry].forEach(lang => {
                $languageSelect.append(`<option value="${lang.toLowerCase()}">${lang}</option>`);
            });
        }
    });
});

Adding a shortcode lets you embed your country-language dropdown form (or any plugin functionality) in posts, pages, or widgets. Here's how to add this to your plugin class:

Step 1: Register the Shortcode in Your Constructor #

Add a hook to register your shortcode inside your plugin's __construct() method:

class Country_Language_Plugin {
    public function __construct() {
        // Existing hooks...
        add_shortcode('country_language_dropdown', array($this, 'render_dropdown_shortcode'));
    }

    // Shortcode render function
    public function render_dropdown_shortcode($atts) {
        // Set default attributes (overrideable via shortcode params)
        $atts = shortcode_atts(
            array(
                'country_label' => 'Select Country:',
                'language_label' => 'Select Language:',
            ),
            $atts,
            'country_language_dropdown'
        );

        // Use output buffering to capture HTML without direct echo
        ob_start();
        ?>
        <div class="country-language-dropdown">
            <label for="country-select"><?php echo esc_html($atts['country_label']); ?></label>
            <select id="country-select" class="clp-country-select">
                <option value="">-- Choose a Country --</option>
                <?php
                $countryMap = $this->get_country_language_map();
                foreach ($countryMap as $countrySlug => $languages) {
                    // Format slug to readable name (adjust as needed)
                    $countryName = ucwords(str_replace('-', ' ', $countrySlug));
                    echo '<option value="' . esc_attr($countrySlug) . '">' . esc_html($countryName) . '</option>';
                }
                ?>
            </select>

            <label for="language-select"><?php echo esc_html($atts['language_label']); ?></label>
            <select id="language-select" class="clp-language-select">
                <option value="">-- First Select a Country --</option>
            </select>
        </div>
        <?php
        return ob_get_clean();
    }

    // Your existing methods (get_country_language_map, enqueue_assets, etc.)...
}

Step 2: Use the Shortcode #

Now you can embed the dropdown anywhere in WordPress by adding this shortcode to a post, page, or widget:

• Basic usage: [country_language_dropdown]
• Custom labels: [country_language_dropdown country_label="Pick a Country:" language_label="Pick a Language:"]

Quick Notes to Keep in Mind #

• Security: Always use esc_html(), esc_attr(), and sanitize_text_field() when outputting user-facing content to prevent XSS vulnerabilities.
• Data Storage: If your country-language pairs are stored in a custom database table or WordPress options, update the get_country_language_map() method to fetch that data (e.g., using get_option() or a custom WP_Query).
• Backend vs Frontend: If your plugin is for the WordPress admin area, use the admin_enqueue_scripts hook instead of wp_enqueue_scripts.

内容的提问来源于stack exchange，提问作者Maël