अटैचमेंट में कस्टम फ़ील्ड कैसे जोड़ें

आपको WordPress में कस्टम फ़ील्ड से परिचित होना चाहिए। अतिरिक्त डेटा जोड़ने के लिए हम उन्हें एक पोस्ट या पेज पर इस्तेमाल करते हैं। WordPress अटैचमेंट में पोस्ट के रूप में भी सेव किये जाते हैं, इसलिए कस्टम फ़ील्ड भी उनके लिए उपलब्ध हैं।

आज हम देखेंगे कि हम कुछ कस्टम फ़ील्ड कैसे जोड़ सकते हैं ताकि अटैचमेंट केवल डिफ़ॉल्ट डेटा की तुलना में अधिक जानकारी ले सकें।

हम क्या करेंगे

सबसे पहले, हम अटैचमेंट कस्टम फ़ील्ड को संभालने के लिए एक प्लगइन बनाने जा रहे हैं। इसे ऑप्शंस का एक सेट मिलेगा, उन्हें बेक करना होगा ताकि जब हम अटैचमेंट एडिट करते हैं, और उन्हें डेटाबेस में सेव करते हैं तो वे फ़ॉर्म का हिस्सा बन जाते हैं।

इसके लिए, हम दो WordPress हुक का उपयोग करेंगे:

• एडिट फ़ॉर्म को संभालने के लिए attachment_fields_to_edit
• कस्टम फ़ील्ड को सेव करने के लिए attachment_fields_to_save

1. प्लगइन बनाना

मैं इस भाग से जल्दी से गुजर जाऊंगा क्योंकि यह इस ट्यूटोरियल का मुख्य उद्देश्य नहीं है।

प्लगइन्स डायरेक्टरी (wp-content/plugins/media-fields/ उदाहरण के लिए) में एक नया फ़ोल्डर बनाएं और अंदर एक फ़ाइल (plugin.php नाम दिया) डालें। आइए custom_media_fields.php नामक एक फ़ाइल भी डालें जो हमारे ऑप्शंस को रखेगी।

इस प्रकार आपकी plugin.php फ़ाइल सबसे पहले दिखनी चाहिए:

/*
Plugin Name: Wptuts+ Custom Media Fields
Plugin URI:
Description: Create attachments custom fields
Version: 0.1
Author: Guillaume Voisin
Author URI: http://wp.tutsplus.com/author/guillaumevoisin
License: GPL2
*/

require_once( plugin_dir_path( __FILE__ ) . '/custom_media_fields.php' );

Class Wptuts_Custom_Media_Fields {

  private $media_fields = array();

	function __construct( $fields ) {

	}

	public function applyFilter( $form_fields, $post = null ) {

	}

	function saveFields( $post, $attachment ) {

	}

}

$cmf = new Wptuts_Custom_Media_Fields( $attchments_options );

यह वह आधार है जिसे हम निम्नलिखित सेक्शन में एकत्रित करेंगे। अभी के लिए, चलिए ऑप्शंस के हमारे सेट को परिभाषित करते हैं।

2. हमारे ऑप्शंस को परिभाषित करें

दूसरी फ़ाइल में, अटैचमेंट एडिट फ़ॉर्म को बढ़ाने के लिए कुछ ऑप्शन जोड़ें। हम इस ट्यूटोरियल के लिए, इमेजेज को बेहतर बनाने के ऑप्शन पर विचार करेंगे। उदाहरण के लिए, हम कॉपीराइट, ऑथर डिस्क्रिप्शन, वॉटरमार्क, रेटिंग, और इमेज डिस्पोसिशन फ़ील्ड जोड़ देंगे।

