मैं सीधे कस्टम पैनल पर एक छवि अपलोड फ़ील्ड कैसे जोड़ सकता हूं?


62

मैंने वर्डप्रेस व्यवस्थापक में "पेज" के तहत एक नया पृष्ठ जोड़ा है, और कई कस्टम फ़ील्ड जोड़े हैं। मैं पेज एडिटर पर एक अपलोड इमेज फील्ड को जोड़ने में सक्षम होना चाहूंगा - क्या कस्टम-फील्ड के माध्यम से ऐसा करने का कोई तरीका है?

या अगर मुझे इस क्षमता की आवश्यकता है तो क्या मुझे एक अलग दिशा लेनी होगी?


TDO-रूपों प्लगइन जाँच, हो सकता है यह आसान उपाय है
bueltge

यह प्रश्न संभवतः संबंधित है: wordpress.stackexchange.com/questions/4291/…
hakre

जवाबों:


108

जो कोई भी फ़ाइल अपलोड करने के बारे में अधिक जानना चाहता है, उसके लिए यहां प्रमुख विषयों और दर्द बिंदुओं को शामिल करने वाला एक त्वरित प्राइमर है। यह वर्डप्रेस 3.0 के साथ एक लिनक्स बॉक्स को ध्यान में रखते हुए लिखा गया है, और अवधारणाओं को सिखाने के लिए कोड एक मूल अवलोकन है। मुझे यकीन है कि यहां कुछ लोग कार्यान्वयन पर सुधार के लिए सलाह दे सकते हैं।

अपने मूल दृष्टिकोण को रेखांकित करें

पोस्ट के साथ छवियों को संबद्ध करने के लिए कम से कम तीन तरीके हैं: छवि पथ को संग्रहीत करने के लिए एक पोस्ट_मेटा फ़ील्ड का उपयोग करना, छवि के मीडिया लाइब्रेरी आईडी (उस पर बाद में) को संग्रहीत करने के लिए एक पोस्ट_मेटा फ़ील्ड का उपयोग करना, या पोस्ट को अनुलग्नक के रूप में छवि असाइन करना । यह उदाहरण छवि के मीडिया लाइब्रेरी ID को संग्रहीत करने के लिए एक post_meta फ़ील्ड का उपयोग करेगा। YMMV।

मल्टीपार्ट एनकोडिंग

डिफ़ॉल्ट रूप से, वर्डप्रेस के बनाएं और संपादित रूपों का कोई प्रारूप नहीं है। यदि आप कोई फ़ाइल अपलोड करना चाहते हैं, तो आपको फ़ॉर्म टैग में "enctype = 'मल्टीपार्ट / फॉर्म-डेटा' जोड़ना होगा - अन्यथा $ _FILES संग्रह को बिल्कुल भी धक्का नहीं मिलेगा। वर्डप्रेस 3.0 में, इसके लिए एक हुक है। कुछ पिछले संस्करणों में (बारीकियों के बारे में सुनिश्चित नहीं) आपको प्रपत्र टैग को बदलने के लिए स्ट्रिंग करना होगा।

function xxxx_add_edit_form_multipart_encoding() {

    echo ' enctype="multipart/form-data"';

}
add_action('post_edit_form_tag', 'xxxx_add_edit_form_multipart_encoding');

मेटा बॉक्स और अपलोड फ़ील्ड बनाएँ

मैं मेटा बॉक्स बनाने में बहुत दूर नहीं जाऊंगा क्योंकि आप में से ज्यादातर लोग पहले से ही जानते हैं कि यह कैसे करना है, लेकिन मैं सिर्फ इतना कहूंगा कि आपको केवल एक साधारण मेटा बॉक्स की आवश्यकता है जिसमें एक फ़ाइल फ़ील्ड हो। नीचे दिए गए उदाहरण में मैंने मौजूदा छवि की तलाश के लिए कुछ कोड शामिल किए हैं, और यदि कोई मौजूद है तो उसे प्रदर्शित करें। मैंने कुछ सरल त्रुटि / प्रतिक्रिया कार्यक्षमता भी शामिल की है जो पोस्ट_मेटा फ़ील्ड का उपयोग करके त्रुटियों को पारित करता है। आप WP_Error वर्ग का उपयोग करने के लिए इसे बदलना चाहेंगे ... यह केवल प्रदर्शन के लिए है।

