מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שני
טוב, אז בחלק הראשון של המדריך יצרנו את הבסיס לתבנית שלנו. יצרנו את מבנה ההטמל הבסיסי ומתוכו גזרנו את ה-headerת ה-footer וה-index. עכשיו צריכים להמשיך.
כמו שכבר כתבתי, כשאני מעצב ובונה תבניות אני מתחיל מהחלק העליון לחלק התחתון. בחלק הזה נתמקד בחלק העליון, בפונקציות שבעצם מגדירות איך התבנית תפעל ובמרכז התבנית עצמה (index.php). אז קדימה, לעבודה.
תבנית Header
מה שנעשה עכשיו זה לעבוד קצת על החלק העליון של התבנית. נכניס כמה שורות קוד כדי להפוך את התבנית לחוקית מבחינת הטמל ופהפ, נקרא לכמה קבצים חיצוניים שדרושים לנו ונעבוד גם על הקובץ functions.php שיצרנו מקודם כדי שמשהו באמת יקרה בתבנית שלנו. אבל קודם כל, פתחו את קובץ ה-header.php ממקודם והחליפו את השורה בשורות הבאות (עלינו לטובה):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
השורות הללו בעצם מגדירות לדפדפן איך לקרוא את הדף בצורה ברורה. את סוג הקובץ והשפה, ולמעשה את הזהות של התוכן בתוך הדפדפן. לא ארחיב כאן על זהות התוכן בתוך הדפדפן אבל אם בכל זאת חשקה נפשכם להעשיר את הידע, אתם יכולים לקרוא על זה כאן.
מה שנעשה עכשיו זה להוסיף קצת פונקציות שיגדירו לתבנית מה לעשות, מאיפה לקרוא מה ואיך להציג (ברמה הטכנית בלבד ולא ברמה העיצובית בינתיים). כדי להוסיף את הפונקציות הללו, אנחנו צריכים לפתוח את הקובץ functions.php שיצרנו בחלק הקודם (ואם לא יצרתם – לא נורא, הוא ריק. אבל זה הזמן ליצור אותו). למעשה, כל הקובץ הוא פונקציה אחת ארוכה (מאוד), ולכן נפתח אותו ככה:
<?php
ומתחת לשורה הזו (אני מציע ליצור רווח של שורה או שתיים למען הסדר הטוב, נוסיף את שתי הפונקציות הבאות:
// Make theme available for translation
// Translations can be filed in the /languages/ directory
load_theme_textdomain( 'your-theme', TEMPLATEPATH . '/languages' );
$locale = get_locale();
$locale_file = TEMPLATEPATH . "/languages/$locale.php";
if ( is_readable($locale_file) )
require_once($locale_file);
// Get the page number
function get_page_number() {
if ( get_query_var('paged') ) {
print ' | ' . __( 'Page ' , 'your-theme') . get_query_var('paged');
}
} // end get_page_number
הפונקציה הראשונה אומרת לוורדפרס שאנחנו מעוניינים שהתבנית שלנו תתמוך בתרגומים שונים, ומאחר ושפתנו היא עברית כדאי שנאפשר אפשרות לתרגום כי אנחנו פלורליסטים ומקבלים את כולם כמו שהם או משהו כזה. אבל בלי קשר, כדאי לשמור את האפשרות לתרגומים פתוחה, לכו תדעו מתי תצטרכו ליצור אתר בסוואהילית. בכל מקרה, כשנגיע לתרגום של התבנית נתעסק בזה. אבל לא עכשיו, כי יש לנו דברים יותר חשובים לעשות (הסיר על האש וזה).
בפונקציה השניה, שקוראת למספר העמוד get_the_page_number() יש טקסט שניתן לתרגום:
__( 'Page ' , 'your-theme')
המילה "Page" שלאחריה מופיע שם התיקייה של תבנית העיצוב היא המילה שיהיה אפשר לתרגם אותה בסופו של דבר.
אני מניח שזה די ברור מה הפונקציה השניה עושה. הערך IF בפונקציה בודק אם אנחנו נמצאים בעמוד PAGED שזה העמוד בו אנחנו רואים "פוסטים קודמים". במידה והמערכת מזהה שאנחנו בעמוד כזה היא תיצור בר נפרד עם מספר העמוד בו אנחנו נמצאים. פשוט, לא?
אגב, אם אתם לא מכירים או חדשים בפהפ, כל מה שנמצא אחרי הלוכסן הכפול (\\) באותה השורה הוא הערה והמערכת מתעלמת מהטקסט שם. זה בעיקר כדי שלנו יהיה נוח להבין ולסמן התחלה וסיום של פיצ'רים מסויימים.
טוב, אחרי שסיימנו (בינתיים) את האזור הזה, נחזור ל-Header שלנו. במקום שתי השורות
<head> </head>
נכניס את הקוד המטורף הבא. הוא קצת מפחיד, אבל מיד אחריו אנסה להסביר אותו קצת:
<head profile="http://gmpg.org/xfn/11">
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
</head>
והנה ההסבר, בקצרה – החלק הראשון עוזר למנועי חיפוש להגדיר מה יש בעמוד ולארכב אותו נכון. ככה מנוע החיפוש יוכל לזהות את שם הפוסט, אם אנחנו בעמוד הבית, או בעמודים פנימיים (פוסטים או עמודים), אם אנחנו נמצאים בעמוד חיפוש או בעמוד שגיאה (404). אה, וכמובן, אם שמתם לב – את מספר העמוד במידה ואנחנו נמצאים בעמוד של "פוסטים קודמים".
<title><?php
if ( is_single() ) { single_post_title(); }
elseif ( is_home() || is_front_page() ) { bloginfo('name'); print ' | '; bloginfo('description'); get_page_number(); }
elseif ( is_page() ) { single_post_title(''); }
elseif ( is_search() ) { bloginfo('name'); print ' | Search results for ' . wp_specialchars($s); get_page_number(); }
elseif ( is_404() ) { bloginfo('name'); print ' | Not Found'; }
else { bloginfo('name'); wp_title('|'); get_page_number(); }
?></title>
מידע על תוכן העמוד
<meta http-equiv="content-type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
קישור לקובץ העיצוב שלנו
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>" />
קריאה לסקריפט על מנת שנוכל להשתמש בתגובות משורשרות כשנגיע לחלק של התגובות (עוד מעט!)
<?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?>
קישור ואישור (חרוז!) לפלאגינים ולעדכוני רסס ופינגבאקים
<?php wp_head(); ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url'); ?>" title="<?php printf( __( '%s latest posts', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'your-theme' ), wp_specialchars( get_bloginfo('name'), 1 ) ); ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
זהו, לא מספיק?
מתחילים להציג דברים ממשיים
הגיע הזמן להפסיק לעבוד מאחורי הקלעים ולהתחיל להציג דברים ממשיים בבלוג שלנו כמו, למשל, את שם הבלוג, את התיאור שלו ואת התפריט הראשי.
אם יצא לכם להציץ בתבניות וורדפרס אחרות, תגלו שהקוד שאני משתמש בו שונה מעט מרוב התבניות. לא, זה לא בגלל שאני אוהב להיות מיוחד או שונה, אלא כי אני פשוט מבין דברים בצורה קצת אחרת ולמען האמת, אני חושב שרוב מפתחי התבניות טועים בתפיסה שלהם בנוגע לנושא אותו אסביר מיד. ברוב התבניות הקיימות מוגדר שם הבלוג כדבר החשוב ביותר בבלוג ולכן הוא מסומן בתגית h1, אבל כשחושבים על זה הדבר החשוב ביותר בבלוג הוא דווקא שם הפוסט או העמוד בו אנחנו נמצאים. למשל, מה שיותר חשוב בעמוד הנוכחי הזה הוא לא השם "גאגא דיזיינז" אלא "מדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שני" ובעמוד הבית מה שהכי חשוב הוא שוב, לא שם הבלוג, אלא התיאור שלו. מסכימים? זו הסיבה שהקוד שאני משתמש בו מעט שונה מאחרים.
אז עכשיו נלך יחדיו לקובץ ה-header.php שלנו ונמצא את ה-div שנקרא branding. בתוך ה-div הזה נשתול את כל מה שחפרתי עליו בפסקה למעלה – את שם הבלוג ואת התיאור שלו. זה אמור להיות משהו כזה:
<div id="branding">
<div id="blog-title"><span><a href="<?php bloginfo( 'url' ) ?>/" title="<?php bloginfo( 'name' ) ?>" rel="home"><?php bloginfo( 'name' ) ?></a></span></div>
<?php if ( is_home() || is_front_page() ) { ?>
<h1 id="blog-description"><?php bloginfo( 'description' ) ?></h1>
<?php } else { ?>
<div id="blog-description"><?php bloginfo( 'description' ) ?></div>
<?php } ?>
</div><!-- #branding -->
שימו לב שאנחנו משתמשים ברוב התגיות בערך ()bloginfo כשבסוגריים אנחנו מזינים את התוכן שאנחנו רוצים להשיג. אנחנו קוראים לכתובת הבלוג
<?php bloginfo( 'url' ) ?>
ומציגים אותה בתוך הקישור של שם הבלוג
<?php bloginfo( 'name' ) ?>
ואח"כ אנחנו מציגים את תיאור הבלוג
<?php bloginfo( 'description') ?>
מה שיש לנו למעשה זה הטמל פשוט וישן ששתלנו לתוכו כמה ערכים בפהפ, זה עניין של הרגל לקרוא את זה אבל זה ממש פשוט ברגע שמתרגלים.
עכשיו הגיע הזמן להוסיף את התפריט שלנו. אז נרד קצת למטה ל-div שנקרא access. וורדפרס 3.0 ומעלה תומכת בתפריטים דינאמיים אשר נקבעים בלוח הבקרה של וורדפרס כך שהעניין הופך להיות מאוד פשוט (במיוחד יחסית לשיטה הישנה בה היינו צריכים להגדיר בקוד מה יופיע בתפריט, וזה ממש לא היה כיף). כל מה שאנחנו צריכים עכשיו זו שורת קוד אחת בלבד:
<?php wp_page_menu( 'sort_column=menu_order' ); ?>
כך שלמעשה, כשמסתכלים על כל אזור התפריט, מה שיש לנו זה את זה:
<div id="access">
<?php wp_page_menu( 'sort_column=menu_order' ); ?>
</div><!-- #access -->
כאן סיימנו להגדיר את ה-Header שלנו והוא מוכן לשימוש. למען האמת, גם סיימנו להגדיר את כל מה שנדרש על מנת שמנועי חיפוש ימצאו אותנו וידעו לקרוא את הבלוג שלנו בצורה קלה יותר. אבל, גם אם תעלו עכשיו את הקבצים לשרת שלכם, התבנית לא תעבוד (ויש סיכוי טוב אפילו שתקבלו שגיאה) כי לא סגרנו את הפונקציה בקובץ ה-functions.php שעבדנו עליו בהתחלה.
בפוסט הבא נעבוד על קובץ האינדקס ונתחיל לראות דברים כמו שצריך!.
רוצים לקבל עדכון בכל פעם שמתפרסם פוסט חדש? בתפריט בצד ימין אפשר להירשם לקבלת עדכונים. ברגע שמשתחרר פוסט חדש – תקבלו עדכון ישר למייל! ממש אמריקה בישראל.
תגובות
[...] בחלק הבא נסדר קצת את ה-header שלנו ונהפוך אותו לברור יותר לדפדפן, ונסדר גם את קובץ ה-functions.php כדי שוורדפרס תדע מה לעשות (בגדול). אם אתם מעוניינים לקבל עדכון ברגע שמתפרסם הפוסט הבא, יש לכם בצד ימין אפשרות לקבל עדכון במייל בכל פעם שאני משחרר פוסט חדש לאויר העולם. נתראה! תגיות: css, html, php, wordpress, הטמל, וורדפרס, מדריך, סיאסאס, פהפ, תבניות, תגיות פוסט קודםמבט חודר: הפונטים בלוגואים של מותגים מפורסמים פוסט הבאמדריך: איך יוצרים תבנית וורדפרס מאפס, חלק שני [...]
אני מחפש דרך לפתוח עיצוב מוכן ולשנות אותו
אני בונה בימים אילו אתר לילדים מנשמים וקצת קשה לי להתאים אותו לתבניות מוכנות
מדריך מעולה תודה.
כמה שאלות :
1. מתי חלק 3 ?
2. האם במסמך ה-Style.css צריך להגדיר את העיצוב שלנו , יעני ממש לקודד ? כאילו אני יודע לקודד אני רק רוצה לדעת אם צריך לקודד שם.
תודה רבה.
חח אני מקווה שאפשר לעשות פה ב-HTML.
1. בקרוב מאוד!
2. במסמך העיצוב צריכים לכתוב קצת קוד CSS. פשוט מאוד (יחסית) ואפילו פותח אפשרויות חדשות
וכן, אפשר ותודה על המחמאות)
1. אבל כאילו צריך לקודד ? למשל צריך להגדיר background וכל זה לתפריט וללוגו , או שזה לא עכשיו זה באמצעות המערכת?
תודה רבה
את כל העיצוב אפשר תמיד להגדיר גם בעמוד הרלוונטי, אבל זה הרבה פחות מומלץ. עדיף לסדר את הכל בקובץ CSS שיקל עליך את העבודה גם בעתיד.
וסתם שתדע – CSS זה כיף (לחנונים) ומאוד פשוט.
[...] דיון קצרצר שהתנהל בפוסט הזה חשבתי שאולי כדאי לעשות איזושהי סקירה קצרה על CSS – מה [...]
[...] טקסט צילום: flickr, cc-by, geirarneבעקבות דיון קצרצר שהתנהל בפוסט הזה חשבתי שאולי כדאי לעשות איזושהי סקירה קצרה על CSS – מה זה [...]
[...] חזרתי. בכל זאת, התחלתי עבודה חדשה והכל. תזכורת קטנה מהפוסט הקודם. סיימנו להגדיר את ה-header.php שלנו וחלק מקובץ הפונקציות [...]
[...] חזרתי. בכל זאת, התחלתי עבודה חדשה והכל. תזכורת קטנה מהפוסט הקודם. סיימנו להגדיר את ה-header.php שלנו וחלק מקובץ הפונקציות [...]