在wordpress添加自制html页面

这是一个在线钢材理论重量计算工具,提供方钢、圆角方钢等多种钢材类型的重量计算功能。用户只需输入钢材尺寸参数,即可得到每米重量的计算结果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、如何把自己单独做的HTML页面放到基于 WordPress 的网站上?

方法一:

1、将 xx.html 修改为 page-xx.php 上传到你当前使用的主题目录中;
2、在WordPress后台创建别名为 xx 的页面后发布,大功告成。

注意:创建的页面别名一定要与page-后面一样。或者在步骤1中将xx改为你的页面ID。

二、添加”钢材理论重量计算“页面代码:

<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
</head>
<body>
<!-- 钢材比重按7.85计算-->
<div class="text clearfix" style="text-align:center;">
    <span style="font-size:25px;color:black;" >钢材理论重量计算</span><br><br></div><HR>
1、【方钢】      输入边宽:<input type="text" id="a1" autocomplete="off" style="width:50px"/>毫米;
                  <input type="button" id="submit1" value="计算" style="margin: 0 auto;";/>
                  <input type="text" id="count1" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
2、【圆角方钢】    输入边宽:<input type="text" id="a2" autocomplete="off" style="width:50px"/>毫米;
          输入圆角半径:<input type="text" id="r2" autocomplete="off" style="width:50px"/>毫米;
                      <input type="button" id="submit2" value="计算" />
                      <input type="text" id="count2" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
3、【钢板、扁钢、钢带】输入宽度:<input type="text" id="a3" autocomplete="off" style="width:50px"/>毫米;
                      输入厚度<input type="text" id="h3" autocomplete="off" style="width:50px"/>毫米;
                             <input type="button" id="submit3" value="计算" />
                             <input type="text" id="count3" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
4、【圆角扁钢】    输入宽度:<input type="text" id="a4" autocomplete="off" style="width:50px"/>毫米;
          输入圆角半径:<input type="text" id="r4" autocomplete="off" style="width:50px"/>毫米;
              输入厚度<input type="text" id="h4" autocomplete="off" style="width:50px"/>毫米;
                     <input type="button" id="submit4" value="计算" />
                     <input type="text" id="count4" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
5、【钢管】      输入外径:<input type="text" id="a5" autocomplete="off" style="width:50px"/>毫米;
          输入壁厚:<input type="text" id="b5" autocomplete="off" style="width:50px"/>毫米;
                  <input type="button" id="submit5" value="计算" />
                  <input type="text" id="count5" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
6、【等边角钢】    输入边厚:<input type="text" id="a6" autocomplete="off" style="width:50px"/>毫米;
              输入边宽:<input type="text" id="b6" autocomplete="off" style="width:50px"/>毫米;
              输入内面圆角半径:<input type="text" id="r6" autocomplete="off" style="width:50px"/>毫米;
              输入端边圆角半径:<input type="text" id="R6" autocomplete="off" style="width:50px"/>毫米;
                      <input type="button" id="submit6" value="计算" />
                      <input type="text" id="count6" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
7、【不等边角钢】   输入边厚:<input type="text" id="a7" autocomplete="off" style="width:50px"/>毫米;
              输入长边宽:<input type="text" id="b7" autocomplete="off" style="width:50px"/>毫米;
              输入短边宽:<input type="text" id="c7" autocomplete="off" style="width:50px"/>毫米;<br><br>            
              输入内面圆角半径:<input type="text" id="r7" autocomplete="off" style="width:50px"/>毫米;
              输入端边圆角半径:<input type="text" id="R7" autocomplete="off" style="width:50px"/>毫米;
                      <input type="button" id="submit7" value="计算" />
                      <input type="text" id="count7" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
