WordPress天气插件未在小工具区域显示问题求助

你的Weather Widget无法在WordPress小工具列表中显示的核心原因是：你没有按照WordPress Widget API的规范注册小工具。当前代码仅实现了短代码功能（通过add_shortcode），这意味着你可以在文章/页面中使用[weather_widget]短代码调用，但不会让它出现在后台的小工具列表里。

API_KEY未填写不是导致小工具不显示的原因，它只会影响后续天气数据的获取功能。

修正后的插件代码（PHP部分） #

替换原有的PHP代码为以下内容，它会按照WordPress标准注册一个可在小工具列表中找到的Weather Widget：

<?php
/*
Plugin Name: Weather Widget
Plugin URI: https://your-website.com/
Description: A weather widget for displaying current weather conditions in a chosen city.
Version: 1.0
Author: Your Name
Author URI: https://your-website.com/
*/

// 注册小工具
function register_weather_widget() {
    register_widget('Weather_Widget');
}
add_action('widgets_init', 'register_weather_widget');

// 定义Weather Widget类
class Weather_Widget extends WP_Widget {

    // 构造函数，初始化小工具信息
    public function __construct() {
        parent::__construct(
            'weather_widget', // 小工具ID
            'Weather Widget', // 小工具名称
            array('description' => '显示所选城市当前天气状况的小工具') // 描述
        );
        // 加载脚本和样式
        add_action('wp_enqueue_scripts', array($this, 'enqueue_assets'));
    }

    // 加载前端资源
    public function enqueue_assets() {
        wp_enqueue_script('weather-widget-script', plugins_url('weather-widget.js', __FILE__), array('jquery'));
        wp_enqueue_style('weather-widget-style', plugins_url('weather-widget.css', __FILE__));
    }

    // 后台小工具设置表单（可选，这里暂时保留基础结构）
    public function form($instance) {
        // 可以在这里添加小工具的后台设置项，比如默认城市
        $title = isset($instance['title']) ? esc_attr($instance['title']) : '天气查询';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">标题:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" />
        </p>
        <?php
    }

    // 保存后台设置数据
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        return $instance;
    }

    // 前端显示小工具内容
    public function widget($args, $instance) {
        echo $args['before_widget'];
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        // 输出小工具HTML
        ?>
        <div id="weather-widget">
            <input type="text" id="city-input" placeholder="输入城市">
            <button id="get-weather-btn">获取天气</button>
            <div id="weather-data"></div>
        </div>
        <?php
        echo $args['after_widget'];
    }
}

// 保留短代码功能（可选，如果你还需要通过短代码调用）
function weather_widget_shortcode() {
    ob_start();
    ?>
    <div id="weather-widget">
        <input type="text" id="city-input" placeholder="输入城市">
        <button id="get-weather-btn">获取天气</button>
        <div id="weather-data"></div>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('weather_widget', 'weather_widget_shortcode');

后续步骤 #

1. 将修正后的PHP代码替换原插件的PHP文件内容。
2. 确保weather-widget.js和weather-widget.css文件路径正确，与PHP文件在同一插件目录下。
3. 在weather-widget.js中填入有效的OpenWeatherMap API_KEY。
4. 重新激活插件，此时你就能在WordPress后台的「外观」→「小工具」列表中找到Weather Widget，可将其添加到侧边栏等区域。

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