سه روش استفاده از MetaBox ها (قسمت دوم)

دانلود نمونه کد

قبلا چگونگی ایجاد متا باکس های سفارشی در داخل ویرایشگر پست و ذخیره ی اطلاعات شما را در آنها معرفی کردیم. اما کاربردهای عملی این روش چه چیزهایی هستند؟ امروز، هدف این است که به سه مثال جهان واقعی استفاده از متا باکس های سفارشی برای بهبود صفحه ی پست ها بپردازیم.
در مقاله ی معرفی، شما همه چیز را درباره ی چگونگی ساخت متا باکس ها و ذخیره یا تمیز کردن اطلاعاتی که به آنها وارد می شود آموختید. اما زمان آن فرا رسیده که به فراتر از اطلاعات مفهومی سفر کنیم و متا باکس ها را به کار بگیریم.

مثال 1. اضافه کردن یک نشان نقل قول به بالای هر پست

سناریو: شما یک وب سایتی دارید که در درجه ی اول محتوای الهام بخش منتشر می کند. یکی از کارهایی که شما باید به طور مداوم انجام می دهید، قرار دادن نشان نقل قول در بالای هر پست است. برای جدا کردن این نقل قول ها از محتوا، باید آنها را به یک متا باکس سفارشی منتقل کنید.
در مقاله ی “چگونگی ایجاد متا باکس سفارشی در وردپرس“، آموخته که چطور متا باکس ها را اجرا کنید، اما در اینجا باز هم یک بررسی سریع انجام خواهیم داد.

1. اضافه کردن متا باکس

یک تابع را بهadd_meta_boxes قلاب کنید که شامل یک تماس با تابع add_meta_box است.

2. خروجی گرفتن از متا باکس

یک تابع با نام مشابه $callback مشخص شده در add_meta_box ، ایجاد کنید. این همان بخشی است که در واقع محتویات متا باکس را نمایش می دهد.

ID, '_cd_quote_content', true );
	$author = get_post_meta( $post->ID, '_cd_quote_author', true );
	$date = get_post_meta( $post->ID, '_cd_quote_date', true );

	// Nonce to verify intention later
	wp_nonce_field( 'save_quote_meta', 'quote_nonce' );
	?>
	

		Quote
		<?php echo $quote; ?>
	
	

		Author
		
	
	

		Author Dates
		
	
	

3. ذخیره سازی داده ها

یک تابع را به save_post قلاب کنید که در ابتدا به تایید مجوزها و مقصودها می پردازد و سپس اطلاعلت را ذخیره و پاک می کند.

 array()
	);

	if( isset( $_POST['_cd_quote_content'] ) )
		update_post_meta( $id, '_cd_quote_content', wp_kses( $_POST['_cd_quote_content'], $allowed ) );

	if( isset( $_POST['_cd_quote_author'] ) )
		update_post_meta( $id, '_cd_quote_author', esc_attr( strip_tags( $_POST['_cd_quote_author'] ) ) );

	if( isset( $_POST['_cd_quote_date'] ) )
		update_post_meta( $id, '_cd_quote_date', esc_attr( strip_tags( $_POST['_cd_quote_date'] ) ) );

}
?>

حالا به بخش سرگرم کننده می پردازیم: استفاده از اطلاعات

ما می توانستیم اطلاعات ذخیره شده در متا باکس ها را با ویرایش کردن فایل های قالب تم مان استفاده کنیم. اما این کار خیلی آسان است. برای اینکه نقل قول هایمان را مطابق اندازه و مقیاس نگه داریم (یک فایل افزونه)، از قلابهای فیلتر ، بخشی از API افزونه استفاده می کنیم. قلابهای فیلتر با اقدامات کمی متفاوت هستند. هنگامی که شما به یک فیلتر قلاب میزنید، بیشتر وقتها هدف تعیین چگونگی ظاهر شدن یک قطعه از محتوا در یک صفحه است. ما در اینجا قصد داریم به the_content قلاب بزنیم، و اگر در یک صفحه ی پست تکی هستیم که یک نقل قول دارد، آن را به بالا اضافه می کنیم.
راه دیگر قرار دادن اقدامات در مقابل قلاب فیلتر این است که شما همه چیز را در اقدامات echo کنید (به عنوان مثال: به wp_head، در بخش 2 مراجعه کنید)، اما با فیلتر شما یک یا چند متغیر را وراد می کنید، آنها را تغییر می دهید، سپس آنها را return می کنید.
برای نمایش نقل قولهایمان، به the_content قلاب خواهیم زد، که به طور پیش فرض یک متغیر را منتقل می کند: محتوای پست داده شده. در داخل تابع قلاب شده ی ما، مطمئن خواهیم شد که ما بر روی یک پست تکی کار می کنیم و اگراین طور نیست، سریعا محتوا را بر می گردانیم (بدون تغییرات).

