Wordpress Contact Form 7 自定义简码的 HTML 输出答案

【问题标题】：Wordpress Contact Form 7 customize HTML output of shortcodesWordpress Contact Form 7 自定义简码的 HTML 输出
【发布时间】：2015-06-15 12:30:15
【问题描述】：

我想自定义 Wordpress Contact Form 7 (WPCF7) 简码本身的 HTML 输出，即 [file] 简码。我不想修改周围的 HTML。

到目前为止，我已经通过更改文件 /contact-from-7/modules/file.php 的内容来修改 HTML 输出。

当我更新插件时，我的更改将会丢失。所以我想实现一个更永久和健壮的解决方案，比如在我的functions.php中添加一个过滤器。

我想做什么（伪代码 - 未经测试的代码）：

add_filter('wpcf7_file_shortcode_handler', 'my_file_sc_handler');
function my_file_sc_handler($html) {
    $html = sprintf('<div>my own html</div>');
    return $html;
}

我只需要更改返回的$html - 无需触摸wpcf7_file_shortcode_handler 函数的剩余代码。

我的问题：如何自定义 [file] 短代码的 Wordpress Contact Form 7 HTML 输出，以便在更新插件时我的更改不会丢失？

【问题讨论】：

我不认为你想做什么很清楚。当您说[file] 时，我是否正确地假设这是用于在表单的一部分中上传文件？所以我猜你只是想提供一个自定义文件提交按钮显示？您可以尝试在短代码中添加一个类，并以这种方式对其进行样式设置，如果有帮助的话？
@Lee 谢谢你的建议。你是对的，我想修改 [file] 短代码本身的 HTML 输出。而且，不幸的是，仅仅添加一些 CSS 样式是行不通的。我需要一些额外的 HTML 元素（我可以通过 jQuery 插入，但我想直接更改文件短代码 HTML 输出）。

标签： php html wordpress contact-form

【解决方案1】：

基于 cmets 等，虽然我没有一个可靠的答案，但我想你可以通过这个链接找到你正在寻找的答案：

http://www.featheredowl.com/contact-form-7-submit-button-element/

本教程介绍了如何操作 [submit] 短代码，从使用 <input type="submit"> 到 <button> 元素。

使用此基础，您可以根据需要自定义 [file] 输出。

虽然这确实需要编辑核心文件，但它似乎也着手通过函数来处理插件的升级。

希望对你有所帮助！

【讨论】：

谢谢你，@Lee。这看起来很有希望。我会试一试并将我的答案发布到 Stackoverflow。自 3.9 版以来，CF7 插件已收到一些内部更改，所以我想我必须稍微修改您链接示例中的代码... ;-)

【解决方案2】：

首先，更改任何插件的核心文件是一个非常糟糕的主意。

如果只是要更改的 HTML 输出，为什么不在提供的编辑器中更改它，请参见下面的示例：

<div class="row">
<div class="col-md-6">
<p>Name<br />
    [text your-name] </p>
</div>
<div class="col-md-6">
<p>Email*<br />
    [email* your-email] </p>
</div>
</div>
<div class="row">
<div class="col-md-12">
<p>Enquiry<br />
    [textarea your-message] </p>
<p>[submit "Send"]</p>
</div>
</div>

你几乎可以改变一切！

【讨论】：

这并不完全正确，例如标准的 [submit] 被用作输入类型而不是按钮。如果您想使用按钮而不是输入，这使得更改非常困难。我相信他想改变 [file] 给出的实际输出。
@Siegfried Grimbeek 我不想更改 HTML 代码围绕 [file] 短代码，我想修改输出 of @ 987654324@ 短代码本身。

【解决方案3】：

您不能将联系表单短代码直接插入到您的模板文件中。您需要将代码传递给 do_shortcode() 函数并像这样显示其输出

    <?php echo do_shortcode( '[contact-form-7 id="7" title="Contact"]' ); ?>

【讨论】：