Boilerplate Customizer Theme WordPress

Boilerplate Customizer Theme WordPress
  1. 1. آشنایی با سازنده تم وردپرس
  2. 2. تعامل با Customizer Theme WordPress
  3. 3. در حال خواندن: Boilerplate Customizer Theme WordPress
  4. 4. گسترش قالب Boilerplate Customizer Theme WordPress
  5. 5. قالب سفارشی سازنده قالب – گزینه های شرطی ، مضامین کودک و افزونه ها

بروزرسانی: این مقاله در تاریخ 19 فوریه 2013 ویرایش شده است ، تا منعکس کننده تغییرات ایجاد شده در Theme Customizer Boilerplate باشد.


امیدوارم که شما دو پست اول سری Theme Customizer – آشنایی با Customizer Theme WordPress و تعامل با Customizer را بخوانید و لذت ببرید. اکنون زمان آن فرا رسیده است که به مسیر اصلی بروید و شروع به مونتاژ قالب شخصی Customizer کنید که می توانید در مضامین خود از آن استفاده کنید. این پست حاوی چند بلوک طولانی از کد است ، بنابراین به نظرات درون خطی توجه کنید.

توجه داشته باشید: اگر ترجیح می دهید بلافاصله از دیگ بخار استفاده کنید ، می توانید با اتصال به قلاب فیلتر ‘thsp_cbp_options_array ، آن را از Github بارگیری کنید و قسمتها را در $ $ array تغییر دهید..

آنچه ما ایجاد می کنیم

ساختار تنظیم کننده فهرست ساختار Boilerplate

ساختار تنظیم کننده فهرست ساختار Boilerplate

  • customizer.php – این اصلی ترین فایل boilerplate Theme Customizer است ، نمونه ای که با استفاده از داده ها از آرایه گزینه ها بخش ها ، تنظیمات و کنترل ها را اضافه می کند
  • custom-controls.php – کلاس های کنترل سفارشی و یک قلاب عملی که به شما امکان می دهد کنترل های دلخواه خود را اضافه کنید
  • helpers.php – توابع کمک کننده ، برای بازیابی گزینه های موضوع ، پیش فرض گزینه ها و غیره استفاده می شود.
  • گزینه ها.php – گزینه های نمونه و یک قلاب فیلتر که به شما امکان می دهد آرایه گزینه ها را ویرایش کنید و از قسمت های خود استفاده کنید
  • customizer-controls.css – CSS اصلی برای کنترل جایگزین رادیو کنترل سفارشی

ایده کل این است که بتوانید این فایلها را در زیر شاخه در فهرست موضوعی خود کپی کنید ، پرونده customizer.php را از توابع.php خود قرار دهید و هر چیزی را که دوست دارید ، از جمله و به خصوص آرایه گزینه ها ، با استفاده از قلاب Theme Boizer ، تغییر دهید (توضیح در قسمت 4). به روز رسانی: پیش از این ، شما فقط گزینه options.php را ویرایش می کنید ، اما استفاده از قلاب ها باعث می شود که همه چیز بسیار تمیز شود.

اکنون بیایید از یک مثال واقعی استفاده کنیم – ما یک کنترل متنی را به یک بخش جدید Customizer Theme اضافه می کنیم. آرایه در یک عملکرد کمکی قرار می گیرد و در صورت بازگشت ، فیلتری وجود دارد که روی آن اعمال می شود. به این ترتیب می توانید گزینه های بیشتری را از قالب کودک یا افزونه اضافه کنید. ایناهاش:

/ **
* عملکرد کمکی که دارای آرایه ای از گزینه های موضوع است.
*
*return array $ گزینه ها آرایه گزینه های موضوع
*uses thsp_get_theme_customizer_fields () تعریف شده در customizer / helpers.php
* /
عملکرد thsp_get_theme_customizer_ زمینه ()

/ *
* استفاده از عملکرد کمکی برای به دست آوردن قابلیت مورد نیاز پیش فرض
* /
$ required_capability = thsp_settings_page_capability ()؛

