सिंगल फंक्शन के साथ मल्टीप्ल शॉर्टकोड: 3 किलर उदाहरण

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

शक्तिशाली शोर्टकोड API हमें "snippets" बनाने और हमारी पोस्ट में विशेष कंटेंट (जैसे PHP फ़ंक्शंस या जटिल HTML कोड) शामिल करने की अनुमति देता है। प्रत्येक शॉर्टकोड के लिए अलग-अलग फंक्शन्स को बनाना बेहद आम है, लेकिन क्या यह वास्तव में आवश्यक है? इस पोस्ट में, हम यह देखने जा रहे हैं कि हम एक फंक्शन को बनाकर एक से अधिक शॉर्टकोडे का उपयोग कैसे कर सकते हैं।

शॉर्टकोड के डिफेंस में

API WordPress को सबसे लचीले कंटेंट मैनेजमेंट सिस्टम में से एक बनाता हैं। ये ही कारण हैं कि वहां हजारों प्लगइन और थीम हैं: WordPress की विशाल कम्युनिटी WordPress के बैकफ्लिप्स और कार्टव्हील्स बनाने में सक्षम है, WordPress के API का धन्यवाद।

इन API में, मेरा पसंदीदा शोर्टकोड API है। इसका लॉजिक और वैलिडिटी पर सवाल उठाया जा रहा है लेकिन मुझे दृढ़ विश्वास है कि WordPress में शॉर्टकोड का उपयोग करना एक आसान सीखने का कर्व (learning curve) है और एक बार जब वे पैरामीटर और खोलने/बंद करने वाले टैग के बारे में उन कुछ आसान नियमों को सीख लेते हैं, तो नौसिखिया यूज़र्स शॉर्टकोड का उपयोग करके आनंद ले सकते हैं। ठीक है, यह WYSIWYG नहीं है लेकिन WordPress नौसिखिया को द्वारा गड़बड़ी साफ़ करना कठिन समय हो सकता है अगर उन्होंने WYSIWYG एडिटर में कुछ गलत किया और HTML को बर्बाद कर दिया है तो। यह देखने के लिए आसान है कि शॉर्टकोड काम नहीं करता है, इसे डिलीट करें, और इसे फिर से टाइप करें।

लेकिन निश्चित रूप से, यह सिर्फ मेरी राय है। आइए इस विषय पर वापस आएं: हम एक ही फंक्शन के साथ कई शॉर्टकोड बना रहे हैं!

इस तकनीक का लाभ

इस मेथड के लाभ पर बहस करने की वास्तव में कोई ज़रूरत नहीं है - इस हास्यास्पद लंबे उदाहरण पर विचार करें:

<?php
function one_half_sc( $atts, $content = null, $tag ) {
  extract( shortcode_atts(  array(
		// extra classes
		'class' => '',
		'last' => ''
	), $atts ) );
	if ( $class != '' )
		$class = ' ' . $class;
	if ( $last = 'yes' )
		$last_class = ' last';
	return '<div class="one_half' . $last_class . $class . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'one_half', 'one_half_sc' );
 
function one_third_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		// extra classes
		'class' => '',
		'last' => ''
	), $atts ) );
	if ( $class != '' )
		$class = ' ' . $class;
	if ( $last = 'yes' )
		$last_class = ' last';
	return '<div class="one_third' . $last_class . $class . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'one_third', 'one_third_sc' );
 
function one_quarter_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		// extra classes
		'class' => '',
		'last' => ''
	), $atts ) );
	if ( $class != '' )
		$class = ' ' . $class;
	if ( $last = 'yes' )
		$last_class = ' last';
	return '<div class="one_quarter' . $last_class . $class . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'one_quarter', 'one_quarter_sc' );
 
function two_thirds_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		// extra classes
		'class' => '',
		'last' => ''
	), $atts ) );
	if( $class != '' )
		$class = ' ' . $class;
	if( $last = 'yes' )
		$last_class = ' last';
	return '<div class="two_thirds' . $last_class . $class . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'two_thirds', 'two_thirds_sc' );
 
