WordPresss后台设置页面开发API整理版

| 发表评论 | 15 人已阅
本站所有文章均为博主人工写作，无AI辅助成分，请放心参阅。

WordPress的后台设置页面有两个好用的函数 add_settings_section 和 add_settings_field 可以帮开发者精简很多自己的代码。

本文的代码可以覆盖我的很多日常开发需求，所以做一下笔记，以便随时取用。本例代码实现一个名为“My Options”的后台设置页面，例举了各种常用类型的字段的设置，读者也可以根据注释随时获取有用的代码块。实现功能截图如下：


实现代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335

<?php
/*Register the settings page */
add_action('admin_menu', 'brain1981_my_options_add_admin_menu');
add_action('admin_init', 'brain1981_my_options_settings_init');
 
function brain1981_my_options_add_admin_menu() {
    add_options_page(
        'My Options',
        'My Options',
        'manage_options',
        'my-options',
        'brain1981_my_options_options_page'
    );
}
 
/*Initialize settings */
function brain1981_my_options_settings_init() {
    // Register a new setting for "my-options" page
    register_setting('my_options', 'my_options_settings', 'brain1981_my_options_settings_validate');
 
    // Register sections
    add_settings_section(
        'my_options_section',
        'Personal Information',
        'brain1981_my_options_section_callback',
        'my_options'
    );
 
    // 1. My Company - Text field
    add_settings_field(
        'my_company',
        'My Company',
        'brain1981_my_company_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 2. My Age - Number field
    add_settings_field(
        'my_age',
        'My Age',
        'brain1981_my_age_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 3. My Hobbys - Checkbox multi-select
    add_settings_field(
        'my_hobbys',
        'My Hobbys',
        'brain1981_my_hobbys_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 4. My Gender - Radio buttons
    add_settings_field(
        'my_gender',
        'My Gender',
        'brain1981_my_gender_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 5. My Favorite Color - Color picker
    add_settings_field(
        'my_favorite_color',
        'My Favorite Color',
        'brain1981_my_favorite_color_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 6. My Education - Dropdown select
    add_settings_field(
        'my_education',
        'My Education',
        'brain1981_my_education_field_render',
        'my_options',
        'my_options_section'
    );
 
    // 7. My Message - Textarea
    add_settings_field(
        'my_message',
        'My Message',
        'brain1981_my_message_field_render',
        'my_options',
        'my_options_section'
    );
}
 
/*Field render functions */
 
// 1. My Company - Text field
function brain1981_my_company_field_render() {
    $options = get_option('my_options_settings');
    ?>
    <input type="text" name="my_options_settings[my_company]" value="<?php echo isset($options['my_company']) ? esc_attr($options['my_company']) : ''; ?>" style="width: 300px;" />
    <p class="description">Enter your company name</p>
    <?php
}
 
// 2. My Age - Number field
function brain1981_my_age_field_render() {
    $options = get_option('my_options_settings');
    ?>
    <input type="number" name="my_options_settings[my_age]" value="<?php echo isset($options['my_age']) ? esc_attr($options['my_age']) : ''; ?>" min="0" max="150" step="1" />
    <p class="description">Enter your age (0-150)</p>
    <?php
}
 
// 3. My Hobbys - Checkbox multi-select
function brain1981_my_hobbys_field_render() {
    $options = get_option('my_options_settings');
    $hobbys = isset($options['my_hobbys']) ? (array) $options['my_hobbys'] : array();
 
    $hobby_options = array(
        'reading' => 'Reading',
        'sports' => 'Sports',
        'movies' => 'Movies',
        'games' => 'Games'
    );
 
    foreach ($hobby_options as $value => $label) {
        $checked = in_array($value, $hobbys) ? 'checked="checked"' : '';
        ?>
        <div>
            <label>
                <input type="checkbox" name="my_options_settings[my_hobbys][]" value="<?php echo esc_attr($value); ?>" <?php echo $checked; ?> />
                <?php echo esc_html($label); ?>
            </label>
        </div>
        <?php
    }
    ?>
    <p class="description">Select your hobbies</p>
    <?php
}
 
// 4. My Gender - Radio buttons
function brain1981_my_gender_field_render() {
    $options = get_option('my_options_settings');
    $gender = isset($options['my_gender']) ? $options['my_gender'] : '';
 
    $gender_options = array(
        'female' => 'Female',
        'male' => 'Male'
    );
 
    foreach ($gender_options as $value => $label) {
        $checked = ($gender === $value) ? 'checked="checked"' : '';
        ?>
        <div>
            <label>
                <input type="radio" name="my_options_settings[my_gender]" value="<?php echo esc_attr($value); ?>" <?php echo $checked; ?> />
                <?php echo esc_html($label); ?>
            </label>
        </div>
        <?php
    }
    ?>
    <p class="description">Select your gender</p>
    <?php
}
 
// 5. My Favorite Color - Color picker
function brain1981_my_favorite_color_field_render() {
    $options = get_option('my_options_settings');
    $color = isset($options['my_favorite_color']) ? $options['my_favorite_color'] : '#0073aa';
    ?>
    <input type="text" name="my_options_settings[my_favorite_color]" value="<?php echo esc_attr($color); ?>" class="my-color-field" data-default-color="#0073aa" />
    <p class="description">Select your favorite color</p>
 
    <script>
    jQuery(document).ready(function($) {
        $('.my-color-field').wpColorPicker();
    });
    </script>
    <?php
}
 
// 6. My Education - Dropdown select
function brain1981_my_education_field_render() {
    $options = get_option('my_options_settings');
    $education = isset($options['my_education']) ? $options['my_education'] : '';
 
    $education_options = array(
        '' => '-- Select Education --',
        'middle_school' => 'Middle School',
        'high_school' => 'High School',
        'college' => 'College',
        'master_degree' => 'Master Degree'
    );
    ?>
    <select name="my_options_settings[my_education]" style="width: 200px;">
        <?php foreach ($education_options as $value => $label) : ?>
            <option value="<?php echo esc_attr($value); ?>" <?php selected($education, $value); ?>>
                <?php echo esc_html($label); ?>
            </option>
        <?php endforeach; ?>
    </select>
    <p class="description">Select your highest education level</p>
    <?php
}
// 7. My Message - Textarea
function brain1981_my_message_field_render() {
    $options = get_option('my_options_settings');
    ?>
    <textarea type="text" name="my_options_settings[my_message]" style="width: 300px;" ><?php echo isset($options['my_message']) ? esc_attr($options['my_message']) : ''; ?></textarea>
    <?php
}
/*Section callback */
function brain1981_my_options_section_callback() {
    echo '<p>Configure your personal information settings below:</p>';
}
 
/*Settings validation */
function brain1981_my_options_settings_validate($input) {
    $validated = array();
 
    // Validate My Company - Text field
    if (isset($input['my_company'])) {
        $validated['my_company'] = sanitize_text_field($input['my_company']);
    }
 
    // Validate My Age - Number field
    if (isset($input['my_age'])) {
        $age = intval($input['my_age']);
        if ($age >= 0 && $age <= 150) {
            $validated['my_age'] = $age;
        } else {
            add_settings_error('my_options_settings', 'my_age_error', 'Age must be between 0 and 150.');
        }
    }
 
    // Validate My Hobbys - Checkbox multi-select
    if (isset($input['my_hobbys']) && is_array($input['my_hobbys'])) {
        $valid_hobbys = array('reading', 'sports', 'movies', 'games');
        $validated['my_hobbys'] = array();
 
        foreach ($input['my_hobbys'] as $hobby) {
            if (in_array($hobby, $valid_hobbys)) {
                $validated['my_hobbys'][] = sanitize_text_field($hobby);
            }
        }
    } else {
        $validated['my_hobbys'] = array();
    }
 
    // Validate My Gender - Radio buttons
    if (isset($input['my_gender'])) {
        $valid_genders = array('female', 'male');
        if (in_array($input['my_gender'], $valid_genders)) {
            $validated['my_gender'] = sanitize_text_field($input['my_gender']);
        }
    }
 
    // Validate My Favorite Color - Color picker
    if (isset($input['my_favorite_color'])) {
        $color = sanitize_hex_color($input['my_favorite_color']);
        if ($color) {
            $validated['my_favorite_color'] = $color;
        } else {
            $validated['my_favorite_color'] = '#0073aa';
        }
    }
 
    // Validate My Education - Dropdown select
    if (isset($input['my_education'])) {
        $valid_education = array('', 'middle_school', 'high_school', 'college', 'master_degree');
        if (in_array($input['my_education'], $valid_education)) {
            $validated['my_education'] = sanitize_text_field($input['my_education']);
        }
    }
 
    // Validate My Message - Textarea
    if (isset($input['my_message'])) {
        $validated['my_message'] = sanitize_text_field($input['my_message']);
    }
 
    return $validated;
}
 
/*Enqueue color picker scripts and styles */
add_action('admin_enqueue_scripts', 'brain1981_my_options_enqueue_color_picker');
 
function brain1981_my_options_enqueue_color_picker($hook_suffix) {
    // Only load on our settings page
    if ($hook_suffix !== 'settings_page_my-options') {
        return;
    }
 
    // Enqueue WordPress color picker
    wp_enqueue_style('wp-color-picker');
    wp_enqueue_script('wp-color-picker');
}
 
/*Options page render */
function brain1981_my_options_options_page() {
    // Check user capabilities
    if (!current_user_can('manage_options')) {
        return;
    }
 
    // Show error/update messages
    settings_errors('my_options_settings');
    ?>
    <div class="wrap">
        <h1>My Options</h1>
 
        <form action="options.php" method="post">
            <?php
            settings_fields('my_options');
            do_settings_sections('my_options');
            submit_button('Save Settings');
            ?>
        </form>
 
        <div style="margin-top: 30px; padding: 20px; background: #f5f5f5; border: 1px solid #ddd;">
            <h3>Current Settings Values:</h3>
            <?php
            $options = get_option('my_options_settings');
            if ($options) {
                echo '<div style="background: #fff; padding: 15px; border: 1px solid #ccc;">';
                echo htmlspecialchars(print_r($options, true));
                echo '</div>';
            } else {
                echo '<p>No settings saved yet.</p>';
            }
            ?>
        </div>
    </div>
    <?php
}

add_settings_section 和 add_settings_field这两个API生成的界面可以帮你跳过保存逻辑，这样在后台直接添加字段管理就变得很方便了。

现在大部分开发者都习惯通过ACF插件来生成这样的字段管理界面，确实很方便，但如果你的网站这样的自定义字段数量并不多，我还是强烈建议你写一些这样的代码来实现，对网站性能优化是有一定帮助的。

本站所有文章均为原创，欢迎转载，请注明文章出处：https://blog.brain1981.com/3511.html。百度和各类采集站皆不可信，搜索请谨慎鉴别。技术类文章一般都有时效性，本人习惯不定期对自己的博文进行修正和更新，因此请访问出处以查看本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程，“作品集”还收录了本人的大部分作品展示。除了本博客外，我们的工作室网站 – JennyStudio，内有更多作品回顾和展示。
您也可以扫描左边的二维码，关注我们的微信公众号，在微信上查看我们的案例。

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注