در قدم بعد، متغیر $post را دریافت می کنیم. از آنجا که در حلقه هستیم، فقط global $post را فرا خوانی می کنیم. سپس نقل قول هایمان را دریافت می کنیم، اگر هیچ مقداری برنگشت، ما می دانیم که هیچ نقل قولی وارد نشده است و یکبار دیگر محتوا را بدون تغییر بر می گردانیم.

ID, '_cd_quote_content', true );

	// Bail if we don't have a quote;
	if( empty( $quote ) ) return $content;
}
?>

حالا که مطمئن هستیم که بر روی یک پست تکی هستیم و در واقع یک نقل قول داریم، هم چیز را با هم قرار می دهیم. ابتدا نویسنده و تاریخ خود را از طریقget_post_meta () فرا می خوانیم، سپس می توانیم شروع به ساختن یک رشته در متغیر $out بکنیم. ابتدا ما یک

و نقل قولمان را اضافه می کنیم. سپس بررسی می کنیم که آیا بخش نویسنده پر شده است یا نه. اگر این اتفاق افتاده بود، یک پاراگراف برای نویسنده شروع خواهیم کرد و بررسی می کنیم که آیا تاریخ وجود دارد یا نه اگر هست آن را نیز به پاراگراف اضافه می کنیم. در نهایت، تگ بستن

را اضافه می کنیم.

ID, '_cd_quote_content', true );

	// Bail if we don't have a quote;
	if( empty( $quote ) ) return $content;

	// Assemble our quote
	$author = get_post_meta( $post->ID, '_cd_quote_author', true );
	$date = get_post_meta( $post->ID, '_cd_quote_date', true );

	$out = '
' . $quote;
	if( !empty( $author ) )
	{
		$out .= '
-' . $author;

		if( !empty( $date ) )
			$out .= ' (' . $date . ')';

		$out .= '
';
	}

	$out .= '
';
}
?>

حالا به مهم ترین مرحله می پردازیم: بازگرداندن ترکیبی از رشته ی تازه ساخته شده ی $out ما که شامل نقل قول و محتوای اصلی موجود در $content است.

ID, '_cd_quote_content', true );

	// Bail if we don't have a quote;
	if( empty( $quote ) ) return $content;

	// Assemble our quote
	$author = get_post_meta( $post->ID, '_cd_quote_author', true );
	$date = get_post_meta( $post->ID, '_cd_quote_date', true );

	$out = '
' . $quote;
	if( !empty( $author ) )
	{
		$out .= '
-' . $author;

		if( !empty( $date ) )
			$out .= ' (' . $date . ')';

		$out .= '
';
	}

	$out .= '
';
}
?>

حالا می توانید نتایج را ببینید.

مثال 2: اضافه کردن تگ نمودارهای باز(Open Graph)

سناریو: شما یک جامعه ی فعال از خوانندگان دارید که به طور منظم مقالات شما را در فیس بوک به اشتراک می گذارند. این مسئله بسیار خوب است، و این کار ترافیک زیادی را به راه شما می افزاید. اما شما بعدا متوجه می شوید که تصاویر ارائه شده از مقالات شما در فیس بوک خیلی ایده آل نیست. شما نیز از عنوانهای پست های خود که در حال بیرون آمدن هستند راضی نیستید. راه حل آن، اضافه کردن متا تگ های نمودار باز برای کنترل چگونگی نمایش مقالات شما است. به جای اینکه اجازه دهید که این مشکلات به خودی خود حل شوند، می توانید به وسیله ی اجرا کردن متا باکس سفارشی این مشکل را حل کنید.
ایجاد متا باکس
شما احتمالا تا الان این کار را انجام داده اید، اما در اینجا یک کد ارائه داده ایم که می توانید به راحتی این کار ار به وسیله ی ان انجام دهید.

