המכללה : בר ניווט עליון

בר ניווט עליון 25 בנוב' 2007

מאת: ~ניצן~

ברוב ערכות העיצוב המוכרות קיים בר ניווט עליון המקשר בד"כ לדף האודות, לדף הראשי ועוד דף או שניים עפ"י הגדרת המעצב / בעל הבלוג. לפני כמה פוסטים דיברנו על תצוגת קטגוריות היררכית, הנה דוגמא פשוטה כיצד לייצר לאתר התוכן בר ניווט עליון מבוסס קטגוריות.

ראשית – כיצד יוצרים בר ניווט.

על מנת לייצר את בר הניווט יש צורך לייצר מקטע מתאים בקובץ ה css של האתר. אני מצרף פה את קטע הקוד שבו אני השתמשתי, הוא לא פאר היצירה, אבל הוא יעבוד והוא ברור מספיק כדי להבין מה עושה מה (אני מקווה, בכל מקרה תסלחו לי בבקשה על בחירת הצבעים המזוויעה).

#menu {
float: right;
width: 700px;
margin: 0 9px 0 0;
overflow: hidden;
background: #73a0c5;
}
#menu ul {
list-style: none;
}
#menu li {
float: right;
background: red;
padding: 0 0 0 5px;
margin: 0 0 0 3px;
list-style: none;
}
#menu a {
float: none;
display: block;
padding: 4px 6px 3px 9px;
margin-right: 3px;
text-decoration: none;
font-weight: bold;
color: #E5A153;
}
#menu a:hover {
color:#E5D6B8;
background:orange;
}

עכשיו, יש לנו אובייקט שנקרא menu ונוכל לקרוא לו מכל מקום על ידי:

<ul style=”menu”>
<li> object </li>
<li> object </li>
</ul>


הטמעה של קטע הקוד הלז תיצור בר ניווט עליון שבו שתי תגיות עם הכיתוב object. כמובן שניתן להרחיב את זה הלאה ולהכניס במקום object כל קישור שהוא – ובכך ליצור בר ניווט סטנדרטי – למשל:

<ul id=”menu”>
<li> <a href=”/”>Home</a></li>
<li><a href=”/about”>About</a> </li>
</ul>

קטע הקוד לעיל מייצר בר ניווט בעל שתי לשוניות – Home ו About. אם נטמיע את קטע הקוד הלז בתוך קובץ ההדר (header.php) נקבל בכל עמוד באתר את הלשוניות הללו.

אבל אנחנו רוצים יותר מזה, אנחנו רוצים בר ניווט תלוי הקשר וזה אומר שאנחנו רוצים שעבור כל קטגוריה נקבל את תתי הקטגוריות הרלוונטיות אליה. כך למשל, אם יש לנו קטגוריה ראשית מחשבים, כשניכנס אליה יוצגו תתי הקטגוריות "מק, לינוקס, חלונות" בבר הניווט. אם אנחנו בראשי, נרצה להציג רק את הקטגוריות הראשיות (למשל: מחשבים, כלכלה, בידור וכ').

הישום כרגע הוא הישום הפשוט של בר הניווט תלוי ההקשר, והשלב הבא יכלול אובייקט בר ניווט אחיד לכל האתר עם סימון של ההקשרים.

לצורך כך, נשתמש במידע שפורט במדריך הקטגוריות וניצור את אובייקט הקטגוריות המתאים. לצורך הדוגמא, יהיה מספר הקטגוריה הראשית 3 וכך זה נראה

<ul id="menu">
< ?php
$defaults = array('show_count' => 0, 'use_desc_for_title' => 1, 'child_of' => '3′, 'title_li' =>");
wp_list_categories($defaults); ?>
</ul>

בברירת המחדל, פונקציית ה wp_list_categories מייצרת רשומות תחומות בתגיות li. היות ותחמנו את הקריאה לפונקציה ב ul מסוג menu הרי שהעיצוב שיתקבל הינו עיצוב התפריט.

מצטער על הצבעים היות וורדפרס תומכת בדפי קטגוריה, צורת העבודה הנכונה תהייה בעזרת משתנה נוסף שיכיל את מזהה הקטגוריה, כך, בכל פעם שנשכפל את עמוד הקטגוריה הראשי כל שנצטרך לעשות זה רק לשנות את מזהה הקטגוריה המוטבע במשתנה ובכך קיבלנו עמוד קטגוריה חדש.

וכך עושים את זה:

< ? $catid=3; ?>
<ul id="menu">
< ?php
$defaults = array('show_count' => 0, 'use_desc_for_title' => 1, 'child_of' => $catid, 'title_li' =>");
wp_list_categories($defaults); ?>
</ul>

הפעם השתמשנו במזהה שנקרא catid ונתנו לו את הערך 3. כשהצבנו אל תוך default את הערכים הרלוונטים במקום לכתוב child_of=3 ניתן לכתוב child_of=$catid. אם ארצה לשכפל את הדף עבור קטגוריה שמספרה הוא 8, כל שעלי לעשות הוא לשמור את הקובץ מחדש בשם category-8.php ולשנות את הערך ל 8.

Popularity: 11% [?]