README

一个工具包，供WordPress开发者创建由VueJS驱动的管理选项面板，用于WordPress插件和主题。

安装

composer require wp-user-manager/wp-optionskit

使用

<?php

$prefix = 'igp';
$panel  = new \TDP\OptionsKit( $prefix );
$panel->set_page_title( __( 'My Plugin Settings' ) );

/**
 * Setup the menu for the options panel.
 *
 * @param array $menu
 *
 * @return array
 */
function igp_setup_menu( $menu ) {
	// These defaults can be customized
	// $menu['parent'] = 'options-general.php';
	// $menu['menu_title'] = 'Settings Panel';
	// $menu['capability'] = 'manage_options';

	$menu['page_title'] = __( 'My Plugin Settings' );
	$menu['menu_title'] = $menu['page_title'];

	return $menu;
}

add_filter( 'igp_menu', 'igp_setup_menu' );

/**
 * Register settings tabs.
 *
 * @param array $tabs
 *
 * @return array
 */
function igp_register_settings_tabs( $tabs ) {
	return array(
		'general' => __( 'General' ),
	);
}

add_filter( 'igp_settings_tabs', 'igp_register_settings_tabs' );

/**
 * Register settings subsections (optional)
 *
 * @param array $subsections
 *
 * @return array
 */
function igp_register_settings_subsections( $subsections ) {
	return $subsections;
}

add_filter( 'igp_registered_settings_sections', 'igp_register_settings_subsections' );

/**
 * Register settings fields for the options panel.
 *
 * @param array $settings
 *
 * @return array
 */
function igp_register_settings( $settings ) {
	$settings = array(
		'general' => array(
			array(
				'id'   => 'api_key',
				'name' => __( 'API Key' ),
				'desc' => __( 'Add your API key to get started' ),
				'type' => 'text',
			),
			array(
				'id'   => 'results_limit',
				'name' => __( 'Results Limit' ),
				'type' => 'text',
				'std'  => 10,
			),
			array(
				'id'   => 'start_date',
				'name' => __( 'Start Date' ),
				'type' => 'text',
			),
		),
	);

	return $settings;
}

add_filter( 'igp_registered_settings', 'igp_register_settings' );

开发

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

要详细了解如何工作，请查看 指南 和 vue-loader 文档。