$themename = "twentytwelve";
$attchments_options = array(
	'image_copyright' => array(
		'label'       => __( 'Image copyright', $themename ),
		'input'       => 'text',
		'helps'       => __( 'If your image is protected by copyrights', $themename ),
		'application' => 'image',
		'exclusions'  => array( 'audio', 'video' ),
		'required'    => true,
		'error_text'  => __( 'Copyright field required', $themename )
	),
	'image_author_desc' => array(
		'label'       => __( 'Image author description', $themename ),
		'input'       => 'textarea',
		'application' => 'image',
		'exclusions'   => array( 'audio', 'video' ),
	),
	'image_watermark' => array(
		'label'       => __( 'Image watermark', $themename ),
		'input'       => 'checkbox',
		'application' => 'image',
		'exclusions'   => array( 'audio', 'video' )
	),
	'image_stars' => array(
		'label'       => __( 'Image rating', $themename ),
		'input'       => 'radio',
		'options' => array(
			'0' => 0,
			'1' => 1,
			'2' => 2,
			'3' => 3,
			'4' => 4
		),
		'application' => 'image',
		'exclusions'   => array( 'audio', 'video' )
	),
	'image_disposition' => array(
		'label'       => __( 'Image disposition', $themename ),
		'input'       => 'select',
		'options' => array(
			'portrait' => __( 'portrtait', $themename ),
			'landscape' => __( 'landscape', $themename )
		),
		'application' => 'image',
		'exclusions'   => array( 'audio', 'video' )
	)
);

यह मूल रूप से एक अस्सोसिएटिव ऐरे है जिसमें ये पैरामीटर शामिल हैं:

• label - फ़ील्ड नाम जो प्रदर्शित किया जाएगा
• input - इनपुट टाइप (जैसे टेक्स्ट, सेलेक्ट, रेडियो, ...)
• helps - यूजर को फ़ील्ड भरने में मदद करने के लिए जानकारी
• application - जो अटैचमेंट माइम टाइप को लागू करने के लिए
• exclusions - जो अटैचमेंट माइम टाइप को बाहर करने के लिए
• required - क्या फ़ील्ड आवश्यक है? (डिफ़ॉल्ट false)
• error_text - एरर का वर्णन करने के लिए ऑप्शनल फ़ील्ड (यदि आवश्यक हो तो true पर सेट होता है)
• options - रेडियो और सेलेक्ट टाइप्स के लिए ऑप्शनल फील्ड
• show_in_modal - क्या फील्ड को मॉडल में दिखाना है या नहीं (डिफ़ॉल्ट true)
• show_in_edit - क्या क्लासिक एडिट व्यू में फ़ील्ड दिखाना है या नहीं (डिफ़ॉल्ट true)
• extra_rows - कंटेंट को प्रदर्शित करने के लिए अतिरिक्त rows (उसी "tr" टैग के भीतर)
• tr - अतिरिक्त rows ("tr" टैग)

हाइलाइटेड ऑप्शंस का प्रतिनिधित्व करते हैं जिन्हें हम मैन्युअल रूप से डील करेंगे जबकि अन्य डिफ़ॉल्ट हैं WordPress ऑटोमेटिकली प्रोसेस करेगा।

चूंकि हम इमेजेज से निपट रहे हैं, हम एप्लिकेशन पैरामीटर को "image" पर सेट करते हैं। यह वास्तव में सभी प्रकार की इमेजेज पर लागू होगा जिनके माइम टाइप "image" जैसे image/jpeg, image/png आदि से शुरू होते हैं। उदाहरण के लिए आप एक्सक्लूशन फील्ड में इसे सेट करके gif माइम टाइप को एक्सक्लूड कर सकते हैं।

अब हमारे ऑप्शंस सेट हैं, चलो दो हुक से डील करते है।

3. हुक

जैसा कि पहले उल्लेख किया गया है, हम दो हुक से निपटेंगे।

हम कन्स्ट्रक्टर मेथड में उन दो हुकों से हमारे दो फंक्शन्स को बांधते हैं।

function __construct( $fields ) {
	$this->media_fields = $fields;

	add_filter( 'attachment_fields_to_edit', array( $this, 'applyFilter' ), 11, 2 );
	add_filter( 'attachment_fields_to_save', array( $this, 'saveFields' ), 11, 2 );
}

अब चलो उन हुक को विस्तार से देखें।

attachment_fields_to_edit

इसमें दो पैरामीटर हैं:

1. $form_fields - अटैचमेंट एडिट फ़ॉर्म में निहित फ़ील्ड का एक ऐरे
2. $post - ऑब्जेक्ट जो खुद एक अटैचमेंट का प्रतिनिधित्व करता है

हम अपने फॉर्म को मर्ज करने के लिए $form_fields पैरामीटर का उपयोग करेंगे और उनमें से प्रत्येक को अटैचमेंट रिक्वायरमेंट्स (उदाहरण के लिए माइम टाइप) के विरुद्ध जांचें।

