diff --git a/README.md b/README.md
index 4e19a8a..d062a9b 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,25 @@
# website-products
-官网产品页面
-https://www.alicorns.co.jp/
\ No newline at end of file
+官网产品页面的代码(目前尚未实际使用,仅仅用于留档)
+
+
+
+## 基本配置
+
+`react-product-loader`
+- 用于在 wordpress 中引入 react 页面的 pluigin
+ - 因为使用 coze 生成的代码几乎都是 react 的
+- 放置在 plugin 文件夹下
+ - `wp-content/plugin/react-product-loader`
+
+`page-react-template.php`
+- 用于展示产品的模板页面,不使用官网默认的模板
+- 放置在当前使用的模板下面:
+ - `wp-content/themes/skyline-wp`
+
+## 产品页面
+
+- 产品的页面放在 `wp-content/products/react-apps` 下
+- 在 `固定ページ` 中创建页面,使用 `ショートコード` 引入
+ - `[react_app app_name="alisurvey"]`
+ - 其中 `app_name` 是文件夹的名字
\ No newline at end of file
diff --git a/page-react-template.php b/page-react-template.php
new file mode 100644
index 0000000..7eb332e
--- /dev/null
+++ b/page-react-template.php
@@ -0,0 +1,29 @@
+
+
+>
+
+
+
+
+
+
+>
+
+
+
+
\ No newline at end of file
diff --git a/react-product-loader/react-product-loader.php b/react-product-loader/react-product-loader.php
new file mode 100644
index 0000000..4211148
--- /dev/null
+++ b/react-product-loader/react-product-loader.php
@@ -0,0 +1,90 @@
+ 'default-app',
+ 'mount_id' => 'root'
+ ), $atts );
+
+ $app_name = preg_replace( '/[^a-zA-Z0-9\-_]/', '', $attributes['app_name'] );
+ $mount_id = esc_attr( $attributes['mount_id'] );
+
+ return '';
+}
+
+/**
+ * 加载React资源
+ */
+add_action( 'wp_enqueue_scripts', 'rpl_enqueue_react_app_assets' );
+function rpl_enqueue_react_app_assets() {
+ global $post;
+
+ if ( ! is_a( $post, 'WP_Post' ) || ! has_shortcode( $post->post_content, 'react_app' ) ) {
+ return;
+ }
+
+ preg_match_all( '/' . get_shortcode_regex() . '/', $post->post_content, $matches, PREG_SET_ORDER );
+ $found_shortcodes = array();
+
+ foreach ( $matches as $shortcode ) {
+ if ( $shortcode[2] === 'react_app' ) {
+ $parsed_attr = shortcode_parse_atts( $shortcode[3] );
+ $found_shortcodes[] = $parsed_attr;
+ }
+ }
+
+ if ( ! empty( $found_shortcodes ) ) {
+ $attr = $found_shortcodes[0];
+ $app_name = isset( $attr['app_name'] ) ? preg_replace( '/[^a-zA-Z0-9\-_]/', '', $attr['app_name'] ) : 'alisurvey';
+ $mount_id = isset( $attr['mount_id'] ) ? esc_attr( $attr['mount_id'] ) : 'root';
+
+ $app_url = content_url( '/products/react-apps/' . $app_name . '/' );
+ $app_path = WP_CONTENT_DIR . '/products/react-apps/' . $app_name . '/';
+
+ // 直接查找资产文件
+ $js_files = glob( $app_path . 'assets/index-*.js' );
+ $css_files = glob( $app_path . 'assets/index-*.css' );
+
+ if ( ! empty( $js_files ) ) {
+ $js_file = basename( $js_files[0] );
+ wp_enqueue_script(
+ 'rpl-app-js-' . $app_name,
+ $app_url . 'assets/' . $js_file,
+ array(),
+ null,
+ true
+ );
+ }
+
+ if ( ! empty( $css_files ) ) {
+ $css_file = basename( $css_files[0] );
+ wp_enqueue_style(
+ 'rpl-app-css-' . $app_name,
+ $app_url . 'assets/' . $css_file,
+ array(),
+ null
+ );
+ }
+
+ // 加载Font Awesome(如果需要)
+ wp_enqueue_style(
+ 'rpl-font-awesome',
+ 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
+ array(),
+ '6.7.2'
+ );
+ }
+}
\ No newline at end of file