WordPress如何添加Tracking Your Order

外贸独立站如何添加Track Your Order窗口？

步骤#01：创建页面

首先新建一个Page，在WordPress后台，找到Page，点击新建。或者使用已经存在的Tracking Page。

然后在想要创建Tracking模块的地方，随便敲几个字母，比如”ddd”，如下图所示：

选中ddd，点击Options，调出菜单，点击Edit As HTML

Edit as HTML如下图所示：

步骤#02：填写物流追踪代码

然后从这里复制物流追中代码：https://extcall.17track.net/zh-cn

其中有好几个格式可以选择，比如我们选择格式01，代码如下


<!--单号输入框。-->
<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>

将这个代码替换之前的ddd

代码粘贴好了以后，当我们去编辑其余Block的时候，会发现这个block变的不可识别了，这个时候只要点击这个block的右侧三个点，点击”Convert to HTML“就可以了。

注意：

如果有使用wp-rocket,延迟加载了JavaScript的话，记得把这个tracking的JavaScript剔除掉，否则可能手机端不正常。

例如使用WP Rocket优化的时候，会勾选Minify JavaScript files， Load JavaScript Deferred, Delay JavaScript Execution，这三个勾选上，那么这个17track的追踪代码在手机端无法使用。所以需要把17Tack的这个代码剔除掉，不要影响17Track的代码。

添加这个代码”/www.17track.net/externalcall.js“到Excluded JavaScript Files方框中。