۱۶
مرداد

جلسه ۳۴ : اشیا Customizer وردپرس

دسته‌بندی‌ها :

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

فهرست

اشیا Customizer وردپرس

Customize API یا Customizer ، یک فریمورک برای نشان دادن پیش‌نمایش تغییرات قالب به صورت زنده است.
Customizer رابط یکپارچه ای برای سفارشی سازی بخش های مختلف قالب و سایت مانند رنگ ها، ابزارک ها، منو ها و … فراهم کرده است.

Customizer شئ گراست.
۴ نوع شئ اصلی برای آن وجود دارد:

پنل ها (Panels)
بخش ها (Sections)
تنظیمات (Settings)
کنترل ها (Controls)

تنظیمات (Settings)، عناصر UI (کنترل) که با تنظیمات دیگری که در پایگاه داده ذخیره شده است، مرتبط می‌کند.
بخش ها نگهدارنده (Container) های UI هستند تا سازمان دهی خودشان را بهبود بخشند.
پنل ها نیز نگهدارنده هایی برای بخش ها هستند که اجازه می‌دهند چندین بخش با هم گروه بندی شوند.

هر شئ Customizer توسط یک کلاس PHP نمایش داده و از طریق آن به کار گرفته می‌شود.
تمام اشیاء نیز توسط شئ WP_Customize_Manager مدیریت می‌شوند.

اشیا Customizer وردپرس

برای اضافه یا حذف کردن و تغییر هر شئ Customizer و همچنین دسترسی به مدیریت کننده Customizer، از هوک customize_register استفاده می‌کنیم.

مثال :

function themeslug_customize_register( $wp_customize ) {
  // Do stuff with $wp_customize, the WP_Customize_Manager object.
}
add_action( 'customize_register', 'themeslug_customize_register' );

function themeslug_customize_register( $wp_customize ) {

// Do stuff with $wp_customize, the WP_Customize_Manager object.

}

add_action( 'customize_register', 'themeslug_customize_register' );

مدیریت کننده Customizer، برای هر شئ متد های add، get و remove را فراهم می‌کند.

مثال :

add_action('customize_register','my_customize_register');
function my_customize_register( $wp_customize ) {
  $wp_customize->add_panel();
  $wp_customize->get_panel();
  $wp_customize->remove_panel();
 
  $wp_customize->add_section();
  $wp_customize->get_section();
  $wp_customize->remove_section();
 
  $wp_customize->add_setting();
  $wp_customize->get_setting();
  $wp_customize->remove_setting();
 
  $wp_customize->add_control();
  $wp_customize->get_control();
  $wp_customize->remove_control();
}

add_action('customize_register','my_customize_register');

function my_customize_register( $wp_customize ) {

$wp_customize->add_panel();

$wp_customize->get_panel();

$wp_customize->remove_panel();

$wp_customize->add_section();

$wp_customize->get_section();

$wp_customize->remove_section();

$wp_customize->add_setting();

$wp_customize->get_setting();

$wp_customize->remove_setting();

$wp_customize->add_control();

$wp_customize->get_control();

$wp_customize->remove_control();

}

تنظیمات (Settings)

تنظیمات پیش نمایش رنده و ذخیره سازی اشیاء Customizer را مدیریت می‌کنند.
هر setting توسط یک شئ کنترل، مدیریت می‌شوند.

مثال :

$wp_customize->add_setting( 'setting_id', array(
  'type' => 'theme_mod', // or 'option'
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
  'default' => '',
  'transport' => 'refresh', // or postMessage
  'sanitize_callback' => '',
  'sanitize_js_callback' => '', // Basically to_json.
) );

$wp_customize->add_setting( 'setting_id', array(

'type' => 'theme_mod', // or 'option'

'capability' => 'edit_theme_options',

'theme_supports' => '', // Rarely needed.

'default' => '',

'transport' => 'refresh', // or postMessage

'sanitize_callback' => '',

'sanitize_js_callback' => '', // Basically to_json.

) );

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

woedpress customizer api

کنترل ها (Controls)

کنترل ها هدف اصلی Customizer ها برای ایجاد رابط های کاربری هستند.
به طور خاص، هر کنترل باید به یک تنظیمات (settings) مرتبط شوند و آن تنظیمات داده های وارد شده توسط کاربر را از طریق کنترل گرفته و در دیتابیس ذخیره می‌کند.
کنترل ها می‌توانند توسط مدیریت کننده Customizer اضافه شوند و مجموعه ای قدرتمند از گزینه های رابط کاربری را ارائه دهند.

مثال :

$wp_customize->add_control( 'setting_id', array(
  'type' => 'date',
  'priority' => 10, // Within the section.
  'section' => 'colors', // Required, core or custom.
  'label' => __( 'Date' ),
  'description' => __( 'This is a date control with a red border.' ),
  'input_attrs' => array(
    'class' => 'my-custom-class-for-js',
    'style' => 'border: 1px solid #900',
    'placeholder' => __( 'mm/dd/yyyy' ),
  ),
  'active_callback' => 'is_front_page',
) );

