למשך בערך 20 דקות שקלתי את השימוש בתבנית סימפלטון כבסיס לעיצוב החדש לבלוג (כן, כן, אותו עיצוב שעליו אני מבלבלת לכם את המח זה זמן מה).
בקיצור לקחתי את התבנית הזו ועיברתתי אותה.
לאחר העיברות גיליתי בה את הבעיות הבאות:
- העמודה המרכזית צרה מידי
- אין באמת סרגל ניווט בעמודים בפנימיים
- הקישורים בעמודת המידע הופיעו כשדות ניתנים לעריכה
את התבנית במקור ניתן לראות בהדגמה.
מכאן התחלתי לשנות:
הרחבת העמודה המרכזית
מבט בקוד ה-HTML של הדף הראה לי שהעמודה המרכזית משוייכת לאובייקט #content.
קוד ה-CSS הרלוונטי היה:
1 | #content {background-color:#fff;float:left;width:550px;} |
לכאורה אין פשוט מזה, משנים את הערך 550 ובא גואל לישראל.
לרוע המזל יש לנו כאן היררכיה יותר מסובכת.
העמוד כולו מוגדר כ-page
תחתיו יש את contentwrap
בתוכו ניתן למצוא את סרגלי הכלים sidebars וכן את content
סרגלי הכלים מחולקים גם הם: sidebarleft,sidebarright
מכאן שכל הגדלה של חלק אחד משפיעה על המבנה כולו
כיוון שרציתי להגדיל את שטח התוכן ל-600px התחלתי משם.
1 | #content {background-color:#fff;float:right;width:600px;} |
השלב הבא היה שינויי הסביבה בהתאם (חסרים לי 50 פיקסלים מאיפשהו), הדף כבר עכשיו הוגדר ברוחב 1000px כך שלא היה באמת מה לגנוב מכאן.
גנבתי את השטח מהסרגלים, המקור:
1 2 3 | #sidebars {float:right;width:450px;} #sidebarleft {float:left;padding:5px;width:215px;} #sidebarright {float:right;padding:5px;width:215px;} |
הפך לזה:
1 2 3 | #sidebars, #sidebar {float:left;width:400px;} #sidebarleft {float:right;padding:5px;width:190px;} #sidebarright {float:left;padding:5px;width:190px;} |
כלומר הורדתי את הרוחב הכולל של שניהם ב-50px ועל כן הורדתי מכל אחד מהם 25.
סרגל ניווט בעמודים פנימיים
במקור הקוד של סרגל הכלים הציג בעמודים הפנימיים את המבנה singlebar שמציג את פרטי הפוסט הנוכחי וזהו.
הקוד נראה כך:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <?php if (is_single()) { ?> <div id="singlebar"> <ul><h2>Post Information:</h2> <li class="label2"><span>Next Post:</span> <?php next_post_link(); ?></li> <li class="label2"><span>Previous Post:</span> <?php previous_post_link(); ?></li> <li class="label2"><span>Posted in:</span> <?php the_category(', '); ?></li> <li class="label2"><span>Last modified:</span> <?php the_modified_time('F j, Y '); ?> at <?php the_modified_time (' g:i a'); ?></li> <li class="label2"><span>Number of Comments:</span> <a href="#commentform"><?php comments_number('No Comments','1 Comment','% Comments'); ?></a></li> <li class="label">Permalink URL:</li> <li><form><br /><textarea rows="2" onFocus="this.select()" style="width:460px;"><?php the_permalink(); ?></textarea></form></li> <li class="label">Trackback URL:</li> <li><form><br /><textarea rows="2" onFocus="this.select()" style="width:460px;"><?php trackback_url(); ?></textarea></form></li> </ul> </div> <?php } elseif (is_page()) { ?> <div id="sidebars"> <div id="sidebarleft">...</div></div> |
השינוי שעשיתי כאן היה פשוט להעביר את החלק של singlebar להיות בתוך sidebars (כלומר בתוך איחוד הסרגלים הצדדיים). על הדרך הוצאתי את השימוש ב textarea והשארתי את הקישורים כפי שהם. כך:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <div id="sidebars"> <?php if (is_single()) { ?> <div id="singlebar"> <ul><h2>מידע על הפוסט:</h2> <li class="label2"><span>הפוסט הבא:</span> <?php next_post_link(); ?></li> <li class="label2"><span>הפוסט הקודם:</span> <?php previous_post_link(); ?></li> <li class="label2"><span>נושאים:</span> <?php the_category(', '); ?></li> <li class="label2"><span>שונה לאחרונה:</span> <?php the_modified_time('j בF, Y '); ?> בשעה <?php the_modified_time (' G:i'); ?></li> <li class="label2"><span>תגובות:</span> <a href="#commentform"><?php comments_number('ניתן להגיב','תגובה אחת','% תגובות'); ?></a></li> <li class="label"><span>קישור קבוע:</span> <span dir=ltr><?php the_permalink(); ?></span></li> <li class="label"><span>טרקבק:</span> <span dir=ltr><?php trackback_url(); ?></span></li> </ul> </div> <br /> <?php } ?> <div id="sidebarleft">...</div></div> |
את התבנית בצורתה הסופית ניתן להוריד מכאן.
נהניתם ? הרשמו לעדכוני RSS !
