وورد موضوع مخصص Boilerplate

وورد موضوع مخصص Boilerplate
  1. 1. مقدمة إلى WordPress Theme Customizer
  2. 2. التفاعل مع وورد موضوع مخصص
  3. 3. القراءة حاليًا: وورد موضوع مخصص Boilerplate
  4. 4. توسيع النص الأساسي لووردبريس موضوع مخصص
  5. 5. Theme Customizer Boilerplate – الخيارات الشرطية ، ثيمات الطفل والمكونات الإضافية

تحديث: تم تعديل هذه المقالة في 19 فبراير 2013 ، لتعكس التغييرات التي تم إجراؤها على قالب مخصص لقوالب التخصيص.


نأمل أن تقرأ وتستمتع بأول منشورتين من سلسلة Theme Customizer – مقدمة إلى WordPress Theme Customizer والتفاعل مع Custom Customizer. حان الوقت الآن للانتقال إلى الطبق الرئيسي والبدء في تجميع لوحة معلومات Theme Customizer التي ستتمكن من استخدامها في مظاهرك. تحتوي هذه المشاركة على بعض الكتل الطويلة من التعليمات البرمجية ، لذا انتبه للتعليقات المضمنة.

ملحوظة: إذا كنت تفضل فقط استخدام اللوح الأساسي على الفور ، يمكنك تنزيله من Github وتغيير الحقول في صفيف خيارات $ بالربط إلى “فلتر spsp_cbp_options_array”.

ما نقوم بإنشائه

موضوع دليل هيكل Boilerplate مخصص

موضوع دليل هيكل Boilerplate مخصص

  • مخصص. php – هذا هو الملف الأساسي لـ Custom Customizer Theme ، وهو الملف الذي يضيف الأقسام والإعدادات وعناصر التحكم باستخدام البيانات من مجموعة الخيارات
  • custom-controls.php – فئات عناصر التحكم المخصصة وخطاف عمل يسمح لك بإضافة عناصر التحكم المخصصة الخاصة بك
  • helpers.php – وظائف مساعد ، تستخدم لاسترداد خيارات السمة ، افتراضيات الخيار إلخ.
  • options.php – خيارات نموذجية وخطاف مرشح يسمح لك بتحرير مجموعة الخيارات واستخدام الحقول الخاصة بك
  • مخصص – controls.css – CSS الأساسية للصورة التي يتم استبدالها بالتحكم المخصص للراديو

الفكرة بأكملها هي أن تكون قادرًا على نسخ هذه الملفات إلى دليل فرعي في دليل السمة الخاص بك ، وتضمين ملف customizer.php من دالاتك .php وتغيير أي شيء تريده ، بما في ذلك وخاصة مجموعة الخيارات ، وذلك باستخدام السنانير المخصصة للموضوع Boilerplate (شرح في الجزء 4). تحديث: في السابق ، كان عليك فقط تعديل options.php ، لكن استخدام الخطافات يجعل الأشياء أكثر نظافة.

دعنا الآن نستخدم مثالًا حقيقيًا – سنضيف عنصر تحكم نصي إلى قسم تخصيص السمة الجديد. يتم وضع الصفيف في وظيفة مساعد ولديه مرشح يطبق عليه عند إرجاعه. وبهذه الطريقة يمكنك إضافة المزيد من الخيارات من سمة أو مكون إضافي. ها هو:

/ **
* وظيفة المساعد الذي يحتوي على مجموعة من خيارات السمة.
*
*return array options $ صفيف من خيارات السمة
*uses thsp_get_theme_customizer_fields () محدد في customizer / helpers.php
* /
دالة thsp_get_theme_customizer_fields () {

/ *
* استخدام وظيفة المساعد للحصول على القدرة الافتراضية المطلوبة
* /
$ required_capability = thsp_settings_page_capability () ؛

خيارات $ = المصفوفة (


// معرف القسم
'new_customizer_section' => المصفوفة (

/ *
* نحن نتحقق مما إذا كان هذا قسمًا موجودًا
* أو جديد يجب تسجيله
* /
'وجود_وجود '=> خطأ,
/ *
* الحجج ذات الصلة القسم
* الدستور - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => صفيف (
'title' => __ ('New Section Title'، 'my_theme_textdomain'),
'description' => __ ('وصف القسم الجديد' ، 'my_theme_textdomain'),
"الأولوية" => 10
),

/ *
* يحتوي مصفوفة "الحقول" على جميع الحقول التي يجب أن تكون
* يضاف إلى هذا القسم
* /
'الحقول' => الصفيف (

/ *
* ==========
* ==========
* مجال التحرير مكان كتابة النص
* ==========
* ==========
* /
// معرف الحقل
'new_text_field' => المصفوفة (
/ *
* وضع الحجج ذات الصلة
* الدستور - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_setting
* /
'setting_args' => المصفوفة (
'default' => __ ('قيمة النص الافتراضية'، 'my_theme_textdomain'),
'type' => 'option',
'الإمكانيات' => ​​$ required_capability,
'transport' => 'تحديث',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* التحكم في الحجج ذات الصلة
* الدستور - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => المصفوفة (
'label' => __ ('New control control label'، 'my_theme_textdomain'),
'type' => 'text'، / عنصر تحكم حقل النص
"الأولوية" => 1
)
)

)

),

) ؛

/ *
* ستسمح لك أداة تصفية الفلتر 'thsp_customizer_options' بذلك
* إضافة / إزالة بعض هذه الخيارات من موضوع فرعي
* /
return application_filters ('thsp_customizer_options'، $ options)؛

}}

تحديث: يبقى الصفيف كما هو ، ولكن الآن يمكنك أيضًا تمرير صفيف الخيارات إلى خطاف مرشح ، انظر الجزء 4 لمزيد من التفاصيل.

أعلم أن الأمر يبدو معقدًا للوهلة الأولى ، لكن دعني أشرح.

ال خيارات $ يتكون المصفوفة من قسم (أقسام) (واحد فقط في هذه الحالة – new_customizer_section) ، يحتوي كل قسم على وسيطات ، وحقول وقيمة منطقية (موجودة_القسم) للإشارة إلى ما إذا كان قسمًا جديدًا ، أو أننا نضيف فقط بعض الحقول إلى قسم موجود واحد. صفيف الوسيطات مطابق لما تمرر إليه $ wp_customize-> add_section طريقة. صفيف الحقول أكثر تعقيدًا قليلاً.

تحديث: صفيف الاختيارات في وسيطات التحكم هو الآن صفيف متعدد الأبعاد.

يتكون كل حقل من إعداد Customizer وعنصر تحكم Customizer. هذا هو السبب في أن لدينا صفائف إعداد وضوابط. إنها تقريبًا نفس صفائف الحجج التي تمررها $ wp_customize-> add_setting و $ wp_customize-> add_control طرق. الاختلاف الوحيد هو صفيف “الاختيارات” في وسيطات التحكم ، يتطلب $ wp_customize-> add_control أن يكون مفتاحًا بسيطًا => مصفوفة زوج القيمة ونستخدم مصفوفة متعددة الأبعاد بدلاً من ذلك.

بهذه الطريقة من الممكن تمرير المزيد من البيانات إلى كل واحد من الخيارات ، لذلك إذا كنت ، على سبيل المثال ، تقوم بتحميل خطوط Google في السمة الخاصة بك ، فستتمكن من الحصول على سلاسل تسمح لك بتحميل الخط الصحيح داخل مجموعة الاختيارات . يمكنك مشاهدة مثال على ذلك السمة التي تستخدم Customizer Boilerplate.

لذا ، إذا كنت على علم بهذه الطرق الثلاث ، فهي مألوفة جدًا.

تتشابه إضافة عنصر تحكم مربع الاختيار تقريبًا ، ما عليك سوى تغيير “نوع” إلى “مربع اختيار” في صفيف “control_args”:

