שוב, לאור הדברים באתר של ניצן, אם יש לכם תבניות ממאסטרגייט, כדאי לכם לחשוב אם אולי שווה להחליף אותה במשהו עם פחות גועל נפש.художник на икониИкони на светциХудожникОткъде да купя иконаидея за подарък

• גרסה חדשה ל-ZenPhoto
• מי מעז לכתוב את שמו בכותרת הבלוג?
• גלריית ZenPhoto בעברית
• גרסה חדשה ל-Pluck כוללת תמיכה בעברית
• תבניות לוורדפרס שבקנה

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

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

אתר עמוד אחד בוורדפרס

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

הגלילה נעשית באמצעות הסקריפט jQuery ScrollTo, בהשראת הפוסט Coding a CSS3 & HTML5 One-Page Website Template ואת היישום על וורדפרס, כאמור אציג בכנס.

מגלילה אנכית לגלילה אופקית

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

ראשית, כדי להשתמש בסקירפט ScrollTo לגלילה אופקית, יש להעביר לו פרמטר נוסף, axis=x.
$.scrollTo( this.hash || 0, 1500,{axis:'x'});
פרמטר זה מורה לגלילה להתבצע על ציר ה-X בלבד.

פתרון ניווט הגיוני, יהיה ליצור איזור שיהיה קבוע ולא יגלל (באמצעות position: fixed) ובו יוצג התפריט.
למשל כך:

<header> <!-- This will get position:fixed -->
<hgroup><h1>logo<h1></hgroup>
<nav></nav>
</header>
<section id="container"> <!-- This is the rest of the site that will be scrolled -->
<article id="link1"></article>
<article id="link2"></article>
</section>


בדוגמת הקוד למעלה, <header> הנו האיזור שיהיה קבוע ולא יגלל וכל השאר כן.
כעת אצור קונטיינר שבו אציג את האלמנטים (איזורי התוכן השונים) אשר יגללו. בקוד למעלה <article> יהיו אזורי התוכן הנגללים. לשם כך, אתן רוחב קבוע לכל איזורי ה-article ואקבע להם float: right. כדי שהם יסתדרו בשורה אלו ליד אלו אצטרך להגדיל את רוחב האתר (כדי שכולם יכנסו בשורה אחת). בדוגמה זו רואים את האלמנטים בשורה מסודרים בשורה.

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

אייטם צמוד לגבול השמאלי

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

חישוב הריווח השמאלי לאייטם

rtlScroll.js

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

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

$('#container').rtlScroll();

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

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

• הצגת תמונות בבלוג – איך לשפר את ה-CSS
• אתר עמוד אחד בוורדפרס – הרצאה בוורדקמפ 2011
• גרסה חדש לעורך טקסט עשיר – CKeditor
• קהילת jQuery הישראלית – קדימה להתפקד
• למה CSS3 טוב ליהודים ולערבים

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

אתרי עמוד אחד

טרנד מאד נפוץ כיום בבניית אתרים, הוא אתר של דף אחד, one page site, כאשר קיימת גלילה פנימית בין האיזורים השונים בעמוד (דוגמאות: 1, 2, 3). השראה לאתרים מוצלחים אפשר לקבל באתר onepagelove.com, שמציג אתרי דף בודד מעוצבים ביותר (בדרך כלל מעוצבים ביותר מדי).

אתר עמוד אחד בוורדפרס

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

אתר עמוד אחד – טוב או רע לקידום אתרים?

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

יתרונות SEO לאתר עמוד אחד

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

יתרונות SEO לאתר עם מספר עמודים

• באתר עמוד אחד קיים meta title אחד ו-meta description אחד, אשר אמורים לספק מידע כללי מספיק על כל התכנים באתר. באתר עם מספר עמודים ניתן לקדם באופן ספציפי כל תוכן בנפרד ובצורה מדוייקת יותר.
• כל עמוד ממוקד יותר מבחינת תוכן.
• קישורים פנימיים ו- link juice יכולים לקדם דפים פנימיים ואף לחזק את דף הבית.
• באתר עמוד אחד, אם הגלילה והסתרת תכנים נעשית בצורה לא מספקת, חלק מהתכנים לא יחשפו בפני מנוע החיפוש או שמנוע החיפוש עלול לחשוב כי נעשה ניסיון לא "חוקי" ועלול להעניש את האתר.
• ההתמצאות באתר עמוד אחד עלולה להיות לא ברורה ומובנת לחלק מהגולשים.
• באתר עמוד אחד הגולש ממתין פחות זמן לעליה של תכנים (אין מעבר של רענון בין דפים) אולם הדף עצמו שוקל יותר (כל התכנים והמדיה נמצאים באותו הדף) כך שמבחינת מנוע החיפוש טיעינת הדף תקח זמן רב יותר.

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