public function applyFilter( $form_fields, $post = null ) {
	// If our fields array is not empty
	if ( ! empty( $this->media_fields ) ) {
		// We browse our set of options
		foreach ( $this->media_fields as $field => $values ) {
			// If the field matches the current attachment mime type
			// and is not one of the exclusions
			if ( preg_match( "/" . $values['application'] . "/", $post->post_mime_type) && ! in_array( $post->post_mime_type, $values['exclusions'] ) ) {
				// We get the already saved field meta value
				$meta = get_post_meta( $post->ID, '_' . $field, true );

				// Define the input type to 'text' by default
				$values['input'] = 'text';

				// And set it to the field before building it
				$values['value'] = $meta;

				// We add our field into the $form_fields array
				$form_fields[$field] = $values;
			}
		}
	}

	// We return the completed $form_fields array
	return $form_fields;
}

इस स्टेप में, आपके द्वारा जोड़े गए नए फ़ील्ड के साथ आपके अटैचमेंट एडिट फ़ॉर्म को बढ़ाया जाना चाहिए। लेकिन वे टेक्स्ट इनपुट की तरह दिखेगा। अब हमें विभिन्न प्रकार के इनपुट (रेडियो, चेकबॉक्स, आदि ...) पर विचार करना होगा।

तो आइए इसे संभालने के लिए हमारे फ़ंक्शन को एडिट करें। $values['input'] = 'text'; को निम्नलिखित कोड के साथ बदलें:

switch ( $values['input'] ) {
	default:
	case 'text':
		$values['input'] = 'text';
		break;

	case 'textarea':
		$values['input'] = 'textarea';
		break;

	case 'select':

		// Select type doesn't exist, so we will create the html manually
		// For this, we have to set the input type to 'html'
		$values['input'] = 'html';

		// Create the select element with the right name (matches the one that wordpress creates for custom fields)
		$html = '<select name="attachments[' . $post->ID . '][' . $field . ']">';

		// If options array is passed
		if ( isset( $values['options'] ) ) {
			// Browse and add the options
			foreach ( $values['options'] as $k => $v ) {
				// Set the option selected or not
				if ( $meta == $k )
					$selected = ' selected="selected"';
				else
					$selected = '';

				$html .= '<option' . $selected . ' value="' . $k . '">' . $v . '</option>';
			}
		}

		$html .= '</select>';

		// Set the html content
		$values['html'] = $html;

		break;

	case 'checkbox':

		// Checkbox type doesn't exist either
		$values['input'] = 'html';

		// Set the checkbox checked or not
		if ( $meta == 'on' )
			$checked = ' checked="checked"';
		else
			$checked = '';

		$html = '<input' . $checked . ' type="checkbox" name="attachments[' . $post->ID . '][' . $field . ']" id="attachments-' . $post->ID . '-' . $field . '" />';

		$values['html'] = $html;

		break;

	case 'radio':

		// radio type doesn't exist either
		$values['input'] = 'html';

		$html = '';

		if ( ! empty( $values['options'] ) ) {
			$i = 0;

			foreach ( $values['options'] as $k => $v ) {
				if ( $meta == $k )
					$checked = ' checked="checked"';
				else
					$checked = '';

				$html .= '<input' . $checked . ' value="' . $k . '" type="radio" name="attachments[' . $post->ID . '][' . $field . ']" id="' . sanitize_key( $field . '_' . $post->ID . '_' . $i ) . '" /> <label for="' . sanitize_key( $field . '_' . $post->ID . '_' . $i ) . '">' . $v . '</label><br />';
				$i++;
			}
		}

		$values['html'] = $html;

		break;
}

अब, हम कॉमन HTML एलिमेंट बना सकते हैं। आइए हमारे अटैचमेंट एडिट फॉर्म को देखें। इसे इस तरह दिखना चाहिए:

कस्टम फ़ील्ड्स, इस पर निर्भर करता है कि आप अपने मोडल ऑप्शंस को true सेट करते हैं या नहीं, फिर भी जब आप कोई पोस्ट एडिट करते हैं तो मीडिया मोडल फॉर्म में भी दिखाई देंगे।

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

attachment_fields_to_save

इस हुक में भी दो पैरामीटर हैं:

