
גילה אולייר · העין השלישית
גלריה וחנות הדפסים · UX/UI · WooCommerceגילה אולייר היא צלמת וסופרת ספרי ילדים, והמותג שלה נקרא "העין השלישית". היא מצלמת נופים, מאקרו של פרחים, שקיעות ומסעות. כשהתחלנו לא היו לה אתר ודומיין, רק מאות תמונות שהגיעו במיילים ובתיקיית דרייב. בניתי לה את photollier.com: גלריה של 223 תמונות ב-9 קטגוריות, שבה כל תמונה היא גם מוצר עם 5 אפשרויות הדפסה. האתר נמסר בלי סליקה ועובד במצב קטלוג, וגילה מוסיפה בו תמונות ומוצרים בעצמה.

30 שניות, אם אתה ממהר.
ארכיון של מאות תמונות שהגיעו כקבצים מפוזרים, צלמת שהיא גם סופרת, ולקוחה שצריכה להוסיף תמונות לבד, בלי ידע טכני. ובנוסף, הוחלט למסור את האתר בלי סליקה, אבל החנות לא יכלה להיראות שבורה.
מוקאפ HTML מלא לשישה עמודים, שהעברתי לאלמנטור סקשן אחרי סקשן. את הגלריה הפכתי ל-WooCommerce, ואת מה שגילה צריכה לעשות צמצמתי למסך אחד: כותרת, תמונה וקטגוריה. כל השאר נוצר לבד.
photollier.com חי באוויר, עם 223 תמונות ב-9 קטגוריות, מצב קטלוג עם כפתורי "צרו קשר" ווואטסאפ, טופס ששומר כל פנייה בלוח הבקרה, ועמודי פרטיות, נגישות ותקנון שנכתבו לפי מה שקורה באתר בפועל.
מהמוקאפ לאתר החי.
גררו את הקו כדי להשוות. משמאל: עמוד תיק העבודות במוקאפ ה-HTML (15.6.2026). מימין: אותו עמוד באתר החי. במוקאפ, הטקסטים לא התאימו לאף אחת מהתמונות, ולכן לפני המסירה זיהיתי כל תמונה וזיווגתי אותה לכותרת הנכונה.
מוקאפבאוויר
בלוגו של המוקאפ עוד מופיע השם כפי שנכתב בשאלון. באתר החי הוא תוקן ל"אולייר" בכל העמודים, התבניות והמוצרים.
ארכיון, עוד לא אתר.
גילה הגיעה עם תמונות: שקיעות, סרדיניה, אגמים ושלכת בצפון-מערב ארה"ב, המצפה התת-ימי באילת, אגינה ביוון ועוד. 95 תמונות מדרייב, 66 מג'ימייל, 15 מאגינה, ושני ספרי ילדים כקובצי PDF. לא היו לה לוגו, שפה מותגית או אינסטגרם, רק עמוד פייסבוק עסקי.
מאות קבצים, בלי סדר
התמונות הגיעו במיילים ממוספרים לפי נושא ובתיקיית דרייב. היה צריך להפוך אותן לגלריה מסודרת לפי קטגוריות, שאפשר גם לקנות ממנה. הרפרנס של גילה היה אתר תמונות שמסודר לפי קטגוריות.
שלוש זהויות באתר אחד
צלמת (גלריה וחנות), סופרת (שני ספרי ילדים שיצאו לאור) ומספרת סיפורים (תיק עבודות). כל אחת מהן צריכה מקום משלה, בלי שהאתר יתפזר.
לקוחה שמנהלת לבד
גילה לקוחה מבוגרת, בלי ידע טכני, והיא צריכה להוסיף תמונות ומוצרים בעצמה. כל הגדרה שהיא צריכה לזכור היא עוד מקום שבו אפשר להיתקע.
חנות, בלי סליקה
בשאלון היא ביקשה שלוש דרכי פעולה: טופס, וואטסאפ ורכישה אונליין. ב-18.8 היא החליטה למסור את האתר בלי סליקה. קופה בלי אמצעי תשלום נראית כמו אתר שבור, ולכן היה צריך חנות שעובדת כקטלוג.
"המצלמה שהיא העין השלישית שלי, עוזרת לתעד את היופי ומראות שתפסו את עיני באותו רגע והזכות לחלוק זאת עם עוד אנשים." כך גילה תיארה את הגישה שלה לצילום בשאלון האפיון, והמשפט מופיע היום גם בעמוד האודות שלה.
שישה עמודים, וגלריה שהיא גם חנות.
כל אחת משלוש הזהויות של גילה קיבלה עמוד משלה: גלריה וחנות, תיק עבודות וספרים. "צרו קשר" הוא כפתור CTA בהדר ולא פריט בתפריט, ובתפריט עצמו יש כפתור זהב "לגלריה".
גלריה וחנות
- 223 תמונות/gallery/
- 9 קטגוריות ועוד "הכל"
- עמוד מוצר עם 5 אפשרויות
תיק עבודות
- 6 כרטיסים/portfolio/
- תמונה, כותרת וסיפור
ספרים
- "ברח לי"לגילאי 4–8 · 2018
- "בארץ הגמדים"לגילאי 3–6 · 2023
אודות וקשר
- אודות
- טופס אמיתי/contact/
מנהלה
- מדיניות פרטיות
- הצהרת נגישות
- תקנון
שלוש זרימות: של המבקרים, ושל גילה.
כל החלטה, והסיבה שמאחוריה.
מצב קטלוג במקום חנות שבורה
המחירים והגדלים ממשיכים להופיע. "הוספה לסל" הוחלף ב"לרכישת התמונה — צרו קשר" ובכפתור וואטסאפ, שבהודעה שלו כבר כתוב שם התמונה. /cart ו-/checkout מפנים לטופס, שנפתח עם ההודעה ממולאת ועם הנושא "רכישת הדפס" מסומן.
חזרה לחנות מלאה בשורה אחת
מצב הקטלוג הוא מתג, לא שינוי במוצרים. אם תיפתח סליקה, gila_catalog_mode = 0 מחזיר את החנות המלאה, וכל 223 המוצרים והווריאציות שלהם נשארים כמו שהם.
צ'קבוקס, לא סוג תוכן חדש
תמונה שגילה רוצה רק להציג מסומנת בצ'קבוקס אחד, "תמונה לתצוגה בלבד", במסך המוצר הרגיל. בחרתי בזה ולא בסוג תוכן נפרד, כדי שלגילה יהיו מסך אחד וזרימה אחת לזכור.
פילטרים שנבנים מהמוצרים
סרגל הפילטרים והרשת נבנים ישירות ממוצרי WooCommerce, ולא נכתבים ידנית בעמוד. קטגוריה חדשה מופיעה בגלריה לבד, וספירת כל פילטר תואמת בדיוק את מספר המוצרים בקטגוריה.
מוצר חדש בשלושה שדות
מוצר חדש בקטגוריית התמונות מקבל לבד 5 וריאציות, מחירים, תיאור ומק"ט. ב-18.8 אימתתי מקצה לקצה שגילה יכולה להעלות תמונה, ליצור מוצר, לשנות שם, להחליף תמונה, להעביר לפח, לשחזר ולמחוק.
פנייה שלא הולכת לאיבוד
כל פנייה מהטופס נשלחת במייל לגילה, עם Reply-To של הפונה, ונשמרת גם כ"פניות מהאתר" בלוח הבקרה. כך ליד לא נעלם, גם אם המייל נכשל.
מקבצים במייל לאתר חי, בכ-10 שבועות.
הפרויקט לא רץ ברצף. הוא התקדם בחמישה שלבים בין יוני לאוגוסט 2026, ובכל שלב צילמתי כל עמוד בגרסאות לפני, אחרי, חי וסופי, כדי לוודא שמה שאני רואה הוא גם מה שמופיע באתר.
לאסוף את הארכיון
התמונות הגיעו במיילים לפי נושא (שקיעות, סרדיניה, אגמים ושלכת, המצפה התת-ימי באילת ועוד), ועוד 95 תמונות מדרייב, 66 מג'ימייל ו-15 מאגינה. מקובצי ה-PDF של שני ספרי הילדים חילצתי את הכריכות. במקביל, גילה מילאה שאלון אפיון.
מוקאפ HTML מלא לשישה עמודים
ראשי, גלריה, אודות, תיק עבודות, ספרים וצור קשר, עם קובץ CSS משותף. באותם ימים עברתי 9 איטרציות על הדר המובייל, עד לגרסה שבה הלוגו במרכז, ההמבורגר מימין והכפתור משמאל, במיקום אבסולוטי ובלי הבלבול של flex ב-RTL.