function three_quarters_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		// extra classes
		'class' => '',
		'last' => ''
	), $atts ) );
	if ( $class != '' )
		$class = ' ' . $class;
	if ( $last = 'yes' )
		$last_class = ' last';
	return '<div class="three_quarters' . $last_class . $class . '">' . do_shortcode( $content ) . '</div>';
}
add_shortcode( 'three_quarters', 'three_quarters_sc' );
?>

अलग-अलग CSS क्लासेज को छोड़कर - एक ही कोड (PHP और HTML दोनों) का उपयोग हर एक फंक्शन में बार-बार किया जा रहा है। इसके अलावा, प्रत्येक फ़ंक्शन में ऐट्रिब्यूट्स अन्य फंक्शन्स के समान होता हैं। इसे पढ़ना मुश्किल है। इसके बारे में सोचने के लिए आओ, अगर हमें कभी भी इन कॉलम divs के फीचर्स को बदलना पड़े, तो हमें सभी फंक्शन्स में एक ही हिस्से को बदलना होगा।

क्या होगा अगर शॉर्टकोड के "tag" लाने के लिए एक वेरिएबल था? आश्चर्य की बात नहीं है, वेरिएबल को $tag कहा जाता है और हमारे फंक्शन्स के अंदर इस्तेमाल किया जा सकता है। यह हमारे फंक्शन्स को शॉर्टकोड के टैग की जांच करने और टैग के अनुसार व्यवहार करने की अनुमति देता है।

ऊपर दिए गए उदाहरण के बारे में सोचें: यदि एक से अधिक फ़ंक्शन हैं जो लगभग समान फंक्शनलिटी प्रदान करते है, तो यह हमारे शॉर्टकोड का उपयोग करने के लिए एक फ़ंक्शन रखने के लिए लॉजिकल (और बहुत अच्छा) होगा।

मैं तीन अच्छे उदाहरणों के साथ आया हूँ की कैसे हम इस तकनीक का प्रयोग कर सकते हैं। यदि आप पोस्ट पढ़ने के दौरान और अधिक सोच सकते हैं, तो नीचे दिए गए कमेंट सेक्शन पर आपके विचारों को हर किसी के साथ साझा करने के लिए आपका स्वागत है!

उदाहरण 1 वीडियो एम्बेड

Wptuts+ पर मेरी सबसे पुरानी पोस्टों में से एक में, मैंने समझाया कि YouTube, Vimeo और Dailymotion जैसे विभिन्न वीडियो होस्ट से वीडियो एम्बेड करने के लिए शॉर्टकोड का उपयोग कैसे करें। कोड इस तरह दिखता था:

<?php
function vid_sc( $atts, $content = null ) {
	extract(
		shortcode_atts( array(
			'site' => 'youtube',
			'id' => '',
			'w' => '600',
			'h' => '370'
		), $atts )
	);
	if ( $site == "youtube" ) { $src = 'http://www.youtube-nocookie.com/embed/' . $id; }
	else if ( $site == "vimeo" ) { $src = 'http://player.vimeo.com/video/' . $id; }
	else if ( $site == "dailymotion" ) { $src = 'http://www.dailymotion.com/embed/video/' . $id; }
	else if ( $site == "yahoo" ) { $src = 'http://d.yimg.com/nl/vyc/site/player.html#vid=' . $id; }
	else if ( $site == "bliptv" ) { $src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss/flash/' . $id; }
	else if ( $site == "veoh" ) { $src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId=' . $id; }
	else if ( $site == "viddler" ) { $src = 'http://www.viddler.com/simple/' . $id; }
	if ( $id != '' ) {
		return '<iframe width="' . $w . '" height="' . $h . '" src="' . $src . '" class="vid iframe-' . $site . '"></iframe>';
	}
}
add_shortcode( 'vid', 'vid_sc' );
?>

हालांकि यह अभी भी एक बहुत बुरा अभ्यास नहीं है (6 else if स्टेटमेंट्स के अलावा), अब हम एक कम एट्रिब्यूट ('site') का उपयोग कर सकते हैं और इस तरह अलग शॉर्टकोड बना सकते हैं:

<?php
// Video embed shortcodes
function wptuts_embed_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		'id' => '',
		'w' => '600',
		'h' => '370'
	), $atts ) );
	switch( $tag ) {
		case "youtube":
			$src = 'http://www.youtube-nocookie.com/embed/';
			break;
		case "vimeo":
			$src = 'http://player.vimeo.com/video/';
			break;
		case "viddler":
			$src = 'http://www.viddler.com/simple/';
			break;
		case "dailymotion":
			$src = 'http://www.dailymotion.com/embed/video/';
			break;
	}
	if ( $id != '' )
		return '<iframe width="' . $w . '" height="' . $h . '" src="' . $src . $id . '" class="iframevideo"></iframe>';
	return;
}
add_shortcode( 'youtube', 'wptuts_embed_sc' );
add_shortcode( 'vimeo', 'wptuts_embed_sc' );
add_shortcode( 'viddler', 'wptuts_embed_sc' );
add_shortcode( 'dailymotion', 'wptuts_embed_sc' );
?>

