将单页应用程序集成到 WordPress

Question

我有很多包含 html、css、js 文件的基本单页应用程序，我想在 wordpress 上发布它们。

我可以像添加外部网站一样添加它们，但是当我使用它时，我必须将所有静态部分（页眉、菜单、页脚等）添加到 app.html 文件中。我必须为每个应用程序执行此操作。这肯定不是可持续的和好的解决方案。这就是为什么我正在寻找某种方法在 wp 中的菜单之后添加此页面，就像其他页面一样。

我想为您提供文件夹层次结构来具体解决问题。

• || - 应用程序
• || - || - 应用程序1
• || - || - || - app1.html
• || - || - || - app1.js
• || - || - || - app1.css
• || - || - || - 图像
• || - || - || - || - img11.png
• || - || - || - || - img12.png

---

• || - || - 应用程序2
• || - || - || - app2.html
• || - || - || - app2.js
• || - || - || - app2.css
• || - || - || - 图像
• || - || - || - || - img21.png
• || - || - || - || - img22.png

如果可能的话，我想将应用程序文件夹添加到 wp 并使用管理面板创建页面。

我试过这个（只添加一个应用程序），它调用 html 但 js 和 css 不起作用。 （js 和 css 文件在 html 文件中链接）

<?php /* Template Name: App1 */ ?>
<?php get_header(); ?>

<?php include 'apps/app1/app1.html'?>

<?php get_footer(); ?>

---

编辑： 当我在内部直接将 css & js 代码集成到 html 文件时，系统可以正常工作。但是，当我尝试在外部添加它们时，系统无法正常工作。

<link rel="stylesheet" href="app1.css">
<script src="app1.js"></script>

当我检查代码时（CTRL + Shift + I）我发现了问题，我该如何解决这个问题？

<link rel="stylesheet" href="/app1.css">

Answer 1

需要用..表示父目录：

试试这个

<?php /* Template Name: App1 */ ?>
<?php get_header(); ?>

<?php include '../apps/app1/app1.html'?>

<?php get_footer(); ?>

Answer 2

直接在 wp-content 文件夹中安装 apps 文件夹

在 .html 文件中，我改变了这个；

<link rel="stylesheet" href="app1.css">
<script src="app1.js"></script>

有了这个；

<link rel="stylesheet" href="/wp-content/apps/app1/app1.css">
<script src="/wp-content/apps/app1/app1.js"></script>

还有php文件

<?php /* Template Name: App1 */ ?>
<?php get_header(); ?>
<?php include 'wp-content/apps/app1/app1.html">'; ?>
<?php get_footer(); ?>

这解决了问题，但是从维护的角度来看，我仍然不确定这是否是合理的解决方案。