מהמוקאפ לאלמנטור
בניתי מחדש את כל שישת העמודים. כל סקשן הוא container עם ווידג'ט HTML אחד, כדי לשמור נאמנות מלאה למוקאפ, והפריסה נעשתה דרך REST API בסקריפטי Python. הגלריה התחילה עם 21 תמונות, ובין 30.6–1.7 העליתי תמונות נוספות מג'ימייל.
223 תמונות, 223 מוצרים
כל תמונה הפכה למוצר variable עם 5 וריאציות, ואת מודל המחירים של גילה יישמתי כפי שהוא. המק"ט בנוי כ-GILA-<media_id>, כך שאפשר להריץ את הסקריפט שוב בלי ליצור כפילויות. באותו יום החנות נפתחה לציבור, ותיקנתי את המטבע מדולר לשקל.
מאתר יפה לכלי שגילה מנהלת
זיהיתי ויזואלית כל אחת משש התמונות בתיק העבודות וזיווגתי אותה לכותרת הנכונה: לוע הסחלב, פלמינגו ועתיקות בבריכות המלח בעתלית, אירוס הארגמן ומפרץ סלעי בסרדיניה. אחר כך הגיעו הטופס האמיתי, הגלריה הדינמית, ההקמה האוטומטית של מוצרים, "תצוגה בלבד", מצב הקטלוג (אחרי ההחלטה על מסירה בלי סליקה), עמודי המנהלה, הפוטר הרחב ובדיקת מסירה מקצה לקצה.
קרם, דיו וזהב.
האופי הוא של גלריית אמנות: אלגנטי וחם, קרם וזהב, ותמונות גדולות. ה-Hero של דף הבית הוא שקיעה מעל הים. כל המחלקות ב-CSS מתחילות ב-gila-, כדי שלא יתנגשו באלמנטור, ועל כל תמונה בגלריה יש סימן מים "© גילה אולייר".
פלטה (מתוך ה-CSS החי)
טיפוגרפיה
סריף עברי לכותרות ופונט נקי לגוף הטקסט, וכל האתר בנוי RTL מלא.
הדר שקוף מעל השקיעה
ה-Hero של דף הבית ממלא את כל המסך, והתפריט נשאר שקוף עד גלילה של 60px.
הדר מובייל ב-9 איטרציות
בגרסה הסופית: לוגו במרכז, המבורגר מימין וכפתור "צרו קשר" משמאל, במיקום פיקסלים אבסולוטי. כך הסדר לא משתנה בגלל flex ב-RTL.
פוטר רחב מהעמוד, בכוונה
הפוטר הורחב ל-1560px ול-4 עמודות, כשגוף העמוד הוא 1200px. פרטי הקשר קיבלו עמודה משלהם. נבדק ברוחבים 1560, 1024 ו-390, בלי גלילה אופקית.
עמודי מנהלה שאפשר לקרוא
Hero בסגנון האתר, תוכן עניינים דביק עם scroll-spy שמתקפל ל-<details> מתחת ל-980px, סעיפים ממוספרים וגרסה מותאמת להדפסה.
קוד קטן, שמחזיק את כל הזרימה.
הבסיס הוא WordPress עם Elementor Pro (הדר ופוטר ב-Theme Builder), תבנית Hello Elementor ו-WooCommerce. כל מה שייחודי לאתר נכתב ב-6 סניפטים מותאמים.
[gila_gallery]בונה את סרגל הפילטרים ואת הרשת ישירות מהמוצרים. התוצאה נשמרת בקאש (transient) שמתנקה בכל שינוי מוצר.
[gila_contact_form]שולח מייל עם wp_mail ושומר כל פנייה כ-CPT "פניות מהאתר". מוגן ב-nonce, ב-honeypot ובחסימת שליחה כפולה.
gila_catalog_modeמתג מצב הקטלוג: כפתורי "צרו קשר" ווואטסאפ, והפניה של העגלה והקופה לטופס עם מילוי מראש.
woocommerce_new_productהקמה אוטומטית: 5 וריאציות, מחירים, תיאור ומק"ט לכל מוצר חדש בקטגוריית התמונות.
render_contentפילטר שמריץ do_shortcode בווידג'ט HTML של אלמנטור, רק על תוכן שמכיל [gila_. כך הטופס נשאר בתוך ה-grid של העמוד.
[gila_year]שנת זכויות דינמית בפוטר, כדי שאף אחד לא יצטרך לעדכן אותה בינואר.
מה נבדק לפני המסירה
- 223 כרטיסים ו-10 כפתורי פילטר (כולל "הכל"). ספירת כל פילטר תואמת את מונה הקטגוריה, ואין אף תמונה שבורה.
- הטופס: המייל נשלח (
sent: true) והפנייה נשמרה (mail_sent: 1). - הגלריה החיה נבדקה שוב ב-1.10.2026, ועדיין מציגה 223 כרטיסים.
עמודי מנהלה לפי העובדות
- כתוב במפורש שאין סליקה ושלא נאספים פרטי אשראי.
- חריגי ביטול למוצר בהזמנה אישית ולקובץ דיגיטלי.
- איסור על שימוש מסחרי, NFT ואימון מודלי AI.
- 12 כלי הנגישות ברשימה נלקחו מההגדרות של התוסף בפועל.
מה עוד לא נמדד
- באתר החי אין GA4 ואין Search Console.
- לכן אין לי נתוני תנועה, פניות או מכירות להציג, ואני לא מציג כאן תוצאות עסקיות.
- מה שכן מוצג כאן נבדק טכנית, ולא הוערך.
כשהכל נראה תקין, ושום דבר לא עובד.
רוב התקלות בפרויקט הזה לא נראו מבחוץ: העמוד נטען, הכפתור הגיב, ההודעה אמרה "נשלח". לחצו על כל אחת כדי לפתוח אותה.
01העריכות הצליחו, והמבקרים לא ראו כלוםשתי התקנות, שני מסדי נתונים
+
עריכות דווחו כמוצלחות ואפילו אומתו, אבל באתר שהמבקרים ראו לא השתנה דבר.
היו שתי התקנות נפרדות. photollier.com הוא עותק של התקנת הסטייג'ינג הישנה, עם מסד נתונים משלו, ואני עבדתי מול הישנה.
כל סקריפט מקבל את ההוסט כארגומנט, וברירת המחדל היא האתר החי. לפני כל עבודה אני בודק מול איזה הוסט אני רץ.
02טופס שאמר "נשלח!" ולא שלח כלוםשארית מהמוקאפ
+
הטופס הציג "✓ ההודעה נשלחה!", ושום פנייה לא הגיעה.
טופס המוקאפ עשה רק preventDefault. הוא מעולם לא שלח דבר.
שורטקוד שמשתמש ב-wp_mail ושומר כל פנייה כסוג תוכן בלוח הבקרה, עם nonce, honeypot וחסימת שליחה כפולה.
03דף ברוחב 11,688 פיקסליםבגלל שדה שאף אחד לא רואה
+
אחרי שהוספתי את הטופס, כל הדף קיבל גלילה אופקית. רוחב המסמך הגיע ל-11,688px.
שדה ה-honeypot, שנועד לתפוס בוטים, הוסתר עם position:absolute; left:-9999px.
display:none. השדה עדיין שם בשביל הבוטים, והדף חזר לרוחב שלו.
04העגלה "לא שומרת עוגיות"האבחון הראשון שלי היה שגוי
+
נראה כאילו העגלה לא שומרת שום מוצר.
האבחון הראשון שלי, "השרת בולע את Set-Cookie", היה שגוי. בפועל ניסיתי להוסיף לעגלה מוצר variable בלי לבחור וריאציה, ו-WooCommerce דחה את זה כמצופה. בנוסף, באנר העוגיות חוסם עד שלוחצים עליו.
הוכחתי עם variation_id שהעגלה עובדת. החוסם האמיתי היחיד היה שאין שער סליקה, והקופה הציגה "אין אמצעי תשלום זמינים". התשובה לזה הייתה מצב הקטלוג.
05קישור לטופס שפתח עמוד מוצרמילה שמורה של וורדפרס
+
הקישור /contact/?product=X, שאמור לפתוח את הטופס עם שם התמונה, הציג עמוד מוצר במקום עמוד הקשר.
product הוא query var שמור של וורדפרס.
שיניתי את שם הפרמטר ל-gila_product.
06מוצר חדש, בלי וריאציותההוק רץ מוקדם מדי
+
מוצר שנוצר דרך ה-API לא קיבל את 5 הווריאציות האוטומטיות.
save_post_product רץ לפני ש-WooCommerce משייך למוצר את הקטגוריות ואת התמונה.
העברתי את הלוגיקה להוקים woocommerce_new_product ו-woocommerce_update_product.
07בורר גודל בעברית שנתקעואי אפשר היה לקנות
+
בורר הגודל בעמוד המוצר "נתקע", ואי אפשר היה להשלים רכישה.
מפתח המאפיין "גודל" נשמר לא מקודד, ו-WooCommerce חיפש slug.
sanitize_title('גודל') כמפתח, והתווית העברית כערך.
המוצר עצמו.
הצילומים נלקחו מהאתר החי ב-1.10.2026, חוץ מתיבת ההזמנה ותפריט הנגישות, שצולמו באוגוסט 2026 בזמן העבודה. העבירו את העכבר על תיק העבודות כדי לגלול אותו, ולחצו על כל תמונה כדי להגדיל.

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

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

כל כרטיס הוא מוצר: תמונה עם סימן המים של גילה, כותרת, קטגוריה ושנה.

"ברח לי" ו"בארץ הגמדים", עם הכריכות שחולצו מקובצי ה-PDF ופרטי כל ספר.

טופס אמיתי ששומר כל פנייה בלוח הבקרה, לצד מייל, טלפון ווואטסאפ.

עמוד מנהלה בסגנון האתר, עם תאריך עדכון ותוכן עניינים, שנכתב לפי העובדות של האתר.

5 אפשרויות ההזמנה, "לרכישת התמונה — צרו קשר" וכפתור וואטסאפ שבהודעה שלו כבר כתוב שם התמונה. (צולם ב-18.8.2026.)

12 הכלים ברשימה נלקחו מההגדרות של תוסף הנגישות בפועל. (צולם ב-19.8.2026.)
אותה גלריה, בכף היד.






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