$ گزینه = آرایه (


// شناسه بخش
'new_customizer_section' => آرایه (

/ *
* در حال بررسی هستیم که آیا این یک بخش موجود است یا خیر
* یا یک مورد جدید که نیاز به ثبت نام دارد
* /
'არსებული_صشن' => نادرست,
/ *
* استدلال های مربوط به بخش
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => آرایه (
'title' => __ ('عنوان بخش جدید' ، 'my_theme_textdomain'),
'description' => __ ('توضیحات قسمت جدید' ، 'my_theme_textdomain'),
'اولویت' => ​​10
),

/ *
آرایه * زمینه ها شامل تمام زمینه های مورد نیاز می باشد
* به این بخش اضافه شد
* /
'زمینه' => آرایه (

/ *
* ==========
* ==========
* قسمت متن
* ==========
* ==========
* /
// شناسه زمینه
'new_text_field' => آرایه (
/ *
* تنظیم استدلال های مرتبط
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => آرایه (
'default' => __ ('مقدار متن پیش فرض' ، 'my_theme_textdomain'),
'type' => 'گزینه',
'قابلیت' => ​​$ required_capability,
'transport' => 'تازه کردن',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* استدلال های مرتبط را کنترل کنید
* Codex - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => آرایه (
'label' => __ ("برچسب کنترل متن جدید" ، "my_theme_textdomain"),
'نوع' => 'متن' ، // کنترل فیلد متن
'اولویت' => ​​1
)
)

)

),

)؛

/ *
قلاب فیلتر 'thsp_customizer_options' به شما امکان می دهد
* برخی از این گزینه ها را از یک موضوع کودک اضافه یا حذف کنید
* /
اعمال اعمال_فیلترها ('thsp_customizer_options' ، $ گزینه)؛

}

به روز رسانی: آرایه همان است ، اما اکنون می توانید آرایه گزینه ها را به قلاب فیلتر منتقل کنید ، برای جزئیات بیشتر به قسمت 4 مراجعه کنید..

من می دانم که در نگاه اول پیچیده است ، اما بگذارید توضیح دهم.

گزینه های $ array از بخش (ها) (فقط یک مورد در این مورد – new_customizer_section) تشکیل شده است ، هر بخش دارای آرگومان ها ، فیلدها و یک مقدار boolean (موجود_صشن) است تا نشان دهد بخش جدیدی است یا ما فقط می خواهیم برخی از قسمت ها را به یک موجود اضافه کنیم. یکی. آرایه استدلالها با آنچه می خواهید به آن منتقل شوید ، یکسان است $ wp_customize-> add_section روش. آرایه فیلدها کمی پیچیده تر است.

به روز رسانی: آرایه گزینه های موجود در آرگومان های کنترلی اکنون یک آرایه چند بعدی است.

هر قسمت از تنظیمات Customizer و کنترل Customizer تشکیل شده است. به همین دلیل ما آرایه های تنظیمات_ارگ و کنترل_ارگ ها را داریم. آنها تقریباً دقیقاً مشابه آرایه هایی است که می خواهید به آنها منتقل شوید $ wp_customize-> add_setting و $ wp_customize-> add_control مواد و روش ها. تنها تفاوت در آرایه های “انتخاب” در آرگومان های کنترلی ، $ wp_customize-> add_control نیاز دارد که این یک آرایه ساده = = ارزش جفت باشد و ما به جای آن از یک آرایه چند بعدی استفاده می کنیم.

به این ترتیب می توانید داده های بیشتری را به هر یک از گزینه ها منتقل کنید ، بنابراین اگر به عنوان مثال در حال بارگیری فونت های Google در موضوع خود هستید ، می توانید رشته هایی داشته باشید که به شما امکان می دهد فونت صحیح را در داخل آرایه انتخاب کنید. . می توانید نمونه ای از این مورد را ببینید موضوعی که از Boilerplate Customizer استفاده می کند.

بنابراین ، اگر شما از این سه روش آگاه هستید ، بسیار آشناست.

افزودن کنترل کادر کنترل تقریباً یکسان است ، فقط باید “نوع” را به “کادر” در “Control_args” تغییر دهید:

