0
HTML、CSS、JavaScriptを使用して、自分のマシンにローカルで小さなアプリケーションを作成しました。私はサイト上でJavaScriptを実行するためにプラグインを使用しています。私の小規模なアプリケーションは、ドロップダウンリストとは異なる画像をロードし、SendMail JavaScript関数も使用します。このページを自分のワードプレスページの1つとして追加するにはどうしたらいいですか？私はBlankSlateプラグインを使用して、自分のページの1つをきれいにし、コードをペーストして、スクランブルされたページに貼り付ける。それは私のドロップダウンリストといくつかのタイトルをロードしますが、写真はなくなり、背景は存在しません。私はWordPressを初めて使用しています。この小さなアプリを自分のサイトに追加したいのです。どのような助けも偉大か示唆、それをコピーする方法でしょう。 （汚い、未組織コードのため申し訳ありません。まだ学習と実践が、これは私がページに変身しようとしているものです）WordPressにHTML Webアプリケーションを追加する
<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:[email protected]"
+ "[email protected]"
+ "&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>
を追加します。しかし、すべてのjが適切にエンキューされていることを確認してください。 – Difster
コードを入力してください – Mindless
コードが投稿に追加されました – bricew25