Question

我在网站上使用联系表格7插件，该网站在每个页面的页脚中都有一个联系表格，并且还在专用联系页面的主要区域中有一个联系表格。

我知道如何在CF7中自定义ajax loader gif ...

function my_wpcf7_ajax_loader () { return get_stylesheet_directory_uri() . '/images/my-loader-image.gif'; } add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');

...但我的问题是我需要指定两个不同的加载器图像 - 一个用于页脚表单，另一个用于联系页面表单。（原因是因为一个表单是在白色背景上而另一个是在红色背景上，尽管尝试了不同的loader gifs我不认为有可能有一个看起来很好的加载器gif两者。）

Answer 1

以下是解决方案：https://gist.github.com/tctc91/8271205

add_filter('wpcf7_ajax_loader', 'my_wpcf7_ajax_loader');

function my_wpcf7_ajax_loader () {
    return  network_home_url() . '/assets/themes/ips-helpdesk/images/ajax-loader.gif';
}

Answer 2

由于加载图片是具有img属性的src元素，因此css方法无效。
需要通过JavaScript更改src标签的img属性，而无需修改联系人7表单插件的核心js（以便将来允许插件升级），我已经提供了以下JavaScript解决方案来应用通过强力方法进行的这种改变。

(function($) {
    setInterval(function() {
        if(typeof $.fn.wpcf7InitForm != "undefined") {
            //Contact Form 7 is loaded and initialized
            $loaderImage = $("#wpcf7-f52-o2 img.ajax-loader"); // modify your selector accordingly
            if(!$loaderImage.data("pathChanged")) {
                $loaderImage.attr("src", "ALTERNATIVE_IMAGE_PATH");
                $loaderImage.data("pathChanged", true);
            }
        }
    }, 2000);
})(jQuery);

虽然这可能不是最好的方法，但看看它是否有帮助。

Answer 3

我读了一篇文章，为您的问题提供了可靠的解决方案。他们给出了这个解决方案：

    // Change the URL to the ajax-loader image
function change_wpcf7_ajax_loader($content) {
    if ( is_page('contact') ) {
        $string = $content;
        $pattern = '/(<img class="ajax-loader" style="visibility: hidden;" alt="ajax loader" src=")(.*)(" \/>)/i';
        $replacement = "$1".get_template_directory_uri()."/images/ajax-loader.gif$3";
        $content =  preg_replace($pattern, $replacement, $string);
    }
    return $content;
}
add_filter( 'the_content', 'change_wpcf7_ajax_loader', 100 );

链接到文章here：

WordPress / CF7 - 自定义联系表格7 ajax loader gif，具体取决于位置

3 个答案: