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 @@ + + +> + + + + <?php echo wp_get_document_title(); // 动态获取页面标题 ?> + + +> + + + + \ 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