חיפוש ]

הוספת עימוד ממוספר (Pagination) בתבנית וורדפרס

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

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

אז ישנה פונקציה ששמתי לב כי לא הרבה מכירים בשם paginate_links שנוספה לוורדפרס בגירסה 2.1. פונקציה זו מאפשרת לכם ליצור עימוד ממוספר לכל שאילתא (query) בתבנית הוורדפרס שלכם.

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

<?php $args = array(
 'base'               => '%_%',
 'format'             => '?page=%#%', // the '%#%' will be replaced with the page number
 'total'              => 1,
 'current'            => 0,
 'show_all'           => False,
 'end_size'           => 1,
 'mid_size'           => 2,
 'prev_next'          => True,
 'prev_text'          => __('« Previous'),
 'next_text'          => __('Next »'),
 'type'               => 'plain',
 'add_args'           => False,
 'add_fragment'       => '',
 'before_page_number' => '',
 'after_page_number'  => ''
); ?>

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

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

הוספת Pagination לתבנית וורדפרס

הוסיפו את הקוד הבא לקובץ functions.php בתבנית הבת שלכם (או בכל קובץ שאתם רואים לנכון בתבנית שלכם):

/**
 * Pagination for archive, taxonomy, category, tag and search results pages
 *
 * @global $wp_query http://codex.wordpress.org/Class_Reference/WP_Query
 * @return Prints the HTML for the pagination if a template is $paged
 */
function sv_pagination() {
	global $wp_query;

	$next_arrow = is_rtl() ? '>' : '<';
	$prev_arrow = is_rtl() ? '<' : '>';

	$total      = $wp_query->max_num_pages;

	$big = 999999999; // This needs to be an unlikely integer

	// For more options and info view the docs for paginate_links()
	// http://codex.wordpress.org/Function_Reference/paginate_links
	$paginate_links = paginate_links( array(
		'base'        => str_replace( $big, '%#%', esc_url( get_pagenum_link($big) ) ),
		'current'     => max( 1, get_query_var('paged') ),
		'total'       => $total,
		'show_all'    => true,
		'prev_text'	  => $prev_arrow,
		'next_text'	  => $next_arrow
	) );

	// Display the pagination if more than one page is found
	if ( $paginate_links ) {
		echo '<div class="pagination">';
		echo $paginate_links;
		echo '</div>';
	}
}

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

$translated = __( 'Page', 'mytextdomain' );

ולאחר מכן הוסיפו את הפרמטר הבא למערך של paginate_links בקוד מעלה.

'before_page_number' => '<span class="accessible-txt">'.$translated.' </span>'

מניח כי תרצו להסתיר את הקלאס accessible-txt בקובץ ה css שלכם…

עיצוב ה Pagination

נשתמש ב Flexbox על מנת להקל על העניינים. בכדי לעצב את העימוד הממוספר כמו בלוג זה – הוסיפו את הקוד הבא לקובץ style.css של תבנית הבת שלכם:

.pagination {
    display: flex;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    flex-flow: row wrap;
}

.pagination > * {
    color: #2d2d2d;
    border-radius: 50%;
    text-align: center;
    -webkit-flex-basis: 36px; /* Safari 6.1+ */
    flex-basis: 36px;
    line-height: 36px;
    min-width: 36px;
    margin: 4px 0;
}

.pagination > * {
    color: #2d2d2d;
    border-radius: 50%;
    text-align: center;
    background: #f3f3ef;
}

.pagination > a:hover, span.current {
    background-color: #942762;
    color: #fefefe;

}

הוספת ה Pagination לתבנית שלכם

מאד פשוט, בכדי לקרוא לפונקצית ה pagination בתבנית שלכם, כל מה שנדרש לעשות הוא להוסיף את השורה הבאה לתבנית שלכם היכן שתרצו שהעימוד יופיע. בד״כ תוסיפו קוד זה לקובץ index.php, category.php, archive.php וכדומה, אך אם יש לכם תבנית עמוד משלכם (page template), הוסיפו זאת שם.

<?php sv_pagination(); ?>

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

לולאה מותאמת (Custom Query)?

אם אתם משתמשים בלולאה מותאמת באמצעות WP_Query הקוד לא יעבוד לכם אלא אם קבעתם את ה query שלכם במשתנה $wp_query (אל תעשו זאת). בכדי לתקן זאת כשאני יוצר לולאה מותאמת היא בד״כ נראית כך:

$sv_query = new WP_Query( $args );

בצורה זו, נוכל לשנות את פונקציית ה pagination כך שתבדוק האם השתמשתם במשתנה זה בכדי ליצור את הלולאה ונשנה את המשתנה $total בהתאם (עדכנו את הקוד הראשון בפוסט זה):

global $wp_query, $sv_query;
if ( $sv_query ) {
    $total = $sv_query->max_num_pages;
} 
else {
    $total = $wp_query->max_num_pages;
}

הלולאה המותאמת שלכם אמורה בעיקרון להראות בסגנון הבא:

<?php
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;

    $args     = array(
        'post_type'      => 'post', // You can add a custom post type if you like
        'posts_per_page' => 6,
        'paged'          => $paged
    );
    $sv_query = new WP_Query( $args );

    if ( $sv_query->have_posts() ) : while ( $sv_query->have_posts() ) : $sv_query->the_post();

        //*** Post content goes here 

    endwhile;
        sv_pagination();
        wp_reset_postdata();
    else :

        //*** If no posts found message goes here 

    endif;
?>

שימו לב כי בשורה 17 לאחר סיום הלולאה השתמשנו בפונקציה wp_reset_postdata() על מנת לשחזר את המשתנה הגלובלי $post לאחר השימוש בלולאה החדשה שיצרנו על ידי WP_Query.

לסיכום

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

על ידי הוספת מספר שורות של php ו css תוכלו בקלות להוסיף עימוד יפה לבלוג באתר הוורדפרס שלכם. עוד על pagination ועל התגיות rel=next ו rel=prev בפוסט הבא.

עובד לכם? יש רעיונות לשיפור? שתפו אותנו בתגובות שכולנו נוכל ללמוד… 🙂

רועי יוסף
רועי יוסף

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

2 תגובות...
  • אלון גולדמן 15 אוקטובר 2018, 16:43

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

    בכל מקרה תודה!!!

  • אביב 13 פברואר 2019, 12:48

    היי, לפי מה שאני יודע, אם רוצים לעשות custom query בעמוד הראשי, זה לא עובד.
    הבנתי שצריך לשנות את paged ל page… תוכל בבקשה לתת על זה הסבר?

    תודה רבה ואחלה מדריך

תגובה חדשה

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

הפוסט עודכן לאחרונה