聪明的WordPress开发人员的工具箱：Vafpress-CSDN博客

还记得我们需要为主题创建选项页面的时候吗？当然可以，因为我们仍然需要它们！当WordPress的自定义程序在处理主题功能时不够用时，您需要创建一个额外的“选项”页面，以便为用户提供更好的体验。

从头开始创建这些“选项”面板始终是一种选择，但最好使用已经发明的轮子。在“智能WordPress开发人员工具箱”系列的这一部分中，我们将介绍Vafpress，这是您下一个主题项目的可靠WordPress主题选项框架。

当定制器不够用时

是时候引发争议了：我认为定制器尚未准备好主题。

即使我承认Customizer只是一个了不起的工具，我也可以看到它甚至没有资格提供甚至简单的多功能主题的所有功能。我知道，多功能主题是毫无灵魂的资本主义主题，它们破坏了WordPress的世界……或者是吗？我的意思是，我承认，如果单一用途的主题更受欢迎，那会更好，但是我们可以忽略这样一个事实：多功能主题是大多数想要创建的设计机构，自由职业者甚至新手WordPress用户的首选一个适合他们业务的网站？

归根结底，我们必须问自己，以了解针对定制器的主题选项框架的需求：WordPress是出于WordPress，还是出于人们的原因是WordPress？虽然我支持WordPress在各个方面变得越来越标准化，但我也认为我们不能忽视WordPress用户社区的需求。毕竟，如果我们的开发人员忽略了用户的需求，WordPress的规模将不会像现在这样大。

另外，对于单一用途主题而言，Customizer还是不够（目前）。我们甚至还没有标准化和集中化的方式来构建内容部分（如滑块，菜单等），而无论您怎么说，WordPress用户确实（并且将始终）需要一个界面来控制其主题。

我在此部分简短介绍，因为主题是作为WordPress开发人员工具的Vafpress，我可以再谈论数千个单词“ Customizer vs the theme option frameworks”。但是，请不要让我说短一些，以免您发表评论：我很想听听您对此的看法！

在主题中使用Vafpress

在这一点上不必多说，但是习惯上以简单的介绍来打开每个部分： Vafpress是一个主题选项框架。我要说的是一个非常好的。 Vafpress由印度尼西亚的Web开发团队Vafour创建，声称建立WordPress主题从未如此简单和快捷 。

只需从其官方下载页面或GitHub存储库中下载Vafpress，即可快速入门。

了解Vafpress的控制领域

由于一天，我写这篇教程，Vafpress有19个控制领域分为两类所谓的“ 域 ”和“ Multifields ”。

textbox ：生成文本输入。
textarea ：生成一个textarea字段。
toggle ：生成是/否切换。
slider ：生成范围滑块。
upload ：使用WordPress媒体管理器生成一个上传字段。
color ：生成一个颜色选择器。
date ：生成日期选择器。
codeeditor ：生成代码编辑器。
wpeditor ：生成一个所见即所得的编辑器。
fontawesome ：使用Font Awesome生成图标选择器。
notebox ：生成一个可用于通知主题用户的字段。
html ：允许您显示自定义HTML代码。
select ：生成一个简单的<select>字段。
multiselect ：生成一个多重下拉菜单。
checkbox ：生成一组复选框。
checkimage ：生成一组可选图像，类似于复选框。
radiobutton ：生成一组单选按钮。
radioimage ：生成一组可选图像，类似于单选框。
sorter ：生成可排序的多选字段。

如果我没有一个示例就不完成本节，那将感觉不对—让我们做一个简单的例子。以下代码行创建一个“颜色选择器”字段：

<?php

'fields' => array(
	array(
		'type'			=> 'color',
		'name'			=> 'example_color_picker',
		'label'			=> 'Color Picker',
		'description'	=> 'Set a color for your headings here!',
		'default'		=> 'rgba(255,255,255,.75)',
		'format'		=> 'hex',
	),
	array(
		// another field
	),
)

?>

创建选项页面并使用控制字段填充它们

开始时这部分可能比较棘手，但是学习曲线很流畅。

我们可以使用Vafpress创建的选项面板包括几个构建块：

字段-我们已经解决了这些。
部分保留控制字段。
菜单或子菜单保留这些部分。
选项页面构建器将构建选项面板。

让我们从“选项页面构建器”的构造开始：

<?php

function my_options() {
	
	// initialize the object
	$theme_options = new VP_Option( array(
		// set it to TRUE if you don't want the option values to be saved (in your theme demo, perhaps)
		'is_dev_mode'		   => false,
		// the name for the settings in the database
		'option_key'			=> 'vpt_option',
		// the slug of your options page
		'page_slug'			 => 'vpt_option',
		// path to the template file or the array
		'template'			  => get_template_directory() . '/options-template.php',
		// parent menu page
		'menu_page'			 => 'themes.php',
		// decides whether to automatically name menus or not
		'use_auto_group_naming' => true,
		// show (by default) or hide the "Export/Import" page
		'use_exim_menu'		 => true,
		// minimum user role to view the options panel
		'minimum_role'		  => 'edit_theme_options',
		// type of the layout (fixed by default)
		'layout'				=> 'fixed',
		// title of the options page
		'page_title'			=> __( 'Theme Options', 'vp_textdomain' ),
		// title of the main menu item
		'menu_label'			=> __( 'Theme Options', 'vp_textdomain' ),
	));

}

// hook it to the after_setup_theme action
add_action( 'after_setup_theme', 'my_options' )

?>

关于“选项页面构建器”的一件好事是，您可以指向一个单独的文件，其中保留所有菜单（菜单内的部分以及菜单内的部分）。在上面的示例中，我们指向了一个名为options-template.php的模板文件。让我们看看用什么填充该文件：

<?php

return array(
    'title' => __('Vafpress Option Panel', 'vp_textdomain'),
    'logo'  => '',
	'menus' => array(
		array(
			'title' => __('Special Controls', 'vp_textdomain'),
			'name' => 'menu_2',
			'icon' => '/icon/special.png',
			'controls' => array(
				// ... collection of Sections and or Control Fields ...
			),
		),
	)
);

?>

如果需要，也可以执行一些“嵌套菜单”：

<?php

return array(
    'title' => __('Vafpress Option Panel', 'vp_textdomain'),
    'logo'  => '',
	'menus' => array(
		array(
			'title' => __('Standard HTML Controls', 'vp_textdomain'),
			'name' => 'menu_1',
			'icon' => 'font-awesome:icon-magic',
			'menus' => array(
				array(
					'title' => __('Regular', 'vp_textdomain'),
					'name' => 'submenu_1',
					'icon' => 'font-awesome:icon-th-large',
					'controls' => array(
						// ... collection of Sections and or Control Fields ...
					),
				),
				array(
					'title' => __('Image', 'vp_textdomain'),
					'name' => 'submenu_2',
					'icon' => 'font-awesome:icon-picture',
					'controls' => array(
						// ... collection of Sections and or Control Fields ...
					),
				),
			),
		),
	)
);

?>

在'controls'参数数组中，我们使用类似以下内容的东西：

<?php

'controls' => array(
    array(
        'title' => __('TextBox and TextArea', 'vp_textdomain'),
        'name' => 'section_1',
        'description' => __('TextBox and TextArea Showcase', 'vp_textdomain'),
        'fields' => array(
            // ... collection of control fields ...
        ),
    ),
)

?>

再说一遍，这可能需要一点练习，但是一旦习惯了，就可以在公园散步。