בעקבות שאלה בקבוצת הדיון של וורדפרס בעברית.
תפריט ניווט העליון בתבניות וורדפרס הוא למעשה רשימת הדפים המופיעים בבלוג וורדפרס שלנו.
את הרשימה ניתן לשלוף בעזרת הפונקציה 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 !
באיזה קובץ אני מוסיף את הקוד הזה. וכמובן באיזה חלק?
אני פוחד להוסיף דברים במקומות לא נכונים מחשש שזה יגרום לבלוג שלי , הרעוע ממילא…לא לעבוד..
תודה
שלמה
ולמי שכבר מחליט להתעסק עם זה כדאי גם לנסות לקרוא את התיעוד של הפונקציה שמאפשרת גם דברים יותר מתוחכמים כמו מניעת הצגה של קישורים לדפים מסוימים.
שלמה, דברים כאלו בדרך כלל צריך להכניס לקובץ header.php אחרי הקוד שמציג את ההדר.
חנית – לא נראה לי שהopenid עובד בצורה חכמה (אם בכלל). אין פואנטה בלהכריח לתת שם וכתובת דואל אם מבקשים להזדהות דרך openid.
בניסיונות שלי להפוך את וורדפרס למערכת ניהול תוכן מלאה, לקחתי את זה צעד הלאה, ומימשתי את הבר ניווט הזה עם פונקציות של הקטגוריות – מה שמאפשר לייצר בר שכזה – אבל דינמי שמציג רק את הקטגוריות הרלוונטיות על פי רמות היררכיה.
אפשר לראות דוגמא פה, או להציץ להסבר כאן.
אפשר גם להכנס לheader.php של הבלוג ושם פשוט לצור
div ולהכניס לו קישורים רגילים (וכך אפשר לקשר לאו דווקא לקטגוריות או עמודים שבתוך הבלוג אלא גם נגיד לפוסט ספציפי או לדפים שמחוץ לבלוג)
לדוגמא
2
3
4
<a href="http://www.mydomain.co.il/page2.html" rel="nofollow">קישור2</a>
<a href="http://www.mydomain.co.il/page3.html" rel="nofollow">קישור3</a>
<a href="http://www.mydomain.co.il......
וכמובן חשוב בקובץ הstyle.css להכניס עיצוב מתאים
לדוגמא
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
margin: 0 10px;
margin-top: -5px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: none;
}
#navbar a {
padding-top: 3px;
padding-right: 2px;
padding-bottom: 3px;
padding-left: 2px;
background: none; color: none;
text-decoration: none;
}
#navbar a:hover {
background: white; color: #111;
}
ניסיתי להשאיר פה תגובה עם הסבר משלי על דרך נוספת בה ניתן להציג קישורים בבר ניווט עליון אבל משום מה היא לא מתווספת,
חנית? נראה לי שאקזימט חסם אותי בגלל הקוד שרשמתי בתוך התגובה (כי הקוד שרשמתי הכיל גם פסאודו קישורים אבל אקזימט בטח חשב שזה קישורי ספאם)..
יש מצב?
אה אוקיי עכשיו זה מופיע, תודה!
ובקשר למה שכתבתי שם שכחתי לציין שכדי שהסטייל שב css יעבוד על הקישורים שב header אז צריך שהשם של הdiv ב header יהיה בהתאמה
כלומר שבדוגמא הזאת הוא צריך להיות
חנית למה הבלוג שלך שונא אותי?
זה חתך לי את התגובה שוב, חסר שם את הקוד
איזה יופי,
בדיוק אתמול ניסיתי לערוך תבנית ולהוסיף לה תפריט ראשי ניווט עליון.
ובדיוק היום אתה מפרסם פה תקציר בנושא זה.
תודה.
אגב,
נשמח לקבל גם מדריכים הקשורים לתוספים – יצירה/עריכה/תרגום.
(אם יהיה לך זמן)
תראי למה את גורמת, הפוסט הזה גרם לי להפוך את כל התפריט שלי. אמנם לא השתמשתי באחד מהקודים, אבל אני כבר ממזמן רוצה לשנות אותו והפוסט הזה דרש זאת.
אז ראשית כל, כל הכבוד על המדריך, אני בטוח שהוא יעזור לרבים. וכל הכבוד לי – יצרתי תפריט חדש לתפארת השדונים
אכן לתפארת!
חנית הוספתי את כל מה שכבת ]ה אבל זה נשאר לי בצורה של תבליטים.
את הקוד של ה CSS הוספתי בחלק הכי תחתון של הקובץ CSS שלי.
איפה הטעות ולמה זה לא משתנה לי?
אלי אם בא לך תן לי יד אני במייל או מסנג'ר…
ואם רוצים תפריטים קופצים אפשר לגנוב את מה שעשיתי כאן:
http://www.aloney-aba.org.il/blog/
אודי
אודי, שים לב שהתפריט לא נראה הייטב בפיירפוקס.
לא נראה טוב בפיירפוקס?
אני עובד רק עם פיירפוקס והוא נראה יופי!
האם את משתמשת בגרסא 3?
להת'
אודי
פינגבאק: שינוי תצוגת פרסומות בבלוג-- הבלוג של אח"י דקר
התפריט הנופל של אודי ttp://www.aloney-aba.org.il/blog/ מתאים לי לקחת ממנו
רק איך לוקחים את זה משם?
מישהו פה יודע?
Well, that could be decent, but what about additional options we have here? Do you mind publishing another post regarding them as well? Kudos!
I was aware about this already, nevertheless there were several beneficial bits which completed the picture for me, thanks for your time!