23
במרץ
2010

טיפ וורדפרס: להוסיף קו מפריד בתפריט עמודים או הקטגוריות

מאת: מאור ברזני | תגובות: 4 | נושאים: וורדפרס
תגיות: , , , , |

להלן פיתרון קצר ביותר שיפתור לכם אחת ולתמיד את בעיית הקו המפריד בין פריטי תפריטים. בוורדפרס ניתן לייצר באופן דינמי רשימות של עמודים ו/או קטגוריות תוכן, שנוצרות בעזרת הפונקציות wp_list_pages() ו- wp_list_categories(). פונקציות אלה יכולות לקבל מספר פרמטרים וכתוצאה והן מחזירות פריטים של הרשימה <pre><li></pre>, כל פריט הוא קישור לעמוד/קטגוריה.

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

יש מספר דרכים לעשות זאת, כמו למשל אלו שהציעה חנית כהן בפוסט בנושא לפני מספר חודשים, בהן פיתרון בעזרת css שדורש עבודה קצת קשה בהתאמה לאקספלורר, או פיתרון ב-PHP .

פיתרון ה-PHP שם מתאים יותר לפונקציה שמחזירה רשימת קישורים, אבל פחות מתאים לשתי הפונקציות האלה בהן משתמשים לתפריטי הניווט.

בד"כ, הקוד הזה ישמש להצגת תפריט ניווט סטנדרטי:

[ccwn_php]

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

בסוף נדפיס את התוצאה החדשה.

דוגמה פשוטה למשל:

כמובן שאת אותו הדבר אפשר יהיה להחיל גם על הפונקציה wp_list_categories() שמטפלת בקטגוריות, וסביר להניח שזה יעבוד היטב גם עם הפונקציה החדשה של וורדפרס 3.0 wp_nav_menu() שהיא חלק ממנהל התפריטים החדש הצפוי בגרסת וורדפרס הקרובה.

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


שתפו גם אחרים:
  • email
  • Print
  • RSS
  • Facebook
  • Twitter
  • LinkedIn
  • Google Bookmarks
  • Live
  • PDF
  • MySpace
  • del.icio.us
  • Digg
  • Technorati
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • Add to favorites

4 תגובות »

  • חנית הגיב:

    יש גם פתרון CSS פשוט

    .navigation li {border-right:1px solid black;}
    .navigation li:first-child{border-right:none;}

    זה הכל

    • גם אפשרי, אבל בד"כ קיימים margin ו- padding לפריטי הרשימה, ובמקרים האלה קו מפריד שהוא בעצם מסגרת גבול ימנית לא תמיד ייראה טוב כ"כ בגובה שלו וכו'.
      כמובן שאפשר להוסיף למה שכתבת פה גם שורה של משחקי ריווח padding/margin כדי להגיע לתוצאה.
      הפיתרון שכתבתי ב-PHP הוא קליל, פשוט ונוח, ומאפשר לשלב גם תווים מפרידים אחרים לפי הצורך, לאו דווקא סימן שדומה ל- |.

  • דני הגיב:

    טיפ נחמד מאוד, אבל למרבה הצער הוא לא עובד עם פונקצית התפריטים החדשה של וורדפרס 3.0

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

פיד RSS לתגובות בפוסט | טראקבק


הוסף תגובה ל חנית

CommentLuv badge

TechnoCraft - פתרונות אינטרנט


אֶקְסְפֶּרִימֶנְט דוֹט אֶפֶס - וורדפרס, תוכן, טכנולוגיה ועוד כמה דברים - מופעל באמצעות WordPress | פתרונות אינטרנט