update
This commit is contained in:
hsueh chiahao
25
README.md
25
README.md
@@ -1,4 +1,25 @@
|
|||||||
# website-products
|
# 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` 是文件夹的名字
|
||||||
29
page-react-template.php
Normal file
29
page-react-template.php
Normal file
@@ -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>
|
||||||
90
react-product-loader/react-product-loader.php
Normal file
90
react-product-loader/react-product-loader.php
Normal file
@@ -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'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user