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

במדריך זה נבנה 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 לתבנית וורדפרס

הוסיפו את הקוד הבא לקובץ 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' ); והוסיפו את הפרמטר 'before_page_number' => '<span class="accessible-txt">'.$translated.' </span>' למערך של paginate_links בקוד מעלה.

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

עיצוב ה Pagination

נשתמש ב flex על מנת להקל על העניינים. בכדי לעצב את העימוד הממוספר כמו בלוג זה – הוסיפו את הקוד הבא לקובץ 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 תוכלו בקלות להוסיף עימוד יפה לבלוג שלכם.

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

רועי יוסף

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

תגובות פייסבוק

{ 0 תגובות… הוסף אחת }

השאירו תגובה

שיתופים
קראו גם את:
וידאו אתרי וורדפרס - viewport
וידאו באתרי וורדפרס – עצירת וידאו מחוץ ל Viewport

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