देखो हमने क्या किया? हमने पहली लाइन में हमारे फ़ंक्शन के लिए $tag पैरामीटर प्रदान किया है ("site" एट्रिब्यूट को रीप्लेस करने के लिए) और एक switch कंडीशनल स्टेटमेंट (बेहतर, क्लीनर कोड के लिए) का उपयोग किया। दो फंक्शन्स के लिए परिणाम वही होगा, सिवाय इसके कि आप [vid site="youtube" id="..."] के बजाय [youtube id="..."] का उपयोग कर सकते हैं।

(मैंने दूसरे फ़ंक्शन में कुछ वीडियो होस्ट का उपयोग नहीं किया था। अगर आपको अधिक होस्ट जोड़ने की ज़रूरत है, तो आप जितना चाहें उतने "case" जोड़ सकते हैं।)

उदाहरण 2 कॉलम `div`s

आह, कॉलम... वे एक CSS ग्रिड का सबसे महत्वपूर्ण हिस्सा हैं, और यदि वे रेस्पॉन्सिव डिजाइन तकनीकों का समर्थन करते हैं, तो वे आपकी वेबसाइट को अधिक अडाप्टिव बनाने में बहुत आसान बनाते हैं। आप ThemeForest पर लगभग हर WordPress थीम में उन्हें देख सकते हैं और वे इस ट्यूटोरियल की शुरुआत में हमारे "हास्यास्पद लंबे उदाहरण" जैसे अभ्यास के साथ शॉर्टकोड का उपयोग करते हैं।

जैसा कि आपको याद है, कोड उस उदाहरण में सभी 5 फंक्शन्स में लगभग समान ही था। इस प्रकार, उन्हें एक ही फ़ंक्शन में मर्ज करना अविश्वसनीय रूप से आसान होगा और $tag वैरिएबल को इसका जादू करने दें:

<?php
// Column shortcodes
function wptuts_columns_sc( $atts, $content = null, $tag ) {
	extract( shortcode_atts(  array(
		// extra classes
		'class' => ''
	), $atts ) );
	if ( $class != '' )
		$class = ' ' . $class;
	$last = '';
	// check the shortcode tag to add a "last" class
	if ( strpos( $tag, '_last' ) !== false )
		$tag = str_replace( '_last', ' last', $tag);
	$output = '<div class="' . $tag . $last . $class . '">' . do_shortcode( $content ) . '</div>';
	return $output;
}
add_shortcode( 'one_half', 'wptuts_columns_sc' );
add_shortcode( 'one_half_last', 'wptuts_columns_sc' );
add_shortcode( 'one_third', 'wptuts_columns_sc' );
add_shortcode( 'one_third_last', 'wptuts_columns_sc' );
add_shortcode( 'one_quarter', 'wptuts_columns_sc' );
add_shortcode( 'one_quarter_last', 'wptuts_columns_sc' );
add_shortcode( 'two_thirds', 'wptuts_columns_sc' );
add_shortcode( 'two_thirds_last', 'wptuts_columns_sc' );
add_shortcode( 'three_quarters', 'wptuts_columns_sc' );
add_shortcode( 'three_quarters_last', 'wptuts_columns_sc' );
?>

बहुत साफ, है न? हमें switch का उपयोग करने की भी आवश्यकता नहीं थी!

