שיפור השימושיות של פירורי לחם באתרי וורדפרס

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

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

פירורי לחם מסייעים למשתמש בכמה דרכים:

1. הם מלמדים אותו איפה הוא נמצא ביחס לשאר התוכן באתר.
2. הם מראים כיצד כיצד יחידות תוכן מאורגנות באתר (לפי אילו קריטריונים / טקסונומיות).
3. הם מאפשרים לו לחזור "אחורה" רמה אחת או יותר.

למה מומלץ להוסיף פירורי לחם לאתר?

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

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

לאיזה אתרים מומלץ להוסיף פירורי לחם?

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

מה במדריך?

במדריך זה אני הולך להתמקד בהגדרות ובשדרוגים שאפשר לעשות לפירורי הלחם של Yoast SEO:

1. כיצד להגדיר את פירורי הלחם בממשק של Yoast SEO?
2. איך לטפל בכותרות ארוכות בפירורי הלחם?
3. כיצד משתמשי אלמנטור יכולים לשפר את פירורי הלחם דרך ההגדרות באלמנטור?
4. מדוע יש היגיון בשינוי הכיוון של החיצים?
5. כיצד להסיר את העמוד הנוכחי מפירורי הלחם, כדי שישארו מינימליסטים?
6. כיצד להשאיר רמת ניווט אחת בלבד במובייל?
7. כיצד ליצג בפירורי הלחם סוגי פוסטים מותאמים (CPT) תחת עמוד?

שימו לב:

• חלק מההדרכה הזאת דורשת ידע בסיסי ב-PHP ואינה מתאימה למשתמשים מתחילים. טעויות עלולות לגרום לאתר לא להיטען.
• בעוד לפירורי לחם יש השפעה על SEO, אני מתייחס במדריך הזה בעיקר להיבטים של UI/UX. לכן אני ממליץ להתייעץ עם מקדם אתרים לפני כל שינוי שאתם רוצים לעשות בפירורי הלחם באתר.

התקנת תוסף פירורי לחם מתקדמים לאלמנטור

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

שימו לב: עם הפעלת התוסף  וידג'טים רגילים של "פירורי לחם" עשויים לא לפעול כמו שצריך. הפיתרון פשוט מאוד: החליפו אותם בוידג'טים של Improved Breadcrumbs.

הגדרת פירורי הלחם בממשק של Yoast

Yoast SEO, תוסף ההתאמה למנועי חיפוש הפופולארי ביותר בוורדפרס, מאפשר ליצור פירורי לחם בקלות. בואו נעבור על האפשרויות שהוא מציע (בלוח הבקרה תחת SEO > תצוגת חיפוש > לשונית פירורי לחם)

הגדרות פירורי הלחם

• מפריד בין הפריטים בפירורי לחם – האלמנט המפריד בין פירורי הלחם. מומלץ מאוד שהוא יהיה חץ. ניתן להשתמש בחיצים שמגיעים כברירת מחדל, או להחליף לחיצים אחרים כמו → ← ⇒ ⇐ ⇢ ⇠ ⇦ ⇨ ⟶ ⟵ ➙ ➡ ➤ (תוכלו לסמן חץ מהשורה הזאת, להעתיק ולהדביק בשדה המתאים בהגדרות)
• טקסט עוגן לעמוד הבית – ניתן בהחלט להשאיר כ"בית" או להחליף לשם האתר, "דף הבית" או כל ביטוי שנראה לכם מתאים. חשוב שהביטוי יהיה אינפורמטיבי ולא מתחכם כי המטרה שלנו היא להקל על הניווט.
• קידומת לנתיב של פירורי הלחם – לרוב נרצה להשאיר את השדה הזה ריק. ניתן גם להזין בו "אחורה אל" או "מעבר אל". הקידומת לא תופיע אם תגדירו הצגה של קישור יחיד (כפי שאני מסביר בהמשך המדריך)
• קידומת עבור פירורי לחם של ארכיונים – ברירת המחדל היא ארכיון. ניתן גם להשאיר ריק.
• קידומת עבור פירורי לחם בעמוד חיפוש – מומלץ להשאיר את ברירת המחדל "חיפשת".
• פירורי לחם לעמודי 404 – אפשר להשאיר את ברירת המחדל, או להתאים כרצונכם.
• הצג עמוד בלוג -חשוב להפעיל את האפשרות הזאת  אם עמוד הבלוג הראשי (מוגדר דרך הגדרות > קריאה > תצוגת העמוד הראשי > עמוד פוסטים) הוא עמוד משמעותי באתר. אחרת – לבטל.
• הדגש עמוד אחרון – אם בכלל תרצו להציג את העמוד האחרון קרוב לודאי שלא תרצו שהוא יהיה מודגש.

טקסונומיה להצגה בפירורי לחם של סוגי תוכן

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

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

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

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

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

טיפול בכותרות ארוכות בפירורי לחם

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

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

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

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

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

הגדרת פירורי הלחם למשתמשי אלמנטור

אם אתם מוסיפים את פירורי הלחם דרך וידג'ט של אלמנטור חשוב להגדיר להם NAV כתגית HTML (דרישת נגישות).

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

שינוי כיוון החיצים של פירורי הלחם

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

תוכלו להשתמש, למשל, בחץ הזה →.

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

שיפורי נגישות

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

1. תגית פותחת NAV כברירת מחדל.
2. הוספת aria-label=Breadcrumb.
3. הגדרת כל פריט תחת תגית LI.

הסרת הרמה האחרונה מפירורי הלחם

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

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

אם אתם משתמשים בפירורי הלחם מהתוסף שיצרתי אתם יכולים לבחור באפשרות Remove current page. אם לא, הוסיפו את הקוד הזה לקובץ functions.php בתבנית הבת על מנת להסיר את כותרת העמוד הנוכחי:

// Remove the current page from the Yoast breadcrumb trail, rendering the parent crumb as a link.
add_filter(
    'wpseo_breadcrumb_single_link',
    function ( $link_output ) {
        if ( strpos( $link_output, 'breadcrumb_last' ) !== false ) {
            $link_output = '';
        }
        return $link_output;
    }
);

השארת קישור רמה אחת אחורה בלבד במובייל

במובייל שטח המסך קטן מאוד, וכל פיסת שטח היא יקרה (במיוחד מעל קו הכפל – Above the Fold). בגלל זה יש אתרים שבוחרים שלא להציג פירורי לחם במובייל בכלל. בעיני זה חבל – הרי גם למשתמשי מובייל מגיעה חוויית שימוש מצויינת. ג'ף ג'ימרסון מציע להשאיר במובייל קישור לרמה אחת אחורה בלבד, במקום הצגת ההיררכיה המלאה, ואני חושב שזו עצה מצויינת. אגב, זו שיטה שהרבה אתרים גדולים ומפורסמים משתמשים בה.

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

אם בחרתם שלא להציג את העמוד הנוכחי בפירורי הלחם, תוכלו להוסיף גם קידומת לפירור הבודד באמצעות האפשרות Single link prefix:

התאמת פירורי לחם לסוגי תוכן מותאמים

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

וורדפרס מגיעה בכל התקנה עם שני סוגי תוכן בסיסיים: עמודים ופוסטים. כאשר רוצים להוסיף לאתר וורדפרס עוד סוגי תוכן עושים זאת באמצעות רישום (Register) של סוגי פוסטים מותאמים (Custom Post Types, או CPT). כך ניתן ליצור סוגי תוכן כמו "אנשי צוות", "הופעות", "חדשות", "ספרים". גם המוצרים של ווקומרס, למשל, הם סוג פוסט מותאם שווקומרס רושם באתר.

ניתן לרשום סוג תוכן חדש באמצעות הפונקציה register_post_type או באמצעות תוסף. Custom Post Type UI הוא אחד התוספים הפופולארים ביותר לרישום סוגי פוסטים מותאמים. לכל סוג פוסט מותאם ניתן להגדיר ארכיונים, טקסונומיות, דפי סינגל ושדות מטה – ממש כמו לפוסטים הרגילים של וורדפרס.

האם Yoast SEO תומך היטב בסוגי פוסטים מותאמים?

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

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

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

עכשיו נגיע לפירורי הלחם: מחקר, חינוך ומדיניות וממשל, הם עמודים רגילים, שמוגדרים כילדים של עמוד "פעילות", לכן פירורי הלחם בעמודים אלו מייצגים באופן מהימן את ההקשר שלהם (ניתן לנוע שלב אחד אחורה אל עמוד פעילות או שני שלבים אחורה – אל עמוד הבית).

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

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

מוסיפים עמודים לפירורי הלחם

הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת: (שימו לב שאתם חייבים לערוך אותו, כפי שמוסבר בהמשך)

// Add 'parent' pages to post types breadcrumbs
add_filter('wpseo_breadcrumb_links', function ($breadcrumbs) {
    // Single CPT
    if (get_post_type() === 'team-member') { // Replace with your CPT slug!!!
        $page_id = 43; // Replace with your page ID!!!
        $breadcrumb[] = array('text' => esc_html(get_the_title($page_id)), 'url' => get_permalink($page_id));
        array_splice( $breadcrumbs, 1, -2, $breadcrumb );
    }
     // Multiple CPT's
    if (in_array(get_post_type(), array('position-paper','lecture','media'))) {     // Replace with your CPT's slugs!!!
        $page_id = 45; // Replace with your page ID!!!
        $breadcrumb[] = array('text' => esc_html(get_the_title($page_id)), 'url' => get_permalink($page_id));
        array_splice( $breadcrumbs, 1, -2, $breadcrumb );
    }
    return $breadcrumbs;
});

מה הקוד הזה עושה?

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

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

בדוגמה זו יש שני חלקים: התאמה יחידה, והתאמה של כמה סוגי פוסטים מותאמים לאותו עמוד הורה: סוג הפוסט המותאם team-member שמוגדר כילד של עמוד 43 (עמוד האודות, במקרה שלי) ואת סוגי התוכן position-paper, lecture, media שמוגדרים כילדים של העמוד 45 (במקרה שלי זה עמוד הפעילויות).

שימו לב שהקוד מלא בדוגמאות (שהעתקתי מאתר שבנינו בסטודיו) – אין לי דרך לדעת אילו סוגי פוסטים רשומים אצלכם באתר ולא מה הID של הדף הראשי שתרצו להוסיף לפירורי הלחם. מחקו חלקים שאינם נחוצים לכם בקוד והחליפו את הערך של $page_id 43 / 45 ב ID של העמודים שאתם רוצים שיהיו העמודים הראשיים באתר. החליפו את המחרוזות שבתנאים, באלו שמייצגות את ה"SLUGS" של סוגי הפוסטים המותאמים שלכם (את הסלאג הגדרתם כשרשמתם את סוג הפוסט).

איך למצוא ID של עמוד? היכנסו לעריכה של העמוד וחפשו את הID בשורת הכתובת. אם, למשל, כתוב post=6488 אז הID הוא 6488.

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

לסיכום

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

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

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