בעקבות שאלה בקבוצת הדיון של וורדפרס בעברית.
תפריט ניווט העליון בתבניות וורדפרס הוא למעשה רשימת הדפים המופיעים בבלוג וורדפרס שלנו.
את הרשימה ניתן לשלוף בעזרת הפונקציה wp_list_pages שמחזירה את רשימת הדפים בבלוג.
השימוש בה ייראה כך:
1 | <?php wp_list_pages('title_li=&depth=1');?> |
כאשר במקרה הזה דאגנו שיוצגו דפים ללא תתי דפים (depth=1) ולא תופיע כותרת לרשימה(title_li=).
צריך לזכור לעטוף את הקוד בתגיות רשימה כלומר:
1 2 3 | <ul> <?php wp_list_pages('title_li=&depth=1');?> </ul> |
בדרך כלל במקרה של שימוש בסרגל ניווט שכזה נרצה גם להוסיף לו את דף הבית כאפשרות ניווט. זה נעשה בקלות על ידי השורה:
1 | <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li> |
כך שהקוד כולו נראה כך:
1 2 3 4 | <ul #id=menu> <li <?php if(is_home()){echo 'class="current_page_item"';}?>><a href="<?php bloginfo('siteurl'); ?>" >דף הבית</a></li> <?php wp_list_pages('title_li=&depth=1');?> </ul> |
הקוד שיש לנו כעת מייצר רשימת דפים בבלוג הכוללת את דף הבית אך נראית כרשימה רגילה קרי:
את הקוד הזה צריך לשים בקובץ הנכון בהתאם לצרכי העיצוב שלנו. בד"כ זה יהיה בקובץ header.php
על מנת להפוך את העסק לסרגל ניווט אופקי צריך להוסיף קצת הגדרות CSS (בקובץ style.css של התבנית):
ראשית נגדיר שלרשימה שלנו אין תבליטים:
1 2 3 | #menu ul { list-style: none; } |
עכשיו נגדיר שאנחנו רוצים את הרשימה כאופקית ולא אנכית:
1 2 3 | #menu li { display: inline; } |
נגדיר את גודל איבר הרשימה כך שהקישורים יהיו מרווחים יפה ושלא יכללו קו תחתון:
1 2 3 4 5 | #menu a { padding:8px 16px; text-decoration: none; } |
זה הכל – קיבלנו את התוצאה הבאה:
מכאן יש הגדרות שונות שקשורות לעיצוב וייפוי של העסק, למשל הדגשת הדף הנוכחי:
1 2 3 4 5 6 7 8 9 10 11 | #menu a:hover, #menu a:active, #menu li.current_page_item a:link, #menu li.current_page_item a:visited, #menu li.current_page_item a:hover, #menu li.current_page_item a:active { background:#456; color:#fff; border:0; } |
אבל אלו כבר משחקי עיצוב על הבסיס הקיים.
בהצלחה
נהניתם ? הרשמו לעדכוני RSS !