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

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

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

דברים בסיסיים לפני שמתחילים

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

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

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

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

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

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

יש לנו הכל? יופי. אפשר להמשיך.

מבנה HTML

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

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

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

הקוד שאיתו נתחיל נראה ככה:

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

תבניות וספריות

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

index.php
header.php
footer.php
sidebar.php
functions.php
style.css

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

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

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

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

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

Header & Footer

כדי להתחיל בעבודה נפתח את את הקובץ header.php שיצרנו מקודם ונעתיק אליו את החלק הראשון שיצרנו בקובץ ה-הטמל הראשון:

עכשיו, נעשה משהו דומה עם הקובץ footer.php, רק שהפעם נעתיק מהסוף של ה-Main זה אמור להיראות ככה:

index,php

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

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

השורה הראשונה שאנחנו צריכים להכניס היא בתחילת הקובץ והיא קוראת ל-header שיצרנו:

השורה השניה מתווספת בסוף הקובץ, היא בצורה מפתיעה קוראת ל-footer ונראית ככה:

בתכל'ס סיימנו את החלק הראשון ביצירת תבנית. תעלו את כל הקבצים לתיקיית wp-content/themes/yourtheme ותפעילו את התבנית דרך לוח הבקרה. כנסו לבלוג שלכם בכתובת הראשית ותציצו בקוד המקור. רואים? זה הקוד שכתבנו! יאי!

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

Leave a Reply

Your email address will not be published.