首页 > WordPress学习 > wordpress配置一个纯代码自定义留言表单功能 实现表单展现样式灵活配置

wordpress配置一个纯代码自定义留言表单功能 实现表单展现样式灵活配置

时间:2023年8月3日 分类:WordPress学习 浏览量:128

首先在主题的function文件下配置留言表单功能:

// 创建自定义数据库表
function custom_create_form_data_table() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'custom_form_data';
    $charset_collate = $wpdb->get_charset_collate();
    // SQL语句,定义表结构
    $sql = "CREATE TABLE IF NOT EXISTS $table_name (
        id INT AUTO_INCREMENT PRIMARY KEY,
        name VARCHAR(255) NOT NULL,
        phone VARCHAR(15) NOT NULL,
        message TEXT NOT NULL
    ) $charset_collate;";
    // 执行SQL语句,创建表
    require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
    dbDelta($sql);
}
// 在激活主题时创建数据库表
add_action('after_switch_theme', 'custom_create_form_data_table');
// 添加一个函数,用于处理提交的表单数据并保存到数据库
function custom_save_form_data() {
    // 检查是否提交了表单
    if (isset($_POST['submit_form'])) {
        // 验证表单提交的安全性
        if (!wp_verify_nonce($_POST['_wpnonce'], 'custom_form_nonce')) {
            wp_die('非法操作!'); // 验证失败,防止CSRF攻击
        }
        // 检查是否为POST请求
        if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
            wp_die('非法请求!'); // 防止非POST请求提交表单
        }
        global $wpdb; // 引入WordPress数据库对象
        // 获取提交的表单数据并进行基本验证
        $name = sanitize_text_field($_POST['name']);
        $phone = sanitize_text_field($_POST['phone']);
        $message = sanitize_textarea_field($_POST['message']);
        // 基本数据验证,确保必填字段不为空
        if (empty($name) || empty($phone) || empty($message)) {
            // 如果有字段为空,显示错误消息
            wp_die('请填写所有必填字段!', '错误', array('response' => 400));
        }
        // 验证手机号码格式
        if (!preg_match('/^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(16[0-9]{1})|(17[0-9]{1})|(18[0-9]{1})|(19[0-9]{1}))+\d{8})$/', $phone)) {
            // 如果手机号码格式不正确,显示错误消息
            wp_die('手机号码格式不正确!', '错误', array('response' => 400));
        }
        // 定义自定义数据库表名
        $table_name = $wpdb->prefix . 'custom_form_data';
        // 准备要插入数据库的数据数组
        $data = array(
            'name' => $name,
            'phone' => $phone,
            'message' => $message
        );
        // 定义数据格式
        $data_format = array(
            '%s', // 姓名,字符串类型
            '%s', // 手机,字符串类型
            '%s'  // 留言,字符串类型
        );
        // 将数据插入到自定义数据库表中
        $result = $wpdb->insert($table_name, $data, $data_format);
        if ($result === false) {
            // 如果插入数据库时出现问题,显示错误消息
            wp_die('提交表单时出现问题,请稍后再试或联系管理员!', '错误', array('response' => 500));
        }

        // 在表单提交成功后自动跳转回首页
        if ($result !== false) {
            // 提示用户表单已成功提交并进行跳转到网站首页
            echo '<div id="form-success-message" style="text-align:center; padding: 20px; background-color: #f0f0f0; border: 1px solid #ccc; margin-bottom: 20px;">表单提交成功!</div>';
            echo '<script>window.location.href="' . home_url() . '";</script>';
            exit; // 确保在输出提示和跳转后停止代码执行
        }
    }
}
// 添加一个shortcode用于在前端展示表单
function custom_display_form() {
    ob_start();
    ?>
    <!-- 表单HTML代码 -->
    <form method="post">
        <?php wp_nonce_field('custom_form_nonce'); ?>
        <div class="foot_message">
            <div class="float_l input">
                <div class="float_l">姓名:</div>
                <input class="float_l" type="text" name="name">
                <div class="clear"></div>
            </div>
            <div class="float_l input">
                <div class="float_l">电话:</div>
                <input class="float_l" type="text" name="phone">
                <div class="clear"></div>
            </div>
            <div class="float_l textarea">
                <div class="float_l">留言:</div>
                <textarea class="float_l" name="message" ></textarea>
                <div class="clear"></div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="float_r">
            <button class="float_l submission" type="submit" name="submit_form">提交</button>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </form>
    <?php
    return ob_get_clean();
}
// 将函数挂钩到WordPress钩子中
add_action('init', 'custom_save_form_data');
add_shortcode('custom_form', 'custom_display_form');
// 添加一个函数,用于处理后台删除操作
function custom_delete_form_data() {
    if (isset($_GET['delete_id']) && current_user_can('manage_options') && wp_verify_nonce($_REQUEST['_wpnonce'], 'delete_form_data_' . $_GET['delete_id'])) {
        global $wpdb;
        $table_name = $wpdb->prefix . 'custom_form_data';
        $delete_id = intval($_GET['delete_id']);
        
        $result = $wpdb->delete($table_name, array('id' => $delete_id), array('%d'));
        if ($result !== false) {
            // 成功删除,跳转回留言管理页面
            wp_redirect(admin_url('admin.php?page=form_submissions'));
            exit;
        } else {
            // 删除失败,显示错误消息
            wp_die('删除留言时出现问题,请稍后再试或联系管理员!', '错误', array('response' => 500));
        }
    }
}
add_action('admin_init', 'custom_delete_form_data'); // 后台初始化时调用删除函数
// 创建管理页面
function custom_form_submissions_page() {
    add_menu_page(
        '留言内容',             // 页面标题
        '留言内容',             // 菜单标题
        'manage_options',      // 用户权限,确保管理员权限
        'form_submissions',    // 页面slug
        'custom_form_submissions_content', // 回调函数用于渲染页面内容
        'dashicons-testimonial' // 菜单图标
    );
}
// 回调函数用于渲染页面内容
function custom_form_submissions_content() {
    // 载入自定义页面模板form_submissions.php
    include_once get_stylesheet_directory() . '/form_submissions.php';
}
// 将自定义管理页面注册到WordPress后台
add_action('admin_menu', 'custom_form_submissions_page');
//留言功能end

