如何在WordPress不同页面为i20 Sidebar Widgets设置不同宽高

下面提供三种可行方案，按操作复杂度从低到高排序：

方案1：利用WordPress页面body类编写针对性CSS（无需修改插件代码） #

WordPress会自动给不同类型页面的<body>标签添加专属类名，比如：

• 文章页：single
• 分类页：archive category
• 标签页：archive tag

直接在主题的自定义CSS（外观→自定义→额外CSS）中添加以下代码，覆盖插件的全局高度设置：

/* 文章页组件高度 */
.single .border-onestop,
.single .noborder-onestop {
    height: 600px !important; /* 替换为你需要的高度 */
}

/* 分类页组件高度 */
.archive.category .border-onestop,
.archive.category .noborder-onestop {
    height: 450px !important; /* 替换为你需要的高度 */
}

/* 标签页组件高度 */
.archive.tag .border-onestop,
.archive.tag .noborder-onestop {
    height: 500px !important; /* 替换为你需要的高度 */
}

若插件CSS优先级更高，需添加!important强制覆盖；也可通过增加父容器选择器来提升优先级。

方案2：修改短代码支持自定义高度参数（灵活控制单页调用） #

找到插件主文件中注册短代码的回调函数（比如itsw_shortcode_callback），按以下步骤修改：

1. 在函数开头添加参数处理逻辑：

function itsw_shortcode_callback($atts) {
    // 合并默认参数与用户传入值，默认使用全局设置的高度
    $atts = shortcode_atts(
        array(
            'height' => get_option('itsw_height_of_i20_sidebar', 520),
        ),
        $atts,
        'i20_Sidebar_Widgets'
    );

    // 保留原有代码...
}

2. 在输出组件容器时，将高度参数转为内联样式：
   比如原代码是：

echo '<div class="border-onestop">';

修改为：

echo '<div class="border-onestop" style="height: ' . esc_attr($atts['height']) . 'px;">';

对.noborder-onestop类的容器做同样修改。

之后调用短代码时可指定不同高度：

• 文章页：[i20_Sidebar_Widgets height="600"]
• 分类页：[i20_Sidebar_Widgets height="450"]
• 标签页：[i20_Sidebar_Widgets height="500"]

方案3：扩展插件设置，添加页面类型专属高度选项（全局自动适配） #

若希望通过插件后台统一管理不同页面的高度，按以下步骤修改插件：

1. 添加新的设置项：在原有register_setting代码块后，添加三个新的设置注册：

// 文章页高度设置
register_setting(
    'itsw_plugin_options_group',
    'itsw_height_single',
    array(
        'type'              => 'integer',
        'sanitize_callback' => 'sanitize_text_field',
        'default'           => 520,
    )
);

// 分类页高度设置
register_setting(
    'itsw_plugin_options_group',
    'itsw_height_category',
    array(
        'type'              => 'integer',
        'sanitize_callback' => 'sanitize_text_field',
        'default'           => 520,
    )
);

// 标签页高度设置
register_setting(
    'itsw_plugin_options_group',
    'itsw_height_tag',
    array(
        'type'              => 'integer',
        'sanitize_callback' => 'sanitize_text_field',
        'default'           => 520,
    )
);

2. 在设置页面添加输入框：找到插件设置页面的表单代码，添加以下内容：

<tr valign="top">
    <th scope="row">文章页组件高度</th>
    <td>
        <input type="number" name="itsw_height_single" 
               value="<?php echo esc_attr(get_option('itsw_height_single')); ?>" 
               min="100" /> px
    </td>
</tr>
<tr valign="top">
    <th scope="row">分类页组件高度</th>
    <td>
        <input type="number" name="itsw_height_category" 
               value="<?php echo esc_attr(get_option('itsw_height_category')); ?>" 
               min="100" /> px
    </td>
</tr>
<tr valign="top">
    <th scope="row">标签页组件高度</th>
    <td>
        <input type="number" name="itsw_height_tag" 
               value="<?php echo esc_attr(get_option('itsw_height_tag')); ?>" 
               min="100" /> px
    </td>
</tr>

3. 在短代码中根据页面类型加载对应高度：修改短代码回调函数，添加页面判断逻辑：

function itsw_shortcode_callback($atts) {
    // 根据当前页面类型获取对应高度
    if (is_single()) {
        $height = get_option('itsw_height_single', 520);
    } elseif (is_category()) {
        $height = get_option('itsw_height_category', 520);
    } elseif (is_tag()) {
        $height = get_option('itsw_height_tag', 520);
    } else {
        // 默认使用全局设置的高度
        $height = get_option('itsw_height_of_i20_sidebar', 520);
    }

    // 输出容器时应用高度，同方案2步骤2
    echo '<div class="border-onestop" style="height: ' . esc_attr($height) . 'px;">';
    // 保留原有代码...
}

完成后，即可在插件设置页面分别配置各页面类型的组件高度，插件会自动根据当前页面应用对应设置。

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