/ *
* ==============
* حقل خانة اختيار
* ==============
* /
'new_checkbox_field' => المصفوفة (
'setting_args' => المصفوفة (
'افتراضي' => صحيح,
'type' => 'option',
'الإمكانيات' => ​​$ required_capability,
'transport' => 'تحديث',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => المصفوفة (
'label' => __ ('New control control label'، 'my_theme_textdomain'),
'type' => 'checkbox'، // checkbox field control
"الأولوية" => 2
)
),

عناصر التحكم في الراديو والاختيار متشابهة تقريبًا ، ما عليك سوى تحديد خيارات معينة:

/ *
* ===========
* ===========
* مجال الراديو
* ===========
* ===========
* /
'new_radio_field' => المصفوفة (
'setting_args' => المصفوفة (
'default' => 'option-2',
'type' => 'option',
'الإمكانية' => $ thsp_cbp_capability,
'transport' => 'تحديث',
),
'control_args' => المصفوفة (
'label' => __ ('New control control label'، 'my_theme_textdomain'),
'type' => 'radio'، // التحكم بالراديو
'options' => المصفوفة (
'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' => 'option',
'الإمكانية' => $ thsp_cbp_capability,
'transport' => 'تحديث',
),
'control_args' => المصفوفة (
'label' => __ ('تسمية حقل تحديد جديد' ، 'my_theme_textdomain'),
'type' => 'select'، // حدد عنصر التحكم
'options' => المصفوفة (
'option-1' => المصفوفة (
'label' => __ ("الخيار 1" ، "my_theme_textdomain")
),
'option-2' => المصفوفة (
'label' => __ ("الخيار 2" ، "my_theme_textdomain")
),
'option-3' => المصفوفة (
'label' => __ ("الخيار 3" ، "my_theme_textdomain")
)
),
"الأولوية" => 4
)
)

وأخيرًا ، نوعان من عناصر التحكم المعقدة المضمنة في WordPress – تحميل الملفات وتحميل الصور:

/ *
* ===========
* ===========
* تحميل الملف
* ===========
* ===========
* /
'new_file_upload_field' => المصفوفة (
'setting_args' => المصفوفة (
"افتراضي" => "",
'type' => 'option',
'الإمكانية' => $ thsp_cbp_capability,
'transport' => 'تحديث',
),
'control_args' => المصفوفة (
'label' => __ ('تحميل ملف' ، 'my_theme_textdomain'),
'type' => 'upload' ، // التحكم في حقل تحميل الملف
"الأولوية" => 5
)
),

/ *
* ============
* ============
* تحميل صورة
* ============
* ============
* /
'new_image_upload_field' => المصفوفة (
'setting_args' => المصفوفة (
"افتراضي" => "",
'type' => 'option',
'الإمكانية' => $ thsp_cbp_capability,
'transport' => 'تحديث',
),
'control_args' => المصفوفة (
'label' => __ ('تحميل صورة' ، 'my_theme_textdomain'),
'type' => 'image'، التحكم في حقل تحميل الصورة
"الأولوية" => 6
)
)

لاحظ أنني استخدمت “type” => “option” في وضع الحجج لجميع هذه المجالات. سيسمح هذا بتخزين جميع القيم كقيمة واحدة في قاعدة البيانات الخاصة بك. البديل هو “type” => “theme_mod” لكن الآن دعنا نلتزم “بالخيار”.

استخدام مصفوفة الخيارات لإضافة أقسام وإعدادات وعناصر تحكم في أداة التخصيص

إذا لم تكن متأكدًا من كيفية التفاعل مع WordPress Theme Customizer ، فانتقل وتحقق ، لأن هذا ما سنفعله الآن. والفرق الوحيد هو أنه بدلاً من إضافة الأقسام والإعدادات وعناصر التحكم واحدًا تلو الآخر ، سنعمل على أتمتة العملية باستخدام مجموعة متسلسلة أنشأناها. دعنا فقط ننتقل إليها:

function thsp_cbp_customize_register ($ wp_customize) {

/ **
* ضوابط مخصصة
* /
يتطلب (اسم التسجيل (__ ملف _). '/custom-controls.php')؛


/ *
* احصل على جميع الحقول باستخدام وظيفة المساعد
* /
$ thsp_sections = thsp_cbp_get_fields () ،


/ *
* احصل على اسم إدخال قاعدة البيانات الذي سيتم تخزين الخيارات تحته
* /
$ thsp_cbp_option = thsp_cbp_option () ،


/ **
* حلقة من خلال الصفيف وإضافة أقسام مخصص
* /
foreach ($ thsp_sections as $ thsp_section_key => $ thsp_section_value) {

/ **
* يضيف قسم التخصيص ، إذا لزم الأمر
* /
if (! $ thsp_section_value ['الموجود_القيم']) {

$ 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"
* إذا تم استخدام "الخيار" كنوع الإعداد ، فسيتم تخزين قيمته في إدخال
* {prefix} _options table. يتم تعريف اسم الخيار بواسطة الدالة 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'؛
}}

/ **
* يضيف إعدادات التخصيص
* /
$ wp_customize-> add_setting (
$ setting_control_id,
$ thsp_field_value ['setting_args']
) ؛

/ **
* يضيف تحكم مخصص
*
* يجب إضافة قيمة "القسم" إلى الصفيف "control_args"
* بحيث يمكن إضافة التحكم إلى القسم الحالي
* /
$ thsp_field_value ['control_args'] ['section'] = $ thsp_section_key؛

/ *
* $ wp_customize-> add_control تتطلب "خيارات" أن تكون مفتاحًا بسيطًا => زوج قيم
* /
if (isset ($ thsp_field_value ['control_args'] ['options'])) {
$ thsp_cbp_choices = المصفوفة () ؛
foreach ($ thsp_field_value ['control_args'] ['options'] مثل $ 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']
)
) ؛
} elseif ('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']
)
) ؛
} elseif ('upload' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
جديد WP_Customize_Upload_Control (
$ wp_customize,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
) ؛
} آخر {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
) ؛
}}

} // end foreach

} // end foreach

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

من خلال تصفح جميع الأقسام ، وإضافة الأقسام غير الموجودة بالفعل ، ثم تصفح جميع الحقول في كل قسم ، وإضافة إعداد وتحكم لكل منها. هذا كل ما يجري هنا.

هل تذكر أننا استخدمنا “type” => “option” لجميع الإعدادات؟ لهذا السبب لدينا الآن “my_theme_options [$ thsp_field_key]” لكل من الإعدادات والأقسام. سيؤدي هذا إلى تخزين جميع القيم كمصفوفة متسلسلة واحدة يمكنك استردادها باستخدام get_option (“my_theme_options”). أو يمكنك فقط استخدام الوظائف المساعدة المحددة في helpers.php لاسترداد كل من القيم الحالية والقيم الافتراضية لجميع الحقول:

/ **
* احصل على قيم الخيار
*
* المصفوفة التي تحتوي على جميع قيم الخيارات
* يتم استخدام القيمة الافتراضية للخيار إذا لم يحدد المستخدم قيمة
*
*uses thsp_get_theme_customizer_defaults () محدد في /customizer/options.php
*return 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 ()، array ())، $ 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 = array ()؛

// Loop خلال مصفوفة معلمات الخيار
foreach ($ thsp_sections as $ thsp_section) {

$ thsp_section_fields = $ thsp_section ['الحقول']؛

foreach ($ thsp_section_fields كـ $ thsp_field_key => $ thsp_field_value) {

// إضافة مفتاح صفيف ارتباطي إلى الصفيف الافتراضي لكل خيار في صفيف المعلمات
if (isset ($ thsp_field_value ['setting_args'] ['default'])) {
$ thsp_option_defaults [$ thsp_field_key] = $ thsp_field_value ['setting_args'] ['default']؛
} آخر {
$ thsp_option_defaults [$ thsp_field_key] = خطأ؛
}}

}}

}}

// إرجاع صفيف الإعدادات الافتراضية
إرجاع $ thsp_option_defaults؛

}}

هناك شيء واحد آخر يجب أن أذكره – وظيفة رد اتصال التعقيم التي حددناها في صفيف “setting_args”. يتم تعريف الوظيفة في ext.php وتقوم ببساطة بتشغيل البيانات من خلال wp_kses_post وظيفة:

/ **
* وظيفة رد الاتصال التعقيم موضوع مخصص
* /
function thsp_sanitize_cb ($ input) {

العودة wp_kses_post ($ الإدخال) ؛

}}

إلى أين من هنا?

في الوقت الحالي ، يمكنك استخدام Boilerplate الخاص بميزة Theme Customizer في مظاهرك ، كل ما عليك فعله هو تنزيله من Github ، ونسخه في دليل السمة الخاصة بك وتضمين الملف الرئيسي من jobs.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