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

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

טופס התחברות

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

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

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

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

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

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

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

מסך לאדמין מחובר

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

שנית, כל המשתמשים שהם בדרגת קריאה בלבד אין להם "דרגת משתמש" העסק הזה קצת מבלבל כי מי שניסה ליצור משתמשים דרך פאנל הניהול בוודאי שם לב שהדרגות נעות בין 10-קריאה ועד ל 50 - מנהל (עקבי עד גירסה 2.7, אבל ב 2.7.1 המספרים כבר לא מופיעים) בעוד שמבחינת התשובה שמחזיר user_level דרגת המנהל היא 10 וכאמור דרגת הקורא איננה קיימת. לכן בעצם, ניתן להכניס את הקריאה לדרגה כמשפט IF, שכן ללא דרגה הוא איננו מתקיים.
בברירת המחדל, כשמשתמש מתנתק מוורדפרס הוא מוחזר אל מסך ההתחברות ולא אל הבלוג. (למה דווקא למסך ההתחברות אם הוא הרגע התנתק, ההגיון אומר לבלוג, אבל ניחא) המזל הוא שהלינק להתנתקות (שורה 7) מאפשר החדרת פרמטר המגדיר את העמוד אליו יוחזרר המשתמש, השימוש במשתנה המחזיר את העמוד בו נמצא המשתמש מאפשר להחזיר אותו בתום ההתנתקות לעמוד בו הוא נמצא כרגע.

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

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

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

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

שלב ראשון: מציאת המבנה

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

שלב שני: עריכת CSS

ראשית, יש לפתוח את קובץ ה CSS של הערכה (הקובץ style.css) לגלול אל תחתיתו ולהוסיף בו את השורות הללו:

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

כך זה יכול להראות בסוף:

אפשר לראות שבשורה 7 שיניתי את רוחב העמודה ל 100% ולא קבעתי מספר פיקסלים סופי, זה נעשה על מנת להבטיח התאמה מלאה לרוחב העמוד ללא קשר לרוחב הדף עליו מדפיס המשתמש.

שלב שלישי: אקטיבציה

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

ושנו אותה כדי שתראה כך:

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

מה הלאה

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

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

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

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

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

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

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

רצועה בגובה פיקסל וברוחב של wrapper

לבסוף, נוסיף את ההגדרות עבור אובייקט ה wrapper בקובץ ה css לצורך הדוגמא קראתי לתמונה bg.jpg

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

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

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

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

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

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

וקריאה אליו ע"י יצירת קישור שמפעיל את הלייטבוקס

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

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

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

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

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

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

עטיפה
על מנת להפעיל אובייקט נעטוף אותו בצורה הבאה:

והטריגר יוטמע בצורה הבאה:

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

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

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

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

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

ולסיום

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

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

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

37signals היא חברה המייצרת מוצרים מבוססי ווב לניהול פרוייקטים. יש להם את בייסקאמפ שהוא מוצר לשיתוף ידע, את High Rise שהיא מערכת crm פשוטה ועוד כלים שנועדו לספק לחברות קטנות אפשרויות ניהול מבוזרות.

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

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

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

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

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

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

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

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

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

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

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

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

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

אז אלו הפוסטים המתוכננים בנושא, אני אהפוך אותם ללינקבילים ברגע שהם יתפרסמו.
1. תגובות בעזרת פופאפ. (הפוסט הנוכחי)
2. תגובות ב Div נסתר בעזרת JavaScrip – קישור
3. תגובות ב lightbox – שידרוג של שלב 2 בעזרת תוסף.
4. Ajax? שילוב של דרגכים 1+3.

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

הכנת תשתית
למרות שמדובר בפונקציה מובנית, רוב מעצבי הערכות לא מכלילים אותה בערכה שלהם, לחילופין, הם מכניסים אותה לערכה בצורת הערה (מצב כבוי). לצורך הפעלה של הפונקציה יש לערוך את הקובץ header.php ולחפש את הקריאה הבאה:

ולהוסיף ישר לפניה את השורה

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

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

הקריאה

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

ולהחליף אותו ב:

יש פה מספר פרמטרים הניתנים להתאמה.
zero, one, more הן הכתוביות שיוצגו עבור אפס תגובות, תגובה אחת או מספר תגובות. ניתן להחליף בכל כיתוב אחר. על מנת להציג את מספר התגובות אפשר להשתמש ב "% תגובות".
popupcss – זהו שם למחלקת ה css שאחראית על עיצוב הפופאפ.
none – טקסט שיוצג כאשר התגובות לפוסט נעולות (לא ניתן להגיב).
שני הפרמטרים האחרונים אינם בגדר חובה וניתן להשמיט אותם.

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

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

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

לפני זמן לא רב, מת מסך ה LCD הוותיק שלי והוא בן שלוש שנים וחודש. בדיוק חודש לאחר פקיעת האחריות בת שלוש השנים הוא החזיר את פיקסליו למקום שבו נחים הפיקסלים השרופים. אלפיה שהונחה אצל הקופאית ברשת שופרסל דיל זיכתה אותי במסך Benq חדש בעל מסך רחב ואלכסון של 20". 1680 פיקסלים לרוחב, 1050 פיקסלים לגובה זו הגדרת הרזולוציה שלי וכאן בדיוק מתחילה הבעיה או הדילמה.
רוחבו של העיצוב הנוכחי שלי הוא 780 פיקסלים ורוחבה של עמודת הטקסט עצמה הוא כמעט 500 פיקסלים ובמסך ברזולוציה של 800 פיקסלים לרוחב זה יושב בול. מצד שני, הפעם האחרונה שהשתמשתי ברזולוציה של 800×600 זה היה כשניסיתי לשחזר מחשב ישן בעזרת מסך 14 אינט'ש ישן שמצאתי במחסן. עם זאת, הגוגל אנליטיקס מתעקש (עד כמה שניתן להאמין לו) שלכ 7% מהמבקרים בבלוג אכן יש רזולוצית מסך של 800X600. על להגדיל חשבתי כבר בעבר אבל כשעבדתי על 17" השתמשתי ברזולוציה של 1280X1024 שגם אם היא משמשת כ 22% ממבקרי הבלוג עדיין היא לא רזולוציה טבעית. רוב המשתמשים מעדיפים, כך נראה, רזולוציה של 1024X800 וזה רק מגדיל את הדילמה.

עיצוב בעזרת CSS מאפשר שני סוגים עיקריים של עיצוב – קבוע ויחסי. עבור כל אובייקט שמקבל גדלים כפרמטר ניתן להשתמש בשני סימונים עיקריים – px (מייצג פיקסלים) או % (אחוזים). כך למשל, אם נרצה להגדיר תיבה שהרוחב שלה הוא 20 פיקסלים נשתמש בהגדרה: width: 20px.
הרעיון מאחורי העיצוב הקבוע אומר שהמעצב מגדיר מידות אחידות עבור כל רכיב באתר וככה הוא יוצג בכל הדפדפנים (ונניח לתאימות קוד ושונות דפדפנים בצד כרגע). זה מאפשר לבעל האתר לדאוג שהאתר שלו יראה זהה הן ברזולוציות נמוכות והן ברזולוציות גבוהות. אבל, על נוחות וודאות צריך לשלם וזה קורה בעיצוב קבוע בכמה נקודות:
א. הביזבוז.
אם האתר נבנה עבור רוחב של 800 פיקסלים, הרי שברוחב של 1280 פיקסלים יש כ 480 פיקסלים "מבוזבזים" במקרה הטוב זה יציג שוליים, במקרה הרע זה ימרח את הטמפלט בצורה מזוויעה. השימוש בבר צידי ושאר ריווחים גוזרים גם הם קופון נאה מהרוחב הכללי ולבסוף נשארים כאמור עם פחות מ 500 פיקסלים עבור הכתיבה. (שזה לא חריג. נענע משתמשים ב 500 , ynet בכ 430 ו NRG בכ 450).
ב. גמישות
השימוש ב Float על מנת לייצר שני אובייקטים זה לצד זה הוא נפוץ למדי. הבעיה היא, שאובייקט Float שמוגדר בגודל קבוע לא מסוגל להצטמצם. במילים אחרות, עיצוב שהותאם ל 1024 ישבר לחלוטין ב 800, אם כי אפשר לרתום את התכונה הזו על מנת לייצר אתר שמתאים לשני הרוחבים. מי שניסה לכווץ פעם חלון בוודאי ראה כיצד האובייקטים נדחסים עד השלב שבו הם מתחילים "ליפול" מהסדר שלהם.