כאמור, בכנס וורדקמפ אציג מימוש של אתר כזה באמצעות האקינג לתבנית הדיפולט של וורדפרס. הגלילה נעשית באמצעות הסקריפט jQuery ScrollTo, בהשראת הפוסט Coding a CSS3 & HTML5 One-Page Website Template ואת היישום על וורדפרס. תודה לחנית על הטיפים ולדניאל על jQuery plugin שיצר במיוחד להתאמה של גלילה אופקית ב-RTL (על כך בפוסט נפרד שיעסוק באתרי עמוד אחד בעברית עם גלילה אופקית מימין לשמאל).иконииконописikoniсвети георгиikoni

• גלילה אופקית ב-RTL פלאגין ל-jQuery
• איך בטעות SEO אתר ענק הורג את עצמו בגוגל
• מערכת CMS למעצבים – FIRERIFT
• כרטיס ביקור אישי – vCard HTML
• Adsense ומילות המפתח ב-Meta Tags

לפני 4 שנים החיפוש החם ביותר שהוביל לבלוג הזה היה אחר מערכות לבניית רשת חברתית, זה היה בדיוק אחרי עליית קפה דה מרקר ולקראת הפריצה של פייסבוק בקהל הישראלי הרחב, דקס מחוברים ושוקס היו כבר בסביבה ורבים חשבו ש"מה הבעיה, נמצא משהו בקוד פתוח ונקים רשת מצליחה לנישה כלשהיא ואת הכסף הגדול נעשה מפנטזיה כלשהיא". עברו פה בבלוג כמה מערכות בקוד פתוח שהתיימרו לאפשר להקים רשת חברתית, מפתיעה אותי הכמות של מערכות שסקרתי או הזכרתי או תרגמתי כאן בשלוש שנים האחרונות: SocialEngine, Insoshi, Ning, phpIzabi, Dolphin, osDate, Elgg, Snapp ועוד כמה לא חינמיות.

BuddyPress

BudyPress היא מערכת חינמית בקוד פתוח המאפשרת להקים אתר רשת חברתית. באדיפרס למעשה מבוססת על WordPress MU  עם תבניות ייעודיות וחבילת תוספים שהופכות את וורדפרס לרשת חברתית (ואפשר גם עם תבנית וורדפרס רגילה…). דוגמא לאתר מרשים מבוסס BudyPress בעברית הוא 70 פנים (אתר רשת חברתית ליהדות פלורליסטית מטעם אורט ישראל שמיד יורחב עלי). דוגמאות נוספות וnאד מרשימות (לא בעברית) אפשר לראות כאן וכאן וכאן וכאן.

BudyPress - רשת חברתית מבוססת וורדפרס

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

מספר על התרגום והתהליך, שרון גרינברג:

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

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

שבעים פנים - מבוסס באדיפרס בעברית

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

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

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

תודה לשרון ולצוות טכנולוגיות האינטרנט של אורט.

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

• SocialEngine – מערכת לבניית רשת חברתית
• מערכות לאתרי היכרויות בחינם ובעברית
• רשת חברתית בחינם – Ning
• Insoshi מערכת חינמית לבניית רשת חברתית
• איך להקים רשת חברתית? תוכנות חינמיות

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

התבנית נבדקה על דפדפני IE6 ו-IE7 ונמצא כי הם ממש לא תומכים בה, שאר הדפדפנים כולל IE8 כן תומכים.

התבנית תורגמה והותאמה לעברית.

Furvious - תבנית וורדפרס מתורגמת לעברית

לאחר התקנת התבנית יופיע תפריט אפשרויות התבנית בעמודה הצדית.

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

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

בחירת סקינים שונים

התבנית תומכת ב-Featured Category, כלומר פוסטים מקטגוריה מסויימת שיוצגו בצורה בולטת בדף הבית (תרגמתי זאת כ"מה כדאי לקרוא").

Featured posts בעמודה הצדית

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

בחירת הקטגוריה עבור Featured Category

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

בחירת התמונה ל-Featured Cateogry

על התבנית אפשר לקרוא באתר של יוצרי התבנית כאן.

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

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

• די כבר עם השחור הזה
• מלחמות המאשאפים בשטחים
• בלוגלי, כסף ואג'נדות
• WordPres Mu בעברית – להורדה
• תבנית וורדפרס ריקה בעברית

איך אומרים בג'ומלה בעברית האתר פעיל? האתר לא לא אינו פעיל.

בהגדרות הגלובליות באתרי ג'ומלה, קיים שדה הנקרא: Site is offline ולו שתי אפשרויות Yes/No. בהזדמנויות שונות כאשר שדה זה תורגם לעברית, הוא הופיע כ: האתר אינו פעיל: כן/לא. כלומר, כדי לציין שהאתר פעיל יש לסמן שהאתר לא אינו פעיל.

