גיא חברוני

Ram's Designs
פרויקטים גיא חברוני

גיא חברוני

E-COMMERCE · אפיון · UX/UI · בנייה

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

תפקידאפיון · UX/UI · פיתוח
תעשייהאמנות · קרמיקה
שנה2026
פלטפורמהWordPress · WooCommerce
היקף65 עבודות · ₪ / $
סטטוסחי באוויר
hivroni.art
דף הבית של גיא חברוני: Hero לבן עם פסל מסדרת Wedding Dresses of No Body
65
עבודות, כל אחת פריט יחיד
שתי סדרות · 57 + 8
2
מטבעות, לפי מדינת הגולש
₪ לישראל · $ לשאר העולם
13
Code Snippets שכתבתי
PHP ו-CSS, בלי גישת FTP
15
גרסאות עיצוב לדף הבית
v2–v15 · ועוד 12 לעמוד Contact
0
גלילה אופקית במובייל
10 עמודים × 3 רוחבים
4
חודשים, מבריף ועד ליטוש
14.5 → 15.9.2026
סקירת הפרויקט

30 שניות, אם אתה ממהר.

האתגר

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

הגישה

קודם עיצוב, ורק אחריו חנות. עברתי מכיוון כהה עם סריף ללבן של גלריה עם Helvetica Neue, ונעלתי שפה עיצובית ב-11.6. ב-2.7 הפכתי את העבודות למוצרי WooCommerce בלי לשנות אף כתובת, ואז בניתי שכבה אחרי שכבה: מטבע, תשלום, משלוח, טפסים, עמודים משפטיים והעברת דומיין.

התוצאה

אתר חי ב-hivroni.art עם 65 עמודי עבודה, גלריה וסרטון תהליך לכל עבודה, פורטפוליו עם סדרות וחיפוש חי, ומסלול Inquire שממלא את הטופס מראש. מחו"ל רואים ומשלמים בדולרים דרך PayPal, ובישראל בשקלים, עם כרטיס, Bit או PayPal. העבודות הן מוצרים שהאמן עורך בעצמו.

לפני / אחרי

חנות שלא נראית כמו חנות.

גררו את הקו כדי להשוות. משמאל: העגלה של WooCommerce כמו שהיא יוצאת מהקופסה על Astra. מימין: אותה עגלה אחרי שעיצבתי אותה בשפת האתר (12.7.2026). את הטפסים של Woo לא החלפתי, רק הלבשתי.

עגלת WooCommerce לפני העיצוב, עם כפתורים כחולים וכותרת התבנית העגלה אחרי העיצוב, בשפת האתר
לפניאחרי
לפני · Checkout
עמוד הקופה לפני העיצוב
לפני: קופה גנרית, כפתור כחול והעברה בנקאית
אחרי · Checkout
עמוד הקופה אחרי העיצוב
אחרי: תוויות uppercase, שדות בלי פינות, כפתור ירוק

האתר הקודם נבנה בבונה האתרים של art.art ואין לי ממנו צילום מקומי, לכן ההשוואה כאן היא של שכבת החנות. בצילומי 12.7 עוד רואים שדה קופון והעברה בנקאית. את שניהם ביטלנו ב-23.8.

האתגר

מחיר בדולרים, ושום דרך לקנות.

באפיון (14.5.2026) ניתחתי את האתר הקיים. היו לו תמונות טובות ותיאורים אינטלקטואליים. חסרו לו עומק של טכניקה וחומר, מחירים ברורים ומסלול מסחרי עם קריאה לפעולה. ככל שהתקדמתי, כל שכבה חשפה בעיה שלא הייתה בתוכנית.

01

תבנית גנרית בלי מסלול קנייה

האתר הקודם נבנה ב-art.art: תפריט About / Portfolio / Contacts, כפתור "Donate", שיתוף ל-Twitter, Pinterest ו-Tumblr, וכותרות תבנית כמו "My Best Artwork". כל עבודה ישבה בכתובת UUID עם מחיר בדולרים, בלי עגלה, בלי תשלום ובלי טופס פנייה.

02

דומיין שהוביל למקום אחר

hivroni.com הפנה לחנות Etsy שלא קשורה לפיסול. גיליתי את זה רק כשהעברתי את הדומיין.

03

מסוף שלא סולק דולרים

הקהל בינלאומי, אבל מסוף הסליקה הישראלי של הלקוח לא היה מסוגל לסלוק USD. זה התגלה רק ברכישת בדיקה.

04

אין תעריף קבוע לפסל קרמיקה

משלוח של פריט שביר לחו"ל לא נכנס לטבלת תעריפים. בהתחלה לא היו באתר אזורי משלוח בכלל, והתקנון הבטיח חישוב משלוח בקופה שלא קרה.

05

הסטודיו הוא גם הבית

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

06

כל רכיב רגיל שבר את העיצוב

העיצוב נבנה כבלוק HTML ו-CSS בתוך התוכן, על Astra. wpautop, ה-hover הכחול של Astra, מסגרות focus ודף ה-Shop הגנרי של Woo שברו כל אחד את המערכת העיצובית בדרך משלו.

האתגר האמיתי לא היה "לעצב פורטפוליו יפה". היה צריך לבנות חנות אמנות בינלאומית לפריטים יחידים שנראית כמו קטלוג של מוזיאון. נקודת הייחוס בבריף הייתה "Berlin gallery / MoMA store", והדרישה הייתה שזה לא ייראה כמו תבנית Astra ולא ייראה "AI". כבר בהתחלה הלקוח הוסיף דרישה: העבודות צריכות להיות מוצרים שהוא עורך בעצמו, לא דפים בקוד.

01אמנות, לא מוצר

סדרות, נשימה ואפס רעש ויזואלי.

02רכישה ישירה

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

03מסלול Inquire

לשאלות על יצירה, להזמנה אישית ולצפייה פרטית.

04עצמאות

מחירים, מלאי ו-"Sold" מנוהלים מממשק WooCommerce רגיל, בלי קוד.

05אמינות

עמודים משפטיים, הצהרת נגישות ורק טענות ביוגרפיות מאומתות.

ארכיטקטורת מידע

ארבעה פריטים בתפריט. 65 עבודות מתחתיו.

בבריף המקורי היה גם "Gallery", והוא ירד. התפריט הראשי נשאר Home, Portfolio, About ו-Contact. כל השאר נמצא שכבה אחת מתחת.

hivroni.art
עמודי תוכן
  • HomeHero · Selected Works · About · טופס
  • Portfolio/portfolio/
  • Aboutביו · תערוכות · פרסים · CV
  • Contact/contact/
עבודות
  • 65 עמודי עבודה/work-{slug}/
  • גלריה + וידאו תהליך
  • Add to Cart + Inquire
חנות
  • Cart · Checkout
  • My Account · Thank-you
  • מעוצבים בשפת האתר
משפטי
  • Privacy Policy/privacy-policy/
  • Terms/terms/
  • Accessibility/accessibility/
בוטל
  • Shop/shop/ → 301 לפורטפוליו
  • ארכיוני קטגוריות301 לפורטפוליו
זרימות משתמש

שלושה אספנים, שלושה מסלולים.

להתרשםאספן שבא לראות
Hero: שם הסדרה←VIEW SERIES←פורטפוליו מסונן←עמוד עבודה עם גלריה ווידאו תהליך
לקנותאספן שבא לרכוש
עמוד עבודה←מחיר במטבע שלו←שורת משלוח לפני הקנייה←Add to Cart←Checkout עם אמצעי תשלום שמתאים לו
לשאולאספן עם שאלה
Inquire בעמוד העבודה←/contact/?work=…←באנר REGARDING + הודעה ממולאת←טופס צד-שרת
החלטות UX

כל החלטה, והסיבה שמאחוריה.

סדרות, לא גלריה

כל גוף עבודה מוצג כיחידה עם שם, ספירת עבודות ותיאור. הסדרה החדשה, Wedding Dresses of No Body, מופיעה ראשונה תחת ALL, לבקשת הלקוח.

חיפוש חי בפורטפוליו

עם 65 עבודות, אספן ששמע על עבודה מסוימת צריך למצוא אותה מהר. הספירות מתעדכנות תוך כדי הקלדה, סדרות ריקות נעלמות, ויש מצב "No works found".

מחיר אחד, ממקור אחד

בבית, בפורטפוליו ובעמוד העבודה המחיר נשלף מ-WooCommerce, אז שלושת המקומות לא יכולים להציג מספרים שונים. תיקנתי את זה אחרי שהגריד הציג מחיר בדולרים ועמוד העבודה מחיר בשקלים. "Sold" החליף את "Not for sale" בכל האתר.

בלי קרוסלות ובלי רוטציה

הגלריה בעמוד העבודה התחלפה לבד כל 3.5 שניות. מי שקרא את המפרט איבד את התמונה שהסתכל עליה. לבקשת הלקוח (20.8) כל רוטציה אוטומטית ירדה, והמבקר בוחר על מה להסתכל. רק ה-crossfade של ה-Hero נשאר, ב-CSS בלבד.

Selected Works אקראיות בכל טעינה

דף הבית שמור ב-cache מלא, ולכן הערבוב קורה בדפדפן (Fisher-Yates) על מאגר JSON. הוא רץ מתחת לקו הגלילה, כך שההחלפה לא נראית.

משלוח: אמת לפני הקנייה

לא הבטחתי "משלוח חינם". הלקוח ביקש שהקונה ידע לפני הרכישה שהמשלוח לא כלול ושמכס ומסים הם חיוב נפרד. לכן שורת המשלוח מופיעה כבר בעמוד העבודה, ומחו"ל כתוב "Quote after order".

אמצעי תשלום אחד לכל קהל

במצב דולר מוצג רק PayPal, בכוונה בלי fallback. רשימה ריקה עדיפה על הצעת PayMe להזמנה בדולרים, שהקונה יבחר ואז ייכשל בה. מאותה סיבה בוטלו (בהחלטת הלקוח) הקופונים וההעברה הבנקאית: שדה קופון כשאין קופונים מזמין חיפוש קודים, וההעברה הבנקאית הבטיחה פרטי חשבון שלא נשלחו לאף אחד.

ביטול דף ה-Shop

הלקוח הגיע אליו דרך "Return to shop" בעגלה ריקה, וראה דף בעיצוב שלא שייך לאתר. זה היה קטלוג שני וגרוע יותר ליד הפורטפוליו. הדף בוטל עם 301, והכפתור הפך ל-"Return to Portfolio" (31.8).

קישור נראה כמו קישור

הלקוח העיר שהטקסט בעמודת Contact בפוטר נראה בדיוק כמו הקישורים. הכלל שקבעתי: הבחנה רק ב-hover היא לא הבחנה. קישורים בצבע כהה, טקסט סטטי קטן ואפור, והמייל עם קו תחתון זהוב קבוע (16.7).

Read more בשורת הכותרת

הלקוח ביקש תיאור לכל סדרה, שנפתח ונסגר. בגרסה הראשונה שמתי את הכפתור בסוף שורת הטקסט. הלקוח שלח הדמיות: "באותה שורה" התכוון לשורת הכותרת. בגרסה הסופית התיאור מוסתר לגמרי במצב סגור, והכותרת היא SERIES · WEDDING DRESSES OF NO BODY · READ MORE (15.9).

תהליך העיצוב

מגלריה שחורה עם סריף, ללבן של מוזיאון.

התהליך מתועד בשמות הסקריפטים upload-v2 עד v15 ובכ-300 צילומי מסך מתוארכים. כל גרסה עלתה לאתר כבלוק HTML ו-CSS אחד, והלקוח ראה אותה חיה, לא כתמונה.

1
14–15.5 · בריף ואפיון

חמישה עמודים ופלטה שחור-לבן

אפיון, מבנה של חמישה עמודים ופלטה של שחור ולבן עם ירוק ל-CTA. בבריף נכתב "Narkis + Sans Serif". הכנתי מסמכי בנייה ל-Elementor, אבל בפועל בניתי את העיצוב כבלוק HTML ו-CSS אחד שנדחף לדף. כך שלטתי בכל פיקסל, בלי שכבות של בונה עמודים.

2
15–29.5 · v2 עד v14

הכיוון הכהה

רקע ‎#0b0b0b, Cormorant Garamond עם Inter, כפתורים זהובים עם פינות של 8px וציטוט באיטליק. נשמר checkpoint בשם "v13 STABLE". אחר כך הגיעו איטרציות Hero ב-1440, 1920 ו-3440 פיקסלים, שתי אופציות פסיפס (23.5), וב-v14 ניסוי של Jost עם Bodoni Moda על רקע בהיר.

הכיוון הכהה עם סריף וכפתורים זהובים
24.5: הכיוון הכהה, סריף וכפתורים זהובים
v14 עם Bodoni על רקע בהיר
סוף מאי, v14: Bodoni על רקע בהיר, כפתורים ירוקים
3
2.6 · v15

כיוון חדש: לבן של גלריה, Helvetica בלבד

המעבר ללבן: Hero לבן, כפתורים בירוק יער ו-About על רקע שמנת. באותו יום עבר כל האתר ל-Helvetica Neue, והכלל של הלקוח נקבע: אין סריף, אף פעם. הבריף ביקש "גלריה או מוזיאון לבן, לא תבנית", והכיוון הכהה נזנח.

Hero לבן עדיין עם סריף
2.6: לבן, עדיין עם סריף
Hero לבן עם Helvetica Neue
2.6, כעבור כשעתיים: אותו Hero ב-Helvetica Neue
4
3–7.6 · מסכים רחבים

לא צר וממורכז, ולא full-bleed עם חורים

בדקתי את האתר ב-3440 פיקסלים. הלקוח דחה גם תוכן צר וממורכז וגם full-bleed עם חורים. הפתרון: מסגרת תוכן של כ-2200 פיקסלים, רקעים ותמונות שנמשכים לרוחב מלא, ו-zoom מדורג של 1.12 / 1.25 / 1.4.

