Question

我使用HTML5，CSS3和jQuery构建了一个自定义计算器。我有一个基本的托管帐户，并通过cPanel将所有文件加载到我的根目录。这些文件包括calc.html，其中包含一个包含我的样式表的CSS文件夹和一个包含我的自定义jQuery的JS文件夹。

现在有人想把我的计算器放在他们的Wordpress网站上，我们无法弄清楚如何做到这一点。目前我只是使用iframe在他们的Wordpress页面上显示我的网站，但我们希望计算器可以从他的网站托管。我尝试将我的HTML代码从我的calc.html文件复制并粘贴到一个可以工作的Wordpress页面，但我没有CSS的样式，JS不能正常工作。所以我使用了FileZilla并创建了一个名为CALC的文件夹，其中包含以下路径（public_html / wp-content / themes / parallaxpro / cyberchimpscss / calc /）并在其中添加了JS sand CSS内容。

我将我的CSS链接到我的calc.html代码

的标题中

<link rel="stylesheet" href="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/css/mainCalc.css">

我将我的JS链接到calc.html

中的主体末尾

<script src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/js/main.js"></script>

我查看了该页面，但仍然有我丑陋的HTML代码，没有样式，也没有JS功能。

我是Wordpress /编码的新手，这是我脑海中浮现的第一件事，所以我尝试了它并失败了。

我还以为我可以将calc.html，mainCalc.css和main.js放在我创建的calc目录中（public_html / wp-content / themes / parallaxpro / cyberchimpscss / calc / ）然后使用iframe在wordpress页面上显示calc.html。我也失败了。

我用过

<iframe src="public_html/wp-content/themes/parallaxpro/cyberchimpscss/calc/calc.html"></iframe>

Answer 1

您可以创建自定义页面模板。

基本上，您将遵循文档https://developer.wordpress.org/themes/template-files-section/page-template-files/page-templates/并在内容部分中使用HTML + CSS + JS创建一个页面。

完成后，您只需在管理部分中创建一个新页面，从发布按钮下的列表中选择模板。保存它，就是这样。编写插件更简单。

Answer 2

好的，我已经加载了.html文件中的CSS。我加载了大部分JS，但最后我还有一个JS代码可以添加，但无法使其工作。

这是我需要解决的问题

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>

我将代码编辑到此

<script>window.jQuery || document.write('<script> I PASTE JS HERE <\/script>')</script>

我粘贴的代码很长，搞乱了一切。我认为存在语法错误或者我可能无法将代码粘贴到我粘贴它的位置。我刚进入深渊，我不能游泳:(

所以我决定删除

<script>window.jQuery || document.write('<script> I PASTE JS HERE <\/script>')</script>

相反，我只是把

<script> PASTED JS CODED HERE </script>

现在我的.html文件中包含了所有的CSS和JS。我将.html放在桌面上，然后用Firefox和Chrome打开。它的工作绝对完美。

我现在从.html文件中复制所有代码并将其粘贴到我的自定义php模板页面的内容区域。

我在Wordpress上创建一个页面，从页面属性中选择我的自定义模板并查看页面。

现在好了，但是当我在Firefox / Chrome中测试原始的.html文件时，它不能正常工作或看起来像100％。

混淆。

更新**我现在要做的是排队脚本和样式一旦完成就会更新。这一定是我的问题！

如何让自定义计算器显示在wordpress页面上？

2 个答案: