לוח הדוד בהתאמה אישית של WordPress Theme

לוח הדוד בהתאמה אישית של WordPress Theme
  1. 1. מבוא להתאמה אישית של נושא ה- WordPress
  2. 2. אינטראקציה עם Customizer WordPress Theme
  3. 3. כרגע קורא: לוח הדוד בהתאמה אישית של WordPress Theme
  4. 4. הרחבת קוד ההתאמה האישית של WordPress Theme
  5. 5. לוח הדוד בהתאמה אישית של נושא – אפשרויות מותנות, ערכות נושא ותוספים לילד

עדכון: מאמר זה נערך ב- 19 בפברואר 2013, כדי לשקף את השינויים שנעשו ב- Boilerplate של התאמה אישית של נושא.


אני מקווה שקראת ונהנית משני פוסטים ראשונים של סדרת Customizer Theme – מבוא להתאמה אישית של WordPress Theme ואינטראקציה עם Customizer Theme. עכשיו הגיע הזמן לעבור למנה עיקרית ולהתחיל להרכיב את לוח הדוד של Custom Customizer שתוכל להשתמש בו בערכות הנושא שלך. פוסט זה מכיל כמה גושי קוד ארוכים, אז שימו לב לתגובות מוטבעות.

פתק: אם אתה מעדיף פשוט להשתמש בתבנית הדוד מייד, אתה יכול להוריד אותה מ- Github ולשנות שדות במערך אפשרויות $ על ידי התחברות אל וו המסנן ‘thsp_cbp_options_array’.

מה אנחנו יוצרים

מבנה ספריית התאמה אישית של נושא

מבנה ספריית התאמה אישית של נושא המותאם אישית

  • customizer.php – זהו קובץ ה- Boilerplate המותאם אישית של Theme, זה שמוסיף קטעים, הגדרות ובקרות באמצעות נתונים ממערך האפשרויות
  • custom-controls.php – שיעורי בקרות מותאמים אישית וו וו פעולה המאפשר לך להוסיף פקדים מותאמים אישית משלך
  • helpers.php – פונקציות עוזר, המשמשות לאחזור אפשרויות נושא, ברירת מחדל של אפשרויות וכו ‘.
  • option.php – אפשרויות לדוגמה וו וו סינון המאפשר לערוך את מערך האפשרויות ולהשתמש בשדות משלך
  • customizer-controls.css – CSS בסיסי לשליטה בהתאמה אישית ברדיו באמצעות תמונה

הרעיון כולו הוא להיות מסוגל להעתיק קבצים אלה לספריית משנה בספריית העיצוב שלך, לכלול קובץ customizer.php מהפונקציות.php שלך ולשנות כל דבר שתרצה, כולל ובעיקר מערך האפשרויות, באמצעות ווים של Customizer Custom Boilerplate (הסבר בחלק 4). עדכון: בעבר, פשוט תערוך את options.php, אך השימוש בווקים הופך את הדברים להרבה יותר נקיים.

כעת נשתמש בדוגמה אמיתית – נוסיף בקרת טקסט לקטע חדש של התאמה אישית של ערכות נושא. המערך ממוקם בפונקציה של עוזר ומופעל עליו פילטר כשהוא מוחזר. בדרך זו תוכלו להוסיף אפשרויות נוספות מעיצוב או תוסף לילד. הנה זה:

/ **
* פונקציית עוזר הכוללת מגוון אפשרויות נושא.
*
* @ return array $ אפשרויות מערך אפשרויות נושא
* @ משתמש thsp_get_theme_customizer_fields () שהוגדר בהתאמה אישית / helpers.php
* /
פונקציה thsp_get_theme_customizer_fields () {

/ *
* שימוש בפונקציית עוזר כדי לקבל יכולת ברירת מחדל
* /
$ required_capability = thsp_settings_page_capability ();

אפשרויות $ = מערך (


// מזהה מדור
'new_customizer_section' => מערך (

/ *
* אנו בודקים אם זה קטע קיים
* או חדש שצריך לרשום
* /
'exist_section' => שקר,
/ *
* טיעונים הקשורים למדור
* קודקס - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_section
* /
'args' => מערך (
'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' => 'אפשרות',
'capability' => $ required_capability,
'transport' => 'רענן',
'sanitize_callback' => 'thsp_sanitize_cb',
),
/ *
* שלוט בטיעונים הקשורים
* קודקס - http://codex.wordpress.org/Class_Reference/WP_Customize_Manager/add_control
* /
'control_args' => מערך (
'label' => __ ('תווית חדשה לבקרת טקסט', 'my_theme_textdomain'),
'type' => 'טקסט', // בקרת שדה טקסט
'עדיפות' => 1
)
)

)

),

);

/ *
* וו המסנן 'thsp_customizer_options' יאפשר לך
* הוסף / הסר חלק מהאפשרויות הללו מנושא לילד
* /
להחזיר Apply_filters ('thsp_customizer_options', אפשרויות $);

}

עדכון: המערך נשאר זהה, אך כעת תוכלו גם להעביר את מערך האפשרויות לוו פילטר, עיינו בחלק 4 לפרטים נוספים.

נראה מסובך ממבט ראשון, אני יודע, אבל הרשו לי להסביר.

ה אופציות $ מערך מורכב מקטע (ים) (רק אחד במקרה זה – new_customizer_section), לכל קטע יש טיעונים, שדות וערך בוליאני (קיים_קטע) כדי לציין אם זה קטע חדש, או שאנחנו רק מוסיפים כמה שדות לקיים אחד. מערך הטיעונים זהה לזה שתעבור אליו $ wp_customize-> add_section שיטה. מערך השדות מעט מורכב יותר.

עדכון: מערך בחירות בטיעוני בקרה הוא כיום מערך רב ממדי.

כל שדה מורכב מהגדרת Customizer ובקרת Customizer. זו הסיבה שיש לנו מערכי setting_args ו- control_args. הם כמעט זהים למערכי טיעונים שאליהם היית עובר $ wp_customize-> add_setting ו $ wp_customize-> add_control שיטות. ההבדל היחיד הוא מערך ‘אפשרויות’ בטיעוני בקרה, $ wp_customize-> add_control דורש שזה יהיה מערך מפתח פשוט => ערך ואנחנו משתמשים במקום מערך רב ממדי.

בדרך זו ניתן להעביר נתונים נוספים לכל אחת מהבחירות, כך שאם אתה, למשל, טוען גופנים של גוגל בעיצוב שלך, תוכל לקבל מחרוזות המאפשרות לך לטעון את הגופן הנכון בתוך מערך האפשרויות. . אתה יכול לראות דוגמא לכך ערכת נושא המשתמשת ב- Customizer Boilerplate.

אז אם אתה כבר מודע לשלוש השיטות הללו, הכל מוכר מאוד.

הוספת בקרת תיבת סימון כמעט זהה, אתה רק צריך לשנות את ‘סוג’ ל’תיבת הסימון ‘במערך’ control_args ‘:

/ *
* ==============
* שדה תיבת סימון
* ==============
* /
'new_checkbox_field' => מערך (
'setting_args' => מערך (
'default' => נכון,
'type' => 'אפשרות',
'capability' => $ required_capability,
'transport' => 'רענן',
'sanitize_callback' => 'thsp_sanitize_cb',
),
'control_args' => מערך (
'label' => __ ('תווית בקרת רדיו חדשה', 'my_theme_textdomain'),
'type' => 'תיבת סימון', // בקרת שדה בתיבת הסימון
'עדיפות' => 2
)
),

פקדי רדיו ובחירה כמעט זהים, אתה רק צריך לציין אפשרויות נתונות:

