ברוכים הבאים לפרק מספר 11 במדריך – בונים ביחד תבנית וורדפרס. בפרק זה נבנה ביחד את מרכז דף הבית כולל את הסלוגן אשר נמצא בראש התבנית וגם את הLOOP של וורדפרס אשר יחזיר את הפוסטים האחרונים באתר שלנו!
בונים את מרכז דף הבית – יוצאים לדרך!
ראשית, אני שוב מזכיר שאם הגעתם לחלק זה במדריך מבלי לקרוא את שאר חלקי המדריך אני ממליץ כי תשתמשו בממשק הניווט כדי לעבור לחלק הראשון במדריך כך שתהיו מעודכנים ומוכנים לשלבים מתקדמים אלו.
תזכורת קטנה
לפני שנתחיל לבנות את דף הבית של התבנית אני ממליץ כי תבקרו בפרק ברוכים הבאים ועוד ואפילו תשאירו אותו פתוח בטאב אחר כדי שתוכלו להתרענן עם המראה העיצובי וסדר האלמנטים (מבחינת מבנה) אליו אנו שואפים להגיע במדריך זה.
סדר הפעולות:
מכיוון ש… פרק זה במדריך יהיה ארוך ומקיף חילקתי את הדף לחלקים ולכן פשוט לחצו על הנושא הרצוי
רגע לפני שנגיע אל הפונקציה חשוב שנבין את הסיבה… כפי שאתם יודעים שגיב SEO מספקת שירותי קידום אתרים בגוגל ולכן אנו שמים גם דגש על תבנית "נכונה" מבחינת קידום אתרים. אנו נכין שדה בו נוכל להוסיף טקסט עבור הסלוגן שאיננו מופיע בשום מקום אחר באתר… למי שלא מכיר את דף האפשרויות של וורדפרס הגיע הזמן להיכנס אל הגדרות > כללי
פתחו את קובץ function.php והוסיפו את הקוד הבא
- מוסיף שדה טקסט לדף האפשרויות הכללי של וורדפרס
- מאפשר לשמור את שדה הקלט החדש שלנו
- מאפשר לנו לקרוא לערך שבתוכו מדף הבית של וורדפרס
[php] $new_general_setting = new new_general_setting();
class new_general_setting { function new_general_setting( ) { add_filter( 'admin_init' , array( &$this , 'register_fields' ) ); } function register_fields() { register_setting( 'general', 'slogan_sentence', 'esc_attr' ); add_settings_field('slogan_sentx', '<label for="slogan_sentence">'.__('Slogan Sentence' , 'sagive' ).'</label>' , array(&$this, 'fields_html') , 'general' ); } function fields_html() { $value = get_option( 'slogan_sentence', " ); echo '<input type="text" id="slogan_sentence" name="slogan_sentence" value="' . $value . '" style="width: 65%" />'; } } [/php]
בחלק זה נכין מיכל (DIV) ונטמיע פקודת PHP פשוטה אשר תאפשר לנו להחזיר את המידע משדה הסלוגן שהכנו בפונקציה הקודמת. זכרו (לאחר שהכנסתם את הפונקציה בחלק הקודם) להיכנס לממשק הניהול שלכם ולהכניס שורת סלוגן כלשהי… להדגמה קצרה לחצו כאן
נטמיע את הפקודה
- פתחו את הקובץ index.php
- מצאו את המיכל (div) עם הקלאס header
- ממש לאחר שהוא נגמר נוסיף את הקריאה לסלוגן
לפני: [html] <!–===STR===== HEADER ===========–> <div class="header"> <div class="logo"> <!–=== פקודה זאת תחזיר את שם האתר ===–> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </div> <div class="topMenu"> <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?> </div> </div> <!–===END===== HEADER ===========–> [/html]
אחרי: [html] <!–===STR===== HEADER ===========–> <div class="header"> <div class="logo"> <!–=== פקודה זאת תחזיר את שם האתר ===–> <h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1> </div> <div class="topMenu"> <?php wp_nav_menu( array( 'theme_location' => 'top-menu', 'menu_class' => 'top_menu', 'menu_id' => 'top_menu' ) ); ?> </div> </div> <!–===END===== HEADER ===========–>
<!–===STR===== SLOGAN ===========–> <div class="sloganBox"> <?php echo get_option('slogan_sentence'); ?> </div> <!–===END===== SLOGAN ===========–> [/html]
- רעננו את האתר שלכם. התוצר המוגמר צריך להראות בשלב זה כך.
אם עקבתם אחרי המדריך אתם בוודאי (אני מקווה) זוכרים את פרק 5 – יצירת תשתית עיצובית. בפרק 5 הכנו קובץ reset.css אשר מכיל בתוכו המון קיצורי קוד עבור הגדרות CSS נפוצות וכעת נעשה בהן שימוש ראשון.
צעד א
- פתחו את הקובץ index.php
- מצאו את המיכל (div) של הסלוגן
- שנו את הקלאס שלו כפי שמוצג בדוגמה
לפני: [html] <!–===STR===== SLOGAN ===========–> <div class="sloganBox"> <?php echo get_option('slogan_sentence'); ?> </div> <!–===END===== SLOGAN ===========–> [/html]
אחרי: [html] <!–===STR===== SLOGAN ===========–> <div class="sloganBox mt3 pt2 pb2 center fs26 mr1 ml1"> <?php echo get_option('slogan_sentence'); ?> </div> <!–===END===== SLOGAN ===========–> [/html]
משמעות השינויים בקלאס: הוספנו מספר קלאסים אשר יחילו הגדרות שונות על המיכל (ה-DIV) של הסלוגן. כעת עלינו להוסיף הגדרות ייחודיות לסלוגן בצורה ישירה בקובץ style.css…
מי שרוצה ממש להבין מה עושה כל קלאס מבחינת הערך שלו / הפקודה שלו בCSS יכול לבקר בקובץ הreset.css של התבנית שלנו. באופן כללי הפקודות דיי הגיוניות – לדוגמה הפקודה mt3 משמעותה margin-top: 3% וכן הלאה.
צעד ב
- פתחו את הקובץ style.css
- נגלול עד לסוף הדף וניצור הערה עבור הסלוגן
- מתחת להערה ניצור את הגדרות עיצוביות (css) עבור הDIV של הסלוגן
- התוצר המוגמר כלומר הקוד וההערה יראו כך
[css] /************************************ ** SLOGAN ************************************/ .sloganBox { border-bottom: 7px double #D6D5D1; border-top: 7px double #D6D5D1; color: #151515; } [/css]
- רעננו את האתר שלכם. בשלב זה האתר שלכם אמור להראות כך.
בשלב הבא נעבוד על הLOOP של דף הבית, רגע מרגש לכל בונה אתר ראשון בוורדפרס! בכדי לעצב את המראה של המידע בדף הבית נקח רגע כדי לפרסם כמה פוסטים לדוגמה אשר יוצגו בלופ של דף הבית.
לפני שנתחיל לפרסם פוסטים:
נוסיף תמיכה בתמונת פוסט ראשית
- פתחו את קובץ functions.php
- הוסיפו את שורת הקוד הבאה
[php]add_theme_support( 'post-thumbnails', array('post') );[/php]
נפרסם מספר פוסטים
כעת הגיע הזמן לפרסם מספר פוסטים לניסיון… אני רוצה להניח שאתם יודעים כיצד לעשות זאת ואם לא אני באמת חושב שאתם במדריך הלא נכון. בכל מקרה הנה סרטון קצרצר בו אני עושה זאת להדגמה.
- חשוב: חשוב לטעון תמונה פוסט ראשית גדולה לצרכיי נסיון… הורידו תמונה לדוגמה
- חשוב: חשוב ליצור לפחות 12 פוסטים לדוגמה למטרות שונות בהמשך המדריך
הגענו ללב של דף הבית! בחלק זה נבנה את הLOOP של דף הבית אבל רגע לפני הגיע הזמן ללמוד כמה דברים על הLOOP של וורדפרס כדי להבין מה בדיוק אנחנו עושים.
הלופ של וורדפרס
ניתן להשתמש במבנה ברירת המחדל של הLOOP בהתאם לסוג התוכן בו אנו נמצאים או לבנות LOOP מותאם שיחזיר פוסטים / מידע מתוך פוסטים שאנו מבקשים להציג.
הלופ של וורדפרס מחזיר מערך מידע עבור כל פוסט שהוא מתבקש להציג ואנו יכולים לפנות אל אותה פיסת מידע בעזרת פקודה מובנית של וורדפרס.
אנו בקטגוריה של אתר. בקטגוריה זאת 5 פוסטים
רוצים ללמוד עוד על הLOOP של וורדפרס?
בחלקים שונים ברחבי האתר אנו נבקש להציג תקציר של הפוסט באורך שונה בהתאם למיקום שלו. דוגמה לכך היא העובדה שהפוסט החדש ביותר בדף הבית מציג תקציר ארוך יותר משאר הפוסטים בדף הבית.
נבנה פונקציה אשר תעזור לנו להחזיר תקציר מותאם
- פתחו את קובץ functions.php
- הוסיפו את הפונקציה הבאה בתחתית הדף
[php] /*************************************************************** ** DYNAMIC EXCERPT ***************************************************************/ // Variable excerpt length. function dynamic_excerpt($length) { // Variable excerpt length. Length is set in characters global $post; $text = $post->post_excerpt; if ( " == $text ) { $text = get_the_content("); $text = apply_filters('the_content', $text); $text = str_replace(']]>', ']]>', $text); } $text = strip_shortcodes($text); // optional, recommended $text = strip_tags($text); // use ' $text = strip_tags($text,'<p><a>'); ' if you want to keep some tags $text = mb_substr($text,0,$length).' …'; echo $text; // Use this is if you want a unformatted text block //echo apply_filters('the_excerpt',$text); // Use this if you want to keep line breaks } [/php]
- הערה: התאמתי פונקציה זאת לעבודה עם עברית!
בחלק זה ניגש אל הקוד של בניית הLOOP של וורדפרס. אנו נבנה LOOP מותאם במבנה אשר מתאים לקובץ הPSD עליו אנו מבססים את תבנית הוורדפרס שאנו בונים.
מצד שמאל:
התמונה המוצגת היא המחשה של הLOOP אשר נבנה בדף הבית שלנו. הפוסט האחרון (מבחינה כרונולוגית) יהיה מודגש והשאר קטנים יותר.
המבנה הנ"ל אומר כי אנו נצטרך ליצור עיצוב מעט שונה לפוסט האחרון ועיצוב אחר לשאר הפוסטים. בדוגמה זאת מוצגים 5 פוסטים אחרונים אך נוכל להציג כמה שנרצה!
ניגשים לקוד:
- פתחו את קובץ index.php
אתרו את הקוד הבא [html] <div class="homeLoop"> <div class="newestPost"></div> <div class="recentPost"></div> </div> [/html]
החליפו אותו בקוד הבא [html] <div class="homeLoop"> <div class="innerLoop"> <?php $count = 0; ?>
<?php $homeArgs = array( 'posts_per_page' => 5 ); $homeQuery = new WP_Query( $homeArgs ); while ( $homeQuery->have_posts() ) : $homeQuery->the_post(); ?> <div class="post"> <?php if ($count < 1){
// LOOP STRUCTURE FOR OUR LATEST POST ?> <h2 class="newestPost"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="postMeta"> <?php echo __('By').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date().' – '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?> </div> <?php echo '<div class="postThumb">'; $thumbUrl = wp_get_attachment_url( get_post_thumbnail_id($post->ID) ); if($thumbUrl) { echo '<img src="'.$thumbUrl.'" alt="'.get_the_title().'" />'; } else { echo '<img src="'.get_bloginfo('template_url').'/images/nopost-image-home.jpg" alt="'.get_the_title().'" />'; } echo '</div>';
echo '<div class="newsetPostExcerpt mt3 mb5 pb3 fs14">'; dynamic_excerpt(650); echo '</div>';
echo '<div class="rpBorder mt5 pb2"> <div></div> <div></div> </div>'; } else { // LOOP STRUCTURE FOR OTHER RECENT POSTS
// ASSING CLASS EVERY 2 POSTS & ACCORIND TO LANGUAGE if(is_rtl()) {if($count % 2 == 0) {$marginClass = 'ml4';} else {$marginClass = ";}} else {if($count % 2 == 0) {$marginClass = 'ml4';} else {$marginClass = ";}}
echo '<div class="singleRecentPost '.$marginClass.'">'; ?> <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="postMeta"> <?php echo __('By').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date().' – '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?> </div> <?php echo '<div class="postExcerpt">'; dynamic_excerpt(300); echo '</div>';
echo '<div class="readMore"><a href="'.get_permalink().'" rel="nofollow">'.__('Read More »', 'sagive').'</a></div>';
echo '<div class="rpBorder mt10 pb2"> <div></div> <div></div> </div>';
echo '</div>'; } ?> </div> <?php $count++; ?> <?php endwhile; ?> </div> </div> [/html]
- שימו לב לשורה "posts_per_page" שם ניתן להגדיר את כמות הפוסטים בדף הבית
דף הבית שלי מבולגן!
אם פעלתם על פי סדר הפעולות בחלק זה של המדריך וכעת תיגשו ותרעננו את דף הבית שלכם תגלו שהוא מבולגן מאוד – אבל! גם תגלו שהפוסטים חוזרים אל דף הבית לפי סדר כרונולוגי הפוך (כלומר מהחדש לישן).
בנוסף ובהתאם למבנה של קובץ הPSD על פי אנו בונים את התבנית תגלו כי רק מוצגת תמונה אבל רק לפוסט הראשון ורק לו יש תיאור ארוך במיוחד לעומת הקודמים לו להם תיאור קצר בחצי.
סימנים טובים! למרות חוסר הסדר.. אם אתם רואים תמונה כמו שתיארתי סימן שעשיתם הכל נכון! (אם לא כתבו תגובה בדף זה וספרו לנו מה הבעיה). כעת שיש לנו LOOP עובד (בערך) נתחיל לסדר אותו מבחינה עיצובית!
עושים סדר בעזרת CSS
- פתחו את הקובץ style.css
- הוסיפו את ההגדרה הבאה
[css] /************************************ ** HOME LOOP ************************************/ .contentBox {margin: 0 1%;} .contentBox .sidebar {width: 28%; overflow: hidden;} .contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;} .contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;} [/css]
- אם תרעננו את דף הבית שלכם הוא אמור להראות: כך
נעים להכיר timthumb
אם רעננתם את דף הבית שלכם אתם בוודאי שמים לב שהתבנית שלכם מתחילה לקבל צורה! למרות זאת, תמונת הפוסט הראשית גדולה מידי… בכדי להקטין תמונות ולחתוך אותם בצורה טובה נשתמש בסקריפט PHP אשר נקרא timthumb.
טימטומב (timthumb) הוא סקריפט PHP קטן שעושה חיתוך והתאמה של קבצי תמונות מסוג jpg, png וgif. בנוסף, הוא עובד טוב עם wordpress מה שהופך אותו אידאלי ונפוץ בשימוש בקרב בוני תבניות וורדפרס ברחבי העולם.
הכנות לפני שימוש:
- הורידו את הסקריפט: timthumb להורדה
- חלצו את הקובץ מתוך הZIP לתוך תיקיית functions בתבנית שלכם.
רוצים לדעת עוד על thimthumb?
נטמיע את timthumb בלופ שלנו
כעת שלמדנו מהו timthumb הגיע הזמן לשלב אותו בלופ שבנינו עבור דף הבית שלנו בלשונית הקודמת " נכין את הלופ הבסיסי עבור דף הבית"… נעשה זאת על ידי שינוי הלופ שבנינו בצורה כזאת
בקובץ index.php: מצאו את השורה הבאה בלופ (אצלי שורה 46): [php] echo '<img src="'.$thumbUrl.'" alt="'.get_the_title().'" />'; [/php]
החליפו אותה בשורה הזאת: [php] echo '<img src="'.get_bloginfo('template_url').'/functions/timthumb.php?src='.$thumbUrl.'&q=100&w=660&h=355" alt="'.get_the_title().'" />'; [/php]
- רענון של דף הבית שלכם אמור להראות כי גודל התמונה ביחס לתמונה המקורית עודכן! צילום מסך של הגרסה עליה אני עובד נראה: כך
רגע לפני שניגש לעצב את האלמנטים בלופ שיצרנו נוסיף עוד מספר תגים / פקודות… מבט קצר על קובץ הPSD מלמד כי יש מתחת לכותרת / שם הפוסט מופיע שם הכותב, תאריך הפרסום וכמות התגובות…
- פתחו את קובץ index.php
בקובץ index.php: מצאו את השורה הבאה בלופ (אצלי שורה 40): [css] <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> [/css]
החליפו אותה בקוד הבא: [css] <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2> <div class="postMeta"> <?php echo __('By').' '.get_the_author_link().', '.__('On', 'sagive').get_the_date().' – '; ?><a href="<?php comments_link(); ?>"><?php comments_number( __('no responses', 'sagive'), __('one response', 'sagive'), __('% responses', 'sagive') );echo '</a>'; ?> </div> [/css]
תיאור הפקודות:
| פקודה | תיאור |
|---|---|
| get_the_author_link() | מחזיר את הקישור לדף הכותב. במבנה זה את שם הכותב. |
| get_the_date() | כאשר בתוך הלופ מחזיר את תאריך הפרסום של הפוסט |
| comments_link() | קישור אל החלק של התגובות בפוסט |
| comments_number() | מחזיר (בגרסה שלנו מוכנה לתרגום) את כמות התגובות לפוסט |
כעת, יש לנו את כל האלמנטים מוכנים בדף הבית של התבנית שלנו ואנו יכולים לגשת לעיצוב שלהם. חשוב לזכור ש… אנו בונים תבנית שתתאים גם לאנגלית וגם לעברית ולכן לא נתעסק בכלל ביישור לעברית בשלב זה (וגם לא בתרגום מחרוזות) ופשוט ניצור עיצוב בכפוף לקובץ הPSD עליו אנו מבססים את התבנית.
נתחיל לבנות הגדרות CSS לדף הבית שלנו
- פתחו את הקובץ style.css
את הפקודות נוסיף ישירות מתחת להגדרות אלו (למען הקפדה על סדר): [css] /************************************ ** HOME LOOP ************************************/ .contentBox {margin: 0 1%;} .contentBox .sidebar {width: 28%; overflow: hidden;} .contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;} .contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;} [/css]
הוסיפו את הקוד הבא
1. הגדרות CSS עבור כותרות הפוסטים [css] .homeLoop h2 {margin-bottom: 0;} .homeLoop h2.newestPost a {color: #151515; font-size: 28px; font-weight: normal; text-decoration: none;} .homeLoop h2 a {color: #151515; font-size: 22px; font-weight: normal; text-decoration: none;} [/css]
2. הגדרות CSS עבור תגי מטא [css] .homeLoop .postMeta {color: #151515; font-size: 13px; margin-bottom: 15px;} .homeLoop .postMeta a {color: #C6700A; font-size: 13px; text-decoration: none;} [/css]
3. הגדרות CSS עבור תקצירי הפוסטים [css] .homeLoop .singleRecentPost {float: left; width: 48%;} .homeLoop .rpBorder div {border-bottom: 1px solid #D6D5D1; height: 3px; opacity: 0.6;} [/css]
4. הגדרות CSS עבור קישור לקרוא עוד [css] .homeLoop .readMore {margin-top: 5px;} .homeLoop .readMore a {color: #C6700A; font-size: 13px; text-decoration: none;} [/css]
קוד CSS מוגמר עבור הלופ בדף הבית
בשלב זה, אם רצתם איתנו צעד צעד אמור דף הבית של התבנית / האתר שלכם להראות כך. אני יודע שכרגע דף הבית והאתר בכלל איננו מותאם לעברית אבל אנחנו ניגע בזה בשלב אחר.
הנה הפזל השלם של קוד הCSS אשר בנינו בשורות מעל לפסקה זאת [css] /************************************ ** HOME LOOP ************************************/ .contentBox {margin: 0 1%;} .contentBox .sidebar {width: 28%; overflow: hidden;} .contentBox .homeLoop {width: 72%; overflow: hidden; border-right: 1px solid #D6D5D1;} .contentBox .homeLoop .innerLoop {margin: 2% 7% 0 0; overflow: hidden;}
.homeLoop h2 {margin-bottom: 0;} .homeLoop h2.newestPost a {color: #151515; font-size: 28px; font-weight: normal; text-decoration: none;} .homeLoop h2 a {color: #151515; font-size: 22px; font-weight: normal; text-decoration: none;}
.homeLoop .postMeta {color: #151515; font-size: 13px; margin-bottom: 15px;} .homeLoop .postMeta a {color: #C6700A; font-size: 13px; text-decoration: none;}
.homeLoop .singleRecentPost {float: left; width: 48%;} .homeLoop .rpBorder div {border-bottom: 1px solid #D6D5D1; height: 3px; opacity: 0.6;}
.homeLoop .readMore {margin-top: 5px;} .homeLoop .readMore a {color: #C6700A; font-size: 13px; text-decoration: none;} [/css]
מה בפרק הבא?
בפרק הבא, נבנה ביחד את התפריט הצדדי ואת הפוטר (footer). נקודד עבור שניהם מקום לוידגטים אוטומטיים של וורדפרס ונעצב אותם ויזואלית. אני מקווה לפרסם את החלק הבא במדריך כבר בשבוע הקרוב אך אתם מוזמנים להירשם אל רשימת התפוצה של האתר כדי לקבל עדכונים בעת פרסום פוסט חדש.
אם נתקלתם בבעיה או נשארתם אם שאלה בנוגע לחלק זה במדריך אתם מוזמנים לפרסם אותה כתגובה וננסה לעזור כמיטב יכולתנו. לשאלות כלליות בנושא וורדפרס אתם מוזמנים להירשם אל הפורום שלנו.
20 תגובות