WordPress में कमैंट्स को कस्टमाइज़ करना - Functionality और Appearance

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

Step 1 comment_form फ़ंक्शन और इसके आर्ग्यूमेंट्स को समझना

WordPress फ़ंक्शन comment_form पर एक नजर डालें। यह कमेंट फ़ॉर्म दिखाने के लिए ज़िम्मेदार है, जो कि WordPress में ज्यादातर सिंगल पेज या पोस्ट पर प्रदर्शित होता है। इस फंक्शन को कॉल करने से यह अधिकतर आपके थीम फोल्डर में comments.php फाइल को दिखाता है। इसके बाद यह फाइल को अलग अलग जगहों में सीधे तौर पर शामिल किया जाता है जैसे कि single.php, page.php आदि या comments_template फ़ंक्शन को कॉल करके।

आप WordPress Codex में comments_template के बारे में अधिक जानकारी पा सकते हैं।

यदि हम फ़ॉर्म प्रदर्शित करने के लिए comment_form फ़ंक्शन का उपयोग करते हैं, तो फ़ॉर्म को डिफ़ॉल्ट पैरामीटर के साथ ही प्रदर्शित कर दिया जाएगा जो हैं name, email (दोनों अनिवार्य हैं), website और कमेंट के कंटेंट जैसी फ़ील्ड्स। Twenty Eleven डिफ़ॉल्ट थीम पर फॉर्म कुछ इस प्रकार से दिखाई देगा।

Comment_form फ़ंक्शन के कुछ महत्वपूर्ण आर्ग्यूमेंट्स हैं:

• fields - जिसके द्वारा आप वास्तव में नियंत्रित कर सकते हैं कि कौन से फ़ील्ड कमेंट फॉर्म में दिखाई जाए
• comment_notes_before और comment_notes_after – ये कमेंट फॉर्म के पहले या बाद में कुछ नोट प्रदर्शित करने के लिए उपयोग किया जाता है।
• title_reply – इसका प्रयोग करके आप रिप्लाई का टाइटल बदल सकते हैं जो डिफ़ॉल्ट रूप से 'Leave a Reply' है।
• label_submit – इसका उपयोग कमेंट के सबमिट बटन पर टेक्स्ट को बदलने के लिए किया जा सकता है।

स्टेप 2 comment_form फंक्शन का उपयोग करके अपने कमेंट फॉर्म को कस्टमाइज़ करें

अब comment_form में अलग अलग आर्गुमेंट पास करके कमेंट फॉर्म को कस्टमाइज करते हैं।

अगर हम कमेंट फॉर्म की फ़ील्ड्स को कस्टमाइज करना चाहते हैं तो हम फ़ील्ड को comment_form फंक्शन पर पास कर सकते हैं। comment_form फ़ंक्शन में डिफ़ॉल्ट फ़ील्ड इस प्रकार हैं:

$fields =  array(
  'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
	'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
		'<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
);

इसलिए यदि हम वेबसाइट फील्ड को हटाना चाहते हैं तो हमें वेबसाइट फ़ील्ड के बिना फ़ील्ड बनाने की आवश्यकता होगी जैसा की नीचे दिखाया गया है और इसे comment_form पर पास कर दें।

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);

$comments_args = array(
	'fields' =>	$fields
);

comment_form($comments_args);

अब अगर हम जाकर कमैंट्स फॉर्म देखें तो यह निम्न प्रकार से दिखाई देगा:

इसके अलावा अब 'Please give us your valuable comment' के रिप्लाई के टाइटल को बदल दें और 'Send My Comment' से कमेंट पोस्ट बटन के टाइटल को भी बदलें।

इसे प्राप्त करने के लिए हम नीचे दिए गए आर्गुमेंट को comment_form पर पास करेंगे:

$commenter = wp_get_current_commenter();
$req = get_option( 'require_name_email' );
$aria_req = ( $req ? " aria-required='true'" : '' );
$fields =  array(
	'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
	'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		'<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
);

$comments_args = array(
	'fields' =>	$fields,
	'title_reply'=>'Please give us your valuable comment',
	'label_submit' => 'Send My Comment'
);

comment_form($comments_args);