/ *
* ===========
* ===========
* תחום רדיו
* ===========
* ===========
* /
'new_radio_field' => מערך (
'setting_args' => מערך (
'default' => 'אפשרות -2',
'type' => 'אפשרות',
'capability' => $ thsp_cbp_capability,
'transport' => 'רענן',
),
'control_args' => מערך (
'label' => __ ('תווית בקרת רדיו חדשה', 'my_theme_textdomain'),
'type' => 'רדיו', // בקרת רדיו
'אפשרויות' => מערך (
'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' => 'אפשרות -3',
'type' => 'אפשרות',
'capability' => $ thsp_cbp_capability,
'transport' => 'רענן',
),
'control_args' => מערך (
'label' => __ ('תווית שדה בחר חדש', 'my_theme_textdomain'),
'type' => 'בחר', // בחר בקרה
'אפשרויות' => מערך (
'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' => מערך (
'default' => '',
'type' => 'אפשרות',
'capability' => $ thsp_cbp_capability,
'transport' => 'רענן',
),
'control_args' => מערך (
'label' => __ ('העלאת קובץ', 'my_theme_textdomain'),
'type' => 'העלאה', // בקרת שדה העלאת קבצים
'עדיפות' => 5
)
),

/ *
* ============
* ============
* העלאת תמונה
* ============
* ============
* /
'new_image_upload_field' => מערך (
'setting_args' => מערך (
'default' => '',
'type' => 'אפשרות',
'capability' => $ thsp_cbp_capability,
'transport' => 'רענן',
),
'control_args' => מערך (
'label' => __ ('העלאת תמונה', 'my_theme_textdomain'),
'type' => 'תמונה', // בקרת שדה העלאת תמונות
'עדיפות' => 6
)
)

שימו לב שהשתמשתי ‘סוג’ => ‘אפשרות’ בהגדרת טיעונים לכל השדות הללו. זה יאפשר לאחסן את כל הערכים כערך אחד במסד הנתונים שלך. האלטרנטיבה היא ‘סוג’ => ‘נושא_מוד’ אבל בינתיים בואו נצמד עם ‘אפשרות’.

שימוש במערך אפשרויות להוספת מדורי התאמה אישית, הגדרות ובקרות

אם אינך בטוח כיצד ליצור אינטראקציה עם 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) {

/ **
* מוסיף את סעיף ההתאמה האישית, במידת הצורך
* /
if (! $ thsp_section_value ['exist_section']) {

$ thsp_section_args = $ thsp_section_value ['args'];

// הוסף קטע
$ wp_customize-> add_section (
$ thsp_section_key,
$ thsp_section_args
);

} // סוף אם

/ *
* עיין במערך 'שדות' בכל קטע
* ולהוסיף הגדרות ובקרות
* /
$ thsp_section_fields = $ thsp_section_value ['field'];
foreach ($ thsp_section_fields כ- $ thsp_field_key => $ thsp_field_value) {

/ *
* בדוק אם 'אפשרות' או 'נושא_מוד' משמשים לאחסון אפשרות
*
* אם לא מוגדר דבר, $ wp_customize-> add_setting שיטת ברירת המחדל היא 'נושא_מוד'
* אם 'אפשרות' משמשת כהגדרת סוג הערך שלה יאוחסן בערך ב
* {קידומת} טבלת אופציות. שם האפשרות מוגדר על ידי פונקציית 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'] ['אפשרויות'])) {
$ 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'] ['choice'] = $ thsp_cbp_choices;
}


// בדוק את סוג הבקרה
if ('color' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Color_Control חדש (
$ wp_ התאמה אישית,
$ 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_ התאמה אישית,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} elseif ('העלאה' == $ thsp_field_value ['control_args'] ['type']) {
$ wp_customize-> add_control (
WP_Customize_Upload_Control חדש (
$ wp_ התאמה אישית,
$ setting_control_id,
$ thsp_field_value ['control_args']
)
);
} אחרת {
$ wp_customize-> add_control (
$ setting_control_id,
$ thsp_field_value ['control_args']
);
}

} // סוף מקדים

} // סוף מקדים

}
add_action ('התאמה אישית_הרשם', 'thsp_cbp_customize_register');

עובר על כל החלקים, מוסיף את אלה שלא קיימים, ואז עובר על כל השדות בכל קטע, מוסיף הגדרה ובקרה עבור כל אחד מהם. זה כל מה שקורה כאן.

זוכרים שהשתמשנו ‘סוג’ => ‘אפשרות’ לכל ההגדרה? זו הסיבה שעכשיו יש לנו “My_theme_options [$ thsp_field_key]” הן עבור ההגדרות והן עבור הקטעים. פעולה זו תאחסן את כל הערכים כמערך אחד בהמשכים שאתה יכול לאחזר באמצעות get_option (‘my_theme_options’). או שאתה יכול פשוט להשתמש בפונקציות עוזר שהוגדרו ב- helpers.php כדי לאחזר את הערכים הנוכחיים ואת ערכי ברירת המחדל עבור כל השדות:

/ **
* קבל ערכי אפשרות
*
מערך שמחזיק את כל ערכי האפשרויות
* ערך ברירת המחדל של האפשרות משמש אם המשתמש לא ציין ערך
*
* @ משתמש thsp_get_theme_customizer_defaults () מוגדר ב- /customizer/options.php
* @ להחזיר מערך ערכים נוכחיים עבור כל האפשרויות
* @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;

}


/ **
* קבל ברירות מחדל של אפשרות
*
* מחזיר מערך המכיל ערכי ברירת מחדל עבור כל האפשרויות
*
* @ משתמש thsp_get_theme_customizer_fields () מוגדר ב- /customizer/options.php
* @ return מערך $ 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'] ['default'];
} אחרת {
$ thsp_option_defaults [$ thsp_field_key] = שקר;
}

}

}

// החזר את מערך ברירת המחדל
להחזיר $ thsp_option_defaults;

}

יש רק עוד דבר אחד שעלי להזכיר – פונקציית התקשרות חזרה של סניטציה שציינו במערך ‘setting_args’. הפונקציה מוגדרת ב- ext.php ופשוט מריץ נתונים wp_kses_post פונקציה:

/ **
* פונקציית התקשרות חזרה להתאמה אישית של נושא ההתאמה האישית
* /
פונקציה thsp_sanitize_cb ($ קלט) {

להחזיר wp_kses_post (קלט $);

}

לאן מכאן?

לעת עתה, אתה יכול להשתמש בכלי תבנית המותאם אישית של נושא זה בעיצובים שלך, כל מה שאתה צריך לעשות זה להוריד אותו מ- Github, להעתיק לספריית העיצוב שלך ולכלול את הקובץ הראשי מ-functions.php, שהוא 100% פונקציונלי מספיק טוב לרוב ערכות נושא.

מכיוון שהנושא שלך אינו “כמו רוב העיצובים”, בשבוע הבא נראה כיצד להרחיב את לוח הדוד באמצעות פילטר ווים הפעולה שלו.

אשמח לשמוע כיצד לדעתך ניתן לשפר או להרחיב את לוח הדוד הזה, אז אנא יפטרו מהתגובות.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me