חיפוש ]

הצגת Related Posts (מאמרים רלוונטים) ללא תוסף

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

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

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

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

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


מדוע להוסיף Related Posts בסוף מאמר כזה או אחר?

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

  • הם משפרים את חווית המשתמש – הצגת מאמרים רלוונטים היא דרך שאינה חודרנית ומאד נוחה עבור המשתמשים שלכם לגלות מאמרים הרלוונטים לתחום העניין שלהם.
  • הם עוזרים לקידום האתר – חלק בלתי נפרד מ On-Page SEO ואופטימיזציה לגוגל ומנועי חיפוש היא אסטרטגיית קישורים פנימיים נכונה (Internal Linking). מאמרים רלוונטים אים בהכרח חלק מאסטרטגיה זו, אך לבטח עוזרים לכם בבניית קישורים פנימיים בצורה אוטומטית ועוזרים לגוגל ומנועי החיפוש השונים להבין את מבנה האתר שלכם.
  • הם מקטינים את שיעור העזיבה (bounce rate) – כולנו מנסים להקטין את אחוזי הנטישה באתר שלנו. ישנו סיכוי גבוה יותר כי גולשים בעלי עניין בתוכן מסויים, יילחצו על אותם קישורים ומכאן שיקטינו את אחוז הנטישה ויישארו באתר שלכם זמן רב יותר.
  • הם מאפשרים גישה לתוכן ישן – אם אתם מוסיפים תוכן בתדירות גבוהה לבלוג שלכם, התוכן הישן ״ייקבר״ מהר מאד בדפים האחרונים של הבלוג אליהם הגולשים אינם מגיעים בדרך כלל. הוספת מאמרים רלוונטים בסוף כל פוסט היא דרך מצויינת להציג את אותו תוכן חבוי עבור הגולשים שלכם.

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

הוספת Related Posts בתבנית וורדפרס

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

השלב הראשון הוא להוסיף את הקוד הבא לקובץ functions.php. אם אתם משתמשים בתבנית בת כמובן, הוסיפו את הקוד לקובץ functions.php בתבנית הבת שלכם.

<?php

function sv_related_posts($args = array()) {

    global $post;

    // default args
    $args = wp_parse_args($args, array(
        'post_id' => !empty($post) ? $post->ID : '',
        'taxonomy' => 'category',
        'limit' => 3,
        'post_type' => !empty($post) ? $post->post_type : 'post',
        'orderby' => 'rand',
        'order' => 'DESC'
    ));

    // check taxonomy
    if (!taxonomy_exists($args['taxonomy'])) {
        return;
    }

    // post taxonomies
    $taxonomies = wp_get_post_terms($args['post_id'], $args['taxonomy'], array('fields' => 'ids'));

    if (empty($taxonomies)) {
        return;
    }

    // query
    $related_posts = get_posts(array(
        'post__not_in' => (array)$args['post_id'],
        'post_type' => $args['post_type'],
        'tax_query' => array(
            array(
                'taxonomy' => $args['taxonomy'],
                'field' => 'term_id',
                'terms' => $taxonomies
            ),
        ),
        'posts_per_page' => $args['limit'],
        'orderby' => $args['orderby'],
        'order' => $args['order']
    ));

    if (!empty($related_posts)) { ?>
        <div class="related-posts">
            <h3 class="widget-title"><?php _e('Related articles', 'textdomain'); ?></h3>

            <ul class="related-posts-list">
                <?php
                foreach ($related_posts as $post) {
                    setup_postdata($post);
                    ?>
                    <li>
                        <a class="title" href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
                            <?php if (has_post_thumbnail()) { ?>
                                <div class="thumb">
                                    <?php echo get_the_post_thumbnail(null, 'medium', array('alt' => the_title_attribute(array('echo' => false)))); ?>
                                </div>
                            <?php } ?>
                            <h4><?php the_title(); ?></h4>
                        </a>
                    </li>
                <?php } ?>
            </ul>
            <div class="clearfix"></div>
        </div>
        <?php
    }

    wp_reset_postdata();
}

שימו לב כי במידה ואתם מעוניינים להשתמש בקבצי התרגום של התבנית – יש להחליף את textdomain בשורה מספר 48 ל textdomain של התבנית שלכם. אחרת פשוט שנו את הטקסט Related Posts למה שתרצו – ״מאמרים רלוונטים״ במקרה שלנו.

השלב השני הוא לקרוא לפונקציה sv_related_posts() היכן שתרצו בתבנית שלכם, בדרך כלל תרצו להוסיף אותה בקובץ single.phpלאחר הקריאה ל the_content().

גישה זו מתאימה לתבניות וורדפרס קלאסיות שמשתמשות בקבצי PHP כמו single.php. אם אתם עובדים עם תבנית בלוקים (כמו Twenty Twenty-Four), תצטרכו לרשום בלוק מותאם או להשתמש בפילטר the_content להזרקת הפלט.

שיקולי ביצועים

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

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

[savvy_alert type="info" title="טיפ לביצועים"]באתרים עם תעבורה גבוהה, עטפו את קריאת get_posts() ב-transient באמצעות set_transient() עם תפוגה של 12 שעות. זה מפחית משמעותית את שאילתות מסד הנתונים ושומר על זמני טעינת דף נמוכים.[/savvy_alert]

עיצוב סקשיין המאמרים הרלוונטים

