扩展 Contact Form 7 - 预览面板

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));
}

生产商品。

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

我应该能够使用 hooks 而不是粗略的 hack（或 fork）来放置它们
我应该能够直接调用生成短代码的函数，而不是依赖于 do_shortcode()
提交按钮处于活动状态（不好）并且只有在保存表单并生成简码后才能预览。

谁能帮我解决这个问题？

Answer 1

如果您查看 admin/edit-contact-form.php 初始化 $panels 的位置，您会在其下方看到这一行：

$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

要禁用提交按钮，请稍微更改您的预览方法，将其包装在带有自定义 class:

的 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();

扩展 Contact Form 7 - 预览面板

Extending Contact Form 7 - Preview pane

php

wordpress

contact-form-7