Contact form7 仅在有调用时加载css,js代码

Contact form7 仅在必要时加载JavaScript和样式表

在其默认设置中，Contact Form 7在每个页面上加载其JavaScript和CSS样式表。您可能会认为这是多余的或浪费的，并且只想将它们加载到包含联系表格的那些页面上。我了解这种感觉，但是对于插件而言，在加载开始时要知道页面是否包含联系表格存在技术上的困难。但是，我可以向您展示解决此问题的方法。

步骤1：停止在所有页面上加载JavaScript和CSS样式表

当的值WPCF7_LOAD_JS设置为false（默认值：true）时，Contact Form 7不会加载JavaScript。您可以像下面这样在wp-config.php中设置此常量的值：

define( 'WPCF7_LOAD_JS', false );

同样，您可以使用来控制CSS样式表的加载WPCF7_LOAD_CSS。当值联系表7将不加载CSS样式表WPCF7_LOAD_CSS是假的（：默认真）。您可以像下面这样在wp-config.php中进行设置：

define( 'WPCF7_LOAD_CSS', false );

或者，您也可以通过在主题的functions.php文件中添加几行代码来禁用JavaScript和CSS的加载，如下所示：

add_filter( 'wpcf7_load_js', '__return_false' );
add_filter( 'wpcf7_load_css', '__return_false' );

现在您已经成功停止了JavaScript和CSS样式表的加载，但是不幸的是，您还杀死了包含联系表单的页面上的它们-因此我们确实需要将它们重新放置在正确的页面上。因此，下一步就是将文件加载到需要它们的显式页面上所需的内容。

步骤2：在包含联系表格的页面上加载文件

例如，假设您有一个名为“ Contact”的页面，并且它是唯一包含联系表单的页面。并假设您的主题文件夹中有一个名为“ contact.php”的“联系人”页面模板文件。现在，您需要在“联系”页面上专门加载Contact Form 7的JavaScript和CSS样式表。

为此，您必须编辑“ contact.php”模板文件，并将以下行插入其中：

<?php
 
if ( function_exists( 'wpcf7_enqueue_scripts' ) ) {
  wpcf7_enqueue_scripts();
}
 
if ( function_exists( 'wpcf7_enqueue_styles' ) ) {
  wpcf7_enqueue_styles();
}
 
?>

请注意，wpcf7_enqueue_scripts()和wpcf7_enqueue_styles()之前一定要叫wp_head()被调用。

转载至：https://contactform7.com/loading-javascript-and-stylesheet-only-when-it-is-necessary/