העיצוב היחסי הוא הרבה יותר גמיש בעבור שתי הבעיות הללו. בשיטת העיצוב הזו מגדירים את רוחב כל תיבה ביחס למאת האחוזים המרכיבים את התיבה המכילה אותה. כך למשל, אם נגדיר את רוחב התיבה הראשית של הבלוג כ 90%, הרי שברוחב מסך של 800 פיקסלים נקבל עמודה בת 720 פיקסלים ואילו ברוחב של 1280 נקבל עמודה בת 1152 פיקסלים. בשני המקרים יתקבלו שוליים מינימליים (10% מרוחב המסך במקרה הלז) ויותר אזור יהיה זמין עבור התוכן. ככל שרוחב המסך יגדל ניתן יהיה לפרוס את הבלוג בצורה נוחה יותר, מרווחת יותר ומכאן שגם קריאה יותר. גם במקרה של הקטנת חלון או שינוי רזולוציה האובייקטים תמיד יסתדרו בגודל המתאים וישארו באותה הפרופורציה כך ששינוי גודל המסך לא ישנה את הסידור של האתר אלא רק את כמות התוכן המוצגת.
אבל, כמו בשיטה הקודמת, גם כאן יש מחירים
א. תמונות
בעיצוב הנוכחי, התמונות שלי הן אובייקט Float ברוחב 200 פיקסלים עם הצמדה לצד שמאל. זה מאפשר להכניס תמונות קטנות בצד של הפוסט וזה לא רע בכלל רוב הזמן, אבל לפעמים רוצים להכניס צילום מסך של אתר כזה או אחר צריך להקטין תמונה מ 800 פיקסלים ל 200 פיקסלים – מדובר פה בכיווץ לרבע מהגודל ובתהליך הזה הרבה מאוד פרטים הולכים לאיבוד. ואז חשבתי על האפשרות של תמונה לרוחב הפוסט (רוחב מלא, של כל עמודת הטקסט) אבל לבצע דבר שכזה בעיצוב יחסי זו משימה מאוד בעייתית. אם מגדירים את רוחב התמונה כ 100% הרי שעבור מסכים רחבים במיוחד התמונה תעבור תהליך מתיחה שיפגע בה, אם משתמשים בתמונה ברוחב מקסימלי, הרי שברוחב המינימלי התמונה תידחס ושוב תאבד מאיכותה, שלא לדבר על המשקלים של תמונות גדולות. האפשרות החלופית היא להשתמש בהגדרת רוחב קבועה, אז אומנם יודעים בדיוק מה יהיה רוחב התמונה אבל מצד שני כאן אפשר לפספס בשני הכיוונים – תמונה שגולשת מהשוליים או לחילופין כזו שיושבת באמצע הפוסט עם שוליים רחבים בכל צד – תקועה שכזו. אפשר אומנם לאלתר בעזרת פרמטרים כגון max-width ו min-width שיכולים להכריח רוחב מקסימלי ומינימלי, אבל זה עדיין מכוער. יתר על כן, בלוגים שיש להם גרפיקה בהדר עלולים להסתבך עוד יותר בגלל העיוות של המתיחה או הכיווץ.

ב. חישובים
אם רוחב המסך הוא 100% והתיבה הראשית היא 98% ובתוכה יש שלוש עמודות שכל אחת ברוחב של 32% עם ריווח של 1% מכל צד של כל עמודה, מה יהיה רוחב העמודה ברוחב מסך של 1280 פיקסלים? מה יהיה הסידור האופטימלי לחמש עמודות ברוחב שווה? או לארבע עמודות כאשר האמצעית רחבה פי 2 משלושת העמודות האחרות? בקיצור, אם בעיצוב הקבוע צריך לעבוד עם סרגל, הרי שבעיצוב היחסי צריך לעבוד עם מחשבון. זה עוד יחסית פשוט כאשר מייצרים ערכת עיצוב חדשה, אבל מה עושים כאשר מנסים לתרגם ערכת עיצוב מאנגלית תוך כדי החלפת סדר העמודות? בקיצור, עיצוב יחסי הוא כאב ראש בתחום הזה שכן הוא דורש מעקב צפוף לכל אורך ה CSS. שינוי הכי קטן במרכיב אחד מבלי לטפל במרכיבים הצמודים לו יכול להרוס את כל העיצוב.

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

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

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

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

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

הבורר הפשוט – selector

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

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

בורר המחלקה – class selector

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

יאפשר לנו להעניק לטקסט באובייקט קוד את הצבע הכחול כך:

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

ניתן להפעיל בצורות הבאות (ועוד רבות אחרות):

בורר האובייקטים – ID Selectors

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

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

על מנת לקרוא לעיצוב של אובייקט, נשתמש ב ID= במקום ב class= כך:

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

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

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

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

תורשה

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

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

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

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

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

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

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

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

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

הטמפלט הבסיסי – שלישיות.

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

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

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

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