Appearance
12.2 添加可自定义项
在创建了基本的主题选项面板后，我们可以为主题添加更多可自定义的选项，让用户能够更灵活地定制主题。本章节将详细介绍如何为主题添加可自定义项，包括添加不同类型的设置字段、使用媒体上传器等方面。
添加不同类型的设置字段
1. 添加文本字段
文本字段是最常用的设置字段类型，用于输入文本信息。
php
<tr valign="top">
<th scope="row">网站标题</th>
<td>
<?php $title = get_option('simple_blog_header_title'); ?>
<input type="text" name="simple_blog_header_title" value="<?php echo esc_attr($title); ?>" />
<p class="description">请输入网站标题</p>
</td>
</tr>2. 添加文本域字段
文本域字段用于输入多行文本信息。
php
<tr valign="top">
<th scope="row">网站描述</th>
<td>
<?php $description = get_option('simple_blog_header_description'); ?>
<textarea name="simple_blog_header_description" rows="3" cols="50"><?php echo esc_attr($description); ?></textarea>
<p class="description">请输入网站描述</p>
</td>
</tr>3. 添加颜色选择器字段
颜色选择器字段用于选择颜色。
php
<tr valign="top">
<th scope="row">主色调</th>
<td>
<?php $primary_color = get_option('simple_blog_primary_color'); ?>
<input type="color" name="simple_blog_primary_color" value="<?php echo esc_attr($primary_color); ?>" />
<p class="description">请选择主色调</p>
</td>
</tr>4. 添加复选框字段
复选框字段用于选择是或否。
php
<tr valign="top">
<th scope="row">显示站点标题</th>
<td>
<?php $show_site_title = get_option('simple_blog_show_site_title', true); ?>
<input type="checkbox" name="simple_blog_show_site_title" value="1" <?php checked(1, $show_site_title); ?> />
<p class="description">是否显示站点标题</p>
</td>
</tr>5. 添加单选按钮字段
单选按钮字段用于从多个选项中选择一个。
php
<tr valign="top">
<th scope="row">布局类型</th>
<td>
<?php $layout_type = get_option('simple_blog_layout_type', 'sidebar-right'); ?>
<label>
<input type="radio" name="simple_blog_layout_type" value="sidebar-left" <?php checked('sidebar-left', $layout_type); ?> />
左侧侧边栏
</label>
<br>
<label>
<input type="radio" name="simple_blog_layout_type" value="sidebar-right" <?php checked('sidebar-right', $layout_type); ?> />
右侧侧边栏
</label>
<br>
<label>
<input type="radio" name="simple_blog_layout_type" value="no-sidebar" <?php checked('no-sidebar', $layout_type); ?> />
无侧边栏
</label>
<p class="description">请选择布局类型</p>
</td>
</tr>6. 添加下拉选择字段
下拉选择字段用于从多个选项中选择一个。
php
<tr valign="top">
<th scope="row">字体大小</th>
<td>
<?php $font_size = get_option('simple_blog_font_size', '16px'); ?>
<select name="simple_blog_font_size">
<option value="14px" <?php selected('14px', $font_size); ?>>14px</option>
<option value="16px" <?php selected('16px', $font_size); ?>>16px</option>
<option value="18px" <?php selected('18px', $font_size); ?>>18px</option>
<option value="20px" <?php selected('20px', $font_size); ?>>20px</option>
</select>
<p class="description">请选择字体大小</p>
</td>
</tr>7. 添加媒体上传器字段
媒体上传器字段用于上传图片。
php
<tr valign="top">
<th scope="row">网站Logo</th>
<td>
<?php $logo = get_option('simple_blog_header_logo'); ?>
<input type="text" name="simple_blog_header_logo" id="simple_blog_header_logo" value="<?php echo esc_attr($logo); ?>" />
<input type="button" class="button" name="simple_blog_header_logo_upload" id="simple_blog_header_logo_upload" value="上传图片" />
<p class="description">请上传网站Logo</p>
</td>
</tr>为了使媒体上传器字段正常工作，我们需要添加JavaScript代码：
php
/**
* 添加媒体上传器
*/
function simple_blog_enqueue_admin_scripts() {
wp_enqueue_media();
wp_enqueue_script('simple-blog-admin', get_template_directory_uri() . '/assets/js/admin.js', array('jquery'), '1.0', true);
}
add_action('admin_enqueue_scripts', 'simple_blog_enqueue_admin_scripts');然后创建 assets/js/admin.js 文件：
javascript
jQuery(document).ready(function($) {
// 媒体上传器
$('#simple_blog_header_logo_upload').click(function(e) {
e.preventDefault();
var image = wp.media({
title: '上传Logo',
multiple: false
}).open()
.on('select', function(e) {
var uploaded_image = image.state().get('selection').first();
var image_url = uploaded_image.toJSON().url;
$('#simple_blog_header_logo').val(image_url);
});
});
});添加可自定义项的最佳实践
1. 分组设置
将相关的设置分组，使设置页面更加清晰。
php
<h2>头部设置</h2>
<table class="form-table">
<!-- 头部设置字段 -->
</table>
<h2>页脚设置</h2>
<table class="form-table">
<!-- 页脚设置字段 -->
</table>
<h2>颜色设置</h2>
<table class="form-table">
<!-- 颜色设置字段 -->
</table>2. 添加描述
为每个设置字段添加描述，帮助用户理解设置的作用。
php
<p class="description">请输入网站标题</p>3. 设置默认值
为每个设置字段设置默认值，确保主题在首次激活时能够正常显示。
php
/**
* 设置默认值
*/
function simple_blog_set_defaults() {
// 检查设置是否存在，如果不存在则设置默认值
if (!get_option('simple_blog_header_title')) {
update_option('simple_blog_header_title', get_bloginfo('name'));
}
// 其他设置的默认值
}
add_action('after_switch_theme', 'simple_blog_set_defaults');4. 验证设置值
验证用户输入的设置值，确保它们符合预期格式。
php
/**
* 验证设置值
*/
function simple_blog_validate_settings($input) {
// 验证颜色值
if (isset($input['simple_blog_primary_color']) && !preg_match('/^#[a-f0-9]{6}$/i', $input['simple_blog_primary_color'])) {
$input['simple_blog_primary_color'] = '#3498db';
}
// 验证其他设置值
return $input;
}
add_filter('pre_update_option_simple_blog_primary_color', 'simple_blog_validate_settings');5. 使用设置值
在主题中使用设置值，确保设置能够生效。
php
// 在header.php中使用设置值
<h1><?php echo get_option('simple_blog_header_title') ? esc_html(get_option('simple_blog_header_title')) : bloginfo('name'); ?></h1>
// 在style.css中使用设置值
:root {
--primary-color: <?php echo esc_attr(get_option('simple_blog_primary_color', '#3498db')); ?>;
}测试可自定义项
在添加了可自定义项后，我们需要测试它们是否能正常工作。
步骤1：更新主题文件
将修改后的 functions.php、admin.js 和其他相关文件上传到主题目录中。
步骤2：测试设置页面
在WordPress后台，进入"外观" > "主题设置"，检查设置页面是否正确显示，包括所有添加的可自定义项。
步骤3：测试设置保存
在主题设置页面中修改一些设置，然后点击"保存更改"按钮，检查设置是否能正确保存。
步骤4：测试设置应用
在浏览器中访问网站，检查设置是否能正确应用，包括所有添加的可自定义项。
小结
添加可自定义项是主题开发的重要步骤，它可以让用户更灵活地定制主题。通过本章节的学习，你应该：
- 了解如何添加不同类型的设置字段，包括文本字段、文本域字段、颜色选择器字段、复选框字段、单选按钮字段、下拉选择字段和媒体上传器字段
- 掌握如何分组设置，使设置页面更加清晰
- 了解如何添加描述，帮助用户理解设置的作用
- 掌握如何设置默认值，确保主题在首次激活时能够正常显示
- 了解如何验证设置值，确保它们符合预期格式
- 掌握如何在主题中使用设置值，确保设置能够生效
- 了解如何测试可自定义项，确保它们能正常工作
通过以上步骤，你可以为主题添加更多可自定义的选项，让用户能够更灵活地定制主题，提高主题的用户体验。