$wp_customize->add_control( 'setting_id', array(

'type' => 'date',

'priority' => 10, // Within the section.

'section' => 'colors', // Required, core or custom.

'label' => __( 'Date' ),

'description' => __( 'This is a date control with a red border.' ),

'input_attrs' => array(

'class' => 'my-custom-class-for-js',

'style' => 'border: 1px solid #900',

'placeholder' => __( 'mm/dd/yyyy' ),

'active_callback' => 'is_front_page',

) );

مهم ترین پارامتر هنگام اضافه کردن یک کنترل، نوع (type) آن است.
این پارامتر مشخص می‌کند که کنترل چه نوع رابط کاربری را نمایش می‌دهد.

اصلی ترین نوع های رابط کاربری:

<input>
checkbox
textarea
radio
select
dropdown-pages

بخش ها (Sections)

بخش ها نگهدارنده (container) رابط کاربری برای کنترل های customizer ها هستند.
تا وقتی که می‌توانید کنترل های سفارشی را به بخش های اصلی اضافه کنید، اگر بیشتر از یک گزینه داشته باشید، ممکن است بخواهید یک یا بیشتر بخش اضافه کنید.
برای اضافه کردن یک بخش به از متد add_section شئ WP_Customize_manager استفاده کنید.

مثال :

$wp_customize->add_section( 'custom_css', array(
  'title' => __( 'Custom CSS' ),
  'description' => __( 'Add custom CSS here' ),
  'panel' => '', // Not typically needed.
  'priority' => 160,
  'capability' => 'edit_theme_options',
  'theme_supports' => '', // Rarely needed.
) );

$wp_customize->add_section( 'custom_css', array(

'title' => __( 'Custom CSS' ),

'description' => __( 'Add custom CSS here' ),

'panel' => '', // Not typically needed.

'priority' => 160,

'capability' => 'edit_theme_options',

'theme_supports' => '', // Rarely needed.

) );

شما فقط به اضافه کردن فیلد هایی که می‌خواهید جایگزین مقادیر پیش‌فرض شوند، نیاز دارید.
به طور مثال فیلد priority (اولویت) به صورت پیش‌فرض قابل قبول است و نیازی به تغییر ندارد. (این فیلد مربوط به ترتیب و مکان نمایش است)

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

Priority	ID	عنوان
۲۰	title_tagline	Site Title & Tagline
۴۰	colors	Colors
۶۰	header_image	Header Image
۸۰	background_image	Background Image
۱۰۰	nav_menus	Menus (Panel)
۱۱۰	widgets	Widgets (Panel)
۱۲۰	static_front_page	Static Front Page
۱۶۰		default
۲۰۰	custom_css	Additional CSS

پنل ها (Panels)

پنل ها برای ارائه زمینه های (Context) مشخصی به customizer ها طراحی شده اند.
مانند سفارشی سازی ابزارک ها، منو ها و … . یک تفاوت فنی مهم بین اشیاء پنل ها و بخش ها وجود دارد.

قالب ها در بیشتر مواقع نباید پنل هایشان را فعال کنند.
بخش ها نیازی به تو در تو شدن در پنل ها ندارند و هر بخش معمولا باید دارای چندین کنترل باشند.
کنترل ها باید به بخش هایی که هسته ارائه می‌کند، اضافه شوند. مانند اضافه کردن گزینه های color به بخش colors.
همانطور که گفتیم، پنل ها به عنوان زمینه هایی برای اضافه شدن ویژگی هایی مانند ابزارک ها، منو ها و یا پست ها طراحی شده اند نه به عنوان بسته بندی برای بخش های عمومی.

مثال :

$wp_customize->add_panel( 'menus', array(
  'title' => __( 'Menus' ),
  'description' => $description, // Include html tags such as <p>.
  'priority' => 160, // Mixed with top-level-section hierarchy.
) );
$wp_customize->add_section( $section_id , array(
  'title' => $menu->name,
  'panel' => 'menus',
) );

$wp_customize->add_panel( 'menus', array(

'title' => __( 'Menus' ),

'description' => $description, // Include html tags such as <p>.

'priority' => 160, // Mixed with top-level-section hierarchy.

) );

$wp_customize->add_section( $section_id , array(

'title' => $menu->name,

'panel' => 'menus',

) );

پنل ها برای اینکه نمایش داده شوند، حداقل باید دارای یک بخش باشند که ان بخش نیز باید دارای حداقل یک کنترل باشد.

جلسه معرفی اشیا customizer وردپرس نیز به پایان رسید.

در جلسه بعد به آموزش API جاوا اسکریپت customizer خواهیم پرداخت.

به اشتراک بگذارید

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۳۴ : اشیا Customizer وردپرس

اشیا Customizer وردپرس

تنظیمات (Settings)

کنترل ها (Controls)

بخش ها (Sections)

پنل ها (Panels)

لیست مطالب دوره

مفاهیم پایه

عملکرد قالب

Customizer وردپرس

امنیت

حریم خصوصی

انتشار قالب در سایت Wordpress

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