README

The ThemeIsle onboarding module serves as aid for theme authors to enable an easier onboarding UX, allowing to install and activate plugins, change theme mods, and import content with XML files.

如何使用此功能？

1. 包含 ThemeIsle 入门模块。
2. 在您的主题中声明主题支持。
3. 将导入文件添加到您的主题文件夹中。
4. 在您的管理页面中渲染入门应用程序
5. 禁用 ThemeIsle 入门模块。

1. 包含 ThemeIsle 入门模块

您可以使用两种方式使用入门模块

• 直接在项目中包含此存储库
• 将其作为 composer 依赖项包含 - composer require "codeinwp/ti-onboarding"

2. 声明主题支持

您必须声明主题支持才能使入门工作。以下是一个示例

add_theme_support( 'themeisle-demo-import', array(
	'editors'     => array(
		'elementor',
		'gutenberg',
	),
	'local' => array(
		'elementor' => array(
			'neve-main' => array(
				'url'   => 'https://demo.themeisle.com/neve',
				'title' => 'Neve 2018',
			),
		),
		'beaver_builder' => array(
			'neve-main' => array(
				'url'   => 'https://demo.themeisle.com/neve',
				'title' => 'Neve 2018',
			),
		),
	),
	'i18n'  => array(
		'templates_title'       => __( 'Ready to use pre-built websites with 1-click installation', 'neve' ),
		'templates_description' => __( 'With Neve, you can choose from multiple unique demos, specially designed for you, that can be installed with a single click. You just need to choose your favorite, and we will take care of everything else.', 'neve' ),
	),
) );

3. 将导入文件添加到您的主题文件夹中

必须将以下三个主要文件添加到您的主题中，以便演示导入可以工作

1. 包含演示内容的 XML 文件 - 您可以使用 WordPress 导出器获取它。它应命名为 export.xml;
2. 将用于您的演示实例的屏幕截图文件。它应命名为 screenshot.png;
3. 包含其他数据的 data.json 文件。您可以在 此处查看其格式

4. 在您的管理页面中渲染入门

在一切加载完毕后，您应该确保您在想要显示入门应用程序的位置渲染该应用程序。以下代码片段应该可以做到这一点

if ( class_exists( '\Themeisle_Onboarding' ) ) {
	$onboarding = \Themeisle_Onboarding::instance();
	$onboarding->render_onboarding();
}

5. 禁用 ThemeIsle 入门模块

要禁用模块，只需添加以下代码片段

define( 'TI_ONBOARDING_DISABLED', true );

注意： 这里的样式可能不会在所有地方都工作得很好，因此您可能需要使用一些自己的 CSS 魔法进行修改。

格式化 data.json 文件

您提供的 data.json 文件应遵循以下格式

{
  "theme_mods": {
	"neve_navigation_layout": "left",
	"neve_theme_color": "#00a4f7",  
	"__ti_import_menus_location": {
	  "primary": "main-menu"
	}
  }, 
  "widgets": {
	"blog-sidebar": {
	  "rss-1": {
		"title": "",
		"url": "https:\/\/www.themeisle.com\/blog\/feed\/",
		"items": 5,
		"show_summary": 0,
		"show_author": 0,
		"show_date": 0
	  },
	},
	"shop-sidebar": {
	  "woocommerce_product_search-9": [],
	  "woocommerce_widget_cart-5": []
	}
  },
  "recommended_plugins": {
	"woocommerce": "WooCommerce",
	"themeisle-companion": "Orbit Fox by ThemeIsle"
  },
  "front_page": {
	"front_page": "neve-home",
	"blog_page": "blog"
  },
  "shop_pages": {
	  "woocommerce_shop_page_id": "shop",
	  "woocommerce_cart_page_id": "cart",
	  "woocommerce_checkout_page_id": "checkout",
	  "woocommerce_myaccount_page_id": "my-account"
  }
}

这里要定义 5 个主要事项

“theme_mods”键

这包含 key:value 对，表示主题模块键以及您希望在导入时设置的值。

在theme_mods键内部，您还需要定义导航菜单将要放置的位置（在__ti_import_menus_location键下）。在上面的示例中，将primary导航菜单位置分配给了具有main-menu短语的菜单。

widgets键

此键包含您要导入的小部件。您可以使用小部件导入导出插件获取其内容。它导出的.wie文件包含您需要在此处添加以正确映射小部件的数据。

recommended_plugins键

此键包含您推荐的插件。使用的格式为"plugin-slug":"插件昵称"。

front_page键

此键包含用于使用页面短语的静态首页设置的关键值对（neve-home/blog）。如果您不想设置任何内容，只需在这里发送null即可。

shop_pages键

此键包含您要设置的商店页面的键值对，如果您正在导入WooCommerce商店。逻辑与首页设置相同。您应使用页面短后来设置此内容。

许可协议

ThemeIsle Onboarding模块的许可协议为GPLv2或更高版本。

致谢

• XML导入器基于HumanMade WordPress-Importer存储库，许可协议为GPLv2或更高版本。
• 小部件导入器基于CrunchThemes Widget Importer & Exporter，许可协议为GPLv2或更高版本。