ID, '_cd_opengraph_title', true );
	$desc = get_post_meta( $post->ID, '_cd_opengraph_desc', true );
	$image = get_post_meta( $post->ID, '_cd_opengraph_image', true );

	// Add a nonce field
	wp_nonce_field( 'save_opengraph_meta', 'opengraph_nonce' );
	?>
	

		Title
		
	
	

		Description
		<?php echo esc_attr( $desc ); ?>
	
	

		Image

		
		

		Small, square images work best.
	
	

اضافه کردن چند جاوا اسکریپت

برای اینکه دکمه ی ” Upload Image” کار کند، مجبوریم که چند جاوا اسکریپت اضافه کنیم که سازه را در بارگذارنده ی وردپرس می دزدد. این به این معنی است که ما در عین حال قصد استفاده از یک قلاب عملکردی دیگر را نیز داریم. این دفعه این قلاب admin_print_script-{$page} است.
هنگام اضافه کردن اسکریپت ها و یا سبک ها به بخش مدیریت وردپرس، یک قانون طلایی وجود دارد: فقط زمانی که اسکریپت ها و یا سبک ها را لازم دارید، آنها را اضافه کنید. این کار افزونه ی شما را از شکستن چیز دیگری به طور تصادفی ممانعت می کند، و admin_print_scripts-{$page} به شما اجازه می دهد که فقط اسکریپت وارد کنید (از طریق تابع wp_enqueue_script ) مشخصا فقط در specified . در این صورت، ما باید اسکریپت مان را در صفحه ی post.php and post-new.php وارد کنیم. این امر مستلزم قلاب کردن یک تابع به هر دوی آنها است.

و حالا خود جاوا اسکریپت:

jQuery(document).ready(function()
{
	var ogfield = null;

	jQuery( '#cdog-thickbox' ).click(function()
	{
		ogfield = jQuery( 'input#og-image' ).attr( 'name' );
		tb_show( '', 'media-upload.php?type=image&TB_iframe=true' );
		return false;
	});

	window.send_to_editor_old = window.send_to_editor;

	window.send_to_editor = function( html )
	{
		var ogimg;

		if( ogfield != null )
		{
			ogimg = jQuery( 'img', html ).attr( 'src' );
			jQuery( 'input#og-image' ).val( ogimg );
			tb_remove();
			ogfield = null;
		}
		else
		{
			window.send_to_editor_old( html );
		}

	};
});

ابتدا مطمئن می شویم که بارگذارنده یthickbox در هنگام کلیک کردن بر روی دکمه بالا میآید، و یک متغیر راه اندازی می کنیم که به وردپرس بگوید که این دکمه ی ما بود که کلیک شده بود. سپس تابعwindow.send_to_editor را با یک نام جدید ذخیره می کنیم. این تابعی است که در واقع تصویر HTML را در بخش ویرایش پست وارد می کند. قصد داریم این تابع را برباییم که آن را بر روی صفت Src در بخش فرم خودمان ارسال کنیم، اما همه ی این کارها در صورتی عملی می شود کهthickbox توسط دکمه بالا بیاید.

اضافه کردن تگ نمودار های باز

قصد داریم که به عملکردwp_head قلاب بزنیم تا بتوانیم تگ های متای خودمان را در قسمتاضافه کنیم. اول مطمئن خواهیم شد که شوید که در صفحه ی پست تکی هستیم، و سپس متغیر $post را راه اندازی می کنیم. متغییر $post نباید در این مرحله خالی باشد زیرا که وردپرس قبلا تصمیم گرفته است که این از چه نوع چیزهایی باید خروجی بگیرد و چه نوع فایل های قالب نیاز است که مورد استفاده قرار گیرد. اما اگر این طور شد، پست را به وسیله ی get_queried_object() بازیابی می کنیم.

