不使用插件在 WordPress 中创建表格

您想不使用插件就在 WordPress 中创建表格吗?表单是网站中最基本、最常用的元素,不使用插件创建表单有几个好处。

为什么要在 WordPress 中创建表格而不使用插件

有许多 WordPress表单插件 可以用来创建表单。但是,在 WordPress 中创建表格而不使用插件也是有益的,原因有以下几点:

  • 简单轻便: 创建无插件表单时,可避免安装和维护插件带来的额外开销。使用自定义代码创建的简单表单比使用插件创建的表单更轻便、更高效。
  • 自定义: 从零开始创建表格,可以完全控制其设计和功能。您可以根据网站的具体需求定制表单,并对其进行相应的自定义。
  • 学习经验: 对于开发人员或有兴趣提高编码技能的用户来说,不使用插件创建表格是一种很好的学习体验。你可以了解表单处理和数据处理的基本机制。
  • 降低依赖性: 不依赖插件可以减少网站对外部代码的依赖。如果你想尽量减少潜在的安全风险或因使用多个插件而产生的冲突,这一点非常有用。
  • 性能: 与插件相比,定制表单是轻量级的,因此可以为网站提供更好的性能和速度。这些自定义表单只包含您需要的功能,而不包含插件提供的、您可能不会使用的额外功能。
  • 灵活性: 自定义表单在与网站其他部分或自定义帖子类型集成方面具有更大的灵活性。您可以根据自己的独特需求扩展表单的功能。
  • 当然,大多数插件都能使用简码提供类似的选项。但使用自定义编码表单,您可以根据自己的显示方式,将它们添加到网站的特定位置。

如何不使用插件在 WordPress 中创建表格

您可以在 WordPress 中创建多种类型的表单,而无需使用插件。但联系表单是最基本、最受欢迎的表单之一。因此,我们将在本教程中教你如何创建联系表单 。

在开始之前,我们希望您对编程有基本的了解,因为我们将使用脚本语言以及 HTML 和 PHP 等标记语言。如果您不具备所需的知识,我们建议您请程序员帮助您创建表格。

要在 WordPress 中创建联系表单,必须先创建一个联系页面。因此,让我们从这里开始。

1) 为表单创建页面

从 WordPress 面板进入 页面> 添加新内容 。

这将打开页面编辑器,您可以在其中输入页面标题和除实际联系表单之外的其他必要说明。但如果你只需要在这个页面上填写表格,我们可以直接创建表格。

2) 在编辑器中为表单添加 HTML 代码

//现在,点击屏幕左上角的选项(三个竖点)> 代码编辑器,进入代码编辑器。
//然后,在编辑器中为表单添加 HTML 代码。您可以根据以下代码添加所需的表单字段。

<form method="post">
  <label for="name">Name:</label>
<input type="text" name="name" required="">

<label for="email">Email:</label>
<input type="email" name="email" required="">

<label for="message">Message:</label>
<textarea name="message" required=""></textarea>

<input type="submit" value="Submit">
</form>

这段代码将帮助您在 WordPress 中创建一个简单的联系表单。但您也可以轻松修改它,在 WordPress 网站上创建您想要的表单。

将所有必要的表单字段添加到代码中后,单击 发布 或 更新 在联系人页面上保存更改。

如果预览页面,就可以看到刚刚创建的表单。但要使表单发挥作用并从中提取数据,还必须处理表单提交。因此,我们必须为表单提交创建一个数据库。

3) 创建表格提交数据库表

要为表单提交创建数据库,您可以使用数据库管理工具,如 phpMyAdmin。您可以登录到您的 cPanel来访问它。如果您没有必要的凭据,我们建议您联系您的 托管服务 或网站所有者。

现在,向下滚动到数据库部分,然后单击 phpMyAdmin。这将打开 phpMyAdmin 面板,在此可以看到网站的所有数据库。

展开网站数据库表,滚动到页面底部,在这里可以创建一个新的数据库表。在此输入表名”wp_contact_form_submission“,然后点击 Go 创建新表。

然后,您必须在表格的列上输入表格字段的数据字段及其类型。根据我们刚刚创建的表格,我们将添加以下列名和类型:

  • name: TEXT
  • email: TEXT
  • message: TEXT
  • submission_time: DATETIME

最后,单击 保存 将更改保存到数据库表中。

我们根据创建的联系表单来命名数据库表。因此,您可以根据最初创建的表单更改表名。同样,如果您在表单中使用了不同的表单字段,也可以相应地添加列。

4) 添加处理表单提交的代码

创建数据库后,您还必须在网站的主题功能文件中添加一组代码来处理表单提交。

但我们建议您在继续之前备份您的网站,因为我们将编辑网站的一些核心文件。任何意外更改都可能导致网站出现更多问题。您可以查看我们的详细指南 如何备份 WordPress 网站 如果您需要任何帮助。

4.1) 访问主题功能文件

从 WordPress 控制面板进入 外观>主题文件编辑器 访问主题功能文件。您可以在这里找到网站的所有核心主题文件。然后选择 主题功能 (functions.php) 文件,我们将在屏幕右侧添加代码。

4.2) 在主题文件编辑器中添加代码

您可以使用以下代码来处理网站上的表单提交。因此,请在编辑器末尾添加以下代码。

