Javascript 向WordPress添加HTML web应用程序

我使用HTML、CSS和JavaScript在我的机器上本地创建了一个小应用程序。我正在使用一个插件在站点上运行JavaScript。我的小应用程序从下拉列表中加载不同的图片，并使用sendmailjavascript函数。如何将此页面添加为我的WordPress页面之一？我用一个BlankSlate插件来清理我的一个页面，每当我把代码粘贴到页面上时，它就会被打乱，无法工作。它加载了我的下拉列表和一些标题，但图片不见了，背景也不存在。我刚开始使用WordPress，我想把这个小应用程序添加到我的网站上。任何帮助或建议以及如何复制都是非常好的。（很抱歉代码杂乱无章。我仍在学习和练习，但这正是我想把它变成一页的内容）

BuildIt AR应用程序
.body{最大宽度：1920px；边距：0自动；}
.centered{最大宽度：720px；边距：0自动；}
.左{
浮动：左；}
挑选{
显示：块；清除：两个；
}    
.我的盒子{
明确：两者皆有；
最大宽度：375px；
最大高度：225px；
填充顶部：275px；
}
.文本行{
填充顶部：350px；
}
身体{
背景图像：url（“https://www.xmple.com/wallpaper/grey-gradient-linear-1920x1080-c2-708090-dcdcdc-a-285-f-14.svg");
背景重复：重复-x；
边框：5px浅灰色插图；
}
字体{
字体系列：“岩盐”，草书；
位置：固定；
字体大小：350%；
最高：20%；
左：50%；
利润上限：-50px；
左边距：-100px；
字母间距：3px；
文本阴影：2.2px1.5px灰色；
}
挑选{
}
变量pictureList1=[
"http://i66.tinypic.com/xds135.png",
"http://i68.tinypic.com/28cdhxh.png",
"http://i66.tinypic.com/169s4mc.png", 
];
功能更改图像（id）{
var idx=document.getElementById（'picDD'）。值-1；//javascript的索引为零
document.getElementById（'pic'）.src=pictureList1[idx]；
y=document.getElementById（“picDD”）；
//x、 value=y.options[y.selectedIndex]。文本；
document.getElementById（“stock”）.value=stock[y.selectedIndex]；
}
变量pictureList2=[
"http://i65.tinypic.com/2wmqefs.png",
"http://i63.tinypic.com/s4za11.png",
"http://i66.tinypic.com/6e3ibq.png",
];
功能更改\u图像2（id）{
var idx=document.getElementById（'picDD2'）。值-1；//javascript的索引为零
document.getElementById（'pic2'）.src=pictureList2[idx]；
y=document.getElementById（“picDD2”）；
//x、 value=y.options[y.selectedIndex]。文本；
document.getElementById（“body”）.value=body[y.selectedIndex]；
}
变量pictureList3=[
"http://i65.tinypic.com/2n9dslt.png",
" http://i65.tinypic.com/289h35y.png",
"http://i64.tinypic.com/vxnpzd.png",
];
功能更改\u图像3（id）{
var idx=document.getElementById（'picDD3'）。值-1；//javascript的索引为零
document.getElementById（'pic3'）.src=pictureList3[idx]；
y=document.getElementById（“picDD3”）；
//x、 value=y.options[y.selectedIndex]。文本；
document.getElementById（“桶”）.value=barrel[y.selectedIndex]；
}
var barrel=新数组（）；
var body=新数组（）；
var stock=新数组（）；
桶[0]=“突击桶$89.95”；
body[0]=“BlackOut body$231.95”；
股票[0]=“幻灯片股票$78.95”；
枪管[1]=“狙击手枪管395.95美元”；
正文[1]=“SlideFire正文$278.95”；
股票[1]=“折价股票$178.95”；
每桶[2]=“战术每桶278.95美元”；
正文[2]=“绿色正文$134.95”；
股票[2]=“稳定股票78.95美元”；
桶[3]=4；
正文[3]=“asmith”；
股票[3]=“安迪·史密斯”；
//函数更改_image3（）{
//x=document.getElementById（“用户”）；
// 
函数sendMail（）{
var link=“mailto:example@gmail.com"
+“？抄送=gunbuilder@builditar.com"
+“&subject=“+escape”（“构建AR订单”）
+“&body=“+escape（document.getElementById（'name'）。value+”\n“+document.getElementById（'barrel'）。value+”\n“+document.getElementById（'body'）。value+”\n“+document.getElementById（'stock'）。value）；
window.location.href=链接；
}
库存#1
库存#2
库存#3
正文#1
正文#2
正文#3
桶#1
桶#2
枪管#3
桶

身体

股票

BuildIt-AR
发送

我认为最好为此创建一个自定义的短代码。类似于[buildit]的代码，然后用你的应用程序代码替换此代码

你可以用一个免费的插件来做这个。完全公开，我是这个插件的作者

Snippy允许您创建自己的短代码并为其选择名称。然后您可以向短代码中添加HTML、CSS和JavaScript片段（在Snippy中，这些片段被命名为“位”）。然后将短代码放置在页面或帖子上，Snippy将输出您的HTML。这比学习WordPress API或修改PHP文件容易得多

在您的情况下，我建议复制

标记中的所有HTML，并将其添加到HTML“位”。您也可以将字体嵌入

中。Snippy将从那里获取它。

创建一个新页面，然后在您的主题文件夹中创建一个新页面模板

wp-content/your-theme/page-{slug}.php

在该文件中添加你的应用程序。如果你喜欢，你甚至可以创建自定义页眉和页脚文件

wp-content/your-theme/header-app.php
wp-content/your-theme/footer-app.php

然后在页面-{slug}.php文件中添加

<?php get_header('app'); ?>
<!-- your content -->
<?php get_footer('app'); ?>

---

您可能希望为整个thi创建一个短代码

wp-content/your-theme/header-app.php
wp-content/your-theme/footer-app.php

<?php get_header('app'); ?>
<!-- your content -->
<?php get_footer('app'); ?>