我在我的机器上使用 HTML、CSS 和 JavaScript 在本地创建了一个小应用程序。我正在使用插件在网站上运行 JavaScript。我的小应用程序从下拉列表中加载不同的图片并使用 SendMail JavaScript 函数。如何将此页面添加为我的 WordPress 页面之一？我使用 BlankSlate 插件来清理我的一个页面，每当我将我的代码粘贴到该页面时，它就会变得乱七八糟并且无法正常工作。它加载了我的下拉列表和一些标题，但图片不见了，背景也不存在。我刚开始使用 WordPress，我想将这个小应用程序添加到我的网站。任何帮助都会很棒或建议以及如何复制它。 (抱歉，代码困惑、无组织。仍在学习和练习中，但这就是我试图变成一个页面的内容)
<html lang="en"><head>
<meta charset="utf-8">
<meta name="description" content=" A page for exploring html documents">
<title>BuildIt-AR App</title>
<head>
<link href="https://fonts.googleapis.com/css?family=Rock+Salt" rel="stylesheet">
</head>
<style>
.body {max-width:1920px; margin:0 auto;}
.centered {max-width:720px; margin:0 auto;}
.floatLeft {
float:left;}
select {
display:block; clear:both;
}
.myBox{
clear:both;
max-width: 375px;
max-height: 225px;
padding-top:275px;
}
.textlines {
padding-top:350px;
}
body{
background-image: url("https://www.xmple.com/wallpaper/grey-gradient-linear-1920x1080-c2-708090-dcdcdc-a-285-f-14.svg");
background-repeat: repeat-x;
border: 5px inset lightgrey;
}
font{
font-family: 'Rock Salt', cursive;
position: fixed;
font-size: 350%;
top: 20%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
letter-spacing: 3px;
text-shadow: 2.2px 1.5px grey;
}
select{
}
</style>
<script type="application/javascript">
var pictureList1 = [
"http://i66.tinypic.com/xds135.png",
"http://i68.tinypic.com/28cdhxh.png",
"http://i66.tinypic.com/169s4mc.png",
];
function change_image(id) {
var idx = document.getElementById('picDD').value - 1; // javascript is zero-indexed
document.getElementById('pic').src = pictureList1[idx];
y = document.getElementById("picDD");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("stock").value = stock[y.selectedIndex];
}
var pictureList2 = [
"http://i65.tinypic.com/2wmqefs.png",
"http://i63.tinypic.com/s4za11.png",
"http://i66.tinypic.com/6e3ibq.png",
];
function change_image2(id) {
var idx = document.getElementById('picDD2').value - 1; // javascript is zero-indexed
document.getElementById('pic2').src = pictureList2[idx];
y = document.getElementById("picDD2");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("body").value = body[y.selectedIndex];
}
var pictureList3 = [
"http://i65.tinypic.com/2n9dslt.png",
" http://i65.tinypic.com/289h35y.png",
"http://i64.tinypic.com/vxnpzd.png",
];
function change_image3(id) {
var idx = document.getElementById('picDD3').value - 1; // javascript is zero-indexed
document.getElementById('pic3').src = pictureList3[idx];
y = document.getElementById("picDD3");
//x.value = y.options[y.selectedIndex].text;
document.getElementById("barrel").value = barrel[y.selectedIndex];
}
var barrel = new Array();
var body = new Array();
var stock = new Array();
barrel[0] = "Assault Barrel $89.95";
body[0] = "BlackOut Body $231.95";
stock[0] = "Slide Stock $78.95";
barrel[1] = "Sniper Barrel $395.95";
body[1] = "SlideFire Body $278.95";
stock[1] = "Fold Stock $178.95";
barrel[2] = "Tactical Barrel $278.95";
body[2] = "Green Body $134.95";
stock[2] = "Steady Stock $78.95";
barrel[3] = 4;
body[3] = "asmith";
stock[3] = "Andy Smith";
// function change_image3() {
//x = document.getElementById("users");
//
function sendMail() {
var link = "mailto:example@gmail.com"
+ "?cc=gunbuilder@builditar.com"
+ "&subject=" + escape("BuildIt-AR Order Form")
+ "&body=" + escape(document.getElementById('name').value + "\n" + document.getElementById('barrel').value + "\n" + document.getElementById('body').value + "\n" + document.getElementById('stock').value);
window.location.href = link;
}
</script>
</head>
<body>
<div class="centered">
<div class="floatLeft">
<img id="pic" src="http://i66.tinypic.com/xds135.png" class="myBox">
<select id="picDD" onchange="change_image();">
<option value="1" selected="">Stock #1</option>
<option value="2">Stock #2</option>
<option value="3">Stock #3</option>
</select>
</div></div>
<div class="floatLeft">
<img id="pic2" src="http://i65.tinypic.com/2wmqefs.png" class="myBox">
<select id="picDD2" onchange="change_image2();">
<option value="1" selected="">Body #1</option>
<option value="2">Body #2</option>
<option value="3">Body #3</option>
</select>
</div>
<div class="floatLeft">
<img id="pic3" src="http://i64.tinypic.com/vxnpzd.png" class="myBox">
<select id="picDD3" onchange="change_image3();">
<option value="1" selected="">Barrel #1</option>
<option value="2">Barrel #2</option>
<option value="3">Barrel #3</option>
</select>
</div>
<div class="textlines">
<input type="text" placeholder="<Name>" id="name">
<p>Barrel <input type="text" id="barrel" name="id" ></p>
<p>Body <input type="text" id="body" name="username" ></p>
<p>Stock <input type="text" id="stock" name="full_name" ></p>
<font size="10">BuildIt-AR</font>
<button onclick="sendMail(); return false">Send</button>
</body></html>
最佳答案
我认为最好为此创建自定义短代码。类似于 [buildit]，此代码随后会被您的应用程序代码替换。
您可以使用像 Snippy 这样的免费插件去做这个。完全公开，我是插件的作者。
Snippy 让您可以创建自己的短代码并为其选择名称。然后，您可以将 HTML、CSS 和 JavaScript 片段添加到短代码中(在 Snippy 中，它们被命名为“位”)。然后，您将短代码放在页面或帖子上，Snippy 将输出您的 HTML。比学习 WordPress API 或修改 PHP 文件容易得多。
在您的情况下，我建议复制 <body> 中的所有 HTML标记并将其添加到 HTML“位”。您可以移动字体嵌入 <link>也在那里。 Snippy 将从那里拿走它。
关于javascript - 将 HTML 网络应用程序添加到 WordPress，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45179108/