ניסוי מסגרת 2200 במסך 3440
3.6: ניסוי מסגרת במסך של 3440px
5
10–11.6 · נעילה

רשת שני הקווים, ו-"Design language locked"

ב-10.6, לבקשת הלקוח, כל אלמנט באתר נצמד לאחד משני קווים אנכיים, וה-Hero קיבל crossfade של חמש תמונות. ב-11.6 נעלתי את השפה העיצובית במסמך DESIGN-SYSTEM.md. סטייה אחת מתועדת: בסבב של 6.7 ה-Hero חזר להיות full-bleed משמאל, והתמונה נוגעת בקצה המסך, בניגוד לכלל שתמונות מכבדות את השוליים. זה מה שחי היום.

6
17–22.6 · Contact ו-About

12 גרסאות לעמוד אחד

עמוד Contact עבר 12 גרסאות. ב-About הפורטרט הוקטן ליחס 4/5, לפי הדמיה שהלקוח הכין. ב-6.7 נקבע כלל טיפוגרפי אחרי הערה שלו על כותרת עמוד Contact: הכותרת הראשית של כל עמוד במשקל 300, כמו ה-Hero, וכותרות משנה ב-400.

7
2.7 – 11.7 · WooCommerce וקטלוג

מדפים בנויים ביד, למוצרים

ב-2.7 הפכתי 48 עבודות למוצרי WooCommerce, בלי לשנות אף כתובת. ב-7.7 נוספו חיפוש חי וסדרת Wedding, ובאותו סבב תיקונים הלקוח ביקש hover עדין וניקוי של קווים מפרידים. ב-11.7 הקטלוג הושלם: 65 עבודות, כולן עם חומר מלא ומחיר.

הפורטפוליו ב-7.7 עם חיפוש ו-hover כחול
7.7: חיפוש חי ומסגרת hover כחולה, לפני שסדרת Wedding עלתה
8
16.7 – 15.9 · ליטוש

סבבים לפי עין של לקוח מדויק

פוטר שמבחין בין קישור לטקסט (16.7). הסרת נקודות מתוויות בנות שורה אחת, ביטול ה-autoplay, וכפתורי נגישות ועוגיות כזוג זהוב (20.8). תיאורי סדרה (14.9), ו-Read more בשורת הכותרת לפי ההדמיות של הלקוח (15.9).

גרסת הביניים של תיאור הסדרה
14.9: גרסת ביניים, תיאור פתוח מתחת לכותרת
הגרסה הסופית עם READ MORE בשורת הכותרת
15.9: הסופי, READ MORE בשורת הכותרת
שפה עיצובית

שום דבר לא צף חופשי.

לבן של גלריה, Helvetica Neue בלבד, אפס צללים וכפתורים בלי פינות מעוגלות. העבודות של גיא הן הצבע. האתר רק מחזיק אותן.

טוקנים

Green#243b28כפתורים ראשיים ו-submit
Gold#9c7f4deyebrows, כותרות פוטר, קישורי הדגשה
Dark#111111כותרות וטקסט
Muted#6b6b6bטקסט משני
Cream#f0ede8רקע About
Border#e6e4e0קווים ומסגרות

רקע העמודים לבן. השמנת שמורה ל-About, לניווט ולפוטר.

טיפוגרפיה: Helvetica Neue בלבד

Guy HivroniH1 · 300 · 40–60px
Wedding Dresses of No BodyEyebrow · 10px · 500
Garments without bodies. Absence as the narrative.Body · 13.5–14px · 1.7–1.8

הכותרת הראשית של כל עמוד במשקל 300 וכותרות המשנה ב-400. הלוגו 14px עם ריווח של 3px. הסריף נזנח בגלל כלל מפורש של הלקוח.

2

רשת שני הקווים. הקו השמאלי, ‎--side, מחזיק את הלוגו, את "Selected Works", את כותרת ה-Inquire, את המותג בפוטר ואת תמונת About. הקו הימני, ‎--rl, הוא ‎--side + --c1 + --gap, והוא מחזיק את קישורי הניווט, טקסט ה-Hero, טקסט About, טופס יצירת הקשר ועמודות הפוטר. הרשת הגיעה מהלקוח, ושמרתי עליה גם בעמודים המשפטיים (תוכן עניינים על ‎--side, המסמך על ‎--rl) ובקורות החיים.

כפתורים בלי פינות

מלא בירוק או outline אפור (‎#cfcdc9), ריפוד 13px 28px, טקסט 11px ב-uppercase. אותו כלל חל על שדות הטופס.

קלף עבודה עם hover כחול רך

קלף לבן, תמונה ב-object-fit:contain, שם ומחיר. ב-hover: מסגרת ‎#6d87b5 וזום עדין של ×1.05. הלקוח ביקש כחול במפורש, עדין ולא "הכחול האגרסיבי של Astra".

כפתורים צפים כזוג זהוב

נגישות ועוגיות, שני עיגולים זהובים של 36px בתחתית משמאל, במרחק 10px זה מזה. 36px הוא הגודל הקטן של התוסף, ועדיין מעל המינימום של 24px ב-WCAG 2.5.8.

תפריט מובייל על שכבת שמנת

שכבה על כל המסך, קישורים גדולים במשקל 300, העמוד הנוכחי בזהב עם קו שמאלי, אייקוני רשתות ותווית PORTRAITS OF NOBODY. מתחת ל-860px.

כללים שאסור לשבור

  • Helvetica Neue בלבד. אף פעם לא סריף.
  • כל תוכן נצמד ל-‎--side או ל-‎--rl.
  • פלטה קבועה: ירוק, זהב, שמנת, כהה, אפור ולבן.
  • אין נקודה בסוף תווית בת שורה אחת.
  • אין קרוסלות ואין רוטציה אוטומטית.
  • ה-crossfade של ה-Hero ב-CSS בלבד, בלי JS.
פיתוח

חנות שלמה, בלי גישה לשרת.

לא הייתה לי גישת FTP. כל עמוד הוא בלוק HTML ו-CSS אחד בתוך התוכן, וכל לוגיקה בצד השרת נכתבה כ-Code Snippet. את הכל דחפתי דרך REST API, ובדקתי עם Playwright ועם 67 סקריפטי Python לבנייה ולפריסה.

WordPressWooCommerceCode SnippetsAstra (מוסתר)PayMeWooCommerce PayPal PaymentsCookieAdminAllyGoSMTPLiteSpeedREST APIPlaywrightPython
#5 Product Page

מרנדר את כל עמוד העבודה מנתוני המוצר: breadcrumb, גלריה sticky עם thumbnails ווידאו תהליך, מפרט, Add to Cart ו-Inquire ושורת משלוח.

#6 Product URLs

שומר את הכתובות ‎/work-{slug}/‎ עם rewrite ו-301 מ-‎/product/‎. מאז 14.9 גם 301 מהכתובת השגויה ‎/protfolio/‎.

#7 Selected Works

ארבע עבודות אקראיות בכל טעינה, גם כשהדף שמור ב-cache.

#8 Store Chrome

עגלה, Checkout, חשבון ו-Thank-you בשפת האתר, בלי להחליף את הטפסים של Woo.

#10 Mobile Menu

המבורגר לכל האתר מתחת ל-860px, עם Esc, נעילת גלילה ו-aria.

#11 Cookie Banner

התאמת באנר העוגיות למותג, ב-CSS בלבד. לוגיקת ההסכמה לא נגעה.

#12 Contact Form

מחליף טופס mailto בטופס צד-שרת עם nonce, honeypot ו-wp_mail.

#16 Currency

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

#17 Portfolio Prices

מחיר חי מ-WooCommerce, או "Sold".

#18 Shipping

נוסחי משלוח לפי אזור, "Quote after order", הערת מכס והמרת תעריף לדולר.

#19 Outgoing mail

Reply-To לאמן על כל מייל שהמערכת שולחת.

#20 Retire Shop

301 מ-‎/shop/‎ ומכל ארכיוני הקטגוריות לפורטפוליו.

מטבע, תשלום ומשלוח

כל קונה רואה רק מה שבאמת יעבוד לו.

קהלמטבע ותשלוםמשלוח
ישראלשקלים. PayMe (כרטיס, Bit, Apple Pay, Google Pay) או PayPal, לבחירת הקונה.איסוף חינם מהסטודיו, או משלוח מבוטח בתעריף קבוע.
שאר העולםדולרים אמיתיים, ו-PayPal בלבד. זיהוי המדינה לפי IP.הצעת מחיר אחרי ההזמנה, שמשולמת בלינק נפרד. מכס ומסים בנפרד, ונאמר מראש.

48 דפים הפכו למוצרים

ב-2.7 כל עבודה הפכה למוצר יחיד: ניהול מלאי, כמות 1 ומכירה בודדת, עם מאפייני Medium, Size ו-Year ושדות לווידאו ולסדרה. הכתובות ‎/work-*/‎ נשמרו, אז כל קישור מהבית ומהפורטפוליו המשיך לעבוד. התמונות של 47 עבודות היו hotlink מהשרת של art.art, והעברתי אותן לספריית המדיה. אחר כך הלקוח העלה תיקייה של כ-860 קבצים: 43 עבודות הועשרו ב-4–14 תמונות, מידות, שנה, וידאו וטקסט, ונוספו 9 עבודות חדשות וסדרת Wedding של 8.

משקל אחד לשני מטבעות

PayMe חובר ב-20.7. יום אחר כך התברר שהמסוף לא סולק USD, והחנות עברה לשקלים: 60 מחירים הומרו ועוגלו ל-100 הקרוב, לפי בחירת הלקוח. זה גם מה שאפשר Bit. כשהלקוח חיבר PayPal, הסניפט עבר ממצב "info" (שקל ולידו "≈ $") למצב מלא: מחו"ל רואים ומשלמים דולר אמיתי, וטבלת המחירים בדולר מנוהלת בשורה אחת לכל מדרגה.

מודל משלוח ותקנון, ביחד

לפני 23.8 לא היו אזורי משלוח בכלל, ו-Woo דילג על השלב. בניתי אותם לפי התהליך שהלקוח תיאר, ובאותו יום כתבתי מחדש את סעיפים 5.1, 5.2 ו-6 בתקנון. הכלל מאז: מודל המשלוח והתקנון משתנים יחד. עמודי המוצר לא נשמרים ב-cache מלא, ולכן מבקר מחו"ל מקבל משפט נוסף על מכס.

עמודים משפטיים מאפס

Privacy (14 סעיפים), Terms (16) ו-Accessibility (9), באנגלית, לפי חוק הגנת הצרכן, חוק הגנת הפרטיות ותקנות אבטחת מידע, חוק שוויון זכויות ו-GDPR (17.8). כל עמוד קיבל תוכן עניינים דביק ו-handler לקפיצות עוגן, כי משהו בעמוד "בלע" קפיצות ‎#hash.

העברת שני דומיינים

ב-14–16.7 העברתי את שני הדומיינים, משני רשמים שונים, לשרת חדש עם SSL. hivroni.art הוגדר ראשי ו-hivroni.com מפנה ב-301. החלפתי 24 כתובות קשיחות בעמודים, ובווידאו של המוצרים הרצתי replace ב-SQL. שני הדומיינים באורך 11 תווים, אז נתונים מסודרים ב-serialize נשארו תקינים. אחרי ההגירה: 0 הפניות ל-.com.

טפסים, מייל ופרטיות

טופס ה-mailto הציג "This form is not secure", ומבקרים בלי תוכנת מייל איבדו את ההודעה בשקט. החלפתי אותו בטופס צד-שרת (26.7). התראות ההזמנה הופנו לאמן, והשולח הוחלף לכתובת על הדומיין, כי Gmail נכשל ב-SPF מהשרת. ב-Contact כתוב "Studio — Jerusalem, by appointment", ואת קובץ קורות החיים ערכתי והסרתי ממנו כתובת וטלפון לפני ההעלאה.

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

מה נבדק

רק מה שנמדד, עם תאריך.

על האתר הזה לא הורץ PageSpeed ואין מדידת Lighthouse מתועדת. ניסיון מדידה ב-1.10.2026 נכשל על מכסה יומית. לכן אין כאן ציוני ביצועים, רק בדיקות פונקציונליות שעשיתי בפועל.

פריסה ומובייל

  • 19.7: תוכן עמוד המוצר היה ברוחב 510px במסך של 390px, וכפתור Add to Cart היה מחוץ למסך. אחרי התיקון: 0 גלילה אופקית ב-10 עמודים × 3 רוחבים (360 / 390 / 768).
  • 8.7: באג של wpautop הכפיל רווחים. קישורי הניווט 38→76px, אייקוני הניווט 16→32px, אייקוני הפוטר 14→28px. תוקן ל-0.
  • 17.8: העמודים המשפטיים: 0 גלישה ו-0 שגיאות console בשבעה רוחבים (360–1920).

כתובות ו-SEO טכני

  • 14.9: שגיאת הכתיב ‎/protfolio/‎ תוקנה: 54 קישורים פנימיים ב-7 עמודים ו-4 סניפטים. אחרי התיקון: 0 מופעים ב-11 משטחים, ו-301 בקפיצה אחת.
  • 24.8: Tagline ברירת המחדל "My WordPress Blog" הוחלף, ומוצר בדיקה שהיה גלוי למכירה וב-sitemap הוסתר.
  • ‎/shop/‎ וארכיוני הקטגוריות, שהיו ניתנים לסריקה, מפנים לפורטפוליו.

משלוח ונגישות

  • 24.8: המשלוח מתקן את עצמו. הזנת תעריף לישראל העלימה את "Quote after order" בלי לשנות שורת קוד.
  • עמודי המוצר מציגים נוסח שונה לכל מבקר, כי הם לא נשמרים ב-cache מלא (אומת ב-24.8).
  • הצהרת נגישות (IS 5568 / WCAG 2.1 AA), ווידג'ט Ally בצבעי המותג, aria על תיאורי הסדרות ו-prefers-reduced-motion. לא בוצע audit נגישות מדוד.
אתגרים שפתרתי

כשכל רכיב של WordPress נלחם בעיצוב.

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

01

המסוף לא סולק דולריםוה-API אמר שהכל בסדר

+
הסימפטום

רכישת בדיקה נכשלה גם בכרטיס וגם ב-Bit, עם Error 420.

האבחון

יצירת עסקה ב-API הצליחה בכל צירוף, כי אימות המטבע קורה רק בשלב החיוב. PayMe אישרו במייל: [424] המטבע USD לא מורשה, ו-[427] הסכום נמוך מדי. טעות שלי בדרך: קראתי "מינימום 100" כ-$100, וה-API עובד באגורות.

הפתרון

החנות עברה לשקלים ו-60 מחירים הומרו. אחר כך כתבתי את סניפט המטבע: דולר אמיתי דרך PayPal לחו"ל ושקל לישראל, וכל אמצעי תשלום מוצג רק במטבע שהוא מסוגל לסלוק.

02

רווחים שהוכפלו בשקטwpautop בתוך flex

+
הסימפטום

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

האבחון

בעמודים כל <a> ישב בשורה נפרדת, ו-wpautop הזריק <br> ביניהם. כל <br> נהיה פריט flex והכפיל את ה-gap. עמודי המוצר, שמרונדרים ב-PHP דרך hook, לא נפגעו ושימשו לי כקבוצת ביקורת.

הפתרון

כל רשימת inline במכל flex נכתבת בשורה אחת. זה אחד משלושה מצבי כשל של wpautop שתיעדתי: בשני הוא עטף טקסט ב-<p> ששורת זכויות היוצרים נעלמה בגללו, ובשלישי תוכן העניינים הציג רק "CONTENTS".

03

עמוד המוצר נחתך בטלפוןבלי פס גלילה

+
הסימפטום

כפתור הקנייה מחוץ למסך, והמפרט חתוך באמצע מילה.

האבחון

grid-template-columns:1fr הוא בפועל minmax(auto,1fr), ורצועת ה-thumbnails דרשה רוחב מינימלי של 510px. overflow:clip הסתיר את הגלישה.

הפתרון

minmax(0,1fr) ו-min-width:0, וגלילה אופקית לרצועה עצמה. עבר בדיקה ב-10 עמודים × 3 רוחבים.

04

"קו מנוקד לא מקצועי"בשדה החיפוש

+
הסימפטום

מסגרת כחולה מנוקדת ב-focus על שדה החיפוש, הערה של הלקוח.

האבחון

זה היה border ענק של Astra, לא outline, אז איפוס outline לא עשה כלום. גם המדידה הטעתה: מעבר של 0.2 שניות גרם ל-getComputedStyle להחזיר צבע מאמצע המעבר.

הפתרון

longhands עם ‎!important (border-style:none). בטופס Contact המסגרת הפכה לקו אחיד, כי דווקא שם רק 2 מתוך 4 שדות היו מנוקדים.

05

הכחול של Astra בכפתורי הפילטרו-"View cart" בזהב על ירוק

+
הסימפטום

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

האבחון

כל <button> יורש את button:hover הכחול של Astra, שגובר על background:none בגלל ספציפיות. בעגלה, שני כללים עם ספציפיות זהה (0,2,2) והמאוחר ניצח. המסגרת הייתה focus ring של הדפדפן, כי Woo ממקד את ההודעה בשביל קוראי מסך.

הפתרון

איפוס עם ‎!important, a:not(.button), ו-outline:none רק על ההודעה. ה-tabindex וה-focus לקורא המסך נשארו בכוונה.

06

Placeholders שחוזרים לבדב-Checkout

+
הסימפטום

תיקנתי את ה-placeholders בשרת, והם חזרו בדפדפן.

האבחון

הפילטר בשרת תיקן את הרינדור, אבל address-i18n.js כותב אותם מחדש בדפדפן מתוך get_default_address_fields().

הפתרון

שני פילטרים, לא אחד. ובאותו אזור: תגית "Free" שהתכווצה לרוחב 10px בגלל text-indent של Woo שעבר בירושה. text-indent:0, ואימות ב-390px.

07

שמירה שנמחקה אחרי 13 שניותסשן מקביל על עותק ישן

+
הסימפטום

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

האבחון

דרך ‎/revisions‎ מצאתי שתי גרסאות בהפרש של 13 שניות. סשן עבודה מקביל שמר גרסה שנבנתה על עותק מלפני התיקון.

הפתרון

rebase על התוכן החדש, והחלה מחדש של התיקון שלי בלבד. מאז אני בודק את modified אחרי כל שמירה.

08

סניפט שכובה בלי שגיאהוהחנות איבדה את העיצוב

+
הסימפטום

העגלה והקופה חזרו פתאום לעיצוב הגולמי של Woo.

האבחון

backslash ב-regex של PHP הפך בדרך לבייט 0x08. Code Snippets כיבה את הסניפט עם code_error:null, כלומר בלי שום הודעה.

הפתרון

regex בלי backslash, assert בשלב הבנייה, ובדיקה של active אחרי כל POST.

09

WAF שתוקע בקשותו-JS שמת בשקט

+
הסימפטום

בקשת POST עם בלוק <style> נתקעה לנצח. במקביל, סקריפט inline בתוכן פשוט לא רץ.

האבחון

חומת האש של השרת זיהתה את התגית בגוף הבקשה. ו-WordPress קודד את ה-&& בתוך ה-<script> ל-&#038;&#038;, שזו שגיאת תחביר.

הפתרון

escape ל-< ול-> בתוך ה-JSON: PHP מפענח את זה לקוד זהה, וה-WAF לא רואה תגית. סניפט של 22KB עלה ב-3.5 שניות. ה-JS נכתב בלי & ובלי <, עם if מקוננים.

10

דומיין "נעול"רשומות שאי אפשר למחוק

+
הסימפטום

במעבר לשרת החדש, hivroni.com לא קיבל את הרשומה החדשה.

האבחון

ה-Forwarding לחנות ה-Etsy אצל GoDaddy הזריק שתי רשומות A של "Parked", שאי אפשר למחוק ישירות.

הפתרון

מחקתי את ה-Forwarding עצמו, הרשומות נעלמו איתו, ואז הוספתי רשומה חדשה.

תצוגת המוצר

המוצר עצמו.

הצילומים נלקחו מהאתר החי ומצילומי הבדיקה שלי. העבירו את העכבר על דף הבית כדי לגלול אותו, ולחצו על כל תמונה כדי להגדיל.

hivroni.art
דף הבית המלא של גיא חברוני

דף הבית המלא: Hero של סדרת Wedding, ארבע Selected Works אקראיות, About קצר על רקע שמנת וטופס Inquire

hivroni.art/portfolio
עמוד הפורטפוליו
הפורטפוליו: סדרות, ספירת עבודות ומחיר חי
hivroni.art/about
עמוד About המלא
About: ביו, תערוכות, פרסים, פרסומים ו-Download CV
hivroni.art/portfolio
הפורטפוליו עם READ MORE בשורת הכותרת
הפורטפוליו

שורת הכותרת של הסדרה עם READ MORE, ספירת עבודות וקלפים לבנים עם מחיר חי מ-WooCommerce.

hivroni.art · The Wait
עמוד עבודה עם שורת משלוח
עמוד עבודה

גלריה עם thumbnails, eyebrow של הסדרה והשנה, ושורת משלוח שמופיעה לפני הקנייה, רק כשהעבודה במלאי.

hivroni.art/about
עמוד About
About

פורטרט על הקו השמאלי, טקסט על הקו הימני. הרשימות מבוססות על קורות החיים של האמן.

hivroni.art/contact
עמוד Contact
Contact

טופס צד-שרת, וסטודיו "by appointment" במקום כתובת.

hivroni.art/checkout
קופה במצב ישראל עם אפשרויות משלוח
קופה בישראל

שקלים, איסוף חינם מהסטודיו או משלוח מבוטח, והסבר על הצעת המחיר.

hivroni.art/privacy-policy
מדיניות פרטיות עם תוכן עניינים דביק
עמודים משפטיים

תוכן עניינים דביק על הקו השמאלי, המסמך על הקו הימני. 14 סעיפים ב-Privacy.

פוטר לפני ואחרי: קישור מול טקסט
פוטר: קישור מול טקסט

משמאל, הכל נראה אותו דבר. מימין, קישורים כהים, טקסט סטטי אפור ומייל עם קו תחתון זהוב קבוע (16.7).

טופס Contact ממולא מראש עם באנר REGARDING
Inquire על עבודה

מעמוד העבודה הטופס נפתח עם באנר REGARDING, שדה נסתר עם שם העבודה והודעה ממולאת מראש.

קופה במצב דולר עם PayPal בלבד
קופה בדולרים

מחיר בדולרים ו-PayPal בלבד, בלי אמצעי תשלום שלא יעבוד.

מובייל

אותה גלריה, בכף היד.

דף הבית במובייל
דף הבית
הפורטפוליו במובייל
פורטפוליו
עמוד עבודה במובייל
עמוד עבודה
כפתורי Add to Cart ו-Inquire במובייל
Add to Cart · Inquire
About במובייל
About
Contact במובייל
Contact

העבודה שלכם ראויה ליותר מתבנית?

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

בואו נדבר →
פרויקטים נוספים

עוד עבודות שלנו

Scroll to Top
קבעו שיחת אסטרטגיה ←