בפוסט השני בסדרה הפוסטים על Dynamic Content for Elementor אני רוצה לדבר על הווידג'ט שנקרא File Browser. (לפוסט הראשון על Add to Favorites).
כבר מהשם אתם יכולים להבין מה הוא נותן לנו אבל בוא נראה יותר לעומק את האפשרויות וגם נדגים מקרים אמיתים לדוגמה לשימוש בו.
דוגמאות לשימוש בסייר קבצים
נתחיל מהסוף, למה שנרצה בכלל את היכולת הזאת?
אני אתן שתי דוגמאות קונקרטיות אבל שכל אחד יקח את זה לתחומו. יש באמת הרבה רעיונות לשימוש ביכולת כזאת.
- יש לכם אתר צילומים בו גולשים יכולים להעלות תמונות שהם צילמו. אתם רוצים אולי להציג בדף ארכיון את כל התמונות שהעלו משתמשים וקשורות לאותו מונח – למשל דף ארכיון לקטגוריה או טקסומניה אחרת של העיר ירושלים. התוצאה תהיה שבדף שמציג את הטקסומניה "ירושלים" יהיה בין השאר אזור בו יוצגו כל התמונות שמשתמשים העו הקשורות לירושלים.
- יש לכם אתר טיולים ואתם רוצים לאפשר לגולשים להעלות מפות של טיול, בין אם זה סיור בעיר, מפות של אטרקציות או מפה של טרק. וכמו בדוגמה לעיל, בפוסט/ארכיון שמייצג נושא או טיול מסוים אתם רוצים להראות את כל הקבצים הקשורים שמשתמשים העלו.
אלו שתי דוגמאות הן מייצגות טיפה בים.
איך אפשר שגולשים יעלו קבצים ולהציג אותם לגולשים
לפני שנראה איך עושים את זה עם DCE, נבין באופן כללי איך זה אמור לעבוד ומה אנחנו צריכים לעשות כדי לגרום לזה לקרות.
ראשית צריך לתת לגולש להעלות קובץ. בשביל זה יש שתי אפשרויות:
- טופס עם אפשרות להעלות קבצים – יש המון כאלה ויש אחד מובנה באלמנטור פרו.
- קוד php שמטפל בהעלאת קובץ. למעשה בעצם ניצור בעצמנו טופס שמאפשר לגולש לבחור קובץ ולהעלות אותו. המימוש הפשוט ביותר הוא ע"י קריאה ל-
wp_handle_uploadאוmedia_handle_uploadאבל במציאות זה קצת מורכב יותר כי צריך לדאוג להרבה דברים כמו: קובץ לא נבחר, קובץ גדול מדי, סוג קובץ לא נתמך, ריבוי קבצים, שגיאה בעת העלאה ועוד.
אם מעניין אותם לראות דוגמאות, הנה שתי דוגמאות למימוש פשוט. דוגמה 1 , דוגמה 2.
לאחר הקובץ נשמר בתיקיה בשרת, עלינו להציג את אותו לגולשים. גם לזה יש שתי אפשרויות:
- שימוש בתוסף כמו Simple File List.
- קוד php שמדפיס את רשימת הקבצים בנתיב מסוים. אם מדברים על מימוש נאיבי, נניח שיש לנו כבר את הנתיב המדויק ואז אנו יכולים על ידי פקודת scandir או glob או readdir להציג את הקבצים. אבל כרגיל במציאות זה לא כזה פשוט כי נרצה לתמוך בנתיבים מותאמים, נרצה להסתיר קבצים מסוימים, להציג מידע נוסף על הקובץ, לאפשר להוריד את הקובץ ועוד.
לפי מה שראינו עקרונית אפשר להשתמש בתוסף טפסים כדי להעלות קובץ ובתוסף הצגת קבצים כדי להציג.
בשביל צרכים מסוימים זה בהחלט יכול להספיק אבל נראה האפשרויות שיש לנו ב DCE הן מתקדמות יותר.
העלאת קבצים עם אלמטור פרו או תוסף אחר
לעלות קובץ באמצעות טופס של אלמנטור פרו זה פשוט ממש. כל מה שצריך זה להוסיף לטופס שדה מסוג File ואם רוצים אז גם להגדיר דברים נוספים כמו סוגי קבצים, גודל ועוד.
אבל זה לא מספיק טוב לנו.
אלמנטור כברירת מחדל מעלה את כל הקבצים לתיקיה מסוימת בשרת – שזה בסדר לנו – אבל הוא גם נותן להם מות מיוחדים וייחודיים כדי למנוע התנגשויות. כלומר אם העלתם קובץ שנקרא "מפת אטרקציות בלונדון" לא יהיה זכר לשם זה בקובץ שהועלה וזה בהחלט חסר ערך למשתמש לראות קובץ עם שם שלא מתאר את תוכן הקובץ.
לכן יש לאלמנטור פתרון לזה והוא שימוש ב hook. במהלך העלאת הקובץ בתוך פונקציית process_field נקרא wp_unique_filename ואנחנו יכולים לנצל אותו בשביל לתת שם ייחודי שאנחנו רוצים. דוגמה לזה אפשר לראות ב GitHub issue הזה. העניין הוא שזה לא בדיוק עובד כמו בדוגמה אז צריך לשחק עם זה. הפתרון שלי היה קצת אחר והוא כולל שינוי באלמנטור עצמו. לא מומלץ למי שלא מורגל ב version control כי בכל עדכון גרסה של אלמנטור פרו, השינוי ימחק.
לכן מי שלא מתסדר עם אלמטור פרו, אולי עדיף שישתמש בתוסף טפסים אחר.
הצגת קבצים עם Dynamic Content for Elementor
הוסיפו את הווידג'ט הבא לדף. 
אם אתם לא מתכוונים להוסיף את הכפתור לדף ספציפי, הדרך הנכונה לעשות את זה היא על ידי הוספה של הווידג'ט ל single post template או ל archive template בעזרת theme builder כך שהכפתור יופיע בקביעות בסוג הפוסט המדובר.
לאחר הוספת הווידג'ט נוכל לבחור Select path ובהתאם לזה יופיעו אפשרויות נוספות.
החלק החשוב ביותר הוא ההבנה של ההגדרה Select path. האפשרויות הן:
- Uploads – מאפשר לבחור תיקיה ותת תיקיה תחת הנתיב הדיפולטי של העלאת קבצים בוורדפרס. /wp-content/uploads. תוכלו גם למיין ולהגביל גישה על פי Role כולל רידיירקט למשתמשים לא מורשים.
- Custom – מאפשר לבחור כל נתיב תחת תיקיית ההתקנה של וורדפרס. גם פה כמו באפשרות הקודמת ניתן להגביל גישה, למיין ועוד.
- Media Library – מאפשר לבחור קבצים מתוך תיקיית מדיה או מתוך שדה בפוסט שמכיל מדיה.
- Taxonomy – מאפשר לבחור קבצים מתוך טקסונומיה שמוגדרת למדיה. בשביל זה תצטרכו ליצור קטגוריה ולשייך אותה למדיה ואז תוכלו להציג מדיה רק מאותה קטגוריה.
- Post Medias – מאפשר להציג רק קבצים שהועלו לפוסט הנוכחי.
- CSV – מאפשר להציג קבצים על ידי פרסור קובץ CSV שמסמלץ את הקבצים/תיקות בשרת.
בכל אחת מהאפשרויות תבחרו, תוכלו גם לבחור Enable Metadata Info ויפתח לכם אזור הגדרות נוסף
בנוסף, התצוגה הסופית ניתנת לקסטומיזציה מלאה בעזרת אלמנטור. ניתן לעצב בנפרד תיקיות, קבצים ותתי תיקיות.
עוד יכולת מעולה היא האפשרות להוסיף חיפוש מהיר! אם אתם מציגים כמה תיקיות או הרבה קבצים, יהיה לכם שדה חיפוש שברגע שתקלידו בו לפחות 3 תווים, יוצגו לכם הקבצים הרלוונטים.
מקווה שעכשיו מובן מה התכוונתי כשכתבתי שהאפשרויות של הצגת הקבצים בתוסף, הן מתקדמות מאוד.
יש פה גמישות מלאה גם במה להציג, למי יש הרשאות ובעיצוב הסופי של התצוגה. והכל בצורה פשוטה מתוך אלמנטור.
חזרה לדוגמה אמיתית של הצגת קבצים
אם נחזור רגע לדוגמה שהבאתי למעלה, נניח ואנחנו רוצים להציג תמונות שהועלו על ידי גולשים אבל אנחנו רוצים להציג אותם בפוסט הרלוונטי, כלומר תמונות של ירושלים בפוסט שמדבר על ירושלים. נוכל להוסיף את הוידג'ט לטמפלייט סינגל שמייצג פוסט מסוג "עיר" נניח ולבחור פה Post Medias. כלומר נציג רק קבצים שהועלו לפוסט הספציפי הזה. נוכל כמובן לפלטר אילו קבצים יוצגו, להציג תמונה או רק את שם הקובץ, להגדיר הרשאות אם רוצים, להציג את גודל הקובץ וסטטיסטיקת הורדות ועוד.
את אותו דבר נוכל גם להשיג על ידי דרכים אחרות. למשל, בחירת Taxonomy אם מוגדרת לנו קטגוריה במדיה וכל התמונות של ירושלים מוגדרות תחת קטגוריית ירושלים.
סיכום
ראינו איך לאפשר לגולשים להעלות קבצים ואיך להציג אותם לגולש בצורה גמישה ומתקדמת. יכולת זאת מצטרפת לעוד עשרות יכולות שהתוסף הנהדר הזה נותן לנו.
אם אתם רוצים לראות דוגמה של סייר קבצים בפעולה, כנסו לאתר הטרקים והטיולים שלי, לטרק מסוים ותראו.
אם אהבתם את התוסף ותרצו לרכוש אותו, אשמח אם תרכשו דרך הקישור שלי – Dynamic Content for Elementor.
