个性化阅读
专注于IT技术分析

WP重力表添加无显示

我正在WordPress主题内创建一个自定义模板, 因为我的模板与活动主题的布局完全不同, 因此模板具有自己的页眉和页脚, 并且在两者中都正确声明了wp_head();和wp_footer();分别。

在我的模板代码中, 我试图使用do_shortcode显示重力形式, 但是没有形式显示。当我检查该区域时, 可以看到表单代码, 但是.gform_wrapper div中添加了style =” display:none”。

还有一点需要注意, 重力形式在我的网站的其余部分(使用活动主题的所有页面/帖子)中都可以正常工作, 我的自定义模板上只有这个问题。

任何建议, 不胜感激。

谢谢


#1


尽管这是一个古老的问题, 但在搜索此问题时仍然会首先出现, 因此我添加了解决方案, 以防其他人也在搜索。如果你的主题通过在functions.php中包含以下一行或多行代码来将脚本移至页脚(出于性能原因而经常建议使用此脚本):

remove_action('wp_head', 'wp_print_scripts'); 
remove_action('wp_head', 'wp_print_head_scripts', 9);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5);

你还需要将Gravity Forms脚本移到页脚, 以便在jQuery之后调用它们。你可以通过在主题的functions.php文件中添加以下代码来做到这一点:

add_filter('gform_init_scripts_footer', 'init_scripts');
function init_scripts() {
    return true;
}

#2


这是因为在表单上使用了条件逻辑。只要存在条件逻辑, 整个表格就会设置为显示:无;然后使用javascript仅显示应显示的字段。

但是, 这需要Gravity Forms能够使用内置的queue函数内置的WordPress输出必要的Javascript …在你的页脚中输出Javascript。

你的主题的footer.php文件中可能没有此函数调用:

<? php wp_footer(); ?>

所有主题都应具有的此函数调用(但很多人忘记了), 使插件能够在主题的页脚中动态输出代码。如果不存在, 则主题无法输出必要的代码。

这很可能是你的表单无法正确显示的原因。

答案来自:http://www.gravityhelp.com/question/why-is-there-a-style-attribute-of-displaynone-being-add-my-form-isnt-showing-up/


#3


我终于有了这个工作。

为了使条件逻辑起作用, 必须注销WordPress随附的jQuery, 必须将1.8.3加载到标题中, 并且必须将gravityforms.min.js, conditional_logic.min.js和jquery.maskedinput.min.js加载到页脚:

<?php
 function modify_jquery_version() {
 if (!is_admin()) {
     wp_deregister_script('jquery');
     wp_register_script('jquery', 'https://code.jquery.com/jquery-1.8.3.min.js', false, '1.8.3');
     wp_register_script('migrate', 'https://code.jquery.com/jquery-migrate-1.4.1.min.js', false, '1.4.1');

     wp_enqueue_script('jquery');
     wp_enqueue_script('migrate');
     }
 }
 add_action('wp_enqueue_scripts', 'modify_jquery_version');

 function footer_load() {
 if (!is_admin()) {
wp_enqueue_script('gravity', '/wp-content/plugins/gravityforms/js/gravityforms.min.js', '', '', true);
wp_enqueue_script('conditional', '/wp-content/plugins/gravityforms/js/conditional_logic.min.js', '', '', true);
wp_enqueue_script('masked', '/wpcontent/plugins/gravityforms/js/jquery.maskedinput.min.js', '', '', true);
    }
}

 add_action('wp_enqueue_scripts', 'footer_load');
?>

#4


我的WP主题调用的是旧版jQuery(由Google托管), 这导致display:none属性应用于我的Gravity Forms。我将入队脚本更新为最新版本的jQuery, 从而解决了该问题。


#5


我也有这个问题, 实际的解决方案是将gravity_form_enqueue_scripts($ form_id)添加到你的header.php文件中。

从Gravity表单支持文档本身开始:https://www.gravityhelp.com/documentation/article/embedding-a-form/#enqueue-scripts-and-styles


#6


我仅通过停用名为Autoptimize的插件就可以解决我的问题, 该插件可以优化将CSS和JavaScript代码连接在一起的网站并进行压缩。

一旦发现它就很明显了。


#7


我刚才遇到了这个问题。

两个问题:这个旧主题使用的是jQuery 1.5.1, 捆绑的所有插件都是为较旧的jQuery编写的。由于旧的jQuery版本以及我已重命名条件逻辑字段, 因此Gravity Forms中的条件逻辑无法正常工作。

删除/修复了一些不正确的条件逻辑下拉菜单, 并在站点上升级了jQuery版本之后, 事情又开始恢复正常。


#8


此问题可能是由页面上的任何其他脚本引发错误引起的。检查控制台以确保没有损坏的脚本


#9


对我而言, 原因是FireFox中的控制台错误, 与以下内容有关:

jQuery(document).bind('gform_post_render', function(ev){
     console.log(event, ev);
});

#10


以我为例, 我认为原因是:我将Gravity短代码放入了(也许它检测到并在其iframe中插入了” display:none”?)

<div id="layer_2" style="display: none">
[gravityform id=123 title=false ajax=true]
</div>

框架代码:

<iframe style='display:none;width:0px;height:0px;' src='about:blank' name='gform_ajax_frame_16' id='gform_ajax_frame_16'></iframe>

由于我从div中删除了” display:none”, 因此Gfrom可以正常工作。比将脚本添加到页面:

jQuery(document).ready(function() { jQuery("#_layer_2").attr("style", "display: none"); });

但!即使没有上面的JS代码, Gform也可以在” iframe style = display:none”下正常工作。真正的原因是:缺少一个”

</div>

在页面代码中。


#11


你是否尝试过从.gform_wrapper div中删除style =” display:none”?或将其更改为style =” display:block”


#12


我认为这不会有所帮助, 但也许可以尝试以下方法:

.gform_wrapper{
   display:block !important;
}

我知道内联样式会覆盖所有样式表, 但是!important帮助我覆盖了一些插件样式。

也尝试在插件文件中搜索style =” display:none”。使用Textwrangler或其他编辑器, 你可以在其中搜索多个文件。这对于编辑主题和插件也有很大帮助。


#13


.gform_wrapper类本身是否设置了” display:none”?然后只需在”重力形式”的css文件中进行更改即可。

但是, 包装器可能具有一个ID或另一个不能设置display:none的类。

最后但并非最不重要的一点是, 包装程序可能会出现损坏的jQuery动画, 这可能就是为什么它保持隐藏状态的原因。

赞(0) 打赏
未经允许不得转载:srcmini » WP重力表添加无显示
分享到: 更多 (0)

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

微信扫一扫打赏