ותודה לדינה על הצילום!
השנה בוורדקאמפ 2008 העברתי שוב הרצאה בנושא עיצוב בלוגים, והפעם טכנית עוד יותר. תודה לכולם על הפידבק הנהדר, תודה לתאי ולזיו על העזרה הטכנית (מעולם לא חשבתי שאעביר הרצאה על לינוקס, ושזה עוד יעבוד?!). ותודה לדני על העזרה הנפשית.
צפייה במצגת (מאתר Slideshare)
ניתן להוריד את ההרצאה גם בקובץ PDF (קישור ישיר לקובץ PDF בגודל 700 ק"ב).
רשימת הקישורים מהמצגת
מדריך פקודות ה-php של וורדפרס – Template Tags
תבנית News (שעולה 75 דולר) – עם שלושת ה-Loops בחלק התחתון
תוסף ה-firebug (לדפדפן פיירפוקס בלבד) – כלי העזר האולטימטיבי למפתחי תבניות ואתרים
מדריכים, רבותי, מדריכים:
מאמר CSS כללי ומצויין – ארוך (לוקח כמה שעות לקרוא) אבל מאוד ידידותי
מדריך ליצירת עיצוב CSS מהבסיס
מאמר מעולה על עיצוב ושינוי טמפלייטס של וורדפרס. מאוד תכל'סי
מאמר חובה לכל מי שמתעסק עם תבניות וורדפרס
עוד מדריך בסיסי וטוב ל-CSS
איך עושים קיצי קיצי לבלוג חדר404 (כפי שהודגם בהרצאה)
במסגרת ההרצאה הדגמתי שימוש לתוסף הפיירבאג על הבלוג של עידו קינן. תוכלו לשחזר זאת בבית בקלות, לתרגול ושעשוע. שימו לב, לצורך התרגיל יש לוודא שמותקן לכם תוסף הפיירבאג, על דפדפן פיירפוקס.
ניגשים לאתר, מפעילים את הפיירבאג על מצב inspect: לוחצים על סימן ה"וי" הירוק שבתחתית הימנית של החלון, ואז לוחצים על כפתור "inspect". שיופיע בצד שמאל או ימין, תלוי בכיווניות הדפדפן שלכם. הקיצור במקלדת: ctrl+shift+C
בוחרים את ה"דיב" שמקיף את ה-header של הבלוג (הוא יוקף בפס כחול עבה).
למטה יופיע "זום" על ה-HTML (בצד שמאל) ועל ה-CSS של האלמנט. (שימו לב שהתפקסתם על הדיב עם הקלאס "headerleft" ולא על משהו אחר).
ב-CSS שנו את פקודת ה-background כדי שתצביע על הכתובת הזו. הוסיפו גם תת-פקודה שתגרום לכך שהתמונה תופיע רק פעם אחת, ולא תחזור על עצמה ב-tile. מקמו את התמונה 65 פיקסל משמאל, ו-10 פיקסל מלמעלה (שימו לב לתמונה הבאה כדי לראות איך כותבים את זה).
המממ. מגניב. אבל עכשיו אנחנו רוצים להעיף את הטקסט שמסתיר לנו את הלוגו.
אבל אנחנו עדיין רוצים שיהיה שם לינק – כי אנשים תמיד רגילים ללחוץ על הלוגו כדי להגיע לעמוד הבית. איך עושים את זה? עושים שוב inspect ובוחרים את הלינק עצמו (אפשר גם למצוא אותו בחלונית ה-HTML משמאל – מה שיאיר אותו בצבע תכלת – וללחוץ עליו כדי לעשות "זום"). למטה מוסיפים לו ערך חדש – עושים זאת על ידי דאבל קליק על האיזור הלבן שמימין ל-CSS (לא משנה איפה).
כתבו בצד שמאל את המילה display (הוא ישלים לכם אותה אוטומטית), לחצו enter, ואז הקלידו בצד ימין את המילה block – מה שיוצר את הערך display:block שיגרום לו לתפוס את כל השורה ויאפשר לנו להגדיר לו את הגובה: height:100% (שגם אותו מוסיפים עם דאבל קליק והקלדת הערכים בצד שמאל וימין).
עכשיו הלינק לא בדיוק מכסה את הלוגו (אם תתנו לו רקע אדום לרגע, זה יהיה מאוד ברור איזה איזור הלינק מכסה) חורג מלמעלה אז נוסיף עוד ערך חדש: margin-top:15px. אוקי אז טיפלנו בלינק, אבל עכשיו צריך להסתיר את הטקסט עצמו. נוסיף לו עוד ערך: text-indent:-500em, מה שיסיט את הטקסט 5 מטר מימין למסך וכך הוא לא יופיע על המסך, אבל כן יופיע בקוד עצמו.
בואו נייפייף גם את הסיידבאר. תעשו לו inspect ותכבו את הבורדר השמאלי והימני (כשועברים עם העכבר על הערך עצמו מופיע אייקון אפור שאם לוחצים עליו הוא נהיה אדום ו"מכבה" את הערך). את ערך ה-background תשנו לערך הזה:
url(http://www.bazekalim.com/404sidebg.gif) repeat-y
(כלומר שיצביע על הכתובת הזו, ושהתמונה תחזור על עצמה שוב ושוב לאורך ציר ה-y).
והנה תמונת הרקע ששתלנו – בסה"כ תמונה קטנטנה בגובה 10 פיקסל בערך, אבל כששמים אותה שוב ושוב מתחת לעצמה נוצרת אשלייה של שני פסים ארוכים.
וזו התוצאה הסופית! ברבע שעה בערך, עשינו כמה תיקונים קטנים, שגרמו לבלוג להראות הרבה יותר מגניב. שימו לב, שאם הייתם רוצים להעלות את השינויים האלה לאתר עצמו, הייתם צריכים להכניס את כל התיקונים שביצעתם על הפיירבאג – בקובץ CSS עצמו, ולהעלות אותו לשרת. אל תשכחו שכל התיקונים לא "מבוצעים" באמת, אלא רק בדפדפן שלכם, וברגע שתרפרשו הכל ייעלם. מזל, הא?
אם יש לכם שאלות, טענות על כך שהקוד שלי מלוכלך, או כל הערה אחרת, אתם מוזמנים ליצור עימי קשר. תודה רבה ונתראה בשנה הבאה!