get_queried_object();

}
?>

در مرحله ی بعد می توانیم به سراغ هر یک از متغیرهای نمودارهای باز برویم و همه چیز را با get_post_custom() می گیریم، اگر آنجا وجود داشته باشند، و آن را در بخش سربرگ صفحه منعکس می کنیم.

get_queried_object();

	$values = get_post_custom( $post->ID );
	if( isset( $values['_cd_opengraph_title'] ) )
		echo '' ."n";

	if( isset( $values['_cd_opengraph_desc'] ) )
		echo '' . "n";

	if( isset( $values['_cd_opengraph_image'] ) )
		echo '' . "n";

}
?>

مثال 3. تغییر دادن پوسته دوهزار و یازده در یک چشم به هم زدن

سناریو: شما به شدت به نوار کناری قالب دوهزار و یازده وابسته هستید. اما علاقه مندید که قادر به جابجا کردن ستونهای فرعی چپ و راست هر صفحه باشید.
کد زیر چیزی است که بهتر است در پوشه ی توابع یک تم باقی بماند. این را گفتیم زیرا که در اینجا از یک افزونه استفاده می کنیم، می توانیم به init قلاب بزنیم و به وسیله ی تابع بررسی کنیم تا مطمئن شویم که تم فعلی ما تم دوهزار و یازده است. اگر نیست، افزونه را غیرفعال خواهیم کرد. به هر حال در ابتدا، یک ثابت تعریف خواهیم کرد که حاوی URL فهرستی است که افزونه ی ما در آن ساکن است.

اضافه کردن متا باکس

روال این کار مانند قبل است: اضافه کردن متا باکس ها، خروجی گرفتن از آنها و ذخیره کردن اطلاعات. به هر حال، این بار قصد داریم که متا باکس ها را بر روی صفحه ی ویرایش برای هر صفحه نمایش دهیم. همچنین قصد استفاده از یک تابع وردپرس بسیار خوب به به نام get_template_directory_uri را داریم، که یک رشته ی حاویURI فهرست برای تم فعلی را باز می گرداند. این تابع را برای قرض گرفتن چند عکس که دوهزار و یازده بر روی صفحه ی گزینه های تم خود استفاده می کند، به کار می بریم. همچنین ثابت هایی را که قبلا تعریف کردیم، برای اضافه کردن یک تصویر که متعلق به خودمان است ، به کار می گیریم.

ID, '_cd_post_layout', true );

	// Set our layout variable, even on new posts
	if( empty( $layout ) ) $layout = 'default';

	// Theme directory for borrowing 2011 images
	$dir = get_template_directory_uri();
	wp_nonce_field( 'save_post_layout', 'layout_nonce' );
	?>
	

	
Please note: this only works if you've selected "Sidebar Template" in the Page Attributes section
	

		 />
		
			
			Use theme default
		
	
	

		 />
		
			
			Sidebar on the left
		
	
	

		 />
		
			
			Sidebar on the right
		
	
	
	

برای اینکه کمی متا باکس های خود را زیباتر کنیم، نیاز داریم که شیوه نامه های خودمان را هم اضافه کنیم. admin_print_scripts-{$page} را از سناریوی دوم در بالا به یاد دارید؟ admin_print_styles-{$page} یک تابع مشابه به آن است که همانطور که از نامش پیداست، به شما اجازه می دهد تا مدیریت وردپرس در صفحات خاص شیوه نامه اضافه کنید. ما باید برای post.php and post-new.php به این تابع قلاب بزنیم. ما همچنین از wp_enqueue_style(); استفاده خواهیم کرد، که کار آن مانند wp_enqueue_script() خواهد بود که در مثال دوم در بالا از آن استفاده کردیم.

و حالا CSS ها.

div.cd-layout {
	width:200px;
	float:left;
}

div.cd-layout input {
	display:block;
}

#cd-sidebar-pos .clearfix:after {
	clear: both;
	content: ' ';
	display: block;
	font-size: 0;
	line-height: 0;
	visibility: hidden;
	width: 0;
	height: 0;

}