अब अगर हम कमेंट फार्म देखते हैं तो यह निम्न प्रकार से दिखेगा:

स्टेप 3 Hooks का उपयोग करने के लिए कमेंट से फ़ील्ड्स को हटाना

WordPress कमेंट फॉर्म भी हुक और फिल्टर का उपयोग करके कस्टमाइज किया जा सकता है। हुक/फिल्टर का प्रयोग करके कस्टमाइज करना बहुत उपयोगी होता है, खासकर तब जब आप प्लगइन के माध्यम से कस्टमाइज़ कर रहे हों और थीम फ़ाइलों को मॉडिफाई नहीं कर सकते। कमेंट फार्म से फ़ील्ड जोड़ने या हटाने के लिए फ़िल्टर 'comment_form_default_fields' है।

अब इस फ़िल्टर का उपयोग करके URL फ़ील्ड को हटा देते हैं। ऐसा करने के लिए कोड है की आप इसे अपनी प्लगइन फाइल में रख दें यदि आप प्लगइन के माध्यम से इसे कस्टमाइज करे रहे हैं या अपनी थीम की functions.php फाइल में भी रख सकते हैं।

कोड निम्नानुसार है:

function remove_comment_fields($fields) {
	unset($fields['url']);
	return $fields;
}
add_filter('comment_form_default_fields','remove_comment_fields');

इसमें हम 'comment_form_default_fields' फ़िल्टर पर remove_comment_fields फंक्शन को जोड़ते हैं और फिर वेबसाइट फ़ील्ड को निकालने के लिए url फ़ील्ड को अनसेट करते हैं।

स्टेप 4 Hooks का प्रयोग करके आपके कमैंट्स में और अधिक डेटा जोड़ना

हम 'comment_form_default_fields' फिल्टर का उपयोग करने के लिए फ़ील्ड को भी कमेंट में जोड़ सकते हैं। अब इस फिल्टर का उपयोग करते हुए कमेंट ऑथर की उम्र की फ़ील्ड जोड़ते हैं और फिर इस फ़ील्ड को कमेंट के मेटा के रूप में स्टोर करते हैं और उसे कमेंट पर प्रदर्शित करते हैं।

हम फ़ील्ड निम्नानुसार जोड़ सकते हैं:

function add_comment_fields($fields) {

	$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
		'<input id="age" name="age" type="text" size="30" /></p>';
	return $fields;

}
add_filter('comment_form_default_fields','add_comment_fields');

थीम के अनुसार फील्ड के जोड़ने के बाद हम इसे स्टाइल देना चाहेंगे। जैसा कि मैं Twenty Eleven थीम का प्रयोग कर रहा हूँI स्टाइल का उपयोग #respond .comment-form-age label के साथ अन्य लेबल स्टाइल जैसे #respond .comment-form-url label को जोड़ कर करता हूँ जैसा की नीचे दिया गया है:

#respond .comment-form-author label,
#respond .comment-form-email label,
#respond .comment-form-url label,
#respond .comment-form-age label,
#respond .comment-form-comment label {
	background: #eee;
	-webkit-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	-moz-box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	box-shadow: 1px 2px 2px rgba(204,204,204,0.8);
	color: #555;
	display: inline-block;
	font-size: 13px;
	left: 4px;
	min-width: 60px;
	padding: 4px 10px;
	position: relative;
	top: 40px;
	z-index: 1;
}

अब अगर हम कमेंट फॉर्म देखते हैं तो ये फ़ील्ड इस प्रकार देखेगी:

अब जब यह कमेंट मेटा के रूप में आगे स्टोर की जाती है, हमें 'comment_post' में हुक करनी चाहिए और कमेंट मेटा के रूप में age को सेव करना होगा:

function add_comment_meta_values($comment_id) {

	if(isset($_POST['age'])) {
		$age = wp_filter_nohtml_kses($_POST['age']);
		add_comment_meta($comment_id, 'age', $age, false);
	}

}
add_action ('comment_post', 'add_comment_meta_values', 1);

मेटा को सेव किये जाने के बाद इसे कमेंट पर प्रदर्शित किया जा सकता है:

<?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?>

स्टेप 5 कुछ विशिष्ट पोस्ट टाइप्स के लिए कमेंट कस्टमाइज़ करना

