ثبت‌نام ورود

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

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

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

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

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

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

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

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

نمونه پنل تنظیمات اختصاصی
نمونه پنل تنظیمات اختصاصی

و پنل قالب‌هایی که از 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 بود.

موفق باشید. 🙂

نظر یا سوال شما در این مورد چیست؟

  1. U13483 ۲۶ اردیبهشت ۱۳۹۹

    با عرض سلام و خسته نباشید.
    ممنون از آموزش خوبتون.
    یه مشکلی هست اینکه تابع get_theme_mod() رو هر جایی نمیشه فراخوانی کرد و صدا زد. مثلا ما در قالب خودمون یک فایلی داریم به اسم xxx.php و میخوایم مواردی رو که ذخیره کردیم ،به عنوان مثال همون رنگ header_textcolor رو توی این فایل php توی یک متغیر ذخیره کنیم. مثل زیر:
    $headercolor = get_theme_mod(‘header_textcolor’);
    ولی متاسفانه با خطای عدم شناسایی تابع روبرو میشیم.
    Fatal error: Uncaught Error: Call to undefined function get_theme_mod()

    به عبارت دیگه get_theme_mod رو در صفحات قالب مثل هدر و آرشیو و page و … میشه فراخوانی کرد و مشکلی نیست ولی در فایلهای php دیگه ای که بخوایم تابع رو صدا بزنیم که در متغیر مقدارش رو ذخیره کنیم یا کلا بخوایم متغیر رو صدا بزنیم امکانش نیست.
    لطفا بفرمایید برای این مورد چه باید کرد؟

    ممنون از وقتی که میزارید.
    موفق باشید.

    • تیم پشتیبانی تیم پشتیبانی ۲۷ اردیبهشت ۱۳۹۹

      سلام
      بله قطعا چون فایل های دیگر معمولا توسط وردپرس خوانده نمیشوند این تابع شناسایی نمیشود و طبیعی هست

      • U13483 ۲۷ اردیبهشت ۱۳۹۹

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

        • تیم پشتیبانی تیم پشتیبانی ۲۷ اردیبهشت ۱۳۹۹

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

          • U13483 ۲۷ اردیبهشت ۱۳۹۹

            ممنون از راهنمایی شما.
            بنده بیاری خدا، با تلاش زیاد این کار رو کردم و تونستم تابع get_theme_mod رو در هرجایی و هر فایل دیگه ای صدا زده و مقدار اون رو دریافت کنم.
            در هر صورت ممنون از وقتی که گذاشتید.

            موفق باشید.