הוספת עימוד ממוספר (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' );

ולאחר מכן הוסיפו את הפרמטר הבא למערך של 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" בפוסט הבא.

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