WordPress插件开发：后台预定义样式

核心样式类

类别	CSS 类	说明	备注
布局与结构	`.wrap`	页面根容器，提供标准边距、清除浮动，是所有后台页面的起点。	必须使用。
	`.wrap h1` (或 `.wp-heading-inline`)	页面主标题。配合 `.wp-heading-inline` 可让标题与按钮同行。	典型用法：`<h1>标题<span class="page-title-action">按钮</span></h1>`
	`.card`	白色圆角卡片容器，用于对内容进行逻辑分组。	常用：`.card`， `.card:last-child`
	`#col-left`, `#col-right`, `.col-wrap`	经典的两栏布局容器，常见于文章列表页。	可模仿此结构创建类似页面。
导航与标签页	`.nav-tab-wrapper`	标签页导航的外部包装容器。	用于创建设置标签页。
	`.nav-tab`	单个标签页的默认样式。
	`.nav-tab-active`	当前激活标签页的样式。	需动态添加到当前标签。
	`.subsubsub`	次级导航/筛选链接样式（如“全部/已发布/草稿”）。	常用 `ul.subsubsub li a` 结构。
按钮	`.button`	所有按钮的基类，必须先有此基础类。
	`.button-primary`	主按钮，用于最重要的操作（如“保存更改”）。
	`.button-secondary`	次要按钮。
	`.button-link`	外观像链接的按钮。
	`.button-small`, `.button-large`	调整按钮尺寸。
	`.disabled`	禁用状态（需与 `.button` 等结合）。
表格	`.widefat`	宽表格，带斑马纹和边框，是后台列表的主要样式。	常用于 `wp_list_table` 输出。
	`.fixed`	通常与 `.widefat` 联用，表示表格列宽固定。
	`.striped`, `.alternate`	斑马纹样式，通常 `.widefat` 已包含。
	`.form-table`	设置表单专用表格，实现标签与字段的水平排列。	与 Settings API 配合使用。
表单元素	`.regular-text`	标准宽度的文本输入框。	最常用。
	`.large-text`	更宽的文本输入框（多行文本域常用）。
	`.small-text`	窄文本输入框，用于输入数字等短内容。
	`.code`	专用于显示等宽字体的代码输入框。
	`.button` 相关类	如上所述，也应用于表单内的按钮。
	`select` 的 `.small-text` 等	`select` 下拉菜单通常也用尺寸类控制宽度。
通知与状态	`.notice`	所有通知框的基类。
	`.notice-success`	成功操作后的绿色通知框。
	`.notice-error`	错误或失败操作的红色通知框。
	`.notice-warning`	警告信息的黄色通知框。
	`.notice-info`	提示信息的蓝色通知框。
	`.is-dismissible`	使通知框可关闭（需与 `.notice` 联用）。
通用与工具类	`.clear`, `.clearfix`	清除浮动。
	`.hidden`	`display: none;` 的快捷类。
	`.description`	描述性文字，通常用于表单字段下方的灰色说明。
	`.row-actions`	列表项悬停时显示的操作链接（如“编辑	删除”）。 \|
	`.spinner`	加载动画图标，`.is-active` 类控制显示。
	`.inactive`	用于表示某项非活动状态的通用类（如插件列表）。
	`.dashicons` 前缀	WordPress 图标字体，如 `.dashicons-admin-settings`。

高级组件与技巧

除了使用现成的CSS类，WordPress还提供了一些更高级的封装好的PHP函数或类，能帮你直接生成结构完全一致的界面：

`WP_List_Table` 类

功能：这是创建功能完整的后台数据列表（如文章、用户列表）的终极工具。它会自动处理好分页、筛选、批量操作、行内编辑等所有复杂逻辑和样式。

何时使用：当你的插件需要管理一个自定义数据库表的数据集时。

核心方法：你需要继承这个类，并至少定义 prepare_items(), get_columns(), column_default() 等方法。

`submit_button()` 函数

功能：直接输出一个完全符合WordPress风格的提交按钮。你只需要传入按钮文字等参数，它会自动处理所有类和属性。

用法示例：<?php submit_button( ‘保存更改’, ‘primary’, ‘submit’, true ); ?>

媒体上传器与颜色选择器

功能：WordPress 内置了完整的媒体上传和颜色选择器组件。直接调用 wp_enqueue_media() 和 wp_enqueue_script(‘wp-color-picker’)，然后按特定方式初始化，就能获得和原生一模一样的交互界面。

探索更多

在实际开发中，最有效的方法是 “直接观察WordPress自己是怎么做的”：

浏览器开发者工具（核心技巧）：在任何一个WordPress后台页面，按 F12 打开开发者工具，使用元素检查器去点选你感兴趣的组件（如一个按钮、一个通知框），就能直接看到它应用的所有CSS类。这是最直观的学习方式。
查阅官方开发者文档：虽然样式类文档零散，但关于 Settings API、WP_List_Table 和 Admin Color Schemes 的文档非常详细。