在WordPress（Elementor）中通过嵌入JavaScript加载外部HTML文件

步骤1：上传INCL文件到WordPress服务器 #

• 两种上传方式可选：
  • FTP上传：连接服务器后，在wp-content/uploads/目录下新建专属文件夹（比如incl-files），将每日生成的INCL文件上传至此。
  • 媒体库上传：直接通过WordPress后台「媒体库」上传文件，上传后复制文件的完整URL（在媒体库文件详情页查看「文件URL」）。

步骤2：在Elementor中嵌入加载代码 #

每个需要加载INCL内容的页面区域，按以下操作配置：

1. 打开Elementor编辑器，在目标位置添加「HTML」小部件（位于Elementor「基础」分类下）。
2. 在HTML小部件的代码框中，粘贴调整后的加载代码（替换对应ID和文件路径）：

<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#TODAYS-RACE-TIMES-HOME-PAGE').show().load('/wp-content/uploads/incl-files/TODAYS-RACE-TIMES-HOME-PAGE.incl');
});
</script>
<div id='TODAYS-RACE-TIMES-HOME-PAGE'></div>

代码说明：

• WordPress默认启用jQuery的noConflict模式，因此需要用jQuery(document).ready(function($) { ... })包裹代码，确保函数内部可正常使用$。
• 替换文件路径：
  • FTP上传到自定义文件夹时，使用相对路径即可；
  • 媒体库上传时，直接粘贴文件的完整URL（例如https://你的域名.com/wp-content/uploads/2024/05/TODAYS-RACE-TIMES-HOME-PAGE.incl）。

步骤3：INCL文件格式优化（可选） #

INCL文件无需保留完整HTML结构（如<!DOCTYPE html>、<html>标签），仅保留需要展示的内容即可，避免与WordPress页面结构冲突：

<!-- TODAYS-RACE-TIMES-HOME-PAGE.incl -->
<p><font face="Lato" size="2" color="#07342a"><b>7 RACES AT GOULBURN (NSW) - RACE 1 STARTS AT 1:15 PM AEST</b></p>
<p><font face="Lato" size="2" color="#07342a"><b>8 RACES AT PAKENHAM SYNTHETIC (VIC) - RACE 1 STARTS AT 1:00 PM AEST</b></p>

日常更新流程 #

1. 生成新INCL文件后，上传至服务器对应目录替换旧文件；
2. 刷新前端页面，即可展示最新数据。

常见问题排查 #

• 内容不显示：检查文件路径是否正确，确认INCL文件权限为644（FTP上传时注意设置），同时查看浏览器控制台是否有404错误（文件未找到）。
• 样式冲突：若加载内容与主题样式不符，可在INCL文件中添加内联样式，或在Elementor自定义CSS中针对对应ID设置样式。

内容的提问来源于stack exchange，提问作者Billy J