css

מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק רביעי

Wordpress_Wallpaper_on_Wood_by_fran6

בפוסט הקודם סיימנו להגדיר את האינדקס, שזה אחלה. לא רק בגלל שפתאום יש לנו אינדקס, אלא שהבסיס של האינדקס ישמש אותנו בהרבה עמודים אחרים. כמו למשל ב-single.php שיציג את הפוסט עצמו. כמובן, יהיו מספר שינויים כי עדיין, זה לא האינדקס. ההבדל הראשון הוא שבסינגל אנחנו מציגים פוסט אחד וצריכים לקרוא לו איכשהו, ההבדל השני הוא אזור התגובות (מה קרה? תהיו סוציאלים קצת!). דבר ראשון, נקרא לפוסט שלנו, ממש מתחת לדיב של התוכן: להבדיל משאר הקודים שדחפנו פנימה, כאן לא צריכים ליצור לולאה כי וורדפרס חכמה מספיק להבין איזה פוסט אנחנו צריכים תודות לפרמלינק שהכנסנו מקודם. מאחר וזה פוסט בודד נצטרך להכניס את התגובות איפשהו. מאחר וניצור הפרדה בין התגובות לטרקבקים בעתיד באמצעות הקובץ comments.php כל מה שאנחנו צריכים כרגע זה רק לקרוא לקובץ בצורה שוורדפרס תבין: את הקוד הזה נכניס ממש לפני הסגירה של דיב התוכן (#content) קצת מתחת לניווט. ניווט בין פוסטים ואם כבר בניווט עסקינן, בואו נוסיף מעבר...

+המשך

מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שלישי

6213

לקח לי קצת זמן, אבל חזרתי. בכל זאת, התחלתי עבודה חדשה והכל. תזכורת קטנה מהפוסט הקודם. סיימנו להגדיר את ה-header.php שלנו וחלק מקובץ הפונקציות (functions.php). עכשיו ניגש לעיקר - index.php. הקובץ הזה הוא הקובץ החשוב ביותר בתבנית שלנו. הוא מחליף כמה קבצים חסרים (במידה והם חסרים) כמו עמוד קטגוריה או עמוד התגים וקורא לשאר הקבצים שלנו (כמו ה-האדר, הפוטר והסיידבר). אבל את זה כבר עשינו בפוסט הראשון. מה שנעשה עכשיו זה לקרוא לתוכן שלנו. ההתחלה פשוטה מאוד, קובת האינדקס עובד עם לולאה אחת ארוכה - "הלולאה" (the loop). בהרבה מאוד אתרים שמדברים על וורדפרס ומציגים האקים שונים מתייחסים ללולאה כיישות בפני עצמה, שזה די מצחיק (וגם מביך, אבל בקטנה). הלולאה שלנו פשוטה מאוד ונראית ככה: פשוט ולא מצריך הרבה הסבר. הלולאה נפתחת ב"כאשר" (שזה ה-while) ונסגרת ב"סייםכאשר" (endwhile). זה לא יעשה שום דבר, לפחות לא משהו שאנחנו רואים. למעשה מה שקורה זה שברגע שהעאמוד נטען וורספרס עוברת על בסיס הנתונים...

+המשך

מדריך למתחילים: CSS

CSS

בעקבות דיון קצרצר שהתנהל בפוסט הזה חשבתי שאולי כדאי לעשות איזושהי סקירה קצרה על CSS - מה זה בעצם וכמה דוגמאות, יהיה חנוני - תישארו! במידה ולא קראתם את רשימת הקיצורים והיעברותים שלי (כי עם כל הכבוד, זה ממש מעיק כל פעם לעבור בין שפות כדי לכתוב css או html או משהו בסגנון הזה) אני מציע לקפוץ לרגע לקרוא את הפוסט הזה, טוב - את ההתחלה שלו לפחות, כדי לא להסתכל על המסך ולהגיד ווטפ?! (שזה WTF בעברית). נתחיל. כמה עובדות שתמיד (!) החסירו שינה מעינכם על סיאסאס: 1. CSS אלו ראשי תיבות של Cascading Style Sheets (שזה "גליונות סגנון מדורגים" על פי גוגל טרנסלייט) 2. סגנונות התווספו להטמל 4 כדי לפתור בעיות. 3. הסגנונות השונים מגדירים איך להציג אלמנטים בהטמל. 4. גליונות עיצוב חיצוניים יכולים לחסוך ים עבודה. 5. גליונות עיצוב חיצוניים מאוכסנים בקבצי סיאסאס. 6. כל הדפדפנים תומכים בסיאסאס. למעשה, תגיות וגליונות עיצוב פתרו הרבה בעיות (או אחת ממש גדולה). הטמל מעולם...

+המשך

מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שני

wordpress-wallpaper

טוב, אז בחלק הראשון של המדריך יצרנו את הבסיס לתבנית שלנו. יצרנו את מבנה ההטמל הבסיסי ומתוכו גזרנו את ה-headerת ה-footer וה-index. עכשיו צריכים להמשיך. כמו שכבר כתבתי, כשאני מעצב ובונה תבניות אני מתחיל מהחלק העליון לחלק התחתון. בחלק הזה נתמקד בחלק העליון, בפונקציות שבעצם מגדירות איך התבנית תפעל ובמרכז התבנית עצמה (index.php). אז קדימה, לעבודה. תבנית Header מה שנעשה עכשיו זה לעבוד קצת על החלק העליון של התבנית. נכניס כמה שורות קוד כדי להפוך את התבנית לחוקית מבחינת הטמל ופהפ, נקרא לכמה קבצים חיצוניים שדרושים לנו ונעבוד גם על הקובץ functions.php שיצרנו מקודם כדי שמשהו באמת יקרה בתבנית שלנו. אבל קודם כל, פתחו את קובץ ה-header.php ממקודם והחליפו את השורה בשורות הבאות (עלינו לטובה): השורות הללו בעצם מגדירות לדפדפן איך לקרוא את הדף בצורה ברורה. את סוג הקובץ והשפה, ולמעשה את הזהות של התוכן בתוך הדפדפן. לא ארחיב כאן על זהות התוכן בתוך הדפדפן אבל אם בכל זאת חשקה...

+המשך

מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק ראשון

Wordpress_Wallpaper_on_Wood_by_fran6

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

+המשך