با عرض سلام خدمت کاربران محترم سایت پی وی لرن.
با جلسه ای دیگر از سری جلسات دوره جامع آموزش ساخت قالب وردپرس در خدمت شما هستیم.
در این جلسه قصد داریم به معرفی API جاوا اسکریپت Customizer وردپرس بپردازیم.
مقدمه
در وردپرس ۴٫۱ ، API جاوا اسکریپت برای تمام اشیاء Customizer معرفی شد.
تمام API جاوا اسکریپت در یک فایل تنها در مسیر wp-admin/js/customize-controls.js قرار دارد.
پیش‌نمایش JS و کنترل های JS
برنامه customizer در حال حاضر به دو بخش مشخص تقسیم می‌شود. صفحه کنترل های customizer و پیش‌نمایش customizer.
پیش‌نمایش (Preview) در یک iframe قرار دارد. به این معنی که تمام API JS هم در پیش‌نمایش و هم در صفحه کنترل اجرا می‌شوند.
API PostMessage برای برقراری ارتباط بین پیش‌نمایش و کنترل استفاده می‌شود.
بیشتر قالب ها جاوا اسکریپت را فقط در پیش‌نمایش پیاده سازی می‌کنند.
اما جاوا اسکریپت در بخش controls می‌تواند برای خیلی چیز ها استفاده شود.
مانند : تغییر URL پیش‌نمایش، تمرکز روی بخش های پیش‌نمایش و … .
در مثال زیر صفحه برای پست ها تغییر کند، URL پیش‌نمایش نیز تغییر می‌کند.
مثال :
| // Change the previewed URL to the selected page when changing the page_for_posts. wp.customize( 'page_for_posts', function( setting ) { setting.bind( function( pageId ) { pageId = parseInt( pageId, 10 ); if ( pageId > 0 ) { api.previewer.previewUrl.set( api.settings.url.home + '?page_id=' + pageId ); } }); }); |
مدل ها برای کنترل ها، بخش ها و پنل ها
هر نوع شئ customizer در PHP، یک شئ customizer متناظر در جاوا اسکریپت دارد.
مدل های wp.customize.Control، wp.customize.Section و wp.customize.Panel و همچنین مجموعه های wp.customize.control wp.customize.section، و wp.customize.panel وجد دارد که تمام موارد کنترل را ذخیره می‌کنند.
به صورت زیر می‌توانید در پنل ها، بخش ها و کنترل ها پیمایش کنید.
مثال :
| wp.customize.panel.each( function ( panel ) { /* ... */ } ); wp.customize.section.each( function ( section ) { /* ... */ } ); wp.customize.control.each( function ( control ) { /* ... */ } ); |
ارتباط پنل ها، بخش ها و کنترل ها با یکدیگر
هنگامی که یک کنترل جدید را در PHP فعال می‌کنید، در شناسه بخش والد عبور می‌کنید.
مثال :
| $wp_customize->add_control( 'blogname', array( 'label' => __( 'Site Title' ), 'section' => 'title_tagline',) ); |
در API جاوا اسکریپت، یک بخش کنترل می‌تواند بهشکل زیر بدست آید:
مثال :
| id = wp.customize.control( 'blogname' ).section(); // returns title_tagline by default |
برای گرفتن شئ بخش از طریق ID، به صورت زیر عمل کنید:
مثال :
| wp.customize.section( id ) |
برای انتقال کنترل به بخش دیگر، از state بخش (section) استفاده می‌کنیم.
در مثال زیر کنترل به بخش Navigation منتقل می‌شود:
مثال :
| wp.customize.control( 'blogname' ).section( 'nav' ); |
برای دریافت ID پنل بخش، به صورت زیر عمل کنید:
مثال :
| id = wp.customize.section( 'sidebar-widgets-sidebar-1' ).panel(); // returns widgets by default |
پنل ها، بخش ها و کنترل های زمینه ای (Contexual)
سه موارد ذکر شده، یک حالت فعال دارند. با تغییر حالت فعال، این سه مورد از متد onChangeActive مربوط به خود استفاده می‌کنند که به صورت پیش‌فرض اسلاید های نگهدارنده المان را در صورت صحیح یا غلط بودن، بالا و پایین می‌کشند.
از متد های ()active و ()deactive برای تغییر وضعیت فعال بودن استفاده می‌شود.
مثال :
| wp.customize.section( 'nav' ).deactivate(); // slide up wp.customize.section( 'nav' ).activate({ duration: 1000 }); // slide down slowly wp.customize.section( 'colors' ).deactivate({ duration: 0 }); // hide immediately wp.customize.section( 'nav' ).deactivate({ completeCallback: function () { wp.customize.section( 'colors' ).activate(); // show after nav hides completely } }); |
جلسه معرفی API جاوا اسکریپت Customizer نیز به پایان رسید.
در جلسه بعد به آموزش استفاده پیشرفته از Customizer خواهیم پرداخت.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