/ *
* ===============
* کادر کادر انتخاب
* ===============
* /
'new_checkbox_field' => آرایه (
'setting_args' => آرایه (
'پیش فرض' => درست است,
'type' => 'گزینه',
'قابلیت' => ​​$ required_capability,
'transport' => 'تازه کردن',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => آرایه (
'label' => __ ("برچسب کنترل جدید رادیویی" ، "my_theme_textdomain"),
'type' => 'کادر انتخاب "، // کنترل فیلد کادر انتخاب
'اولویت' => ​​2
)
),

کنترل های رادیویی و انتخابی تقریباً یکسان هستند ، فقط باید انتخاب های مشخص شده را مشخص کنید:

/ *
* ===========
* ===========
* زمینه رادیویی
* ===========
* ===========
* /
'new_radio_field' => آرایه (
'setting_args' => آرایه (
'default' => 'option-2',
'type' => 'گزینه',
'قابلیت' => ​​$ thsp_cbp_capability,
'transport' => 'تازه کردن',
),
'control_args' => آرایه (
'label' => __ ("برچسب کنترل جدید رادیویی" ، "my_theme_textdomain"),
'نوع' => 'رادیو' ، // کنترل رادیو
'گزینه' => آرایه (
'option-1' => آرایه (
'label' => __ ("گزینه 1" ، "my_theme_textdomain")
),
'option-2' => آرایه (
'label' => __ ("گزینه 2" ، "my_theme_textdomain")
),
'option-3' => آرایه (
'label' => __ ("گزینه 3" ، "my_theme_textdomain")
)
),
'اولویت' => ​​3
)
),

/ *
* ============
* ============
* زمینه را انتخاب کنید
* ============
* ============
* /
'new_select_field' => آرایه (
'setting_args' => آرایه (
'default' => 'option-3',
'type' => 'گزینه',
'قابلیت' => ​​$ thsp_cbp_capability,
'transport' => 'تازه کردن',
),
'control_args' => آرایه (
'label' => __ ("برچسب زمینه انتخاب جدید" ، "my_theme_textdomain"),
'type' => 'Select'، // Control را انتخاب کنید
'گزینه' => آرایه (
'option-1' => آرایه (
'label' => __ ("گزینه 1" ، "my_theme_textdomain")
),
'option-2' => آرایه (
'label' => __ ("گزینه 2" ، "my_theme_textdomain")
),
'option-3' => آرایه (
'label' => __ ("گزینه 3" ، "my_theme_textdomain")
)
),
'اولویت' => ​​4
)
)

و در آخر ، دو نوع کنترل پیچیده که در وردپرس وجود دارد – بارگذاری پرونده و بارگذاری تصویر:

/ *
* ===========
* ===========
* بارگذاری پرونده
* ===========
* ===========
* /
'new_file_upload_field' => آرایه (
'setting_args' => آرایه (
'پیش فرض' => '',
'type' => 'گزینه',
'قابلیت' => ​​$ thsp_cbp_capability,
'transport' => 'تازه کردن',
),
'control_args' => آرایه (
'label' => __ ('بارگذاری پرونده' ، 'my_theme_textdomain'),
'type' => 'بارگذاری' ، // کنترل فیلد بارگذاری پرونده
'اولویت' => ​​5
)
),

/ *
* ============
* ============
* بارگذاری تصویر
* ============
* ============
* /
'new_image_upload_field' => آرایه (
'setting_args' => آرایه (
'پیش فرض' => '',
'type' => 'گزینه',
'قابلیت' => ​​$ thsp_cbp_capability,
'transport' => 'تازه کردن',
),
'control_args' => آرایه (
'label' => __ ('بارگذاری تصویر' ، 'my_theme_textdomain'),
'نوع' => 'تصویر' ، // کنترل فیلد بارگذاری تصویر
'اولویت' => ​​6
)
)

توجه داشته باشید که من استفاده کردم “نوع” => “گزینه” در تنظیم استدلال برای همه این زمینه ها این کار باعث می شود همه مقادیر به عنوان یک مقدار در بانک اطلاعاتی شما ذخیره شوند. جایگزین است ‘نوع ‘=>‘ theme_mod’ اما فعلاً بیایید با “گزینه” کنار بیاییم.

با استفاده از گزینه های Array برای افزودن بخش ها ، تنظیمات و کنترل های Customizer

اگر مطمئن نیستید که چگونه با WordPress Theme Customizer تعامل داشته باشید ، بروید و بررسی کنید ، زیرا این همان کاری است که ما اکنون انجام خواهیم داد. تنها تفاوت این است که به جای اضافه کردن بخش ها ، تنظیمات و کنترل های یک بار ، ما فرآیند را با استفاده از آرایه سریالی که ایجاد کردیم ، خودکار می کنیم. بیایید فقط وارد آن شویم:

تابع thsp_cbp_customize_register ($ wp_customize) {

/ **
* کنترل های سفارشی
* /
نیاز دارید (نام دایره (__ FILE__). '/custom-controls.php')؛


/ *
* با استفاده از عملکرد کمکی ، تمام زمینه ها را دریافت کنید
* /
$ thsp_sections = thsp_cbp_get_fields ()؛


/ *
* نام ورود DB را بدست آورید که در آن گزینه ها ذخیره خواهند شد
* /
$ thsp_cbp_option = thsp_cbp_option ()؛


/ **
* آرایه را حلقه زده و بخش های Customizer را اضافه کنید
* /
foreach ($ thsp_sections به عنوان $ thsp_section_key => $ thsp_section_value) {

/ **
* در صورت نیاز بخش Customizer را اضافه می کند
* /
اگر (! $ thsp_section_value ['heyî_section']) {

$ thsp_section_args = $ thsp_section_value ['args']؛

// اضافه کردن بخش
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
)؛

} // پایان اگر

/ *
* آرایه "زمینه" را در هر بخش حلقه کنید
* و تنظیمات و کنترل ها را اضافه کنید
* /
$ thsp_section_fields = $ thsp_section_value ["زمینه"]؛
foreach ($ thsp_section_fields به عنوان $ thsp_field_key => $ thsp_field_value) {

/ *
* بررسی کنید که "گزینه" یا "theme_mod" برای ذخیره گزینه استفاده شده است
*
* اگر چیزی تنظیم نشده باشد ، $ wp_customize-> روش add_setting به صورت "theme_mod" پیش فرض خواهد شد
* اگر "گزینه" به عنوان نوع تنظیم مورد استفاده قرار گیرد ، مقدار آن در ورودی ذخیره می شود
* ix پیشوند} جدول انتخاباتی. نام گزینه با عملکرد thsp_cbp_option () تعریف شده است
* /
if (isset ($ thsp_field_value ['setting_args'] ['type']) && 'option' == $ thsp_field_value ['setting_args'] ['type']) {
$ setting_control_id = $ thsp_cbp_option. "[" $ thsp_field_key. ']'؛
} دیگه
$ setting_control_id = $ thsp_field_key؛
}

/ *
* در صورت عدم تعریف عملکرد ، عملکرد برگشتی پیش فرض را اضافه کنید
* /
if (! isset ($ thsp_field_value ['setting_args'] ['sanitize_cb'])) {
$ thsp_field_value ['setting_args'] ['sanitize_cb'] = 'thsp_cbp_sanitize_cb'؛
}

/ **
* تنظیمات Customizer را اضافه می کند
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
)؛