function xxxx_render_image_attachment_box($post) {

    // See if there's an existing image. (We're associating images with posts by saving the image's 'attachment id' as a post meta value)
    // Incidentally, this is also how you'd find any uploaded files for display on the frontend.
    $existing_image_id = get_post_meta($post->ID,'_xxxx_attached_image', true);
    if(is_numeric($existing_image_id)) {

        echo '<div>';
            $arr_existing_image = wp_get_attachment_image_src($existing_image_id, 'large');
            $existing_image_url = $arr_existing_image[0];
            echo '<img src="' . $existing_image_url . '" />';
        echo '</div>';

    }

    // If there is an existing image, show it
    if($existing_image_id) {

        echo '<div>Attached Image ID: ' . $existing_image_id . '</div>';

    } 

    echo 'Upload an image: <input type="file" name="xxxx_image" id="xxxx_image" />';

    // See if there's a status message to display (we're using this to show errors during the upload process, though we should probably be using the WP_error class)
    $status_message = get_post_meta($post->ID,'_xxxx_attached_image_upload_feedback', true);

    // Show an error message if there is one
    if($status_message) {

        echo '<div class="upload_status_message">';
            echo $status_message;
        echo '</div>';

    }

    // Put in a hidden flag. This helps differentiate between manual saves and auto-saves (in auto-saves, the file wouldn't be passed).
    echo '<input type="hidden" name="xxxx_manual_save_flag" value="true" />';

}



function xxxx_setup_meta_boxes() {

    // Add the box to a particular custom content type page
    add_meta_box('xxxx_image_box', 'Upload Image', 'xxxx_render_image_attachment_box', 'post', 'normal', 'high');

}
add_action('admin_init','xxxx_setup_meta_boxes');

फ़ाइल अपलोड को संभालना

यह एक बड़ा है - वास्तव में save_post कार्रवाई में हुक करके फ़ाइल अपलोड को संभाल रहा है। मैंने नीचे एक भारी-भरकम फ़ंक्शन को शामिल किया है, लेकिन मैं इसे उपयोग करने वाले दो प्रमुख वर्डप्रेस कार्यों को नोट करना चाहूंगा:

wp_handle_upload () अपलोड से निपटने के सभी तरह के जादू करता है। आप इसे $ _FILES सरणी में अपने क्षेत्र के संदर्भ में पास करते हैं, और विकल्पों की एक सरणी (इन के बारे में बहुत चिंता न करें - केवल एक महत्वपूर्ण जिसे आपको सेट करने की आवश्यकता है वह है test_form = false मुझ पर भरोसा करें)। हालाँकि, यह फ़ंक्शन मीडिया लाइब्रेरी में अपलोड की गई फ़ाइल नहीं जोड़ता है। यह केवल नई फ़ाइल का पथ अपलोड करता है और वापस करता है (और, पूर्ण रूप से, पूर्ण URL भी)। यदि कोई समस्या है, तो यह एक त्रुटि देता है।

wp_insert_attachment () मीडिया लाइब्रेरी में छवि जोड़ता है, और सभी उपयुक्त थंबनेल उत्पन्न करता है। आपके द्वारा अपलोड की गई फ़ाइल में आप इसे केवल एक विकल्प (शीर्षक, पद की स्थिति, आदि), और LOCAL पथ (URL नहीं) पास करते हैं। मीडिया लाइब्रेरी में अपनी छवियां डालने के बारे में महान बात यह है कि आप बाद में wp_delete_attachment को कॉल करके और आइटम के मीडिया लाइब्रेरी आईडी (जो मैं नीचे फ़ंक्शन में कर रहा हूं) को पास करके आसानी से सभी फ़ाइलों को हटा सकता हूं। इस फ़ंक्शन के साथ, आपको wp_generate_attachment_metadata () और wp_update_attachment_metadata () का उपयोग करने की आवश्यकता होगी, जो वास्तव में आप क्या करते हैं - वे मीडिया आइटम के लिए मेटाडेटा जनरेट करते हैं।