הפלט מהפונקציה שלנו משתמש בקלאסים .related-posts ו-.related-posts-list. הנה קוד CSS מינימלי שתוכלו להוסיף לקובץ העיצוב של התבנית שלכם ליצירת פריסת גריד רספונסיבית:

.related-posts-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    list-style: none;
    padding: 0;
}

.related-posts-list li {
    overflow: hidden;
}

.related-posts-list .thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.related-posts-list h4 {
    margin-top: 8px;
    font-size: 16px;
}

@media (max-width: 768px) {
    .related-posts-list {
        grid-template-columns: 1fr;
    }
}

הארגומנטים בהם ניתן להשתמש

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

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

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

זהו בגדול, ניתן כעת מספר דוגמאות לשימוש בפונקציה שיצרנו…

Related Posts – דוגמאות שימוש בפונקציה שיצרנו

1. הצגת שלושה מאמרים רלוונטים:

<?php sv_related_posts(); ?>

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

אם אתם מעוניינים לשנות את מספר הפוסטים שיוצגו, פשוט השתמשו בארגומנט limit כבדוגמה הבאה:

<?php
sv_related_posts(array(
	'limit' => 6
));
?>

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

<?php 
sv_related_posts(array(
   'taxonomy' => 'post_tag',
));
?>

3. הצגת שישה מאמרים לפי קטגוריות מסודרים לפי כמות התגובות:

<?php 
sv_related_posts(array(
   'limit' => 6,
   'orderby' => 'comment_count',
   'order' => 'ASC'
));
?>

תנו מבט באפשרויות סידור (orderby) נוספות ב WordPress Developer Resources.

4. הצגת המאמרים עבור סוג תוכן מותאם:

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

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

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

<?php
sv_related_posts(array(
    'taxonomy' => 'teams'
));
?>

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

שאלות נפוצות

שאלות נפוצות בנושא הוספת מאמרים רלוונטים ללא תוסף:

האם ניתן להשתמש בזה עם סוגי תוכן מותאמים?
כן. הפונקציה מזהה אוטומטית את סוג התוכן הנוכחי ותשלוף מאמרים רלוונטים מאותו סוג. רק ודאו שיש לכם טקסונומיה (כמו קטגוריה מותאמת או תגית) רשומה עבור סוג התוכן, מכיוון שהפונקציה מסתמכת על מונחי טקסונומיה משותפים כדי למצוא תוכן רלוונטי.
איך מעצבים את סקשיין המאמרים הרלוונטים?
הפונקציה מוציאה HTML עם הקלאסים .related-posts ו-.related-posts-list. תוכלו לטרגט אותם ב-CSS של התבנית שלכם. הוספנו קוד CSS grid מוקדם יותר במדריך שיוצר פריסה רספונסיבית בשלוש עמודות.
האם זה יאט את האתר שלי?
הפונקציה משתמשת ב-get_posts() שמגדירה no_found_rows ל-true כברירת מחדל ומדלגת על שאילתת ספירת העימוד. ברוב האתרים ההשפעה על הביצועים מינימלית. באתרים עם תעבורה גבוהה, תוכלו לעטוף את הפלט ב-transient לשמירת התוצאות במטמון.
האם ניתן להציג מאמרים רלוונטים לפי תגית במקום קטגוריה?
כן. העבירו 'taxonomy' => 'post_tag' כארגומנט. למעשה תוכלו להשתמש בכל טקסונומיה רשומה, כולל מותאמות.
איך מגבילים מאמרים רלוונטים לאותו מונח טקסונומיה?
הפונקציה כבר עושה זאת כברירת מחדל. היא מביאה את מונחי הטקסונומיה המשויכים לפוסט הנוכחי ומחפשת פוסטים אחרים שחולקים אותם מונחים. אם פוסט שייך לכמה קטגוריות, התוצאות עשויות לכלול פוסטים מכל אחת מהקטגוריות הללו.
מה ההבדל בין get_posts() ל-WP_Query עבור מאמרים רלוונטים?
get_posts() היא עטיפה סביב WP_Query עם ברירות מחדל ידידותיות לביצועים. היא מבטלת ספירת עימוד ודיכוי פילטרים ישר מהקופסה. לשאילתת מאמרים רלוונטים פשוטה בה אינכם צריכים עימוד או hooks, get_posts() היא הבחירה הטובה יותר.

לסיכום

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

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

דיון ותגובות
6 תגובות  ]
  • רונית 17 פברואר 2018, 22:26

    פוסט מעולה, תודה!

  • חתול 18 פברואר 2018, 17:58

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

    • רועי יוסף 18 פברואר 2018, 18:28

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

      1. זה מסרבל את הקוד כי צריך להכניס את הקוד לתוך משתנה עקב השימוש ב return.
      2. לדעתי נכון יותר להוסיף את הפונקציה בתבנית העמוד (page template) מכיוון וזה פשוט יסרבל את העניין. לדוגמה, תאלץ להוסיף תנאים באילו סוגי תוכן (post type) להשתמש בפילטר ובאילו לא… מה אם תחליט לא להוסיף אותם בדיוק בסיום תוכן הפוסט? עדיף במקרה זה פשוט להוסיף את אותם related posts במיקום בו אתה מעוניין.

  • מיכל הררי 20 פברואר 2018, 12:48

    אוי, מעולה! תודה רועי. בדיוק צריכה את זה. חסכת לי עבודת מחקר רצינית 😉

השאירו תגובה

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

Savvy WordPress Development official logo