wordpress 通过自定义字段控制Contact Form 7 js和css调用

最近很不安分,又在折腾wordpress。折腾的站点出于个人原因只能放在香港服务器。对于速度有着近乎变态要求的龙鹰,会想尽办法优化站点加载的文件,CSS和JS就是其中之一。Contact Form 7是大家常用的表单联系插件,它自有加载的CSS和JS都在页面上全程调用。我们能不能在需要用到Contact Form 7的地方才调用其本身的CSS和JS呢?下面是龙鹰的折腾成果(注意,龙鹰只是抛砖引玉,因为个人本身也是菜鸟一枚,不太懂代码)。

一、如果你只需要在少数某几个页面上调用Contact Form 7

这时候,你只需要参考网上现有的教程,在functions.php 上增加以下代码即可。

add_action ( 'wp_enqueue_scripts', 'wpjam_cf7_enqueue_scripts', 99 );
function wpjam_cf7_enqueue_scripts(){
    wp_dequeue_script('contact-form-7');
    if(is_page('contact')){
        $in_footer = true;
        if ( 'header' === WPCF7_LOAD_JS )
            $in_footer = false;
        wp_enqueue_script( 'contact-form-7',
            wpcf7_plugin_url( 'includes/js/scripts.js' ),
            array( 'jquery', 'jquery-form' ), WPCF7_VERSION, $in_footer );
    }
}

add_action( 'wp_enqueue_scripts', 'wpjam_cf7_enqueue_styles', 99 );
function wpjam_cf7_enqueue_styles() {
    wp_dequeue_style('contact-form-7');
    if(is_page('contact')){
        wp_enqueue_style( 'contact-form-7',
            wpcf7_plugin_url( 'includes/css/styles.css' ),
            array(), WPCF7_VERSION, 'all' );
    }
}

其中,代码中的

if(is_page('contact')){

就是指contact的页面中插入联系表单。如果你有多个页面需要插入,那么可以使用数组进行替换

is_page ( array(‘contact-1’, ‘contact-2’))

二、你想动态在文章页或者页面调用Contact Form 7,又不想全站调用JS和CSS,那么可以采用自定义字段进行控制。

注意:这个方法会有一定瑕疵…目前确认的是没办法在额外的设置中自行添加js代码。但是大部分功能正常使用。

1.请在functions.php中添加如下代码(3.9版本及以上)

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

2.请在你有可能需要调用的地方添加如下代码(single.php或者page.php):

$form=get_post_meta($post->ID, 'form', true); 
if($form!=""){
?>    
<script type='text/javascript'>
/* <![CDATA[ */
var _wpcf7 = {"loaderUrl":"http:\/\/127.0.0.1\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","recaptcha":{"messages":{"empty":"Please verify that you are not a robot."}},"sending":"\u53d1\u9001\u4e2d\u3002\u3002\u3002"};
/* ]]> */
</script>
<script src="<?php echo plugins_url();?>/contact-form-7/includes/css/styles.css"></script>
<script src="<?php echo plugins_url();;?>/contact-form-7/includes/js/scripts.js"></script>
<?php    
}

在上述代码中

var _wpcf7 = {"loaderUrl":"http:\/\/127.0.0.1\/wp-content 

路径需要替换为你自己的博客地址。

$form=get_post_meta($post->ID, 'form', true); 

是获取自定义字段form的值。只要增加自定义字段form,里面填写一个随机值即可在当篇文章中调用Contact Form 7 的js和css。

上面是作为一个菜鸟调用插件js和css 的思路。如果大神有更好的思路,欢迎交流。最后还是要着重于一句,这个方法会有一定瑕疵…目前确认的是没办法在额外的设置中自行添加js代码。但是大部分功能正常使用。

wordpress 通过自定义字段控制Contact Form 7 js和css调用wordpress 通过自定义字段控制Contact Form 7 js和css调用wordpress 通过自定义字段控制Contact Form 7 js和css调用

wordpress 通过自定义字段控制Contact Form 7 js和css调用

暂无评论

暂无评论...