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

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

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

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

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

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

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

<?php
add_action( 'add_meta_boxes', 'cd_add_quote_meta' );
function cd_add_quote_meta()
{
	add_meta_box( 'quote-meta', __( 'Inspirational Quote' ), 'cd_quote_meta_cb', 'post', 'normal', 'high' );
}
?>

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

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

<?php
function cd_quote_meta_cb( $post )
{
	// Get values for filling in the inputs if we have them.
	$quote = get_post_meta( $post->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' );
	?>
	<p>
		<label for="quote-content">Quote</label>
		<textarea class="widefat" id="quote-content" name="_cd_quote_content"><?php echo $quote; ?></textarea>
	</p>
	<p>
		<label for="quote-author">Author</label>
		<input type="text" class="widefat" id="quote-author" name="_cd_quote_author" value="<!--?php echo $author; ?-->" />
	</p>
	<p>
		<label for="quote-date">Author Dates</label>
		<input type="text" class="widefat" id="quote-date" name="_cd_quote_date" value="<!--?php echo $date; ?-->" />
	</p>
	<?php

}
?>

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

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

<?php
add_action( 'save_post', 'cd_quote_meta_save' );
function cd_quote_meta_save( $id )
{
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

	if( !isset( $_POST['quote_nonce'] ) || !wp_verify_nonce( $_POST['quote_nonce'], 'save_quote_meta' ) ) return;

	if( !current_user_can( 'edit_post' ) ) return;

	$allowed = array(
		'p'	=> 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 قلاب خواهیم زد، که به طور پیش فرض یک متغیر را منتقل می کند: محتوای پست داده شده. در داخل تابع قلاب شده ی ما، مطمئن خواهیم شد که ما بر روی یک پست تکی کار می کنیم و اگراین طور نیست، سریعا محتوا را بر می گردانیم (بدون تغییرات).

<?php
add_filter( 'the_content', 'cd_display_quote' );
function cd_display_quote( $content )
{
	// We only want this on single posts, bail if we're not in a single post
	if( !is_single() ) return $content;
}
?>

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

<?php
add_filter( 'the_content', 'cd_display_quote' );
function cd_display_quote( $content )
{
	// We only want this on single posts, bail if we're not in a single post
	if( !is_single() ) return $content;

	// We're in the loop, so we can grab the $post variable
	global $post;

	$quote = get_post_meta( $post->ID, '_cd_quote_content', true );

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

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

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

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

<?php
add_filter( 'the_content', 'cd_display_quote' );
function cd_display_quote( $content )
{
	// We only want this on single posts, bail if we're not in a single post
	if( !is_single() ) return $content;

	// We're in the loop, so we can grab the $post variable
	global $post;

	$quote = get_post_meta( $post->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 = '<blockquote>' . $quote;
	if( !empty( $author ) )
	{
		$out .= '<p class="quote-author">-' . $author;

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

		$out .= '</p>';
	}

	$out .= '</blockquote>';
}
?>

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

<?php
add_filter( 'the_content', 'cd_display_quote' );
function cd_display_quote( $content )
{
	// We only want this on single posts, bail if we're not in a single post
	if( !is_single() ) return $content;

	// We're in the loop, so we can grab the $post variable
	global $post;

	$quote = get_post_meta( $post->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 = '<blockquote>' . $quote;
	if( !empty( $author ) )
	{
		$out .= '<p class="quote-author">-' . $author;

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

		$out .= '</p>';
	}

	$out .= '</blockquote>';
}
?>

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

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

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

<?php
add_action( 'add_meta_boxes', 'cd_add_opengraph_meta' );
function cd_add_opengraph_meta()
{
	add_meta_box( 'opengraph-meta', 'Opengraph', 'cd_opengraph_meta_cb', 'post', 'normal', 'high' );
}

function cd_opengraph_meta_cb( $post )
{
	// Grab our data to fill out the meta boxes (if it's there)
	$title = get_post_meta( $post->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' );
	?>
	<p>
		<label for="og-title">Title</label>
		<input type="text" id="og-title" class="widefat" name="_cd_opengraph_title" value="<?php echo esc_attr( $title ); ?>" />
	</p>
	<p>
		<label for="og-desc">Description</label>
		<textarea id="og-desc" class="widefat" name="_cd_opengraph_desc"><?php echo esc_attr( $desc ); ?></textarea>
	</p>
	<p>
		<label for="og-image">Image</label><br />
		<input type="text" id="og-image" style="width:300px" name="_cd_opengraph_image" value="<?php echo esc_url( $image ); ?>" />
		<input type="button" id="cdog-thickbox" value="Upload Image" /><br/>
		<em>Small, square images work best.</em>
	</p>
	<?php
}

add_action( 'save_post', 'cd_opengraph_save' );
function cd_opengraph_save( $id )
{
	// No auto saves
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;

	// Check our nonce
	if( !isset( $_POST['opengraph_nonce'] ) || !wp_verify_nonce( $_POST['opengraph_nonce'], 'save_opengraph_meta' ) ) return;

	// make sure the current user can edit the post
	if( !current_user_can( 'edit_post' ) ) return;

	// strip all html tags and esc attributes here
	if( isset( $_POST['_cd_opengraph_title'] ) )
		update_post_meta( $id, '_cd_opengraph_title', esc_attr( strip_tags( $_POST['_cd_opengraph_title'] ) ) );

	// same as above
	if( isset( $_POST['_cd_opengraph_desc'] ) )
		update_post_meta( $id, '_cd_opengraph_desc', esc_attr( strip_tags( $_POST['_cd_opengraph_desc'] ) ) );

	// make sure we get a clean url here with esc_url
	if( isset( $_POST['_cd_opengraph_image'] ) )
		update_post_meta( $id, '_cd_opengraph_image', esc_url( $_POST['_cd_opengraph_image'], array( 'http' ) ) );
}

?>

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

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

<?php
add_action( 'admin_print_scripts-post.php', 'cd_opengraph_enqueue' );
add_action( 'admin_print_scripts-post-new.php', 'cd_opengraph_enqueue' );
function cd_opengraph_enqueue()
{
	wp_enqueue_script( 'cdog-thickbox', plugin_dir_url( __FILE__ ) . 'thickbox-hijack.js', array(), NULL );
}
?>

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

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() بازیابی می کنیم.

<?php
add_action( 'wp_head', 'cd_opengraph_display' );
function cd_opengraph_display()
{
	// If this isn't a single post, bail
	if( !is_single() ) return;

	global $post, $wp_query;
	// if $post is empty, get the queired object
	if( empty( $post ) ) $post = $wp_query->get_queried_object();

}
?>

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

<?php
add_action( 'wp_head', 'cd_opengraph_display' );
function cd_opengraph_display()
{
	// If this isn't a single post, bail
	if( !is_single() ) return;

	global $post, $wp_query;
	// if $post is empty, get the queired object
	if( empty( $post ) ) $post = $wp_query->get_queried_object();

	$values = get_post_custom( $post->ID );
	if( isset( $values['_cd_opengraph_title'] ) )
		echo '<meta name="og:title" value="' . esc_attr( $values['_cd_opengraph_title'][0] ) . '" />' ."\n";

	if( isset( $values['_cd_opengraph_desc'] ) )
		echo '<meta name="og:description" value="' . esc_attr( $values['_cd_opengraph_desc'][0] ) . '" />' . "\n";

	if( isset( $values['_cd_opengraph_image'] ) )
		echo '<meta name="og:image" value="' . esc_url( $values['_cd_opengraph_image'][0] ) . '" />' . "\n";

}
?>

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

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

<?php
define( 'CDSB_URL' , plugin_dir_url( __FILE__ ) );

add_action( 'admin_init', 'cd_test_2011' );
function cd_test_2011()
{
	if( get_current_theme() != 'Twenty Eleven' ) deactivate_plugins( __FILE__ );
}
?>

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

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

<?php
add_action( 'add_meta_boxes', 'cd_layout_meta' );
function cd_layout_meta()
{
	add_meta_box( 'cd-sidebar-pos', 'Page Layout', 'cd_layout_meta_cb', 'page', 'normal', 'high' );
}

function cd_layout_meta_cb( $post )
{
	$layout = get_post_meta( $post->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' );
	?>
	<fieldset class="clearfix">
	<p>Please note: this only works if you've selected "Sidebar Template" in the Page Attributes section</p>
	<div class="cd-layout">
		<input type="radio" id="sidebar-default" name="_cd_post_layout" value="default" <?php checked( $layout, 'default' ); ?> />
		<label for="sidebar-default">
			<img src="<?php echo CDSB_URL ?>default.png" alt="Use the Default Sidebar" />
			<span>Use theme default</span>
		</label>
	</div>
	<div class="cd-layout">
		<input type="radio" id="sidebar-left" name="_cd_post_layout" value="left" <?php checked( $layout, 'left' ); ?> />
		<label for="sidebar-left">
			<img src="<?php echo $dir; ?>/inc/images/sidebar-content.png" alt="sidebar then content" />
			<span>Sidebar on the left</span>
		</label>
	</div>
	<div class="cd-layout">
		<input type="radio" id="sidebar-right" name="_cd_post_layout" value="right" <?php checked( $layout, 'right' ); ?> />
		<label for="sidebar-right">
			<img src="<?php echo $dir; ?>/inc/images/content-sidebar.png" alt="content then sidebar" />
			<span>Sidebar on the right</span>
		</label>
	</div>
	</fieldset>
	<?php
}

add_action( 'save_post', 'cd_layout_save' );
function cd_layout_save( $id )
{
	if( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) return;
	if( !isset( $_POST['layout_nonce'] ) || !wp_verify_nonce( $_POST['layout_nonce'], 'save_post_layout' ) ) return;
	if( !current_user_can( 'edit_page' ) ) return;

	if( isset( $_POST['_cd_post_layout'] ) )
		update_post_meta( $id, '_cd_post_layout', esc_attr( strip_tags( $_POST['_cd_post_layout'] ) ) );
}
?>

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

<?php
add_action( 'admin_print_styles-post.php', 'cd_layout_enqueue' );
add_action( 'admin_print_styles-post-new.php', 'cd_layout_enqueue' );
function cd_layout_enqueue()
{
	wp_enqueue_style( 'cdlayout-style', CDSB_URL . 'style.css', array(), NULL, 'all' );
}
?>

و حالا 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، شماره ی آرگومان برای ارسال به تابع ما است.

<?php
add_filter( 'body_class', 'cd_change_layout', 99, 1 );
function cd_change_layout( $classes )
{
	// If this isn't a page, or we're not using the sidebar template, get out of here
	if( !is_page() || !is_page_template( 'sidebar-page.php' ) ) return $classes;

	// make sure we have the $post object (the current item )
	global $post;
	if( empty( $post ) ) $post = get_queried_object();
}
?>

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

<?php
add_filter( 'body_class', 'cd_change_layout', 99, 1 );
function cd_change_layout( $classes )
{
	// If this isn't a page, or we're not using the sidebar template, get out of here
	if( !is_page() || !is_page_template( 'sidebar-page.php' ) ) return $classes;

	// make sure we have the $post object (eg. the current item )
	global $post;
	if( empty( $post ) ) $post = get_queried_object();

	$layout = get_post_meta( $post->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 را تغییر دهیم. اول گزینه های دوهزار و یازده را خواهیم گرفت، سپس مطمئن خواهیم شد که گزینه های طرح تم بر روی یک ستون تنظیم نشده است. اگر تم بر روی یک ستون تنظیم شده باشد، متا باکس را اضافه نخواهیم کرد.

<?php
add_action( 'add_meta_boxes', 'cd_layout_meta' );
function cd_layout_meta()
{
	$opts = get_option( 'twentyeleven_theme_options' );
	if( $opts['theme_layout'] != 'content' )
		add_meta_box( 'cd-sidebar-pos', 'Page Layout', 'cd_layout_meta_cb', 'page', 'normal', 'high' );
}
?>

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

 

نتیجه گیری

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