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

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

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

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

چرا باید نحوه ساخت پنل تنظیمات قالب را یادبگیرم؟

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

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

بصورت کلی ۲ روش برای ساخت پنل تنظیمات قالب وجود دارد. روش اول استفاده از Customization API خوده وردپرس است از نسخه ۳٫۴ به بعد ارائه شد در این روش منویی با نام “تنظیمات قالب” در پنل مدیریت وردپرس نخواهید داشت و تنظیمات شما صرفا از طریق بخش سفارشی سازی در دسترس است این روش در بین کاربران وردپرس خیلی جا نیوفتاده و همه پسند نیست اما در روش دوم که اکثر قالب های حرفه ای استفاده میکنند منوی “تنظیمات قالب” را بصورت اختصاصی در پنل وردپرس خواهیم داشت و میتوانیم تنظیمات مورد نظرمان را با استفاده از اسکریپت هایی مثل CMB2 و Redux طراحی کنیم. در دوره جامع طراحی قالب وردپرس و همچنین این آموزش هم از روش دوم استفاده میکنیم. تصویر زیر نمونه تنظیماتی است که در این آموزش طراحی میکنیم : (درضمن این روش کاملا با کدنویسی انجام میشود)

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

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

بعد از نصب پلاگین CMB2 وارد پوشه قالب خود شوید و یک فولدر با نام theme-options بسازید و داخلش فایلی با نام settings.php ایجاد کنید، داخل این فایل کدهای زیر را قرار دهید

<?php
/**
* This snippet has been updated to reflect the official supporting of options pages by CMB2
* in version 2.2.5.
*
* If you are using the old version of the options-page registration,
* it is recommended you swtich to this method.
*/
add_action( ‘cmb2_admin_init’, ‘myprefix_register_theme_options_metabox’ );
/**
* Hook in and register a metabox to handle a theme options page and adds a menu item.
*/
function myprefix_register_theme_options_metabox() {

/**
* Registers options page menu item and form.
*/
$cmb_options = new_cmb2_box( array(
‘id’ => ‘myprefix_option_metabox’,
‘title’ => esc_html__( ‘Site Options’, ‘myprefix’ ),
‘object_types’ => array( ‘options-page’ ),

/*
* The following parameters are specific to the options-page box
* Several of these parameters are passed along to add_menu_page()/add_submenu_page().
*/

‘option_key’ => ‘myprefix_options’, // The option key and admin menu page slug.
// ‘icon_url’ => ‘dashicons-palmtree’, // Menu icon. Only applicable if ‘parent_slug’ is left empty.
// ‘menu_title’ => esc_html__( ‘Options’, ‘myprefix’ ), // Falls back to ‘title’ (above).
// ‘parent_slug’ => ‘themes.php’, // Make options page a submenu item of the themes menu.
// ‘capability’ => ‘manage_options’, // Cap required to view options-page.
// ‘position’ => 1, // Menu position. Only applicable if ‘parent_slug’ is left empty.
// ‘admin_menu_hook’ => ‘network_admin_menu’, // ‘network_admin_menu’ to add network-level options page.
// ‘display_cb’ => false, // Override the options-page form output (CMB2_Hookup::options_page_output()).
// ‘save_button’ => esc_html__( ‘Save Theme Options’, ‘myprefix’ ), // The text for the options-page save button. Defaults to ‘Save’.
) );

/*
* Options fields ids only need
* to be unique within this box.
* Prefix is not needed.
*/

$cmb_options->add_field( array(
‘name’ => __( ‘Test Text’, ‘myprefix’ ),
‘desc’ => __( ‘field description (optional)’, ‘myprefix’ ),
‘id’ => ‘test_text’,
‘type’ => ‘text’,
‘default’ => ‘Default Text’,
) );

$cmb_options->add_field( array(
‘name’ => __( ‘Test Color Picker’, ‘myprefix’ ),
‘desc’ => __( ‘field description (optional)’, ‘myprefix’ ),
‘id’ => ‘test_colorpicker’,
‘type’ => ‘colorpicker’,
‘default’ => ‘#bada55’,
) );

}

/**
* Wrapper function around cmb2_get_option
* @since 0.1.0
* @param string $key Options array key
* @param mixed $default Optional default value
* @return mixed Option value
*/
function myprefix_get_option( $key = ”, $default = false ) {
if ( function_exists( ‘cmb2_get_option’ ) ) {
// Use cmb2_get_option as it passes through some key filters.
return cmb2_get_option( ‘myprefix_options’, $key, $default );
}

// Fallback to get_option if CMB2 is not loaded yet.
$opts = get_option( ‘myprefix_options’, $default );

$val = $default;

if ( ‘all’ == $key ) {
$val = $opts;
} elseif ( is_array( $opts ) && array_key_exists( $key, $opts ) && false !== $opts[ $key ] ) {
$val = $opts[ $key ];
}

return $val;
}

حالا باید فایل settings.php را به فایل فانکشن قالب تان معرفی کنید برای اینکار فایل functions.php قالب تان را باز کنید و کد زیر را داخلش قرار دهید :

require_once ‘theme-options/settings.php’;

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

نمایش تنظیمات در صفحات قالب

بطور کلی برای ساخت پنل تنظیمات قالب حرفه ای دو مرحله دارید : ۱ – طراحی تنظیمات در منوی تنظیمات قالب ۲ – اعمال و نمایش تنظیمات در صفحات مختلف قالب

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