Wordpress跨境独立站添加快递物流查询跟踪页面(Track My Order)

yoken 阅读:33 2025-07-24 15:03:59 评论:0

在自己的网站上(以WordPress为例)新建一个页面,名字随便,叫Track Orders也好,Track my order也行,Track your order都不错,如何在wordpress添加新页面就不多说了。

获取17track查询小部件的资料

在17track网站的菜单中点击工具,然后在下拉菜单中你就会看到 物流查询小部件 了(如下图),点击进去。


全球物流查询平台 17TRACK 小部件


在接下来的页面会有四个方法,其实是同一个方法,只是在你网站展示的搜索形式不同,我们选择方法一,如图:


物流查询小部件 17TRACK


然后往下拉,查看操作方法,其实你会发现方法就是一堆编好的网站页面代码,包括html和javascript代码:

<!--单号输入框。-->
<input type="text" id="YQNum" maxlength="50"/>
<!--用于调用脚本方法的按钮。-->
<input type="button" value="TRACK" onclick="doTrack()"/>
<!--用于显示查询结果的容器。-->
<div id="YQContainer"></div>

<!--脚本代码可放于页面底部,等到页面最后执行。-->
<script type="text/javascript" src="//www.17track.net/externalcall.js"></script>
<script type="text/javascript">
function doTrack() {
    var num = document.getElementById("YQNum").value;
    if(num===""){
        alert("Enter your number."); 
        return;
    }
    YQV5.trackSingle({
        //必须,指定承载内容的容器ID。
        YQ_ContainerId:"YQContainer",
        //可选,指定查询结果高度,最大为800px,默认为560px。
        YQ_Height:560,
        //可选,指定运输商,默认为自动识别。
        YQ_Fc:"0",
        //可选,指定UI语言,默认根据浏览器自动识别。
        YQ_Lang:"en",
        //必须,指定要查询的单号。
        YQ_Num:num
    });
}
</script>

在大部分建站系统中你直接把这些代码复制进新创建的物流查询页面就行,不需要做任何更改,然后保存,打开你的查询页面就能查询运单信息了,我在shopify自定义页面创建过,是完全可以的,在magento里面也是成功的。

WordPress网站使用17track小部件的方法

这里以wordpress为例,wordpress直接复制粘贴是没用的,因为wordpress本身是不能直接调用javascript的,需要安装一个插件,或者修改主题的function.php文件添加javascript。不会修改function.php的就别修改,怕出问题,安装插件就行了。

第一步:编辑刚刚新建的物流页面

点击编辑进入wordpress的最新页面编辑器,点击页面的右边黑色+号添加一个custom html区块如下图:


image


在write HTML…这个框中输入17track的代码,但是不是全部,你看之前的代码分两段,复制 <!–脚本代码可放于页面底部,等到页面最后执行。–> 之前的第一段代码添加进去就行了,然后点Publish就行了。

第二步:安装javascript插件

因为插件挺多,我就拿一个举例,其他大致用法都差不多的,我要说的是Insert Headers and Footers by WPBeginner这款插件,你可以直接通过左边菜单的plugins搜索安装,也可以到wordpress.org网站去下载再上传安装插件。


给wordpress网站添加自定义js插件


安装过程就不多说了,安装完成后在左侧的setting中会增加一项Insert Headers and Footers,点击就能在网站的头部<head>或者底部<footer>添加一些代码了。


Insert Headers and Footers ‹ My Blog — WordPress


建议把JavaScript的代码加入到footer,这样的话一般都对网站加载速度有帮助,最少能让网页更快的展示给访客。复制刚刚剩下的代码粘贴在插件的脚部,保存。以下网站的track order页面范例:


Track Orders – YueGui Tags


成功了,以后就可以告诉你的客户直接从你网站查询了,只要17track支持的物流商家都能再这里查询。顺便再这个页面底部或者侧边放点你们的产品或者推广活动。

另外想美化一下搜索框的需要懂点css知识,教程就到这里了。

结语

物流查询页面并不是一个非添加不可得页面,只是添加了更加人性化,方便用户,也使网站更加完整,某种程度上增加客户的信任度,顺便还能多几个自己的产品的展示位置,这个页面说不定流量还不错。


转载保留链接!网址:http://www.80920140.com/post/1160.html

声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源; 2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任; 3.作者投稿可能会经我们编辑修改或补充。

发表评论
搜索
排行榜
关注我们

扫一扫关注我们,了解最新精彩内容