تعامل با سفارشی ساز تم وردپرس

در بخش 1 مجموعه سفارشی ساز قالب WordPress اشاره کردم که برای تعامل با Theme Customizer باید شی $wp_customize را بارگیری کنید، که نمونه ای از WP_Customize_Manager< است. /strong> کلاس. برای انجام این کار، باید از قلاب اقدام customize_register استفاده کنید:

add_action( 'customize_register', 'my_theme_customize_register' );
تابع my_theme_customize_register($wp_customize) {

	// تعامل با شی $wp_customize

}

می توانید این کد را در functions.php طرح زمینه خود یا فایلی که از آن موجود است قرار دهید.

افزودن یا حذف عناصر سفارشی ساز تم (بخش ها، تنظیمات و کنترل ها)

پس از بارگیری شی $wp_customize، می‌توانید از هر یک از روش‌های آن برای افزودن، دریافت یا حذف تنظیمات، کنترل‌ها و بخش‌ها در آن استفاده کنید (add_setting، get_setting، remove_setting، add_control… شما به این نکته پی می‌برید. ).

بنابراین، اگر می‌خواهید یک بخش، کنترل یا تنظیم را دریافت یا حذف کنید، تنها چیزی که نیاز دارید شناسه آن است. این خط بخش Colors را حذف می کند (آن را در داخل تابع my_theme_customize_register از اولین قطعه کد قرار می دهد):

$wp_customize->remove_section( 'colors' );

افزودن بخش، کنترل یا تنظیم کمی متفاوت است زیرا به پارامترهای بیشتری نیاز دارد. من به دو دلیل در اینجا همه آنها را مرور نمی کنم:

1. هدف این مجموعه واقعاً این نیست، ما یک دیگ بخار سفارشی‌کننده تم ایجاد می‌کنیم که می‌توانید در عوض آن را در قالب خود قرار دهید
2. الکس منسفیلد قبلاً آن را در هیولای 6000 کلمه ای آموزش سفارشی سازی تم< /a> که هر توسعه‌دهنده پوسته وردپرس باید آن را بخواند و سپس در مورد آن توییت کند (به طور جدی، اگر قبلاً این کار را نکرده‌اید، اکنون آن را بخوانید).

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

• یک بخش جدید با عنوان “طرح بندی”
• تنظیم جدیدی که طرح‌بندی طرح زمینه شما را ذخیره می‌کند
• یک رادیو کنترل جدید با دو گزینه – نوار کناری در سمت چپ و نوار کناری در سمت راست

اولین چیزی که باید به Theme Customizer اضافه شود بخش “Layout” است:

$wp_customize->add_section(
	// شناسه
	"بخش_طرح بندی"،
	// آرایه آرگومان ها
	آرایه(
		'title' => __( 'Layout'، 'my_theme')
		'capability' => 'edit_theme_options',
		'description' => __( 'به شما امکان می‌دهد طرح‌بندی تم خود را ویرایش کنید.', 'my_theme' )
	)
);

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

$wp_customize->add_setting(
	// شناسه
	'my_theme_settings[layout_setting]'،
	// آرایه آرگومان ها
	آرایه(
		'default' => 'نوار سمت راست',
		'type' => 'گزینه'
	)
)
$wp_customize->add_control(
	// شناسه
	'layout_control'،
	// آرایه آرگومان ها
	آرایه(
		'type' => 'رادیو',
		'label' => __( 'طرح تم'، 'my_theme')،
		'section' => 'layout_section',
		'انتخابها' => آرایه(
			'left-sidebar' => __( 'Lef sidebar', 'my_theme' ),
			'right-sidebar' => __( 'Right sidebar', 'my_theme' )
		)
		// این مورد آخر باید با شناسه تنظیم از بالا مطابقت داشته باشد
		'settings' => 'my_theme_settings[layout_setting]'
	)
);

با فرض خواندن آموزش الکس و/یا صفحات Codex، تنها یک پارامتر در آرایه آرگومان های add_setting وجود دارد – “نوع” – که من می خواهم روی آن تمرکز کنم. شما در اینجا دو امکان دارید، ‘option’ و ‘theme_mod’ و می توانید آنها را با استفاده از get_option و get_theme_mod، به ترتیب. من همیشه از «گزینه» استفاده می‌کنم زیرا به شما امکان می‌دهد مقادیر تنظیمات طرح زمینه خود را با دادن شناسه‌هایی مانند my_theme_settings[setting_1]، my_theme_settings[setting_2] سریال‌سازی کنید. مقادیر به عنوان یک ورودی پایگاه داده در جدول wp_options شما ذخیره می شود.

و در نهایت، پس از اینکه آن دو قطعه کد را برای عملکردی که به قلاب اقدام customize_register (اولین قطعه کد در این پست) قلاب کرده بودید اضافه کردید، سفارشی ساز تم سفارشی شده است:

بخش جدید به سفارشی ساز تم اضافه شد

استفاده از مقادیر تنظیمات سفارشی ساز تم در طرح زمینه

پس از اینکه به کاربران خود توانایی ذخیره این تنظیم را دادید، می‌توانید مقدار آن را بگیرید، به قلاب فیلتر body_class متصل کنید و آن را به آرایه‌ای از کلاس‌های بدن موجود اضافه کنید:

add_filter( 'body_class', 'my_theme_body_classes' );
تابع my_theme_body_classes( $classes ) {

	/*
	 * از آنجایی که ما از "option" در آرایه آرگومان های add_setting استفاده کردیم
	 * با استفاده از تابع get_option مقدار را بازیابی می کنیم
	 */
	$my_theme_settings = get_option( 'my_theme_settings' );	
	
	$classes[] = $my_theme_settings['layout_setting'];
	
	بازگشت $کلاس ها;

}

با این کار یا نوار کناری چپ . یا نوار کناری راست . به آرایه ای از کلاس های بدنه در طرح زمینه شما اضافه می شود. با استفاده از این دو کلاس در فایل style.css theme خود می توانید دو طرح بندی متفاوت ایجاد کنید. به عنوان مثال:

/* نوار کناری سمت راست طرح پیش‌فرض است */
#محتوا {
	شناور به سمت چپ؛
	عرض: 60%;
}
#نوار کناری {
	شناور: راست
	عرض: 30%؛
}

/* استفاده از کلاس .left-sidebar برای لغو طرح بندی پیش فرض */
نوار کناری سمت چپ #content {
	شناور: راست
}
نوار کناری سمت چپ #نوار کناری {
	شناور به سمت چپ؛
}

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

خلاصه و مطالعه بیشتر

نسخه TL;DR این پست چیزی شبیه به این است: می توانید شی $wp_customize را دریافت کنید و سپس چیزی (بخش، تنظیم یا کنترل) را به آن اضافه کنید یا از آن حذف کنید. همه چیز دیگر به پارامترهای تنظیمات خلاصه می شود.

قسمت سوم جایی است که این مجموعه جالب می شود زیرا ما شروع به خودکارسازی کل فرآیند و کار بر روی Theme Customizer Boilerplate می کنیم که می توانید آن را در قالب خود قرار دهید و بلافاصله شروع به استفاده از آن کنید. با ما همراه باشید!