אם אתם בונים אתר דינאמי, הגיוני שאתם משתמשים בשדות מותאמים אישית/שדות דינאמיים. אני מעדיף לשם כך את השימוש ב- Advanced Custom Fields אבל אולי אתם משתמשים ב PODS המצוין או ב Jet Engine או Toolset. המדריך פה מתייחס ל ACF אבל אני בטוח שתוכלו ליישם גם בשאר הכלים.
למה נרצה להציג אייקונים כשדה דינאמי?
דוגמה אחת שאני השתמשתי בה היא כשיש לכם רשימת יכולות או מאפיינים ואתם רוצים לבחור מה קיים בתוכן מסוים על ידי סימון V על המאפיין הרלוונטי ושאותו מאפיין לא יוצג כטקסט אלא באמצעות אייקון.
נעבור מהתאוריה למעשי, נניח יש לכם אתר של הזמנת טיסות ואתם רוצים לסמן בכל טיסה עם מחיר הכרטיס כולל מזוודה וארוחה. תוכלו לעשות שדה "תיבת סימון" או check box בשם המוכר יותר, עם שתי אפשרויות שלאחד יקראו "כולל מזוודה" ולשני "כולל ארוחה" ולסמן V על האפשרויות הרלוונטיות. במסך הזמנת הכרטיס שדות אלו יוצגו כטקסט שכתבנו.
אבל אם אתם מכירים אתרי הזמנת טיסות (אחרי כמעט שנה של קורונה זה לא מובן מאליו), בטח ראיתם שנהוג לסמן מאפייני כרטיס כאלה כאייקונים ולא טקסט.
באמצעות שימוש בפלאגין
ישנו פלאגין שיכול לעזור לכם בזה שנקרא Advanced Custom Fields: Font Awesome Field אבל יש בזה שתי בעיות,
- הוא לא עודכן זמן רב.
- כברירת מחדל, הוא תומך רק באייקונים של FA. יש בו פילטר שנותן את האופציה להוסיף אייקונים מותאמים שלכם "ACFFA_get_icons" אבל אז זה מעבד את היתרון של שימוש בפלאגין משום שצריך לכתוב קוד.
בכל מקרה זו בהחלט אפשרות שתכולו להשתמש בה.
הוספת אייקונים ללא פלאגין נוסף
בשלב ראשון תצטרכו להגדיר שדה חדש, נקרא לו "מאפייני כרטיס". נגדיר אותו כשדה מסוג checkbox. כעת ניתן לו את הערכים שניתן לבחור. נרשום "Food" ו "Luggage". במצב זה יוצג לנו טקסט. כדי שנוכל להציג אייקון, אחרי כל ערך הכניסו רווח, הוסיפו סימן : וכעת הכניסו html שמייצג את האייקון. לדוגמה לאייקון של ארוחה נכתוב:
Food : <i class="fas fa-utensils" aria-hidden="true"></i>
ניתן לכתוב גם בעברית "כולל ארוחה". על התכונה aria-hidden תוכלו לקרוא פה.
הרעיון בשימוש בשדה מסוג checkbox הוא שלפני הנקודותיים זה השם או ה label ואחרי הנקודותיים זה הערך של השדה. נוכל להחליט בהגדרה של השדה האם בסופו של דבר יוחזר לשדה הערך או השם. במקרה שלנו נבחר שיוחזר הערך שזה ה html שמייצג את האייקון.
איך יודעים את הקוד של כל אייקון
ניתן לדעת בהרבה דרכים אבל במקרה שלנו שאנחנו מדברים על FA, הכי טוב לבדוק באתר הרשמי של FA. נכנסים לאתר, מחפשים בתיבת החיפוש את האייקון, לוחצים עליו ולמעלה יהיה רשום כלם הקוד אותו תצטרכו להעתיק. למשל זה האייקון של האוכל שרשמתי.
במקרה ויש לכם אייקונים מותאים אישית, תוכלו לקחת את הקוד דרך inspect ב developer tools או דרך הספרייה ממנה לקחתם את האייקונים – למשל icomoon.
בחירת התוכן של השדה
מכיוון שזהו שדה "תיבת סימון", אין צורך לזכור איזה קוד להכניס, פשוט בחרו V בתיבה הרלוונטית וזהו. זה יכול להיות באדמין בעת עריכת פוסט וזה יכול להיות טופס אותו הגולש יכול למלא ב frontend.
הצגת האייקונים ב UI
פתחו את הטמפלייט הרלוונטי באלמנטור וגררו ווידג'ט של עורך טקסט. בתוכן, בחרו בשדה הדינאמי שזה עתה יצרתם. והנה יש לכם אייקונים שנבחרו דינאמית. תוכלו לערוך את הצבע והפונט כמו בכל שדה טקסט רגיל.
עיצוב האייקונים
עיצוב בסיסי ניתן לעשות בעזרת העורך של אלמנטור אבל יש בכמה בעיות שדורשות עיצוב עם קצת CSS. בעיה אחת היא, שיש פסיקים בין האייקונים שאולי תרצו להוריד. בנוסף, אולי תרצו לרווח את האייקונים בצורה נוחה ורספונסיבית. אמנם יש באלמנטור אפשרות להגדיר ריווח אותיות שיתפוס במקרה הזה לאייקונים אבל לפחות בגרסה אני עבדתי איתה, לא היה ניתן לבחור את המדד בו הרווח נמדד (px, rem, etc).
כדי לפתור את עניין הריווח, זה פשוט מאוד, כתבו את ה CSS הבא או שנו בהתאם לצורך שלכם:
selector{
letter-spacing: 0.5rem;
}כדי להעיף את הפסיקים, אני לא חושב שיש אפשרות מובנית של הסתרת תו מסוים על ידי CSS אבל אני ממש לא מומחה CSS אז יתכן ויש. בכל מקרה אפשר לפתור את זה בדרך עקיפה אך פשוטה מאוד.
ראשית צריך שלא יראה שום טקסט בשדה והדרך הכי פשוטה לעשות את זה היא לתת לטקסט את אותו הצבע של הרקע. זכרו שאנחנו לא רוצים להעלים באמת את התוכן כי אז האייקונים יעלמו אלא רק שהמשתמש לא יראה את התוכן.
כעת יש לנו שתי אפרויות לעצב את האייקונים. או גישה אליהם על ידי שימוש ב class, בדיוק כמו שהוא רשום בקוד שהכנסתם בהגדרת השדה או על ידי שימוש ב id אם יש לכם צורך.
כדי להשתמש ב id, בעריכת השדה, תנו id לאייקון בהגדרת השדה:
Food : <i id="your-id" class="fas fa-utensils"></i>
כעת כתבו את ה CSS הבא כדי לתת לאייקונים בלבד צבע אחר: (שנו את הid בהתאם למה שרשמתם).
#your-id{
color: #ffffff;
}
/*or*/
selector .icon-class {
color: #ffffff;
}כעת הטקסט – כלומר הפסיקים – יוסתרו אבל האייקונים יהיו צבועים בצע שתרצו.