האתר לא אינו פעיל

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

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

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

• עיצוב שמיש – אמיר דותן, ארכיטקט חוויית משתמש בחברת הייעוץ Lab49
• Usability Talking – מורד שטרן, יועץ הניו מדיה של הממשלה
• פשוט. שימושי – ברק דנין, הבעלים והמנכ"ל של Uniq UI
• לחצתי, עכשיו מה? – אמיתי טוויטו, ארכיטקט ראשי של נענע10
• ממשק משתמש, נגישות וכל מה שביניהם – טליה אבירן, מנהלת צוות ממשק משתמש במשרד החינוך
• UX (re)view – רן לירון, מעצב ממשק וחויית משתמש בחברת מטריקס.

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

UIX Live - כנס חווית המשתשמש בישראל

בתאריך 5/10/2010 יתקיים בשפיים הכנס השנתי של חווית משתמש ישראל. כדאי להיכנס לאתר הכנס כדי לראות מי הדוברים ובמה העניין. מי שעדיין לא נכנס לעולם חווית המשתמש והשימושיות, יש מסלול מתאים לאלו שאינם "מומחים" בנושא (אני אהיה שם…). קוראי הבלוג יכולים לקבל 15% הנחה (בשווי 111 ש"ח) בהרשמה לכנס. יש להזין את קוד הקופון: wecms בעת ההרשמה, כדי לקבל את ההנחה.

• מערכות קוד פתוח לניהול Multi Site
• מערכת CMS למעצבים – FIRERIFT
• הנני כאן
• לשלב אפשרויות טוויטר באתר עם Anywhere
• עוד אחד נפל חלל – פריצה לחשבונות ב-One

מה נעשה פה

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

התוצאה הסופית

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

אתר תדמית מבוסס וורדפרס

מי הם הלקוחות ומאיפה הכל מתחיל

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

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

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

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

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

המטרה

בניית אתר שיכיל את האפשרויות הבאות:

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

בפוסט הבא - בניית אתר תדמית מבוסס WordPress.

• WordCamp 2010 ואתרים עם דפי נחיתה
• תבנית WordPress בעברית – Wp-Themes Blogger
• בלוגלי, כסף ואג'נדות
• בניית מערכת ניהול תוכן מההתחלה
• ארז והכשלונות

WordCamp 2010

ביום ראשון הקרוב יתקיים בירושלים כנס WordCamp שמהווה מפגש למפתחי ומשתמשי WordPress בישראל. הכנס מכיל 3 מסלולים (מתחילים, מתקדמים ומנהלי אתרים) והשנה ישתתף בכנס מאט מאלוונג, הבחור שפיתח והקים את וורדפרס.

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

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

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

איך התוצאה תראה?

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

אתר התדמית

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

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

• בניית אתר עם דפי נחיתה – חלק ראשון – הקדמה
• תבנית WordPress בעברית – Wp-Themes Blogger
• בלוגלי, כסף ואג'נדות
• בניית מערכת ניהול תוכן מההתחלה
• ארז והכשלונות

תבנית WordPress (שנחשבת כתבנית עיצוב טובה), Composito שתורגמה והותאמה לעברית.

תבנית וורדדפרס מתורגמת לעברית - composito

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

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

להורדה.

• בלוגלי, כסף ואג'נדות
• בניית מערכת ניהול תוכן מההתחלה
• WordPres Mu בעברית – להורדה
• ארז והכשלונות
• תבנית וורדפרס ריקה בעברית

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

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

חנות תבניות

ברוב אתרי התבניות בדרך כלל לא משלמים עבור תבנית אחת, אלא על חברות שמאפשרת להוריד ולהשתמש במספר תבניות. ב-WooThemes החבילה הבסיסית, שמזכה בכמות של אחת עד שלוש תבניות, עולה 70$. בגדול, לא נורא.

נשאלת השאלה, האם זה ביזנס ויש בזה בכלל כסף?

WooThemes התחילו ב-2007 עם תבנית News מאד מוצלחת שכל איש וורדפרס מכיר ומשם התפתחו לעסק של שלושה שותפים שכיום מכניס יותר משני מיליון דולר בשנה ממכירת תבניות WordPress.

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

לדרופל יש את TopNotch שמוכרים תבנית בסביבות 280$ שמתרחבים ואתמול פותחים ליין חדש של תבניות פרימיום, Fusion (ובטח יש אתרים נוספים לדרופל שאני לא מכיר).

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

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

• שימו לב – כנס מערכות ניהול תוכן הישראלי
• CMS נולד – תחרות מערכות ניהול התוכן הטובות ביותר
• php-fusion בעברית – מערכת לבניית אתרים
• Packt – תחרות ה-CMS הטובה ביותר 2008
• בלוגלי, כסף ואג'נדות