8、【工字钢】     输入高度:<input type="text" id="h8" autocomplete="off" style="width:50px"/>毫米;
              输入腿宽:<input type="text" id="b8" autocomplete="off" style="width:50px"/>毫米;
              输入腰厚:<input type="text" id="d8" autocomplete="off" style="width:50px"/>毫米;
              输入平均腿厚:<input type="text" id="t8" autocomplete="off" style="width:50px"/>毫米;  <br><br>                       
              输入内面圆角半径:<input type="text" id="r8" autocomplete="off" style="width:50px"/>毫米;
              输入端边圆角半径:<input type="text" id="R8" autocomplete="off" style="width:50px"/>毫米;
                      <input type="button" id="submit8" value="计算" />
                      <input type="text" id="count8" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
9、【槽钢】      输入高度:<input type="text" id="h9" autocomplete="off" style="width:50px"/>毫米;
              输入腿宽:<input type="text" id="b9" autocomplete="off" style="width:50px"/>毫米;
              输入腰厚:<input type="text" id="d9" autocomplete="off" style="width:50px"/>毫米;
              输入平均腿厚:<input type="text" id="t9" autocomplete="off" style="width:50px"/>毫米;  <br><br>                       
              输入内面圆角半径:<input type="text" id="r9" autocomplete="off" style="width:50px"/>毫米;
              输入端边圆角半径:<input type="text" id="R9" autocomplete="off" style="width:50px"/>毫米;
                      <input type="button" id="submit9" value="计算" />
                      <input type="text" id="count9" autocomplete="off" style="width:50px"/>KG/M<br><br><HR>
<div class="text clearfix" style="text-align:center;">
    <span style="font-size:20px;color:black;" >钢材比重默认按7.85计算。本页设计与制作:<a href="http://www.architect.wang">architect.wang</a></span><br><br></div>                        
</body>
<script>
function js(id){ return document.getElementById(id) }
js("submit1").onclick = function(){
    var a = js("a1").value;
    js("count1").value = (a*a)*(7.85*0.001);
}
js("submit2").onclick = function(){
    var a = js("a2").value;
    var r = js("r2").value;
    js("count2").value = (a*a-0.8584*r*r)*(7.85*0.001);
}
js("submit3").onclick = function(){
    var a = js("a3").value;
    var h = js("h3").value;
    js("count3").value = (a*h)*(7.85*0.001);
}
js("submit4").onclick = function(){
    var a = js("a4").value;
    var h = js("h4").value;
    var r = js("r4").value;
    js("count4").value = (a*h-0.8485*r*r)*(7.85*0.001);
}
js("submit5").onclick = function(){
    var a = js("a5").value;
    var b = js("b5").value;
    js("count5").value = (3.1416*b*(a-b))*(7.85*0.001);
}
js("submit6").onclick = function(){
    var a = js("a6").value;
    var b = js("b6").value;
    var r = js("r6").value;
    var R = js("R6").value;
    js("count6").value = (a*(2*b-a)+0.2146*(r*r-R*R*2))*(7.85*0.001);
}
js("submit7").onclick = function(){
    var a = js("a7").value;
    var b = js("b7").value;
    var c = js("c7").value;
    var r = js("r7").value;
    var R = js("R7").value;
    js("count7").value = (a*(1*b+1*c-a)+0.2146*(r*r-R*R*2))*(7.85*0.001);
}
js("submit8").onclick = function(){
    var h = js("h8").value;
    var b = js("b8").value;
    var d = js("d8").value;
    var t = js("t8").value;
    var r = js("r8").value;    
    var R = js("R8").value;
    js("count8").value = (h*d*1+2*t*(b-d)+0.8584*(r*r-R*R))*(7.85*0.001);
}
js("submit9").onclick = function(){
    var h = js("h9").value;
    var b = js("b9").value;
    var d = js("d9").value;
    var t = js("t9").value;
    var r = js("r9").value;    
    var R = js("R9").value;
    js("count9").value = (h*d*1+2*t*(b-d)+0.4292*(r*r-R*R))*(7.85*0.001);
}
</script>
</html>

笔记:

1.<HR>是分格线

2、若有js("count2").value = (a+b-c); 
此时需要写成:
 js("count2").value = (a*1+b*1-c)
不然a+b就成了a&b.

