Question

任何使用Wordpress的人都会熟悉Contact Form 7，这是Takayuki Miyoshi在宗教上保持最新的精彩作品。

令我感到震惊的是，如果像我一样制作复杂的表格，那么有用的东西就是视觉预览。（甚至可能是一个可视化的编辑器但是之前没有运行......）

现在，正如我所说，这是一项很棒的工作，所以5分钟的黑客攻击了：

将其添加到edit-contact-form.php

中的$ panels数组

'preview-panel' => array(
    'title' => __( 'Preview', 'contact-form-7' ),
    'callback' => 'wpcf7_editor_panel_preview' ),

制作一个新标签，预览。

将此添加到editor.php

function wpcf7_editor_panel_preview( $post ) {
    $preview_code = $post->form_do_shortcode();
    echo (do_shortcode($preview_code));
}

生产货物。

现在有一些问题，这是我需要帮助的地方（我的工资等级高于我的工资等级）

我应该能够使用钩子而不是粗糙的黑客（或叉子）
我应该能够直接调用产生短代码的函数，而不是依赖于do_shortcode()的使用
提交按钮处于活动状态（不好），预览仅在保存表单并生成短代码后才有效。

任何人都可以帮我吗？

Answer 1

如果您查看初始化$panels的{{1}}，您会在下面看到以下这一行：

$panels = apply_filters( 'wpcf7_editor_panels', $panels );

您可以在主题或插件中使用此代码注入面板：

add_filter( 'wpcf7_editor_panels', function($panels) {
    $panels['preview-panel'] = array( 
            'title' => __( 'Preview', 'contact-form-7' ),
            'callback' => 'wpcf7_editor_panel_preview'
    );
    return $panels;
}, 10, 1 );     // 10 = priority (default); 1 = nr of arguments

要禁用提交按钮，请将预览方法稍微更改为包含自定义类的div：

$preview_code = do_shortcode( $post->shortcode() );
echo "<div class='wpcf7-preview'>$preview_code</div>"

现在你可以添加一些像这样的Javascript来禁用按钮：

$('.wpcf7-preview input[type="submit"]').attr('disabled', 'true')

声明了很多短代码代码，为了尽可能兼容，最好依赖do_shortcode。似乎WPCF7拥有自己的短代码解析功能，而不是使用WP本身;留下它的另一个原因。如果您使用do_shortcode，则可以相对确定预览将与前端渲染的实际表单相匹配。

我还没有找到插件中有关草稿的任何功能，并且没有简单的方法来预览未保存的表单，因为呈现表单的代码从中获取数据数据库。因此，最好的办法是扩展回调以将表单副本保存为草稿并呈现：

$copy = $post->copy();  // see includes/contact-form.php
$copy->save();          // idem
echo "<div class='wpcf7-preview'>" . do_shortcode( $copy->shortcode() )
   . "<script>$('.wpcf7-preview input[type="submit"]').attr('disabled', 'true')</script>"
   . "</div>";
$copy->delete();

扩展联系表格7 - 预览窗格

1 个答案: