23
במרץ
2010

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

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

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

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

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

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

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

1
2
3
4
5
<ul class="navigation">
        <li><a href="<?php echo get_option('home'); ?>">דף הבית</a></li>
        <?php wp_list_pages('title_li=');              
        ?>
</ul>

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

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

נשתמש בפונקצייה פשוטה להוספת התו המפריד

כדי להוסיף תו מפריד כלשהו, נחליף את זה בשורות האלה:

1
2
3
4
5
6
7
8
<ul class="navigation">
        <li><a href="<?php echo get_option('home'); ?>">דף הבית</a></li>
        <?php  $newnav = wp_list_pages('title_li=&echo=0');
        $sep = '|';
        $newnav = str_replace('<a', $sep .' <a ', $newnav);
        echo $newnav;
        ?>
</ul>

הוספנו בשורה 3 לפונקציה את הפרמטר והערך echo=0, שאומר לפונקציה במקום להדפיס את הרשימה על המסך להחזיר אותה כמבנה html למשתנה בשם newnav$.

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

בשורה 4 נרשום במשתנה $sep את התו המפריד שאנחנו רוצים (למשל התו | )

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

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

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

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

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

Gravity Forms Plugin for WordPress
שתפו גם אחרים:
  • 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 לתגובות בפוסט | טראקבק


הוסף תגובה

You can add images to your comment by clicking here.

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


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