1. $post - array जो अटैचमेंट एंटिटी का प्रतिनिधित्व करता है
2. $attachment - अटैचमेंट पोस्ट से जुड़े सभी फ़ील्ड शामिल हैं

अब, चलिए पिछले सेक्शन में छोड़े गए फ़ंक्शन saveFields को भरें।

function saveFields( $post, $attachment ) {
	// If our fields array is not empty
	if ( ! empty( $this->media_fields ) ) {
		// Browser those fields
		foreach ( $this->media_fields as $field => $values ) {
			// If this field has been submitted (is present in the $attachment variable)
			if ( isset( $attachment[$field] ) ) {
				// If submitted field is empty
				// We add errors to the post object with the "error_text" parameter we set in the options
				if ( strlen( trim( $attachment[$field] ) ) == 0 )
					$post['errors'][$field]['errors'][] = __( $values['error_text'] );
				// Otherwise we update the custom field
				else
					update_post_meta( $post['ID'], '_' . $field, $attachment[$field] );
			}
			// Otherwise, we delete it if it already existed
			else {
				delete_post_meta( $post['ID'], $field );
			}
		}
	}

	return $post;
}

ठीक है, अब हमारे कस्टम फ़ील्ड डेटाबेस में सेव किये गए हैं और फ्रंट एंड के लिए उपलब्ध होंगे।

एरर विचार

वर्जन 3.5 के अनुसार, ऐसा लगता है कि एरर अभी भी अटैचमेंट एडिट फ़ॉर्म पर दिखाई नहीं देते हैं। मैंने कोर कोड की जांच करने की कोशिश की, और इस तथ्य के बावजूद इसे ठीक किया जाना चाहिए था (http://core.trac.wordpress.org/ticket/13810), ऐसा नहीं लगता है।

AJAX सेव करने के प्रोसेस के लिए, यह निश्चित है कि यह अभी तक नहीं किया गया है जैसा कि ajax-actions.php फ़ाइल में उल्लिखित है:

$errors = $post['errors']; // @todo return me and display me!

तो अभी, एरर ठीक से काम नहीं करने जा रहे हैं, लेकिन कोड किया जाता है ताकि जब उन बग को ठीक किया जाए, तो यह काम करेगा।

फ़्रंट एंड

अपने टेम्पलेट्स में उन कस्टम फ़ील्ड्स का उपयोग करने के लिए, आपको पोस्ट मेटा को उसी तरह से रिट्रीव करना होगा जैसा आप नियमित पोस्ट के लिए करेंगे। कस्टम फ़ील्ड की key में "_" प्रीफिक्स जोड़ना मत भूलना।

उदाहरण के लिए, आप ऐसा कर सकते हैं:

echo "<ul>";
echo "	<li><strong>Copyright</strong>: " . get_post_meta( get_the_ID(), '_image_copyright', true ) . "</li>";
echo "	<li><strong>Rating</strong>: " . get_post_meta( get_the_ID(), '_image_stars', true ) . "</li>";
echo "	<li><strong>Author description</strong>: " . get_post_meta( get_the_ID(), '_image_author_desc', true ) . "</li>";
echo "	<li><strong>Image disposition</strong>: " . get_post_meta( get_the_ID(), '_image_disposition', true ) . "</li>";
echo "	<li><strong>Watermark?</strong> " . ( get_post_meta( get_the_ID(), '_image_watermark', true ) == "on" ? "yes" : "no" ) . "</li>";
echo "</ul>";

आगे बड़े

आपकी आवश्यकताओं के आधार पर सुधार के कई बिंदु हैं:

• आपके पास डेटाबेस में आपकी सेटिंग्स हो सकती हैं ताकि उन्हें जोड़ने, एडिट करने और निकालने में अधिक लचीला हो जाए
• आपके पास एक डिफ़ॉल्ट वैल्यू हो सकती है जो वैल्यू सेट नहीं होने पर सभी नए अटैचमेंट के लिए सेट किया गया हो
• आपको मोडल फॉर्म के लिए कुछ स्टाइल सेट करना चाहिए ताकि यह कस्टम फ़ील्ड को सही तरीके से प्रदर्शित कर सके

निष्कर्ष

इस प्लगइन को बेहतर बनाने और इस तरह की फंक्शनलिटी से आप क्या उम्मीद करेंगे इस बारे में अपने विचारों को साझा करने में संकोच न करें।