#cd-sidebar-pos label span {
	display:block;
	margin-top:5px;
}

کنکاش در دوهزار و یازده

دوهزار و یازده موفعیت دهی به نوار کناری خود را به وسیله قلاب کردن به فیلتری به نام body_class به انجام می رساند. این بخشی از تابعی به نام است، که اگر قبلا یک تم طراحی کرده باشید، احتمالا از آن استفاده کرده اید. اگر طرح پیش فرض دو ستون است، دوهزار و یازده یکی از دو مورد اضافی را به body_class اضافه می کند: نوار کناری سمت راست یا نوار کناری سمت چپ. شما می توانید در پوشه ی inc تم و در پوشه ی theme-options.php کد را برای این ببینید.
قرار است که کد خود ما نیز به body_class قلاب شود. اول، مطمئن خواهیم شد که در یک صفحه هستیم، و صفحه نیز از Sidebar Template استفاده می کند. سپس متغیر $post را بدست خواهیم آورد و یا آن را در صورت خالی بودن تنظیم خواهیم کرد. به دو آرگومان اضافی برای add_filter توجه داشته باشید. 99 در اولویت است. می خواهیم که این یکی در نهایت اجرا شود، بنابراین از یک عدد بالاتر استفاده می کنیم. 1، شماره ی آرگومان برای ارسال به تابع ما است.

body_class، آرایه های تمام آیتم هایی را که به تابع خروجی body_class() میروند، ارسال می کند. از اینجا، ما فقط نیاز به دریافت مقادیر متا های خود داریم. اگر مقدار ما ‘right’ است، در آرایه های body class به دنبال “left-sidebar” می گردیم. اگر آن در آنجا وجود دارد، آن را unset خواهیم کرد و با “right-sidebar” جایگزین می کنیم. اگر مقدار ما left است، بر عکس عمل می کنیم.

ID, '_cd_post_layout', true );

	// if we're using the right layout, add
	if( $layout == 'right' )
	{
		$key = array_search( 'left-sidebar', $classes );
		if( $key )
		{
			unset( $classes[$key] );
			$classes[] = 'right-sidebar';
		}
	}
	elseif ( $layout = 'left' )
	{
		$key = array_search( 'right-sidebar', $classes );
		if( $key )
		{
			unset( $classes[$key] );
			$classes[] = 'left-sidebar';
		}
	}

	return $classes;

}
?>

این کد بالایی کار خواهد کرد، اما ما نیز کمی جزئیات ارائه خواهیم داد. اگر گزینه های تم دوهزار و یازده یک کاربر اتفاقا بر روی نمایش یک ستون تنظیم شده باشد، هیچ یک از گزینه های موجود در متا باکس ما کار نخواهد کرد. پس اجازه دهید کمی add_meta_box call را تغییر دهیم. اول گزینه های دوهزار و یازده را خواهیم گرفت، سپس مطمئن خواهیم شد که گزینه های طرح تم بر روی یک ستون تنظیم نشده است. اگر تم بر روی یک ستون تنظیم شده باشد، متا باکس را اضافه نخواهیم کرد.

دانلود نمونه کد

نتیجه گیری

همانطور که ممکن است تصور کنید، کاربردهای بسیار زیاد دیگری برای متا باکس های سفارشی وجود دارد… این ها تنها چند مثال عملی برای به کار انداختن ذهن شما است. هنگامی که اینها با انواع پست سفارشی ترکیب شوند، به شما قدرت ایجاد صفحه های ویرایشی بسیار سفارشی را خواهند داد. با این حال، قدرت واقعی متا باکس های سفارشی در این امر نهفته است که طراحان تم و توسعه دهندگان افزونه ها چگونه می توانند رابط های کاربر پسند برای پست ها یا صفحه های تنظیمات سطوح، ایجاد کنند.
ما امیدواریم که شما از این آموزش لذت برده باشید!
منتظر انتشار قسمت سوم از طریق همیار وردپرس باشید …

سایتت رو خیلی راحت دوزبانه کن