/ **
* کنترل Customizer را اضافه می کند
*
* مقدار "بخش" باید به مجموعه "control_args" اضافه شود
* بنابراین کنترل می تواند به بخش فعلی اضافه شود
* /
$ thsp_field_value ['control_args'] ['بخش'] = $ thsp_section_key؛

/ *
* $ wp_customize-> روش add_control به "گزینه" نیاز دارد تا یک کلید ساده => جفت ارزش باشد
* /
if (isset ($ thsp_field_value ['control_args'] ['انتخاب'])))
$ thsp_cbp_choices = آرایه ()؛
foreach ($ thsp_field_value ['control_args'] ['انتخاب'] به عنوان $ thsp_cbp_choice_key => $ thsp_cbp_choice_value) {
$ thsp_cbp_choices [$ thsp_cbp_choice_key] = $ thsp_cbp_choice_value ['label']؛
}
$ thsp_field_value ['control_args'] ['options'] = $ thsp_cbp_choices؛
}


// نوع کنترل را بررسی کنید
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Color_Control جدید (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
)؛
} otherif ('image' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Image_Control جدید (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
)؛
} otherif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Uplload_Control جدید (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
)؛
} دیگه
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
)؛
}

} // foreach foreach

} // foreach foreach

}
add_action ('customize_register' ، 'thsp_cbp_customize_register')؛

با طی کردن تمام بخش ها ، مواردی را که قبلاً وجود ندارند اضافه کنید ، سپس در تمام بخش های موجود در هر بخش ، اضافه کردن یک تنظیم و یک کنترل برای هر بخش. این همه اتفاقات اینجاست.

