WordPress为后台页面创建表单选项
• 约 13361 字 • 预计阅读 45 分钟
不废话，先上官方推荐做法
以下展示所有表单选项
<?php
add_action('admin_menu', function () {
add_menu_page(
'我是最棒的设置', // 页面内标题
'最棒的设置', // 左侧侧边栏名称
'manage_options', // 菜单类型
'i_am_good_setting_slug', // 唯一 id (slug）
function () { // 匿名函数输出页面的内容
if (!current_user_can('manage_options')) { // 如果没有管理页权限则退出
return;
}
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); //输出标题
?></h1>
<h2>官方接口</h2>
<form action="options.php" method="post">
<?php
// 安全，限可制修改范围，去掉后保存会跳转到 ./wp-admin/options.php，内容为设置组
settings_fields('i_am_good_settings');
// 显示，内容为设置组
do_settings_sections('i_am_good_settings');
// 保存按钮
submit_button('保存设置');
?>
</form>
</div>
<?php
},
plugin_dir_url(__FILE__) . 'images/icon.svg', // 图标位置
20 // 菜单顺序中的位置
);
});
add_action('admin_init', function () {
// 在 {$wpdb->prefix}_options 表中创建一个条目。 删掉后保存会报错，（设置组，数据库保存的变量名）
register_setting('i_am_good_settings', 'i_am_good_options');
// 添加一个设置部分
add_settings_section(
'i_am_good_section', // id
'demo的设置部分', // 标题
'', // 回调函数
'i_am_good_settings' // 设置组
);
// 在《部分》里添加字段
add_settings_field(
'i_am_good_option1', // 标签的唯一id
'下拉框', // 选项的名称
'i_am_good_option1', // 回调函数，里面写输出选项的html
'i_am_good_settings', // 设置组
'i_am_good_section', // 设置部分的id
array(
'label_for' => 'option1', // wp数据库这个字段的 key，[key:value,key:value]。删掉后保存则保存数组[value,value]
)
);
add_settings_field(
'i_am_good_option2',
'输入框',
'i_am_good_option2',
'i_am_good_settings',
'i_am_good_section',
array(
'label_for' => 'option2',
)
);
add_settings_field(
'i_am_good_option3',
'选择框',
'i_am_good_option3',
'i_am_good_settings',
'i_am_good_section',
array(
'label_for' => 'option3',
)
);
add_settings_field(
'i_am_good_option4',
'选择框2',
'i_am_good_option4',
'i_am_good_settings',
'i_am_good_section',
array(
'label_for' => 'option4',
)
);
add_settings_field(
'i_am_good_option5',
'单选框',
'i_am_good_option5',
'i_am_good_settings',
'i_am_good_section',
array(
'label_for' => 'option5',
)
);
add_settings_field(
'i_am_good_option6',
'文本框',
'i_am_good_option6',
'i_am_good_settings',
'i_am_good_section',
array(
'label_for' => 'option6',
)
);
});
function i_am_good_option1($args)
{
$options = get_option('i_am_good_options');
?>
<select id="<?php echo esc_attr($args['label_for']); ?>" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>]">
<option value="red" <?php echo isset($options[$args['label_for']]) ? (selected($options[$args['label_for']], 'red', false)) : (''); ?>>
<?php esc_html_e('红色药丸'); ?>
</option>
<option value="blue" <?php echo isset($options[$args['label_for']]) ? (selected($options[$args['label_for']], 'blue', false)) : (''); ?>>
<?php esc_html_e('蓝色药丸'); ?>
</option>
<option value="green" <?php echo isset($options[$args['label_for']]) ? (selected($options[$args['label_for']], 'green', false)) : (''); ?>>
<?php esc_html_e('绿色药丸'); ?>
</option>
</select>
<p class="description">
<?php esc_html_e('你吃下蓝色药丸，故事就结束了。你从床上醒来，相信你想相信的一切。'); ?>
</p>
<p class="description">
<?php esc_html_e('你吃了红色药丸，你就会留在仙境，我就让你看看兔子洞有多深。'); ?>
</p>
<?php
}
function i_am_good_option2($args)
{
$options = get_option('i_am_good_options')[$args['label_for']] ?? '';
?>
<input id="<?php echo esc_attr($args['label_for']); ?>" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>]" value="<?php echo $options; ?>">
<?php
}
function i_am_good_option3($args)
{
$options = get_option('i_am_good_options')[$args['label_for']] ?? '0';
?>
<input id="<?php echo esc_attr($args['label_for']); ?>" type="checkbox" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>]" value="1" <?php echo $options ? 'checked' : ''; ?>>
任何人都能变成超人
<?php
}
function i_am_good_option4($args)
{
$options = get_option('i_am_good_options')[$args['label_for']] ?? [];
$list = ['苹果', 'oppo', '小米', '华为', 'vivo'];
echo '<fieldset>';
foreach ($list as $key => $value) {
$checked = $options[$key] ?? '';
?>
<input id="<?php echo esc_attr($args['label_for']) . '[' . $key . ']'; ?>" type="checkbox" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>][<?php echo $key ?>]" value="1" <?php echo $checked ? 'checked' : ''; ?>>
<?php echo $value;
}
echo '</fieldset>';
}
function i_am_good_option5($args)
{
$options = get_option('i_am_good_options')[$args['label_for']] ?? '0';
$list = ['秘密', '男', '女', '沃尔玛购物袋'];
echo '<fieldset>';
foreach ($list as $key => $value) {
?>
<label>
<input id="<?php echo esc_attr($args['label_for']) . '[' . $key . ']'; ?>" type="radio" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>]" value="<?php echo $key ?>" <?php echo $options == $key ? 'checked' : ''; ?>>
<span><?php echo $value; ?></span>
</label>
<br>
<?php
}
echo '</fieldset>';
}
function i_am_good_option6($args)
{
$options = get_option('i_am_good_options')[$args['label_for']] ?? '';
?>
<textarea id="<?php echo esc_attr($args['label_for']); ?>" name="i_am_good_options[<?php echo esc_attr($args['label_for']); ?>]" rows="10" cols="50"><?php echo $options; ?></textarea>
<?php
}选项很简单，但是如果我需要对表格进行操作呢？
来看看用wordpress官方类来实现操作。
注意，wordpress不建议你使用此类，原因是以后可能会有变动。
但事实上你会发现很多插件都用了此类来实现表格。
不废话，上代码：
<?php
add_action('admin_menu', function () {
add_menu_page(
'我是最棒的设置', // 页面内标题
'最棒的设置', // 左侧侧边栏名称
'manage_options', // 菜单类型
'i_am_good_setting_slug', // 唯一 id (slug）
function () { // 匿名函数输出页面的内容
if (!current_user_can('manage_options')) { // 如果没有管理页权限则退出
return;
}
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); //输出标题
?></h1>
<h2>WP_List_Table 表格</h2>
<?php
$testListTable = new I_Am_Good_List_Table();
$testListTable->prepare_items(); ?>
<form id="movies-filter" method="get">
<input type="hidden" name="page" value="<?php echo $_REQUEST['page'] ?>" />
<?php $testListTable->display() ?>
</form>
</div>
<?php
},
plugin_dir_url(__FILE__) . 'images/icon.svg', // 图标位置
20 // 菜单顺序中的位置
);
});
/**
* https://developer.wordpress.org/reference/classes/wp_list_table/
*/
if ( ! class_exists( 'WP_List_Table' ) ) { // 确保能找到类！
require_once( ABSPATH . 'wp-admin/includes/class-wp-list-table.php' );
}
class I_Am_Good_List_Table extends WP_List_Table
{
// 构造函数
function __construct()
{
global $status, $page;
//Set parent defaults
parent::__construct(array(
'singular' => 'movie', //singular name of the listed records
'plural' => 'movies', //plural name of the listed records
'ajax' => false //does this table support ajax?
));
}
// 初始化列表方法
function prepare_items()
{
// global $wpdb;
// $sql="SELECT COUNT(*) as numbers FROM `zhongyidc`";
$per_page = 5;
$columns = $this->get_columns();
$hidden = array();
$sortable = $this->get_sortable_columns();
$this->_column_headers = array($columns, $hidden, $sortable);
$this->process_bulk_action();
$data = [[
'ID' => 1,
'title' => '300',
'rating' => 'R',
'director' => 'Zach Snyder',
'phone' => '13336756456'
], [
'ID' => 2,
'title' => '400',
'rating' => 'G',
'director' => 'Zach Snyder',
'phone' => '15435465576'
],];
function usort_reorder($a, $b)
{
$orderby = (!empty($_REQUEST['orderby'])) ? $_REQUEST['orderby'] : 'title';
$order = (!empty($_REQUEST['order'])) ? $_REQUEST['order'] : 'asc';
$result = strcmp($a[$orderby], $b[$orderby]);
return ($order === 'asc') ? $result : -$result;
}
usort($data, 'usort_reorder');
$current_page = $this->get_pagenum();
$total_items = count($data);
$data = array_slice($data, (($current_page - 1) * $per_page), $per_page);
$this->items = $data;
$this->set_pagination_args(array(
'total_items' => $total_items,
'per_page' => $per_page,
'total_pages' => ceil($total_items / $per_page)
));
}
// 自定义列内容处理
function column_ID($item)
{
//Build row actions
$actions = array(
'edit' => sprintf('<a href="?page=%s&action=%s&movie=%s">编辑', $_REQUEST['page'], 'edit', $item['ID']),
'delete' => sprintf('<a href="?page=%s&action=%s&movie=%s">删除', $_REQUEST['page'], 'delete', $item['ID']),
);
//Return the title contents
return sprintf(
'%1$s%2$s',
/*$1%s*/
$item['ID'],
/*$2%s*/
$this->row_actions($actions)
);
}
// 默认列内容处理
function column_default($item, $column_name)
{
switch ($column_name) {
case 'title':
case 'rating':
case 'director':
case 'phone':
return $item[$column_name];
default:
return print_r($item, true); //Show the whole array for troubleshooting purposes
}
}
// 多选处理
function column_cb($item)
{
return sprintf(
'<input type="checkbox" name="%1$s[]" value="%2$s" />',
/*$1%s*/
$this->_args['singular'], //Let's simply repurpose the table's singular label ("movie")
/*$2%s*/
$item['ID'] //The value of the checkbox should be the record's id
);
}
// 动作处理函数
function process_bulk_action()
{
//Detect when a bulk action is being triggered...
if ('delete' === $this->current_action()) {
wp_die('Items deleted (or they would be if we had items to delete)!');
}
}
// 动作数组关联
function get_bulk_actions()
{
$actions = array(
'delete' => '删除'
);
return $actions;
}
// 列是否允许排序
function get_sortable_columns()
{
$sortable_columns = array(
'title' => array('title', false), //true means it's already sorted
'rating' => array('rating', false),
'director' => array('director', false)
);
return $sortable_columns;
}
// 列标题设置
function get_columns()
{
$columns = array(
'cb' => '<input type="checkbox" />', //选择框
'ID' => 'user id',
'title' => '金额',
'rating' => '类型',
'director' => '地址',
'phone' => '电话'
);
return $columns;
}
}我们发现相当复杂且繁琐，我仅仅需要一个表单，却要填写这么多代码，非常不优雅。
那有没有简介的办法呢
答案当然是有的，我们可以通过适当的骚操作实现这一过程。
不废话，上代码。
<?php
add_action('admin_menu', function () {
add_menu_page(
'我是最棒的设置', // 页面内标题
'最棒的设置', // 左侧侧边栏名称
'manage_options', // 菜单类型
'i_am_good_setting_slug', // 唯一 id (slug）
function () { // 匿名函数输出页面的内容
if (!current_user_can('manage_options')) { // 如果没有管理页权限则退出
return;
}
$options = [ // 获取表格
['id' => 0, 'name' => "玛卡巴卡", 'age' => '5'],
['id' => 1, 'name' => "太阳公公", 'age' => '500']
];
if (isset($_POST['submit'])) {
switch ($_POST['submit']) {
case '删除':
// 修改你的删除函数
add_settings_error('wporg_messages', 'wporg_message', '你点击id为' . ($_POST['key'] ?? '') . '的删除', 'updated');
break;
case '上移':
// 修改你的函数
add_settings_error('wporg_messages', 'wporg_message', '你点击id为' . ($_POST['key'] ?? '') . '的上移', 'updated');
break;
case '下移':
// 修改你的函数
add_settings_error('wporg_messages', 'wporg_message', '你点击id为' . ($_POST['key'] ?? '') . '的下移', 'updated');
break;
case '编辑':
// 修改你的函数
add_settings_error('wporg_messages', 'wporg_message', '你点击id为' . ($_POST['key'] ?? '') . '的编辑', 'updated');
break;
case '添加':
// 修改你的函数
break;
}
}
settings_errors('wporg_messages'); // 输出提示窗
?>
<div class="wrap">
<h1><?php echo esc_html(get_admin_page_title()); //输出标题
?></h1>
<h2>简单版 表格</h2>
<table class="widefat striped">
<thead>
<tr>
<th>id</th>
<th>名字</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<?php
foreach ($options as $key => $value) {
echo '<tr>';
echo '<td>' . ($value['id'] ?? "") . '</td>';
echo '<td>' . ($value['name'] ?? "") . '</td>';
echo '<td>' . ($value['age'] ?? "") . '</td>';
echo '<td>';
echo '<form action="" method="post"><input style="display:none;" name="key" value="' . $key . '" />
<input type="submit" name="submit" value="编辑" class="button button-small" />
<input type="submit" name="submit" value="上移" class="button button-small" ' . ($key == 0 ? "disabled" : "") . '/>
<input type="submit" name="submit" value="下移" class="button button-small" ' . ($key == count($options) - 1 ? "disabled" : "") . '/>
<input type="submit" name="submit" value="删除" class="button button-small" /></form>';
echo '</td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
<?php
},
plugin_dir_url(__FILE__) . 'images/icon.svg', // 图标位置
20 // 菜单顺序中的位置
);
});
简单的代码，实现了表格所有重要操作。
在form里为按钮设置不同的value，在接收的时候加以区分，就能实现按钮的不同操作，包括不限于增删查改。
同时在form里设置一个隐藏的input，就实现提交时候的传参。
<form action="" method="post">
<!-- 隐藏，负责提交时传参 -->
<input style="display:none;" name="key" value="' . $key . '" />
<!-- 显示，操作按钮 -->
<input type="submit" name="submit" value="编辑" class="button button-small" />
<input type="submit" name="submit" value="上移" class="button button-small" />
<input type="submit" name="submit" value="下移" class="button button-small" />
<input type="submit" name="submit" value="删除" class="button button-small" />
</form>