<think>嗯,用户想在WordPress添加自定义HTML网页文件。我需要先回想一下相关知识。根据引用[3],提到了“嵌入到页面”的弹出窗口,可以选择现有页面或新建页面。这可能涉及到使用页面编辑器或插件来插入HTML代码。 首先,WordPress本身允许在页面或文章中使用自定义HTML块。用户可以直接在古腾堡编辑器中添加一个HTML块,然后粘贴代码。这应该是最直接的方法,适合简单的页面。不过如果用户需要更复杂的自定义,可能需要其他方法。 另外,引用[4]提到了Pie Register插件,可以生成注册和登录页面。虽然这主要针对会员功能,但说明插件可以扩展页面的自定义能力。可能还有其他插件,如Elementor或SiteOrigin,允许用户通过可视化编辑器添加自定义HTML,或者直接上传HTML文件。 还有,用户可能需要通过FTP上传HTML文件到主题目录,然后创建自定义页面模板。这需要一定的技术知识,比如编辑PHP文件,设置模板名称,然后在后台选择该模板。引用[1]和[2]提到的自定义登录页面插件,虽然不直接相关,但说明通过插件或主题开发可以实现高度定制。 需要注意,直接上传HTML文件可能会影响主题更新,所以建议使用子主题。另外,安全性和兼容性也要考虑,避免代码冲突。用户可能需要指导选择合适的方法,根据他们的技术水平和需求来决定使用插件还是手动编码。</think>### 如何在WordPress添加自定义HTML网页文件 #### 方法一:通过WordPress编辑器直接嵌入HTML 1. **新建页面或文章** 进入WordPress后台,点击「页面」→「新建页面」,在古腾堡编辑器中添加「自定义HTML」区块,直接粘贴HTML代码即可[^3]。 2. **使用经典编辑器插件** 若使用经典编辑器,在「文本」模式下粘贴HTML代码(而非「可视化」模式),保存后即可生效。 --- #### 方法二:通过页面模板创建自定义HTML页面 1. **创建子主题(推荐)** 通过FTP工具(如FileZilla)进入网站目录:`/wp-content/themes/当前主题/`,创建子主题文件夹,避免主题更新覆盖修改。 2. **新建HTML模板文件** 在子主题文件夹中创建`custom-html-template.php`文件,添加以下代码: ```php <?php /* Template Name: 自定义HTML页面 */ ?> <!DOCTYPE html> <html> <head> <?php wp_head(); ?> </head> <body> <!-- 此处粘贴自定义HTML内容 --> <?php wp_footer(); ?> </body> </html> ``` 3. **应用模板** 在WordPress后台编辑页面时,右侧「页面属性」→「模板」中选择「自定义HTML页面」。 --- #### 方法三:使用插件实现高级自定义 1. **插件推荐** - **Pie Register**:支持生成完全自定义的注册/登录页面,可嵌入HTML表单[^4]。 - **Elementor Pro**:通过可视化编辑器添加HTML小工具,支持动态内容绑定。 - **Insert Headers and Footers**:直接在网站全局头部/尾部插入HTML代码。 2. **插件操作示例(以Pie Register为例)** - 安装插件后,自动生成四个默认页面(注册、登录等)。 - 进入「Pie Register」设置,通过短代码`[pieregister_form]`将自定义表单嵌入页面[^4]。 --- #### 方法四:通过FTP上传静态HTML文件 1. **上传文件** 将HTML文件通过FTP上传至`/wp-content/uploads/`目录(或其他自定义路径)。 2. **设置页面跳转** 在WordPress中新建页面,使用「重定向」插件(如Redirection)将该页面链接指向静态HTML文件的URL。 --- ### 注意事项 1. **兼容性检查** 自定义HTML中若包含CSS/JavaScript,需添加`wp_head()`和`wp_footer()`函数以确保与WordPress核心兼容。 2. **安全性** 避免直接嵌入未经验证的第三方脚本,建议使用子主题或插件管理自定义内容[^1][^2]。 ---
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值