if ($_SERVER["REQUEST_METHOD"] === "POST") {
  $name = sanitize_text_field($_POST["name"]);
  $email = sanitize_email($_POST["email"]);
  $message = sanitize_textarea_field($_POST["message"]);

  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $data = array(
    'name' => $name,
    'email' => $email,
    'message' => $message,
    'submission_time' => current_time('mysql')
  );
  $insert_result = $wpdb->insert($table_name, $data);

  if ($insert_result === false) {
    $response = array(
      'success' => false,
      'message' => 'Error saving the form data.',
    );
  } else {
    $response = array(
      'success' => true,
      'message' => 'Form data saved successfully.'
    );
  }
  header('Content-Type: application/json');
  echo json_encode($response);
  exit;
}

这段代码会将表单中输入的表单数据存储到我们刚刚创建的表单提交数据库表中。我们还包含了一个 JSON 响应,以确保您在编辑代码时在表单中添加了正确的数据库表名和字段。您可以在表单数据成功存储到数据库后删除它。

在对代码进行所有必要的修改后,只需点击 更新文件 即可。

5) 在仪表板上显示提交的表单

表单数据存储到数据库后,您就可以创建仪表板菜单来查看表单提交情况。因此,我们还将加入一段代码来显示它。

您可以将以下代码添加到主题功能文件 (funtions.php), 就像上一步一样。

function display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name WHERE name <> '' AND email <> '' AND message <> '' ORDER BY submission_time DESC", ARRAY_A);
  ?>
  <div class="wrap">
    <h1>Contact Form Submissions</h1>
    <table class="wp-list-table widefat fixed striped">
      <thead>
        <tr>
          <th>Name</th>
          <th>Email</th>
          <th>Message</th>
          <th>Submission Time</th>
        </tr>
      </thead>
      <tbody>
        <?php foreach ($form_data as $data) : ?>
          <tr>
            <td><?php echo esc_html($data['name']); ?></td>
            <td><?php echo esc_html($data['email']); ?></td>
            <td><?php echo esc_html($data['message']); ?></td>
            <td><?php echo esc_html($data['submission_time']); ?></td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
<?php }

function register_contact_form_submissions_page() {
  add_menu_page(
    'Contact Form Submissions',
    'Form Submissions',
    'manage_options',
    'contact_form_submissions',
    'display_contact_form_submissions_page',
    'dashicons-feedback'
  );
}
add_action('admin_menu', 'register_contact_form_submissions_page');

粘贴并根据创建的表单和数据库表编辑代码后,再次单击 更新文件 。

现在,如果您进入 WordPress 仪表板,就可以看到”提交的联系表单“菜单。这将显示您最初创建的表单的所有提交信息。

显示表单提交的调试选项

如果您无法看到表单数据,我们建议您在代码中添加用于 调试输出和 SQL 查询 的代码。您可以在查询后分别添加代码 var_dump($form_data); 和 var_dump($wpdb->last_query);  。

因此,代码可能是这样的

function display_contact_form_submissions_page() {
  global $wpdb;
  $table_name = $wpdb->prefix . 'wp_contact_form_submissions';
  $form_data = $wpdb->get_results("SELECT * FROM $table_name ORDER BY submission_time DESC", ARRAY_A);
  var_dump($form_data);
  var_dump($wpdb->last_query);
  ?>
  <?php
}

根据调试报告,您可以进一步编辑代码,以确保正确显示表单数据。不过,您也可以通过下一节中的要点来确保您使用的代码没有任何错误。

创建高效自定义表单的基本考虑因素

以下是您在编辑代码以创建自定义表单时应考虑的一些因素。如果您在编辑过程中遇到任何错误 ,这些因素会对您有所帮助。

  • 检查数据库:确保表单数据正确保存在正确的表中。本教程中使用的是 “wp_contact_form_submissions “表。
  • 检查错误:检查 PHP 错误日志或启用错误报告功能,查看是否存在与表单提交或数据显示相关的错误。错误可以提供可能出错的线索。
  • 检查表单提交过程:确保表单数据提交正确,保存表单数据的 PHP 代码执行无误。检查提交表单时表单数据是否正确传递给 PHP 代码。
  • 验证表名:仔细检查 “display_contact_form_submissions_page() “函数中使用的表名是否与数据库中的实际表名一致。确保是 “wp_contact_form_submissions”,或根据数据库表调整表名。
  • 清除缓存:如果您使用任何缓存插件或服务器端缓存,请清除缓存以确保您查看的是最新数据。
  • 权限:确保登录的用户角色具有访问自定义管理页面的 “manage_options “功能。默认情况下,该功能允许管理员访问该页面。

我们已经为您提供了一组在 WordPress 中创建联系表单的代码。但是,如果你想制作其他表单或带有不同数据字段的其他表单,就必须编辑这些代码。因此,以上几点也有助于你在 WordPress 上创建自定义表单。

结论

这就是不使用插件在 WordPress 中创建表格的方法 。您也可以使用插件创建表格。不过,如果您对编程有基本的了解,创建一个自定义编码的表单会有很多好处。

您可以使用本教程中包含的基本代码集轻松创建表格。以下是创建有效表单的基本步骤:

  • 在页面编辑器中添加表单代码
  • 为表单提交创建数据库
  • 添加必要的代码,以处理表单提交并显示它们

希望你现在可以自信地使用本教程中提到的代码在网站上创建表格。您可以根据自己的需要对它们进行编辑,加入更多的表单字段。如果您遇到任何问题,我们甚至还添加了一些调试选项,以及在 WordPress 上创建自定义代码时需要考虑的因素。

那么,您是否尝试过在 WordPress 中创建一个没有插件的表单?