صفحه اصلی / آموزش طراحی سایت / ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی

ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی

ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی
ساخت پنل تنظیمات قالب وردپرس

سلام و درود. خب خیلی وقت بود که روی بحث برنامه‌نویسی و آموزش طراحی سایت فعالیت زیادی نداشتیم. پس تصمیم گرفتم در این مقاله یک بحث بسیار داغ که ساخت پنل تنظیمات برای قالب وردپرس هست را به شما عزیزان آموزش دهم.

تا به حال شده یک قالب وردپرسی حرفه‌ای مثل قالب وردپرس آوادا یا قالب وردپرس اهورا نصب کنید و ببینید که این قالب‌ها دارای یک پنل تنظیمات قالب هستند و می‌توانید اکثر تنظیمات سایت خود را از طریق آن‌ها انجام دهید.

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

فهرست محتوای این مقاله

بهترین روش ساخت پنل تنظیمات قالب

مگر روش‌های مختلفی برای ساخت پنل تنظیمات قالب داریم؟ بله قطعا! قالب‌هایی که آوادا یا انفولد از روش ساخت پنل تنظیمات اختصاصی خود استفاده می‌کنند. روش دیگری که ما در قالب‌هایی مثل اهورا و آریایی استفاده می‌کنیم، استفاده از Customizer اصلی وردپرس هست. نسخه در نسخه ۳٫۴ قابلیت جدیدی به نام Customization API ارائه کرد. با استفاده از این بخش می‌توانید به راحتی یک پنل مدیریت عالی برای سایت خود بسازید.

در واقع پنل قالب‌هایی که از پنل مدیریت اختصاصی استفاده می‌کنند به این شکل هستند:

ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی
نمونه پنل تنظیمات اختصاصی

و پنل قالب‌هایی که از Customization API استفاده می‌کنند به این شکل:

ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی
نمونه پنل تنظیمات با Customization API

سوال: چرا قالب‌های معروف مثل آوادا و بی‌تم از پنل اختصاصی استفاده می‌کنند؟

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

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

ساخت پنل تنظیمات قالب وردپرس

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

در ابتدا باید یک تابع بسازید و آن را به customize_register قلاب کنید.

پس کد زیر را در functions.php قالب خود اضافه کنید:

function mihanwpcregister( $wp_customize ) {
   // تمام کدها اینجا قرار میگیرند
}
add_action( 'customize_register', 'mihanwpcregister' );

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

از این پس تمام کدها را باید در تابعی که ساختیم اضافه کنیم. یعنی جایی که نوشته شده “// تمام کدها اینجا قرار میگیرند”.

ساخت یک بخش برای تنظیمات

حالا بیایید یک بخش تنظیمات به بخش سفارشی سازی اضافه کنیم تا وقتی روی آن کلیک کردیم، آیتم‌های تنظیمات مربوط به آن بخش نمایش داده شود.

$wp_customize->add_section( 'logostyle' , array(
    'title'      => __( 'لوگو و استایل', 'mytheme' ),
    'priority'   => 1,
) );

فراموش نکنید کد بالا باید در تابع قرار بگیرد. حالا بخش نمایش > سفارشی سازی را باز کنید. بخشی خالی به نام لوگو و استایل اضافه شده. اگر این بخش را نمی‌بینید نگران نباشید. دلیل این هست که هنوز گزینه‌ای به این بخش اضافه نشده.

ساخت پنل تنظیمات قالب وردپرس با بخش سفارشی‌سازی
بخش جدید اضافه شده به پنل تنظیمات قالب

اضافه کردن تنظیمات به پنل قالب

برای اضافه کردن تنظیم خاص ابتدا باید یک کانفیگ جدید برای تنظیم مورد نظر بسازیم. به این شکل:

$wp_customize->add_setting( 'header_textcolor' , array(
    'default'   => '#000000',
    'transport' => 'refresh',
) );

مثلا تنظیم بالا یک گزینه هست برای تنظیم کردن رنگ متن هدر. حالا باید یک کنترل کننده برای این تنظیم اضافه کنیم. پس کد زیر را اضافه می‌کنیم:

$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
	'label'      => __( 'Header Color', 'mytheme' ),
	'section'    => 'your_section_id',
	'settings'   => 'your_setting_id',
) ) );

در کد بالا باید به جای your_section_id از logostyle استفاده کنیم تا تنظیم در بخش لوگو و استایل نمایش داده شود. همچنین به جای your_setting_id باید از header_textcolor استفاده کنیم.

به همین راحتی می‌توانید بخش‌های نامحدود و گزینه‌های نامحدودی را به پنل مدیریت قالب سایت خود اضافه کنید.

در کل شما باید کدی به این شکل در بخش توابع سایت خود داشته باشید:

function mihanwpcregister( $wp_customize ) {
   $wp_customize->add_section( 'logostyle' , array(
    'title'      => __( 'لوگو و استایل', 'mytheme' ),
    'priority'   => 1,
) );
$wp_customize->add_setting( 'header_textcolor' , array(
    'default'   => '#000000',
    'transport' => 'refresh',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'link_color', array(
	'label'      => __( 'Header Color', 'mytheme' ),
	'section'    => 'logostyle',
	'settings'   => 'header_textcolor',
) ) );
}
add_action( 'customize_register', 'mihanwpcregister' );

نمایش تنظیمات در بخش‌های مختلف قالب

حالا باید مقادیری که کاربر در بخش تنظیمات قالب اضافه کرده را در بخش‌های مختلف قالب سایت وردپرسی نمایش دهیم.

برای نمایش داده تنظیمات در بخش‌های مختلف قالب کافیست از کد زیر استفاده کنید:

<?php echo get_theme_mod('test');?>

حالا به جای test باید از مقدار مورد نظر خود استفاده کنید. مثلا در کد بالا مقدار ما header_textcolor بود.

موفق باشید. 🙂

راستی! برای دریافت مطالب وردپرسی در کانال تلگرام میهن وردپرس عضو شوید.


منبع مطلب

این مطالب را نیز ببینید!

آموزش اتصال دامنه به هاست و تنظیم DNS هاست روی دامین

آموزش اتصال دامنه به هاست و تنظیم DNS هاست روی دامین

اتصال دامنه به هاست آموزش اتصال دامنه به هاست بعد از اینکه هاست و دامین …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *