פוסטים

כיצד לבחור תבנית וורדפרס לאתר שלך?

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

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

מבנה ומראה

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

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

מטרה וייעוד

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

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

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

בחירת תבנית לעמוד בוורדפרס

בחירת תבנית לעמוד בוורדפרס

פייג' טמפלטס, קסטום סיידברס ושורטקודס

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

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

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

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

אפשרויות תבנית

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

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

אופטימיזציה

עוד דבר שכדאי ומומלץ לבדוק הוא המבנה של התבנית מבחינת אופטימזציה, האם היא בנויה טוב מבחינת תהליך הקידום בגוגל? אופטימיזציה טובה זהו דבר שתורם לאתר להתקדם בגוגל (ולמה חשוב לקדם בגוגל – אין צורך לפרט), ומאוד כדאי לבדוק את הסקיצה מבחינת: כותרות H1,H2, טעינת נתונים ע"י AJAX או טעינה רגילה, זמן טעינה של התוכן, תגיות DOFOLLOW NOFOLLOW בתוך התבנית, מיקומם של אלמנטים כמו תגיות וקיטלוג, סקיצת דף "מפת אתר" שבאה עם התבנית ומוגדרת במבנה נכון, כיצד נקראים תפריטי הניווט ע"י גוגל, ואם נכנס לעומק אז גם את סידור השכבות – כך ששכבת התוכן תהווה את החלק המרכזי והידידותי ביותר לקרוולרים של מנוע החיפוש (פרמטר שולי, אבל עדיין פרמטר).

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

אוטומציה

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

סיכום

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

מה ההבדל בין בניית אתרים לבין עיצוב אתרים?

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

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

מהו ההבדל המהותי בין בניית אתרים לבין עיצוב אתרים?

ראשית, את ההבדל הגדול אפשר לסכם כך: הפן הויז'ואלי הנראה לעין הינו בתחום של עיצוב אתרים והפאן התכנותי שבד"כ אינו נראה לעין (הקוד) הינו בגדר בניית אתרים, אך לפעמים, וכאן הנקודה המשיקה, ישנן דברים שכביכול הינם ויז'ואליים בלבד אך מצריכים גם תכנות מאחורי הקלעים. אני אתן דוגמה:

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

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

למה בימינו העיצוב לוקח את מרבית הזמן בבניית אתרי תדמית?

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

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

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

דפדפני אינטרנט

דפדפני האינטרנט המובילים כיום, מימין לשמאל: כרום, ספארי, אקספלורר, פיירפוקס, אופרה

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

כיצד כדאי לאפיין את עיצוב ובניית האתר שלך?

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

בירור לגבי פונקציונליות המערכת: כל חברה לבניית אתרים עובדת עם מערכת "דגל" שלה, אנחנו למשל עובדים עם וורדפרס, יש חברות אחרות שעובדות עם ג'ומלה ויש כאלו שעובדות עם דרופל או עם מערכת בית שפיתחה החברה בעצמה. לכל מערכת ישנן פונקציות מובנות אחרות שכבר מגיעות עם המערכת, כדאי להכין רשימת צרכים מראש ולשאול את החברה לבניית אתרים אם הפונקציות הנ"ל קיימות המערכת שלה, למשל: תיבת התממשקות עם עמוד אוהדים של פייסבוק, לייקים וכפתור פלוס אחד, מחולל טפסים (כגון צרו קשר), מערכת מאמרים פוסטים ועוד…

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

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

אתר אינטרנט ככלי

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

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

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