function xxxx_update_post($post_id, $post) {

    // Get the post type. Since this function will run for ALL post saves (no matter what post type), we need to know this.
    // It's also important to note that the save_post action can runs multiple times on every post save, so you need to check and make sure the
    // post type in the passed object isn't "revision"
    $post_type = $post->post_type;

    // Make sure our flag is in there, otherwise it's an autosave and we should bail.
    if($post_id && isset($_POST['xxxx_manual_save_flag'])) { 

        // Logic to handle specific post types
        switch($post_type) {

            // If this is a post. You can change this case to reflect your custom post slug
            case 'post':

                // HANDLE THE FILE UPLOAD

                // If the upload field has a file in it
                if(isset($_FILES['xxxx_image']) && ($_FILES['xxxx_image']['size'] > 0)) {

                    // Get the type of the uploaded file. This is returned as "type/extension"
                    $arr_file_type = wp_check_filetype(basename($_FILES['xxxx_image']['name']));
                    $uploaded_file_type = $arr_file_type['type'];

                    // Set an array containing a list of acceptable formats
                    $allowed_file_types = array('image/jpg','image/jpeg','image/gif','image/png');

                    // If the uploaded file is the right format
                    if(in_array($uploaded_file_type, $allowed_file_types)) {

                        // Options array for the wp_handle_upload function. 'test_upload' => false
                        $upload_overrides = array( 'test_form' => false ); 

                        // Handle the upload using WP's wp_handle_upload function. Takes the posted file and an options array
                        $uploaded_file = wp_handle_upload($_FILES['xxxx_image'], $upload_overrides);

                        // If the wp_handle_upload call returned a local path for the image
                        if(isset($uploaded_file['file'])) {

                            // The wp_insert_attachment function needs the literal system path, which was passed back from wp_handle_upload
                            $file_name_and_location = $uploaded_file['file'];

                            // Generate a title for the image that'll be used in the media library
                            $file_title_for_media_library = 'your title here';

                            // Set up options array to add this file as an attachment
                            $attachment = array(
                                'post_mime_type' => $uploaded_file_type,
                                'post_title' => 'Uploaded image ' . addslashes($file_title_for_media_library),
                                'post_content' => '',
                                'post_status' => 'inherit'
                            );

                            // Run the wp_insert_attachment function. This adds the file to the media library and generates the thumbnails. If you wanted to attch this image to a post, you could pass the post id as a third param and it'd magically happen.
                            $attach_id = wp_insert_attachment( $attachment, $file_name_and_location );
                            require_once(ABSPATH . "wp-admin" . '/includes/image.php');
                            $attach_data = wp_generate_attachment_metadata( $attach_id, $file_name_and_location );
                            wp_update_attachment_metadata($attach_id,  $attach_data);

                            // Before we update the post meta, trash any previously uploaded image for this post.
                            // You might not want this behavior, depending on how you're using the uploaded images.
                            $existing_uploaded_image = (int) get_post_meta($post_id,'_xxxx_attached_image', true);
                            if(is_numeric($existing_uploaded_image)) {
                                wp_delete_attachment($existing_uploaded_image);
                            }

                            // Now, update the post meta to associate the new image with the post
                            update_post_meta($post_id,'_xxxx_attached_image',$attach_id);

                            // Set the feedback flag to false, since the upload was successful
                            $upload_feedback = false;


                        } else { // wp_handle_upload returned some kind of error. the return does contain error details, so you can use it here if you want.

                            $upload_feedback = 'There was a problem with your upload.';
                            update_post_meta($post_id,'_xxxx_attached_image',$attach_id);

                        }

                    } else { // wrong file type

                        $upload_feedback = 'Please upload only image files (jpg, gif or png).';
                        update_post_meta($post_id,'_xxxx_attached_image',$attach_id);

                    }

                } else { // No file was passed

                    $upload_feedback = false;

                }

                // Update the post meta with any feedback
                update_post_meta($post_id,'_xxxx_attached_image_upload_feedback',$upload_feedback);

            break;

            default:

        } // End switch

    return;

} // End if manual save flag

    return;

}
add_action('save_post','xxxx_update_post',1,2);

अनुमतियाँ, स्वामित्व और सुरक्षा

