איך הקמתי את האתר הזה? מה התהליך שעברתי בהקמתו? באיזה בעיות נתקלתי?

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

השם של האתר הוא digitalit והוא מעיד עליו – תוכן דיגיטלי הייטקי. 

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

תהליך החשיבה הראשוני

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

תכנון המבנה של האתר

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

תהליך הבניה

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

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

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

עכשיו באה התלבטות נוספת.

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

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

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

איך לקרוא לכל הפוסט טייפים בליסטינג גריד אחד? 

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

הצגת קטגוריות של 8 פוסט טייפים בתוך ליסטינג של פוסט טייפ אחד

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

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

איך להכניס קודים

אחרי שסיימתי את הכל נשארתי עם בעיה אחת אחרונה שהתלבטתי בה איך לטפל בה. רציתי בלשונית של הקודים לאפשר הכנסת קודים שייראו כמו קודים בכיוון הלועזי עם מראה שונה מתוכן רגיל. כל הניסיונות שלי ליצור קודים דינמיים לא בדיוק עבדו. או שהוידג'ט HTML לא הצליח להתחבר דינמית או שהקוד הוצג בצורה לא מספיק ברורה. בסוף מצאתי תוסף שאיפשר לי להשתמש דרך העורך ברירת המחדל של וורדפרס [לא העורך הקלאסי] ולחיצה על / אפשרה לי לבחור בקוד והתוסף זיהה אוטומטית באיזה סוג קוד מדובר. התקנתי גם הגדרות CSS שעיצבו לי קצת את הקודים והבעיה הזו גם היא באה על פתרונה.

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

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

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

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