如何在WordPress中添加脚本实现全局折叠Elementor目录模块

你提供的JS代码可以正常实现Elementor目录全局默认折叠的需求，以下是三种适合不同场景的添加方式：

方法1：通过Elementor自带自定义代码功能添加（最推荐，无需修改主题文件） #

• 进入WordPress后台，依次点击左侧菜单【Elementor】→【自定义代码】
• 点击页面右上角「添加新代码」按钮
• 代码名称可自定义，比如填写「全局Elementor目录默认折叠」，代码类型选择HTML片段
• 将你手里的整段<script>代码完整粘贴到代码编辑区域
• 代码加载位置选择</body> 标签之前，优先级保持默认即可
• 发布范围选择「整个站点」，点击保存发布即可生效

方法2：通过主题函数文件添加 #

• 进入WordPress后台，依次点击【外观】→【主题文件编辑器】，在右侧文件列表找到functions.php（主题函数文件）
• 将以下代码粘贴到functions.php文件的最底部，点击更新文件即可

add_action('wp_footer', 'custom_auto_collapse_elementor_toc');
function custom_auto_collapse_elementor_toc() {
?>
<script> 
jQuery(document).ready(function($) { 
var delay = 100; setTimeout(function() { 
$('.elementor-widget-table-of-contents').addClass('elementor-toc--collapsed');
$('.elementor-toc__body').css('display', 'none'); 
}, delay); 
}); 
</script>
<?php
}

注意：如果你使用的是可更新的官方主题，建议使用子主题的functions.php添加代码，避免主题更新后自定义代码被覆盖。

方法3：通过全局小部件添加 #

• 进入WordPress后台，依次点击【外观】→【小部件】
• 找到「自定义HTML」小部件，将它添加到全站都会加载的页脚小部件区域
• 把你手里的整段<script>代码粘贴到HTML编辑框内，点击保存即可

效果验证：代码添加完成后，清理站点缓存、浏览器缓存，再访问带有Elementor目录模块的页面即可看到目录默认折叠的效果。

内容的提问来源于stack exchange，提问作者MohsenJames Amra