कुछ विशिष्ट पोस्ट टाइप्स में ही कुछ कमेंट फ़ील्ड को डालना उपयोगी हो सकता है। अब कोड में कुछ परिवर्तन करते हैं ताकि age कमेंट फील्ड को दिखाया जा सके पर सिर्फ तभी जब यह एक कस्टम पोस्ट टाइप हो, जैसे की, book।

सिर्फ books कस्टम पोस्ट टाइप में age को दिखने वाले कोड इस प्रकार होंगे:

function add_comment_fields($fields) {

	if( is_singular( 'books' ) ) {

		$fields['age'] = '<p class="comment-form-age"><label for="age">' . __( 'Age' ) . '</label>' .
			'<input id="age" name="age" type="text" size="30" /></p>';
	}
	return $fields;

}
add_filter('comment_form_default_fields','add_comment_fields');

तो यहां आप फ़ील्ड केवल तभी जोड़ सकते हैं जब यह 'Books' प्रकार की है।

स्टेप 6 कमैंट्स प्रदर्शित करने के लिए एक कॉलबैक बनाना

फ़ंक्शन wp_list_comments एक पोस्ट पर कमेंट प्रदर्शित करने के लिए प्रयोग किया जाता है। आप वर्डप्रेस कोडेक्स में wp_list_comments के बारे में पढ़ सकते हैं।

wp_list_comments में 'callback' एक आर्गुमेंट है जिसमें आप कमेंट प्रदर्शित करने के लिए कॉल किये जाने वाला फ़ंक्शन निर्दिष्ट कर सकते हैं।

Twenty Eleven थीम में comments.php में आप एक लाइन देखेंगे:

wp_list_comments( array( 'callback' => 'twentyeleven_comment' ) );

इसे हम बदलेंगे:

wp_list_comments( array( 'callback' => 'my_comments_callback' ) );

इसलिए फ़ंक्शन my_comments_callback प्रत्येक पोस्ट के लिए कॉल किया जाएगा।

स्टेप 7 अपने कमैंट्स को स्टाइल देना

अब हम अपनी पोस्ट को थोड़े अलग तरह से स्टाइल करेंगे। हम सिर्फ पोस्ट के कंटेंट और age फ़ील्ड को डिस्प्ले करना चाहते हैं जो हमने विशेष रूप से जोड़ा है। हम कमैंट्स के बैकग्राउंड का रंग भी बदलते हैं।

फ़ंक्शन 'my_comments_callback' के लिए कोड इस प्रकार है:

function my_comments_callback( $comment, $args, $depth ) {
	$GLOBALS['comment'] = $comment;

	?>
	<li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>">
		<article id="comment-<?php comment_ID(); ?>" class="comment">

			<div class="comment-content"><?php comment_text(); ?></div>

			<p><?php echo "Comment authors age: ".get_comment_meta( $comment->comment_ID, 'age', true ); ?></p>

			<div class="reply">
				<?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply <span>&darr;</span>', 'twentyeleven' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?>
			</div>
		</article>
	</li>
	<?php
}

हम बैकग्राउंड रंग को भी मॉडिफाई करते हैं:

.commentlist > li.comment {

	background: #99ccff;
	border: 3px solid #ddd;
	-moz-border-radius: 3px;
	border-radius: 3px;
	margin: 0 0 1.625em;
	padding: 1.625em;
	position: relative;
}

अब अगर हम कमैंट्स को देखेंगे तो वे इस प्रकार का होगा:

निष्कर्ष

कमैंट्स एक महत्वपूर्ण भूमिका निभाते हैं जहाँ एक कम्युनिटी साइट का निर्माण किया जा रहा होता है। साइट के आधार पर कमैंट्स की कार्यक्षमता को भी उचित रूप से कस्टमाइज किया जा सकता है। वर्डप्रेस एक लचीली कमेंट प्रणाली प्रदान करता है और आपकी साइट के कमैंट्स के व्यवहार और उपस्थिति को बदलने के लिए फंक्शन्स के माध्यम से एक अच्छा समर्थन प्रदान करता है। तो अपनी WordPress साइट को कस्टमाइज करना मज़ेदार है!

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