שינוי שדה Select לSelect2 לטפסי אלמנטור וJet Engine

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

שלב ראשון – יצירת שדה מסוג Select בטופס מסוג אלמנטור או Jet Engine.

במדריך היום נלמד איך ליצור שדה מסוג Select בטופס של אלמנטור ובטופס של Jet Engine.

יצירת טופס באמצעות Jet Engine

ראשית נתחיל עם Jet Engine:
אנו נכנס לתפריט של Jet Engine אשר נמצא בלוח בקרה שלנו.

לינק ישיר:
https://yourwebsite.com/wp-admin/admin.php?page=jet-engine
*לא לשכוח לשנות את הyourwebsite לכתובת האתר האמיתית שלכם.
לאחר שנכנסו לעמוד, נפעיל את האופציה של הForms ונלחץ על הכפתור הכחול – Save.
כעת נגש למלאכה, ניצור טופס חדש עם שדה select.
בType נבחר את האופציה Select.
שימו לב, היום נוסיף בצורה ידנית שדות בחירה,
אך אפשר למשוך מתוך רשימה קיימת כגון קטגוריות,פוסטים,גלוסרי ועוד.

נלחץ על Apply Changes ולאחר מכן על עדכון.
כעת נוסיף את הטופס לעמוד באמצעות גוטנברג או אלמנטור.

יצירת טופס באמצעות אלמנטור עם שדה Select2

ראשית, נפתח עמוד לעריכה באמצעות אלמנטור.
כעת,נחפש ברשימת הווידגטים את הוידגט – טופס.
לאחר מכן, נלחץ על הוספת פריט, נבחר בשדה מסוג ״בחירה״.
נוסיף אופציות בחירה לפי דרישה ונשמור.

• 

• 

שלב שני – הוספת קבצי select2 לתבנית הבת

כעת,אנו מגיעים למקטע טיפה יותר מורכב, ראשית יש לוודא שיש לנו תבנית בת,לא חובה אך כדאי.
במידה ואתם טוענים כבר את ספריית select2 באמצעות התבנית שלכם, דלגו על הוספת הקבצים והוסיפו רק את המקטע האחרון לתבנית.
בתבנית הבת ניצור תקייה בשם css ועוד תקייה בשם js.
נכניס את קובץ הjs וקובץ הcss בהתאם לתקייה.
לינק להורדת קבצי הjs והcss.

מקטע קוד להוספה בתבנית הבת:

/** add select2 for jet-engine-forms by itdesign.co.il **/
add_action( 'wp_enqueue_scripts', 'itdesign_select2_enqueue' );
function itdesign_select2_enqueue(){
    wp_enqueue_style('select2', get_stylesheet_directory_uri() . '/css/select2.min.css');
    wp_enqueue_script('select2', get_stylesheet_directory_uri() . '/js/select2.min.js', array('jquery'));
    // js file mycustom
    wp_enqueue_script('mycustom', get_stylesheet_directory_uri() . '/js/mycustom.js', array('jquery', 'select2'));
}
add_action('wp_enqueue_scripts', 'itdesign_select2_enqueue');

שימו לב – במידה ואתם כבר מושכים את ספריית select2 בתבנית או דרך תוסף – אפשר להשתמש בקוד הבא:

/** add select2 for jet-engine-forms by itdesign.co.il **/
add_action( 'wp_enqueue_scripts', 'itdesign_select2_enqueue' );
function itdesign_select2_enqueue(){
    // js file mycustom
    wp_enqueue_script('mycustom', get_stylesheet_directory_uri() . '/js/mycustom.js', array('jquery', 'select2'));
}
add_action('wp_enqueue_scripts', 'itdesign_select2_enqueue');

סיכום ותוצאות

כעת לאחר, שהוספנו את הקוד בתבנית הבת ויצרנו את השדות, שדות הselect שלנו יהפכו לשדות מסוג select2.

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