हालांकि, हम अभी भी शॉर्टकोड जोड़ते समय लाइनों को डुप्लिकेट करते हैं। एक कदम आगे जाने की हिम्मत करें? इसके साथ रीप्लेस करने के लिए add_shortcode() लाइनों को रिमूव करें:

<?php
$tags = array(
	'one_half',
	'one_half_last',
	'one_third',
	'one_third_last',
	'one_quarter',
	'one_quarter_last',
	'two_thirds',
	'two_thirds_last',
	'three_quarters',
	'three_quarters_last',
);
foreach( $tags as $tag ) {
	add_shortcode( $tag, 'wptuts_columns_sc' );
}
?>

अब हमारे पास और भी रखरखाव करने लायक कोड है। उदाहरण के लिए; अगर हम फंक्शन का नाम बदलना चाहते हो, तो हम अब हर लाइन को बदलने के लिए परेशान नहीं होंगे।

उदाहरण 3 पोस्ट लिस्ट्स

कभी भी आपकी पोस्ट में पिछले (या भविष्य) लेखों को लिस्ट करने की आवश्यकता है? मैं निश्चित रूप से करूँगा। ऐसे प्लगइन हैं जो शॉर्टकोड प्रदान करते हैं लेकिन उनमें से अधिकतर में आपको कई ऐट्रिब्यूट्स का उपयोग करने की आवश्यकता होती है जिसके परिणामस्वरूप कुछ अग्ली, जटिल टैग जैसे [posts cat="5,6" author="barisunver" status="private" postsperpage="4" and="so on"]।

हम इसके बजाय हमारे प्यारे $tag का उपयोग कैसे करते हैं? आइए इसे एक शॉट दें:

<?php
// Post list shortcodes
function wptuts_post_lists_sc( $atts, $content = null, $tag ) {
	global $post;
	$post_ID = $post->ID;
	$post_author = $post->post_author;
	extract( shortcode_atts(  array(
		'number' => 5,
		'exclude_current' => 'yes',
		'orderby' => 'date'
	), $atts ) );
	$args = '';
	switch( $tag ) {
		case "latest_posts":
			// we don't need any arguments to retrieve latest posts :)
			break;
		case "category_posts":
			$categories = get_the_category( $post_ID );
			$first_category = $categories[0]->term_id;
			$args = 'cat=' . $first_category;
			break;
		case "author_posts":
			$args = 'author=' . $post_author;
			break;
		case "future_posts":
			$args = 'post_status=future';
			break;
	}
	$not_in = '&post__not_in[]=' . $post_ID;
	if ( $exclude_current == 'no' )
		$not_in = '';
	$get_posts = get_posts( $args . $not_in . '&posts_per_page=' . $number . '&orderby=' . $orderby );
	$output = '<ul class="' . $tag . '">';
	foreach ( $get_posts as $post ) {
		$output .= '<li><a href="' . get_permalink() . '" title="' . esc_attr( get_the_title() ) . '">' . get_the_title() . '</a></li>';
	}
	$output .= '</ul>';
	wp_reset_query();
	return $output;
}
add_shortcode( 'latest_posts', 'wptuts_post_lists_sc' );
add_shortcode( 'category_posts', 'wptuts_post_lists_sc' );
add_shortcode( 'author_posts', 'wptuts_post_lists_sc' );
add_shortcode( 'future_posts', 'wptuts_post_lists_sc' );
?>

जैसा कि आप देख सकते हैं, हम 3 संभावित शॉर्टकोड एट्रिब्यूट से छुटकारा पा सकते हैं: "cat", "author" और "post_status"। आप हमेशा cases को एक्सटेंड कर सकते हैं और इस सिंगल, अपेक्षाकृत छोटे फ़ंक्शन के साथ नए शॉर्टकोड जोड़ सकते हैं।

समेटते हुए

WordPress शॉर्टकोड के प्रशंसक के रूप में, $tag वैरिएबल की यह खोज मेरे लिए रोमांचक है। ऐसा लगता है कि इस मेथड का उपयोग करने की एक बड़ी संभावना है।

इस तकनीक के बारे में आप क्या सोचते हैं? नीचे अपने कमैंट्स को पोस्ट करें और अपने विचार हमारे साथ साझा करें!