<?php
/**
* Plugin Name: Modern Options Framework
* Author: Wangtuike
* Author URI: wanhtuike.com
* Version: 2.0.1
* Description: A modern and functional WordPress options framework 新版本添加了自由添加 字段组合
*/
if (!defined('ABSPATH')) {
exit;
}
class Modern_Options_Framework {
private $option_name = 'modern_options';
private $page_slug = 'modern-options-framework';
private $groups = [];
public function __construct() {
add_action('admin_menu', [$this, 'add_plugin_page']);
add_action('admin_init', [$this, 'page_init']);
add_action('admin_enqueue_scripts', [$this, 'enqueue_admin_scripts']);
}
public function add_plugin_page() {
add_menu_page(
'Modern Options Framework',
'Modern Options',
'manage_options',
$this->page_slug,
[$this, 'create_admin_page'],
'dashicons-admin-generic',
110
);
}
public function create_admin_page() {
$options = get_option($this->option_name);
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); ?></h1>
<?php settings_errors(); ?>
<form method="post" action="options.php">
<?php
settings_fields('modern_options_group');
do_settings_sections($this->page_slug);
//render group settings 另外的方法
// foreach ($this->groups as $group_id => $group_title) {
// echo "<h2>{$group_title}</h2>";
// do_settings_sections($this->page_slug,$group_id . '_section');
// }
submit_button();
?>
</form>
<h2>Current Options:</h2>
<pre><?php print_r($options); ?></pre>
</div>
<?php
}
public function enqueue_admin_scripts($hook) {
if ($hook != 'toplevel_page_' . $this->page_slug) {
return;
}
wp_enqueue_media();
wp_enqueue_style('wp-color-picker');
wp_enqueue_script('wp-color-picker');
wp_enqueue_style('modern-options-css', plugins_url('css/modern-options.css', __FILE__));
wp_enqueue_script('modern-options-js', plugins_url('js/modern-options.js', __FILE__), array('jquery', 'wp-color-picker'), null, true);
}
//这里是你添加字段的地方
public function page_init() {
register_setting(
'modern_options_group',
$this->option_name,
[$this, 'sanitize']
);
add_settings_section(
'general_settings_section',
'General Settings',
[$this, 'print_section_info'],
$this->page_slug
);
// 开始添加字段
$this->add_field('Site Heading','Site Heading','text');
$this->add_field('text', 'Text Input', 'text');
$this->add_field('textarea', 'Textarea', 'textarea');
$this->add_field('checkbox', 'Checkbox', 'checkbox');
$this->add_field('radio', 'Radio Buttons', 'radio', [
'option1' => 'Option 1',
'option2' => 'Option 2',
'option3' => 'Option 3'
]);
$this->add_field('select', 'Select Dropdown', 'select', [
'choice1' => 'Choice 1',
'choice2' => 'Choice 2',
'choice3' => 'Choice 3'
]);
$this->add_field('multiselect', 'Multi-Select', 'multiselect', [
'multi1' => 'Multi 1',
'multi2' => 'Multi 2',
'multi3' => 'Multi 3',
'multi4' => 'Multi 4'
]);
$this->add_field('color', 'Color Picker', 'color');
$this->add_field('image', 'Image Upload', 'image');
$this->add_field('password', 'Password Field', 'password');
$this->add_field('number', 'Number Input', 'number');
$this->add_field('url', 'URL Input', 'url');
$this->add_field('email', 'Email Input', 'email');
$this->add_field('date', 'Date Picker', 'date');
$this->add_field('time', 'Time Picker', 'time');
$this->add_field('editor', 'WYSIWYG Editor', 'editor');
//slider group
$this->add_group('slider','slider Settings');
$this->add_field('slider_image','Slider Image','image',[],'slider');
$this->add_field('slider_text','Slider Text','text',[],'slider');
$this->add_field('slider_url','Slider Url','url',[],'slider');
$this->add_group('top_ads','top ads');
$this->add_field('top_ads_image','Top ads Image','image',[],'top_ads');
}
public function add_field($id, $title, $type, $options = [],$group = 'general_settings') {
add_settings_field(
$id,
$title,
[$this, 'create_field'],
$this->page_slug,
$group . '_section',
[
'id' => $id,
'type' => $type,
'options' => $options
]
);
}
public function add_group($id,$title)
{
$this->groups[$id] = $title;
add_settings_section(
$id . '_section',
$title,
[$this,'print_section_info'],
$this->page_slug );
}
public function create_field($args) {
$id = $args['id'];
$type = $args['type'];
$options = get_option($this->option_name);
$value = isset($options[$id]) ? $options[$id] : '';
switch ($type) {
case 'text':
case 'password':
case 'number':
case 'url':
case 'email':
echo "<input type='$type' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='regular-text' />";
break;
case 'textarea':
echo "<textarea id='$id' name='{$this->option_name}[$id]' rows='5' cols='50'>" . esc_textarea($value) . "</textarea>";
break;
case 'checkbox':
$checked = checked($value, 1, false);
echo "<input type='checkbox' id='$id' name='{$this->option_name}[$id]' value='1' $checked />";
break;
case 'radio':
foreach ($args['options'] as $key => $label) {
$checked = checked($value, $key, false);
echo "<label><input type='radio' name='{$this->option_name}[$id]' value='" . esc_attr($key) . "' $checked /> $label</label><br />";
}
break;
case 'select':
echo "<select id='$id' name='{$this->option_name}[$id]'>";
foreach ($args['options'] as $key => $label) {
$selected = selected($value, $key, false);
echo "<option value='" . esc_attr($key) . "' $selected>" . esc_html($label) . "</option>";
}
echo "</select>";
break;
case 'multiselect':
echo "<select id='$id' name='{$this->option_name}[$id][]' multiple='multiple' style='height: 100px;'>";
foreach ($args['options'] as $key => $label) {
$selected = in_array($key, (array)$value) ? 'selected="selected"' : '';
echo "<option value='" . esc_attr($key) . "' $selected>" . esc_html($label) . "</option>";
}
echo "</select>";
break;
case 'color':
echo "<input type='text' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='color-picker' />";
break;
case 'image':
echo "<input type='text' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' class='regular-text image-url' />";
echo "<input type='button' class='button upload-image-button' value='Upload Image' data-field='$id' />";
if (!empty($value)) {
echo "<br><img src='" . esc_url($value) . "' class='image-preview' style='max-width:300px;' />";
}
break;
case 'date':
echo "<input type='date' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' />";
break;
case 'time':
echo "<input type='time' id='$id' name='{$this->option_name}[$id]' value='" . esc_attr($value) . "' />";
break;
case 'editor':
wp_editor($value, $id, array(
'textarea_name' => "{$this->option_name}[$id]",
'textarea_rows' => 10
));
break;
}
}
public function sanitize($input) {
$new_input = [];
foreach ($input as $key => $value) {
switch ($key) {
case 'checkbox':
$new_input[$key] = isset($value) ? 1 : 0;
break;
case 'textarea':
$new_input[$key] = sanitize_textarea_field( $value );
break;
case 'editor':
$new_input[$key] = wp_kses_post($value);
break;
case 'multiselect':
$new_input[$key] = array_map('sanitize_key', (array)$value);
break;
case 'email':
$new_input[$key] = sanitize_email($value);
break;
case 'url':
$new_input[$key] = esc_url_raw($value);
break;
case 'number':
$new_input[$key] = intval($value);
break;
case 'color':
$new_input[$key] = sanitize_hex_color($value);
break;
default:
$new_input[$key] = sanitize_text_field($value);
}
}
add_settings_error(
'modern_options_messages',
'modern_options_message',
__('Settings Saved', 'modern-options-framework'),
'updated'
);
return $new_input;
}
public function print_section_info() {
echo 'Enter your settings below:';
}
}
if (is_admin()) {
$modern_options_framework = new Modern_Options_Framework();
}
js版本
jQuery(document).ready(function($) {
// Initialize color pickers
$('.color-picker').wpColorPicker();
// Image upload
$('.upload-image-button').click(function(e) {
e.preventDefault();
var button = $(this);
var fieldID = button.data('field');
var customUploader = wp.media({
title: 'Choose Image',
button: {
text: 'Use this image'
},
multiple: false
}).on('select', function() {
var attachment = customUploader.state().get('selection').first().toJSON();
$('#' + fieldID).val(attachment.url);
button.siblings('.image-preview').remove();
button.after('<br><img src="' + attachment.url + '" class="image-preview" style="max-width:300px;" />');
}).open();
});
});
css版本
.wrap {
max-width: 800px;
margin: 20px auto;
background: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
form {
margin-top: 20px;
}
.form-table th {
width: 200px;
padding: 20px 10px;
}
.form-table td {
padding: 15px 10px;
}
input[type="text"], input[type="password"], input[type="number"], input[type="url"], input[type="email"],
textarea, select {
width: 100%;
max-width: 400px;
}
.image-preview {
margin-top: 10px;
border: 1px solid #ddd;
padding: 5px;
max-width: 150px !important;
height: auto;
}
.wp-editor-wrap {
max-width: 800px;
}
WP开发教程 WordPress导师在线教程
