update

2025-09-24 16:56:35 +08:00
parent 64325cac23
commit 7fc028e186
3 changed files with 142 additions and 2 deletions
--- a/README.md
+++ b/README.md
@@ -1,4 +1,25 @@
 # website-products

-官网产品页面
-https://www.alicorns.co.jp/
+官网产品页面的代码（目前尚未实际使用，仅仅用于留档）
+
+
+
+## 基本配置
+
+`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` 是文件夹的名字
--- a/page-react-template.php
+++ b/page-react-template.php
@@ -0,0 +1,29 @@
+<?php
+/**
+ * Template Name: React Product Template
+ * Template Post Type: page
+ * Description: React Product Loaderプラグイン専用の、すべてのテーマ要素が除去されたテンプレート。 | 一个去除了所有主题元素的模板，仅用于和插件 React Product Loader 一同使用。
+ */
+
+?>
+<!DOCTYPE html>
+<html <?php language_attributes(); ?>>
+<head>
+    <meta charset="<?php bloginfo('charset'); ?>">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?php echo wp_get_document_title(); // 动态获取页面标题 ?></title>
+    <?php wp_head(); // 必须保留，用于加载WordPress管理栏、插件所需的CSS/JS等 ?>
+</head>
+<body <?php body_class('react-fullpage'); // 可保留body类以便添加自定义样式 ?>>
+    <?php
+    // 这个区域用来输出短代码渲染的内容
+    // 如果页面内容里有短代码，它会被解析并渲染到这里
+    if (have_posts()) :
+        while (have_posts()) : the_post();
+            the_content();
+        endwhile;
+    endif;
+    ?>
+    <?php wp_footer(); // 必须保留，用于加载WordPress必要的尾部脚本和插件 ?>
+</body>
+</html>
--- a/react-product-loader/react-product-loader.php
+++ b/react-product-loader/react-product-loader.php
@@ -0,0 +1,90 @@
+<?php
+/**
+ * Plugin Name: 🔵 React Product Loader
+ * Description: ショートコードにより、あらゆるページに独立したReactアプリを柔軟に組み込めます。 | 通过短代码在任意页面中灵活嵌入独立的 React 应用 | `[react_app app_name="alisurvey"]`
+ * Version: 1.0.0
+ * Author: 薛家豪
+ * Text Domain: react-product-loader
+ */
+
+defined( 'ABSPATH' ) || exit;
+
+/**
+ * 注册短代码 [react_app]
+ */
+add_shortcode( 'react_app', 'rpl_react_app_shortcode' );
+function rpl_react_app_shortcode( $atts ) {
+    $attributes = shortcode_atts( array(
+        'app_name' => '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 '<div id="' . $mount_id . '"></div>';
+}
+
+/**
+ * 加载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'
+        );
+    }
+}