如何实现WordPress点击按钮将完整文章插入自定义数据表？

Hey there! Let's break down how to implement this save button feature step by step—since you already know your way around $wpdb->insert, this should feel familiar with a few extra WordPress-specific bits to tie everything together.

1. First: Set Up Your Target Custom Table (If You Haven’t Already) #

First, make sure your second custom table has the right fields to store the article data. Here’s a sample SQL structure you can run via phpMyAdmin or a plugin like WP DB Manager:

CREATE TABLE IF NOT EXISTS `wp_saved_articles` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `post_id` int(11) NOT NULL, -- Links back to the original WordPress post
  `post_content` longtext NOT NULL, -- The full article content
  `saved_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, -- When the save happened
  `user_id` int(11) NOT NULL, -- Optional: Track which user saved it
  PRIMARY KEY (`id`),
  KEY `post_id` (`post_id`),
  KEY `user_id` (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Adjust the table prefix (wp_) to match your WordPress installation’s prefix if needed.

2. Add the Save Button to Single Post Pages #

We’ll use WordPress hooks to inject the button into single article pages without editing your theme’s template files directly. Add this code to your theme’s functions.php file:

// Insert save button after article content
add_action('the_content', 'add_article_save_button');
function add_article_save_button($content) {
    // Only show the button on single post pages for logged-in users (adjust permissions as needed)
    if (is_single() && is_main_query() && current_user_can('read')) {
        $post_id = get_the_ID();
        // Generate a security nonce to prevent CSRF attacks
        $security_nonce = wp_create_nonce('save_article_to_custom_table');
        
        $button_html = '<div class="save-article-container" style="margin: 2rem 0;">
            <button class="save-article-btn" 
                    data-post-id="' . esc_attr($post_id) . '" 
                    data-nonce="' . esc_attr($security_nonce) . '">
                Save This Article
            </button>
            <span class="save-status" style="margin-left: 1rem; display: none;"></span>
        </div>';
        
        return $content . $button_html;
    }
    return $content;
}

This checks if we’re on a single post page, generates a security token (nonce), and appends a button with the post ID and nonce stored in data attributes.

3. Handle the Button Click with AJAX #

WordPress has a built-in AJAX system we’ll use to process the save request without reloading the page. Add these functions to your functions.php:

Backend AJAX Handler

// Register AJAX handler for logged-in users
add_action('wp_ajax_save_article_to_custom_table', 'save_article_to_custom_table_handler');
// Uncomment below if you want to allow non-logged-in users to save articles
// add_action('wp_ajax_nopriv_save_article_to_custom_table', 'save_article_to_custom_table_handler');

function save_article_to_custom_table_handler() {
    // Validate the security nonce first
    if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'save_article_to_custom_table')) {
        wp_send_json_error('Invalid security token. Please try again.');
    }

    // Check user permissions (adjust this to match your needs)
    if (!current_user_can('read')) {
        wp_send_json_error('You don’t have permission to save this article.');
    }

    // Get and validate the post ID
    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    $target_post = get_post($post_id);
    if (!$target_post) {
        wp_send_json_error('Article not found.');
    }

    global $wpdb;
    $table_name = $wpdb->prefix . 'saved_articles'; // Match your table name

    // Prepare data to insert (sanitize content to keep it safe)
    $insert_data = array(
        'post_id' => $post_id,
        'post_content' => wp_kses_post($target_post->post_content), // Keeps valid HTML, removes malicious code
        'user_id' => get_current_user_id()
    );

    // Define data formats for $wpdb
    $data_formats = array('%d', '%s', '%d');

    // Execute the insert
    $insert_result = $wpdb->insert($table_name, $insert_data, $data_formats);

    if ($insert_result) {
        wp_send_json_success('Article saved successfully!');
    } else {
        wp_send_json_error('Failed to save article: ' . $wpdb->last_error);
    }

    wp_die(); // Required to end AJAX requests properly
}

Frontend AJAX Trigger

Add this inline script (or put it in a separate JS file enqueued via WordPress) to handle the button click:

// Enqueue AJAX script
add_action('wp_enqueue_scripts', 'enqueue_save_article_script');
function enqueue_save_article_script() {
    if (is_single()) {
        // Use jQuery (included with WordPress) for simplicity
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                $(".save-article-btn").on("click", function() {
                    const $btn = $(this);
                    const postId = $btn.data("post-id");
                    const nonce = $btn.data("nonce");
                    const $status = $btn.next(".save-status");

                    // Disable button and show loading state
                    $btn.prop("disabled", true).text("Saving...");
                    $status.text("").show();

                    // Send AJAX request
                    $.ajax({
                        url: "' . admin_url('admin-ajax.php') . '",
                        type: "POST",
                        data: {
                            action: "save_article_to_custom_table",
                            post_id: postId,
                            nonce: nonce
                        },
                        success: function(response) {
                            if (response.success) {
                                $status.text(response.data).css("color", "green");
                                $btn.text("Saved!");
                            } else {
                                $status.text(response.data).css("color", "red");
                                $btn.prop("disabled", false).text("Save This Article");
                            }
                        },
                        error: function() {
                            $status.text("An error occurred. Please try again.").css("color", "red");
                            $btn.prop("disabled", false).text("Save This Article");
                        }
                    });
                });
            });
        ');
    }
}

4. Extra Tips for Polish & Security #

• Prevent Duplicate Saves: Before inserting, add a check to see if the user already saved the article:

  $existing_save = $wpdb->get_var(
      $wpdb->prepare("SELECT id FROM $table_name WHERE post_id = %d AND user_id = %d", $post_id, get_current_user_id())
  );
  if ($existing_save) {
      wp_send_json_error('You already saved this article!');
  }
  

• Style the Button: Add custom CSS to your theme’s style.css to make the button match your site’s design.
• Test with WP_DEBUG: Enable WP_DEBUG in your wp-config.php to catch any database or code errors during testing.

内容的提问来源于stack exchange，提问作者Tonmoy