به یاد داشته باشید که از “نوع” => “گزینه” برای همه تنظیمات استفاده کردیم؟ به همین دلیل است که اکنون داریم “my_theme_options [$ thsp_field_key]” برای هر دو تنظیم و بخش. با این کار تمام مقادیر به عنوان یک آرایه سریالی ذخیره می شوند که می توانید با استفاده از آن بازیابی کنید get_option (“my_theme_options”). یا فقط می توانید از توابع یاور تعریف شده در استفاده کنید helpers.php برای بازیابی مقادیر فعلی و مقادیر پیش فرض برای همه زمینه ها:

/ **
* ارزش های گزینه را دریافت کنید
*
* آرایه ای که دارای تمام مقادیر گزینه ها است
* در صورت عدم تعیین مقدار ، از مقدار پیش فرض گزینه استفاده می شود
*
*uses thsp_get_theme_customizer_defaults () تعریف شده در /customizer/options.php
* array array مقادیر فعلی برای همه گزینه ها
*since Theme_Customizer_Boilerplate 1.0
* /
عملکرد thsp_cbp_get_options_values ​​()

// گزینه پیش فرض را دریافت کنید
$ option_defaults = thsp_cbp_get_options_defaults ()؛

// گزینه های ذخیره شده را با پیش فرض ها تجزیه کنید
$ thsp_cbp_options = wp_parse_args (get_option (thsp_cbp_option () ، آرایه ()) ، $ option_defaults)؛

// آرایه تجزیه شده را برگردانید
$ thsp_cbp_options را برگردانید.

}


/ **
* گزینه پیش فرض را دریافت کنید
*
* آرایه ای را نگه می دارد که مقادیر پیش فرض را برای همه گزینه ها در اختیار دارد
*
*uses thsp_get_theme_customizer_fields () تعریف شده در /customizer/options.php
*return array $ thsp_option_defaults مقادیر پیش فرض برای همه گزینه ها
*since Theme_Customizer_Boilerplate 1.0
* /
عملکرد thsp_cbp_get_options_defaults ()

// آرایه ای را بدست آورید که تمام زمینه های گزینه تم را در اختیار دارد
$ thsp_sections = thsp_cbp_get_fields ()؛

// برای تنظیم مقادیر پیش فرض برای همه گزینه های موضوع ، ابتدا آرایه را آغاز کنید
$ thsp_option_defaults = آرایه ()؛

// حلقه از طریق آرایه پارامترهای گزینه
foreach ($ thsp_sections به عنوان $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['زمینه']؛

foreach ($ thsp_section_fields به عنوان $ thsp_field_key => $ thsp_field_value) {

// برای هر گزینه در آرایه پارامترها ، یک کلید آرایه انجمنی را به آرایه پیش فرض اضافه کنید
if (isset ($ thsp_field_value ['setting_args'] ['پیش فرض'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ["پیش فرض"]؛
} دیگه
$ thsp_option_defaults [$ thsp_field_key] = false؛
}

}

}

// آرایه پیش فرض را برگردانید
$ thsp_option_defaults را برگردانید.

}

فقط یک مورد دیگر باید به آن اشاره کنم – عملکرد برگشتی ضدعفونی کننده ای که ما در مجموعه “تنظیم_ارگ” مشخص کردیم. عملکرد در ext.php تعریف شده است و به سادگی داده ها را از طریق اجرا می کند wp_kses_post تابع:

/ **
* تم سفارشی سازی عملکرد برگشتی ضدعفونی کننده تم
* /
عملکرد thsp_sanitize_cb (ورودی $) {

بازگشت wp_kses_post (ورودی $)؛

}

از کجا از اینجا?

در حال حاضر ، شما می توانید از این قالب تم Customizer Boilerplate در مضامین خود استفاده کنید ، تنها کاری که باید انجام دهید این است که آن را از Github بارگیری کنید ، در فهرست تم خود کپی کنید و پرونده اصلی را از function.php قرار دهید ، که 100٪ کاربردی است و برای اکثر آنها به اندازه کافی مناسب است. مضامین.

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

من دوست دارم بشنوم که به نظر شما چگونه می توان این دیگ بخار را بهبود یا گسترش داد ، بنابراین لطفاً در نظرات آتش بگیرید.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map