然后,我们需要新建一个文件:form_submissions.php,里面放入管理后台所要展示的留言版块相关设定,可以根据个人喜好修改调整:

<?php
/*
 * Template Name: 留言内容
 */

global $wpdb;

// 获取自定义数据库表名
$table_name = $wpdb->prefix . 'custom_form_data';

// 查询数据库,获取表单提交的内容
$results = $wpdb->get_results("SELECT * FROM $table_name", ARRAY_A);
?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <div class="entry-content">
            <h2>用户留言内容</h2>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr>
                        <th style="border: 1px solid #000; padding: 8px;">序号</th>
                        <th style="border: 1px solid #000; padding: 8px;">手机</th>
                        <th style="border: 1px solid #000; padding: 8px;">姓名</th>
                        <th style="border: 1px solid #000; padding: 8px;">留言</th>
                        <th style="border: 1px solid #000; padding: 8px;">操作</th> <!-- 新增操作列 -->
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $index = 1;
                    foreach ($results as $result) :
                    ?>
                        <tr>
                            <td style="border: 1px solid #000; padding: 8px;"><?php echo $index; ?></td>
                            <td style="border: 1px solid #000; padding: 8px;"><?php echo esc_html($result['phone']); ?></td>
                            <td style="border: 1px solid #000; padding: 8px;"><?php echo esc_html($result['name']); ?></td>
                            <td style="border: 1px solid #000; padding: 8px;"><?php echo esc_html($result['message']); ?></td>
                            <td style="border: 1px solid #000; padding: 8px;">
                                <!-- 删除按钮链接 -->
                                <a href="<?php echo wp_nonce_url(add_query_arg('delete_id', $result['id']), 'delete_form_data_' . $result['id']); ?>" onclick="return confirm('确定删除此留言吗?')">删除</a>
                            </td>
                        </tr>
                    <?php
                        $index++;
                    endforeach;
                    ?>
                </tbody>
            </table>
        </div>
    </main>
</div>

如此,我们就成功创建了一个留言表单,并且可以在管理后台管理这些留言,并且可以删除。

 

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权

文章名称:wordpress配置一个纯代码自定义留言表单功能 实现表单展现样式灵活配置

文章链接:https://news.yynnw.com/180.html

该作品系作者结合个人学习经验及互联网相关知识整合。如若侵权请通过投诉通道提交信息,我们将按照规定及时处理。

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

微信扫一扫打赏

标签:

最新文章

猜你喜欢