यदि आपको अपलोड करने में समस्या है, तो इसे अनुमतियों के साथ करना पड़ सकता है। मैं सर्वर कॉन्फिगरेशन का कोई विशेषज्ञ नहीं हूं, इसलिए कृपया मुझे यह सुधार दें कि यदि यह हिस्सा विस्की है।

सबसे पहले, सुनिश्चित करें कि आपका wp-content / अपलोड फ़ोल्डर मौजूद है, और यह अपाचे: अपाचे के स्वामित्व में है। यदि ऐसा है, तो आपको 744 को अनुमतियाँ सेट करने में सक्षम होना चाहिए और सब कुछ बस काम करना चाहिए। स्वामित्व महत्वपूर्ण है - यहां तक ​​कि 777 के लिए परमिट सेट करना कभी-कभी मदद नहीं करेगा यदि निर्देशिका ठीक से स्वामित्व में नहीं है।

आपको htaccess फ़ाइल का उपयोग करके अपलोड और निष्पादित की गई फ़ाइलों के प्रकारों को सीमित करने पर भी विचार करना चाहिए। यह उन फ़ाइलों को अपलोड करने से रोकता है जो छवियां नहीं हैं, और छवियों के रूप में प्रच्छन्न स्क्रिप्ट निष्पादित करने से। आपको संभवतः अधिक आधिकारिक जानकारी के लिए इसे Google करना चाहिए, लेकिन आप इस तरह की सरल फ़ाइल प्रकार को सीमित कर सकते हैं:

<Files ^(*.jpeg|*.jpg|*.png|*.gif)>
order deny,allow
deny from all
</Files>

बहुत बहुत धन्यवाद MathSmath! मुझे जिस चीज की जरूरत थी। काश मैं इस उत्तर के लिए और अधिक अपरोक्ष यश दे सकता!
मिकाल मऊ

बहुत बढ़िया स्पष्टीकरण! केवल एक चीज जिस पर मैं आपको विस्तार देना चाहूंगा, वह यह है कि विशिष्ट अपलोड की गई फ़ाइलों को जनता से अप्राप्य कैसे बनाया जाए। दूसरे शब्दों में, यदि आप एक विशिष्ट पोस्ट-प्रकार बनाना चाहते हैं, जहां अपलोड की गई सभी फाइलें विशिष्ट क्षमता वाले उपयोगकर्ताओं द्वारा ही सुलभ हों। क्या आप इस बारे में विस्तार से बता सकते हैं?
NetConstructor.com

3
सीमांत पर फ़ाइलें अपलोड करने के इच्छुक किसी भी व्यक्ति के लिए आपको wp_handle_upload () फ़ंक्शन:if ( ! function_exists( 'wp_handle_upload' ) ) require_once( ABSPATH . 'wp-admin/includes/file.php' );
निक बुडेन

@ NetConstructor.com मेरा सुझाव है कि आप एक प्रश्न बनाएं जो इस उत्तर के दायरे से बाहर है।
१२:१३

0

@MathSmath ने जो कोड दिया है वह सही है। हालाँकि, यदि आप कई अपलोड फ़ील्ड्स संभालते हैं, या कई फ़ाइलों को अपलोड करना चाहते हैं, तो आपको इसे बहुत अधिक संशोधित करना होगा।

इसके अलावा, यह फ़ाइलों को अपलोड करने के लिए वर्डप्रेस मीडिया लाइब्रेरी का उपयोग नहीं करता है (जो दृश्य के पीछे सभी गंदे काम करता है)।

मेरा सुझाव है कि आप मेटा बॉक्स जैसे प्लगइन पर एक नज़र डालें । प्लगइन फ़ाइलों को अपलोड करने के लिए दोनों तरीकों का समर्थन करता है:

  • HTML5 के माध्यम से input[type="file"], जो ऊपर एक समान कोड का उपयोग करता है ( डॉक्स देखें ) और
  • वर्डप्रेस मीडिया लाइब्रेरी ( डॉक्स देखें )।

यह आपको प्रयास को कम करने और कोड को बनाए रखने में मदद कर सकता है, खासकर जब आप कई अपलोड बनाना चाहते हैं।

डिस्क्लेमर: मैं मेटा बॉक्स का लेखक हूं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.