自定义模板下，无法从前端向WordPress文章附加图片求助

Alright, let's walk through how to add this feature to your custom WordPress template—no plugins needed, just extending your existing code.

First, we need to update your frontend form to support image uploads, then modify the backend logic to process those images and embed them directly into the post content.

Step 1: Update the Frontend Form #

Make sure your form includes the enctype="multipart/form-data" attribute (required for file uploads) and add a file input for content images. Here's the modified form snippet:

<form method="post" enctype="multipart/form-data" action="<?php echo esc_url($_SERVER['REQUEST_URI']); ?>">
    <!-- Your existing fields (title, main content, featured image, etc.) -->
    <div class="form-group">
        <label for="content_images">Attach Images to Post Content:</label>
        <input type="file" name="content_images[]" id="content_images" multiple accept="image/*">
        <small>Select one or more images to include in your post</small>
    </div>
    <!-- Submit button -->
    <button type="submit" name="submit_new_post">Publish Post</button>
</form>

Step 2: Handle Image Uploads & Embed in Post Content #

In your new_post() function (or wherever you process form submissions), add code to upload images to the WordPress media library, then append their HTML tags to the post content. Here's the integrated logic:

function new_post() {
    if (isset($_POST['submit_new_post']) && current_user_can('publish_posts')) {
        // Sanitize basic post data
        $post_title = sanitize_text_field($_POST['post_title']);
        $post_content = wp_kses_post($_POST['post_content']);

        // Process content images if any were uploaded
        if (!empty($_FILES['content_images']['name'][0])) {
            $uploaded_files = $_FILES['content_images'];
            
            // Loop through each uploaded image
            foreach ($uploaded_files['name'] as $key => $filename) {
                // Skip empty file entries
                if (empty($uploaded_files['tmp_name'][$key])) continue;

                // Prepare file array for WordPress upload handler
                $file = array(
                    'name'     => $uploaded_files['name'][$key],
                    'type'     => $uploaded_files['type'][$key],
                    'tmp_name' => $uploaded_files['tmp_name'][$key],
                    'error'    => $uploaded_files['error'][$key],
                    'size'     => $uploaded_files['size'][$key]
                );

                // Upload the file to media library
                $upload_overrides = array('test_form' => false);
                $upload_result = wp_handle_upload($file, $upload_overrides);

                if ($upload_result && !isset($upload_result['error'])) {
                    // Insert attachment into WordPress database
                    $attachment_args = array(
                        'post_mime_type' => $upload_result['type'],
                        'post_title'     => sanitize_file_name($filename),
                        'post_content'   => '',
                        'post_status'    => 'inherit'
                    );
                    $attach_id = wp_insert_attachment($attachment_args, $upload_result['file']);

                    // Generate attachment metadata (required for image sizes/thumbnails)
                    require_once(ABSPATH . 'wp-admin/includes/image.php');
                    $attach_metadata = wp_generate_attachment_metadata($attach_id, $upload_result['file']);
                    wp_update_attachment_metadata($attach_id, $attach_metadata);

                    // Get image URL and alt text (fallback to filename if no alt exists)
                    $image_url = wp_get_attachment_image_url($attach_id, 'medium'); // Use 'full'/'large' for bigger sizes
                    $image_alt = get_post_meta($attach_id, '_wp_attachment_image_alt', true);
                    $image_alt = empty($image_alt) ? sanitize_text_field(pathinfo($filename, PATHINFO_FILENAME)) : $image_alt;

                    // Append image HTML to post content
                    $post_content .= '<figure class="post-content-image"><img src="' . esc_url($image_url) . '" alt="' . esc_attr($image_alt) . '"></figure>';
                } else {
                    // Log upload errors (you can modify this to show user-facing messages)
                    error_log('Content image upload failed: ' . $upload_result['error']);
                }
            }
        }

        // Prepare final post arguments (add your existing featured image logic here)
        $post_args = array(
            'post_title'    => $post_title,
            'post_content'  => $post_content,
            'post_status'   => 'publish', // Use 'draft' if you want to review first
            'post_type'     => 'post', // Replace with your custom post type if needed
            // Add your featured image set logic here (e.g., set_post_thumbnail())
        );

        // Insert the post into WordPress
        $post_id = wp_insert_post($post_args);

        // Redirect to the new post or show success message
        wp_redirect(get_permalink($post_id));
        exit;
    }
}
add_action('init', 'new_post');

Step 3: Display the Content in single.php #

Since we've embedded the image HTML directly into the post content, displaying them is as simple as using WordPress's standard content function in your single.php:

<div class="single-post-content">
    <?php the_content(); ?>
</div>

Key Tips for Security & Functionality: #

• Sanitization: We use sanitize_text_field(), wp_kses_post(), esc_url(), and esc_attr() to clean all user input/output—never skip this to prevent XSS attacks.
• Permissions: The current_user_can('publish_posts') check ensures only authorized users can submit posts. If you need guest submissions, adjust this but add extra security checks (like CAPTCHA).
• Image Sizes: Swap 'medium' in wp_get_attachment_image_url() with 'full', 'large', or a custom image size to control display dimensions.
• Error Handling: The example logs errors, but you can add frontend error messages by storing errors in a session and displaying them on the form page.

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