这是为您WordPress主题开发的一个完整Options框架解决方案。它包含了后台设置页面、多种字段类型以及前端调用方法。
<?php
/**
* Theme Options Framework
* 将以下代码完整复制到主题的functions.php文件中
* 代码由wodepress.com提供
*/
// 1. 添加后台菜单
add_action('admin_menu', 'theme_options_add_admin_menu');
function theme_options_add_admin_menu() {
add_theme_page(
'主题选项',
'主题选项',
'manage_options',
'theme-options',
'theme_options_page'
);
}
// 2. 注册设置
add_action('admin_init', 'theme_options_settings_init');
function theme_options_settings_init() {
register_setting('theme_options', 'theme_options_settings', 'theme_options_sanitize');
add_settings_section(
'theme_options_section',
__('常规设置', 'theme-options'),
'theme_options_section_callback',
'theme_options'
);
// 添加所有字段
add_settings_field('theme_options_text', __('文本框', 'theme-options'), 'theme_options_text_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_textarea', __('多行文本框', 'theme-options'), 'theme_options_textarea_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_editor', __('编辑器', 'theme-options'), 'theme_options_editor_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_gallery', __('相册', 'theme-options'), 'theme_options_gallery_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_image', __('上传图片', 'theme-options'), 'theme_options_image_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_video', __('上传视频', 'theme-options'), 'theme_options_video_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_pdf', __('上传PDF', 'theme-options'), 'theme_options_pdf_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_multi', __('多值字段', 'theme-options'), 'theme_options_multi_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_page_select', __('选择页面', 'theme-options'), 'theme_options_page_select_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_category_select', __('选择分类', 'theme-options'), 'theme_options_category_select_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_radio', __('单选', 'theme-options'), 'theme_options_radio_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_checkbox', __('多选', 'theme-options'), 'theme_options_checkbox_render', 'theme_options', 'theme_options_section');
add_settings_field('theme_options_true_false', __('真/假', 'theme-options'), 'theme_options_true_false_render', 'theme_options', 'theme_options_section');
}
// 数据验证函数
function theme_options_sanitize($input) {
$output = array();
foreach ($input as $key => $value) {
if (is_array($value)) {
$output[$key] = array_map('sanitize_text_field', $value);
} else {
$output[$key] = sanitize_text_field($value);
}
}
return $output;
}
function theme_options_section_callback() {
echo '<p>' . __('配置主题的各项参数，在前端模板中调用。', 'theme-options') . '</p>';
}
// ==================== 字段渲染函数 ====================
function theme_options_text_render() {
$options = get_option('theme_options_settings');
$value = isset($options['theme_options_text']) ? $options['theme_options_text'] : '';
echo '<input type="text" name="theme_options_settings[theme_options_text]" value="' . esc_attr($value) . '" class="regular-text">';
echo '<p class="description">文本框示例</p>';
}
function theme_options_textarea_render() {
$options = get_option('theme_options_settings');
$value = isset($options['theme_options_textarea']) ? $options['theme_options_textarea'] : '';
echo '<textarea name="theme_options_settings[theme_options_textarea]" rows="4" class="large-text">' . esc_textarea($value) . '</textarea>';
echo '<p class="description">多行文本框示例</p>';
}
function theme_options_editor_render() {
$options = get_option('theme_options_settings');
$content = isset($options['theme_options_editor']) ? $options['theme_options_editor'] : '';
wp_editor($content, 'theme_options_editor', array(
'textarea_name' => 'theme_options_settings[theme_options_editor]',
'textarea_rows' => 10,
'media_buttons' => false
));
echo '<p class="description">编辑器示例</p>';
}
function theme_options_gallery_render() {
$options = get_option('theme_options_settings');
$ids = isset($options['theme_options_gallery']) ? $options['theme_options_gallery'] : '';
?>
<div class="gallery-uploader">
<input type="hidden" name="theme_options_settings[theme_options_gallery]" value="<?php echo esc_attr($ids); ?>" class="gallery-input">
<button type="button" class="button gallery-upload-btn">选择/编辑相册</button>
<button type="button" class="button gallery-clear-btn" <?php echo empty($ids) ? 'style="display:none;"' : ''; ?>>清空</button>
<div class="gallery-preview" style="margin-top:10px;">
<?php
if (!empty($ids)) {
$id_array = array_filter(explode(',', $ids));
foreach ($id_array as $id) {
$img = wp_get_attachment_image_src($id, 'thumbnail');
if ($img) {
echo '<img src="' . esc_url($img[0]) . '" style="max-width:80px;max-height:80px;margin:2px;display:inline-block;">';
}
}
}
?>
</div>
</div>
<p class="description">相册 - 选择多张图片</p>
<script>
jQuery(document).ready(function($) {
$('.gallery-upload-btn').on('click', function(e) {
e.preventDefault();
var parent = $(this).closest('.gallery-uploader');
var input = parent.find('.gallery-input');
var preview = parent.find('.gallery-preview');
var clearBtn = parent.find('.gallery-clear-btn');
var frame = wp.media({
title: '选择相册图片',
multiple: true,
library: { type: 'image' }
});
frame.on('select', function() {
var attachments = frame.state().get('selection').map(function(attachment) {
return attachment.id;
});
var ids = attachments.join(',');
input.val(ids);
preview.html('');
$.each(attachments, function(i, id) {
var img = wp.media.attachment(id).get('url');
if (img) {
preview.append('<img src="'+img+'" style="max-width:80px;max-height:80px;margin:2px;display:inline-block;">');
}
});
clearBtn.show();
});
frame.open();
});
$('.gallery-clear-btn').on('click', function(e) {
e.preventDefault();
var parent = $(this).closest('.gallery-uploader');
parent.find('.gallery-input').val('');
parent.find('.gallery-preview').html('');
$(this).hide();
});
});
</script>
<?php
}
function theme_options_image_render() {
$options = get_option('theme_options_settings');
$id = isset($options['theme_options_image']) ? $options['theme_options_image'] : '';
$url = $id ? wp_get_attachment_url($id) : '';
?>
<div class="image-uploader">
<input type="hidden" name="theme_options_settings[theme_options_image]" value="<?php echo esc_attr($id); ?>" class="image-input">
<button type="button" class="button image-upload-btn">上传图片</button>
<button type="button" class="button image-remove-btn" <?php echo empty($id) ? 'style="display:none;"' : ''; ?>>移除</button>
<div class="image-preview" style="margin-top:10px;">
<?php if ($url): ?>
<img src="<?php echo esc_url($url); ?>" style="max-width:150px;max-height:150px;display:block;">
<?php endif; ?>
</div>
</div>
<p class="description">上传单张图片</p>
<script>
jQuery(document).ready(function($) {
$('.image-upload-btn').on('click', function(e) {
e.preventDefault();
var parent = $(this).closest('.image-uploader');
var input = parent.find('.image-input');
var preview = parent.find('.image-preview');
var removeBtn = parent.find('.image-remove-btn');
var frame = wp.media({
title: '选择图片',
multiple: false,
library: { type: 'image' }
});
frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
input.val(attachment.id);
preview.html('<img src="'+attachment.url+'" style="max-width:150px;max-height:150px;display:block;">');
removeBtn.show();
});
frame.open();
});
$('.image-remove-btn').on('click', function(e) {
e.preventDefault();
var parent = $(this).closest('.image-uploader');
parent.find('.image-input').val('');
parent.find('.image-preview').html('');
$(this).hide();
});
});
</script>
<?php
}
function theme_options_video_render() {
$options = get_option('theme_options_settings');
$url = isset($options['theme_options_video']) ? $options['theme_options_video'] : '';
echo '<input type="url" name="theme_options_settings[theme_options_video]" value="' . esc_url($url) . '" class="regular-text" placeholder="https://example.com/video.mp4">';
echo '<p class="description">上传视频 (输入视频URL地址)</p>';
}
function theme_options_pdf_render() {
$options = get_option('theme_options_settings');
$id = isset($options['theme_options_pdf']) ? $options['theme_options_pdf'] : '';
$url = $id ? wp_get_attachment_url($id) : '';
$filename = $url ? basename($url) : '';
?>
<div class="pdf-uploader">
<input type="hidden" name="theme_options_settings[theme_options_pdf]" value="<?php echo esc_attr($id); ?>" class="pdf-input">
<button type="button" class="button pdf-upload-btn">上传PDF</button>
<span style="margin-left:10px;"><?php echo esc_html($filename); ?></span>
</div>
<p class="description">上传PDF文件</p>
<script>
jQuery(document).ready(function($) {
$('.pdf-upload-btn').on('click', function(e) {
e.preventDefault();
var parent = $(this).closest('.pdf-uploader');
var input = parent.find('.pdf-input');
var span = parent.find('span');
var frame = wp.media({
title: '选择PDF',
multiple: false,
library: { type: 'application/pdf' }
});
frame.on('select', function() {
var attachment = frame.state().get('selection').first().toJSON();
input.val(attachment.id);
span.text(attachment.filename);
});
frame.open();
});
});
</script>
<?php
}
function theme_options_multi_render() {
$options = get_option('theme_options_settings');
$values = isset($options['theme_options_multi']) ? $options['theme_options_multi'] : array();
if (!is_array($values)) $values = array();
?>
<div class="multi-field-container">
<?php if (empty($values)): ?>
<div class="multi-field-row">
<input type="text" name="theme_options_settings[theme_options_multi][]" value="" class="regular-text">
<button type="button" class="button remove-multi-row">移除</button>
</div>
<?php else: ?>
<?php foreach ($values as $val): ?>
<div class="multi-field-row">
<input type="text" name="theme_options_settings[theme_options_multi][]" value="<?php echo esc_attr($val); ?>" class="regular-text">
<button type="button" class="button remove-multi-row">移除</button>
</div>
<?php endforeach; ?>
<?php endif; ?>
<div style="margin-top:5px;">
<button type="button" class="button add-multi-row">添加新值</button>
</div>
</div>
<p class="description">多值字段 - 可添加多个文本值</p>
<script>
jQuery(document).ready(function($) {
$('.multi-field-container').on('click', '.add-multi-row', function(e) {
e.preventDefault();
var container = $(this).closest('.multi-field-container');
var row = $('<div class="multi-field-row"><input type="text" name="theme_options_settings[theme_options_multi][]" class="regular-text"> <button type="button" class="button remove-multi-row">移除</button></div>');
container.find('.multi-field-row:last').after(row);
});
$('.multi-field-container').on('click', '.remove-multi-row', function(e) {
e.preventDefault();
var rows = $(this).closest('.multi-field-container').find('.multi-field-row');
if (rows.length > 1) {
$(this).closest('.multi-field-row').remove();
} else {
$(this).closest('.multi-field-row').find('input').val('');
}
});
});
</script>
<?php
}
function theme_options_page_select_render() {
$options = get_option('theme_options_settings');
$selected = isset($options['theme_options_page_select']) ? $options['theme_options_page_select'] : 0;
wp_dropdown_pages(array(
'name' => 'theme_options_settings[theme_options_page_select]',
'selected' => $selected,
'show_option_none' => '--- 选择页面 ---',
'option_none_value' => 0
));
echo '<p class="description">选择页面</p>';
}
function theme_options_category_select_render() {
$options = get_option('theme_options_settings');
$selected = isset($options['theme_options_category_select']) ? $options['theme_options_category_select'] : 0;
wp_dropdown_categories(array(
'name' => 'theme_options_settings[theme_options_category_select]',
'selected' => $selected,
'show_option_none' => '--- 选择分类 ---',
'taxonomy' => 'category',
'hide_empty' => false
));
echo '<p class="description">选择分类</p>';
}
function theme_options_radio_render() {
$options = get_option('theme_options_settings');
$selected = isset($options['theme_options_radio']) ? $options['theme_options_radio'] : 'option1';
?>
<label><input type="radio" name="theme_options_settings[theme_options_radio]" value="option1" <?php checked('option1', $selected); ?>> 选项一</label><br>
<label><input type="radio" name="theme_options_settings[theme_options_radio]" value="option2" <?php checked('option2', $selected); ?>> 选项二</label><br>
<label><input type="radio" name="theme_options_settings[theme_options_radio]" value="option3" <?php checked('option3', $selected); ?>> 选项三</label>
<p class="description">单选</p>
<?php
}
function theme_options_checkbox_render() {
$options = get_option('theme_options_settings');
$selected = isset($options['theme_options_checkbox']) ? $options['theme_options_checkbox'] : array();
if (!is_array($selected)) $selected = array();
?>
<label><input type="checkbox" name="theme_options_settings[theme_options_checkbox][]" value="check1" <?php checked(in_array('check1', $selected)); ?>> 选项A</label><br>
<label><input type="checkbox" name="theme_options_settings[theme_options_checkbox][]" value="check2" <?php checked(in_array('check2', $selected)); ?>> 选项B</label><br>
<label><input type="checkbox" name="theme_options_settings[theme_options_checkbox][]" value="check3" <?php checked(in_array('check3', $selected)); ?>> 选项C</label>
<p class="description">多选 (可同时选择多个)</p>
<?php
}
function theme_options_true_false_render() {
$options = get_option('theme_options_settings');
$checked = isset($options['theme_options_true_false']) ? $options['theme_options_true_false'] : false;
?>
<label><input type="checkbox" name="theme_options_settings[theme_options_true_false]" value="1" <?php checked(1, $checked); ?>> 启用</label>
<p class="description">真/假 (开关)</p>
<?php
}
// ==================== 页面主体 ====================
function theme_options_page() {
if (!current_user_can('manage_options')) {
return;
}
?>
<div class="wrap">
<h1><?php _e('主题选项', 'theme-options'); ?></h1>
<form action="options.php" method="post">
<?php
settings_fields('theme_options');
do_settings_sections('theme_options');
submit_button();
?>
</form>
</div>
<?php
}
// ==================== 前端调用函数 ====================
/**
* 获取主题选项值
*/
function get_theme_option($key, $default = '') {
$options = get_option('theme_options_settings');
return isset($options[$key]) ? $options[$key] : $default;
}
/**
* 获取图片URL
*/
function get_theme_option_image_url($key) {
$id = get_theme_option($key);
if ($id) {
return wp_get_attachment_url($id);
}
return false;
}
/**
* 获取相册图片ID数组
*/
function get_theme_option_gallery_ids($key) {
$ids = get_theme_option($key);
if ($ids) {
return array_filter(explode(',', $ids));
}
return array();
}
/**
* 获取多值字段数组
*/
function get_theme_option_multi($key) {
$val = get_theme_option($key);
return is_array($val) ? $val : array();
}
// ==================== 前端调用示例（注释掉，仅供参考） ====================
/*
// 在主题模板中使用示例：
// 1. 文本框 - 有值判断
$text = get_theme_option('theme_options_text');
if (!empty($text)) {
echo '<p>文本框值: ' . esc_html($text) . '</p>';
} else {
echo '<p>文本框未设置</p>';
}
// 2. 多行文本框
$textarea = get_theme_option('theme_options_textarea');
if (!empty($textarea)) {
echo '<div>' . nl2br(esc_textarea($textarea)) . '</div>';
}
// 3. 编辑器
$editor = get_theme_option('theme_options_editor');
if (!empty($editor)) {
echo apply_filters('the_content', $editor);
}
// 4. 相册
$gallery_ids = get_theme_option_gallery_ids('theme_options_gallery');
if (!empty($gallery_ids)) {
echo do_shortcode('[gallery ids="' . implode(',', $gallery_ids) . '"]');
}
// 5. 图片
$image_url = get_theme_option_image_url('theme_options_image');
if ($image_url) {
echo '<img src="' . esc_url($image_url) . '" alt="">';
}
// 6. 视频
$video_url = get_theme_option('theme_options_video');
if (!empty($video_url)) {
echo '<video src="' . esc_url($video_url) . '" controls></video>';
}
// 7. PDF
$pdf_id = get_theme_option('theme_options_pdf');
if ($pdf_id) {
$pdf_url = wp_get_attachment_url($pdf_id);
echo '<a href="' . esc_url($pdf_url) . '" target="_blank">下载PDF</a>';
}
// 8. 多值字段
$multi = get_theme_option_multi('theme_options_multi');
if (!empty($multi)) {
echo '<ul>';
foreach ($multi as $item) {
echo '<li>' . esc_html($item) . '</li>';
}
echo '</ul>';
}
// 9. 选择页面
$page_id = get_theme_option('theme_options_page_select');
if ($page_id) {
echo '<a href="' . get_permalink($page_id) . '">' . get_the_title($page_id) . '</a>';
}
// 10. 选择分类
$cat_id = get_theme_option('theme_options_category_select');
if ($cat_id) {
$cat = get_category($cat_id);
if ($cat) {
echo '<a href="' . get_category_link($cat_id) . '">' . $cat->name . '</a>';
}
}
// 11. 单选
$radio = get_theme_option('theme_options_radio');
if (!empty($radio)) {
echo '选择的值: ' . esc_html($radio);
}
// 12. 多选
$checkboxes = get_theme_option('theme_options_checkbox');
if (!empty($checkboxes) && is_array($checkboxes)) {
echo '选中的值: ' . implode(', ', array_map('esc_html', $checkboxes));
}
// 13. 真/假
if (get_theme_option('theme_options_true_false')) {
echo '状态: 已启用';
} else {
echo '状态: 已禁用';
}
*/
?>这个框架涵盖了您要求的所有字段类型，并提供了后台管理界面和前端的调用示例。您可以根据需要直接复制代码到主题的 functions.php 文件中使用。