Question

我为我的客户创建了一个有角度的单页Web应用程序。

现在他们需要将应用程序集成到他们（wordpress）网站的页面中。

编辑：换句话说，他们希望在现有的wordpress页面中使用该应用程序

什么是最好的方法？

我尝试了iframe，但它不起作用：没有调整应用内容更改和模式问题。

由于

Answer 1

如果您需要将其插入包含已完成模板的现有页面，则可以创建短代码和插件：

创建一个类似＆＃34; your_spa＆＃34;的文件夹在wordpress的插件文件夹中（/ wp-content / plugins /）

在新生成的文件夹

中创建名为your_spa.php的php文件

将其放在文件＆＃34; your_spa.php＆＃34;

中

<?php
/*
Plugin Name: your spa plugin
Description: description
*/

function your_spa_code(){ ?>

<!-- put here your code (this will be inside the body of the page) -->

<?php }

add_shortcode( 'yourspa', 'your_spa_code' );
?>

处理链接/资源网址（js，json，css）：将它们放在任何你想要的地方，但要记住路径（如html path =＆gt; url）

记得让apache用户读取文件（文件权限）

激活插件＆＃34;你的spa插件＆＃34;在wordpress仪表板内

在博客帖子/页面中使用[yourspa]作为快捷方式

现在你已经创建了一个插件和一个短代码！

PS：请记住，您的代码将被现有页面的代码包围

它有点脏，但它是简单的解决方案。

Answer 2

我仅通过渲染Angular的引导代码#include <iostream> #include <map> #include <string> enum color { red, blue, black }; std::map<color, std::string> color_names{ { red, "red"}, { blue, "blue"}, { black, "black"} }; int main() { std::cout << "my favorite color is " << color_names[red] << '\n'; }和<app-root>标签就获得了成功，就像它们是从独立的Angular部署中提供的一样。

我刚刚使用HTML编辑器在帖子中添加了以下HTML。

当然，我不得不弄弄JS脚本源URL。可以使用Wordpress短代码和插件来请求JS文件的URL路径来呈现所有这些HTML。

<script>

这与Divi主题和“代码”模块一起使用效果不佳，完全弄乱了页面。尝试使用正式的Wordpress机制来包含JS脚本（<app-root></app-root> <script type="text/javascript" src="http://localhost:4200/inline.bundle.js"></script> <script type="text/javascript" src="http://localhost:4200/polyfills.bundle.js"></script> <script type="text/javascript" src="http://localhost:4200/styles.bundle.js"></script> <script type="text/javascript" src="http://localhost:4200/scripts.bundle.js"></script> <script type="text/javascript" src="http://localhost:4200/vendor.bundle.js"></script> <script type="text/javascript" src="http://localhost:4200/main.bundle.js"></script>）的尝试失败，因为在脚本加载时找不到wp_enqueue_script标签。

现有的角度web-app到wordpress页面

2 个答案: