如何仅当表单位于页面上时加载CF7 CSS & JS

CF7是Contact Form 7的简称，是一款非常流行的WordPress插件，用于创建和管理网站上的联系表单。CF7提供了一些默认的CSS和JavaScript文件，用于样式和功能的渲染。然而，有时候我们只希望在特定页面上加载这些文件，以提高网站的性能和加载速度。

要实现仅当表单位于页面上时加载CF7的CSS和JS，可以按照以下步骤进行操作：

在WordPress后台，找到并编辑包含CF7表单的页面。可以在“页面”菜单下找到页面列表，并选择要编辑的页面。
在页面编辑器中，切换到“文本”模式，以便直接编辑页面的HTML代码。
在页面的HTML代码中，找到包含CF7表单的代码块。通常，这段代码会以[contact-form-7 id="XXX" title="XXX"]的形式存在，其中XXX是表单的ID和标题。
在CF7表单代码块的上方或下方，插入以下代码片段：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var cf7Form = document.querySelector('.wpcf7');
        if (cf7Form) {
            var cf7Stylesheet = document.querySelector('link[href*="contact-form-7"]');
            var cf7Script = document.querySelector('script[src*="contact-form-7"]');
            if (cf7Stylesheet) {
                cf7Stylesheet.remove();
            }
            if (cf7Script) {
                cf7Script.remove();
            }
        }
    });
</script>

这段代码使用JavaScript监听页面的DOMContentLoaded事件，当页面加载完成时执行。它首先检查页面中是否存在.wpcf7类的元素，即CF7表单的父容器。如果存在，它将查找并移除包含CF7样式和脚本的<link>和<script>标签。