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

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

וורדפרס כוללת פונקציה מובנית בשם paginate_links() שיוצרת עימוד ממוספר לכל שאילתה (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' => ''
); ?>

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

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

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

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

/**
 * Pagination for archive, taxonomy, category, tag and search results pages
 *
 * @global $wp_query https://developer.wordpress.org/reference/classes/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()
	// https://developer.wordpress.org/reference/functions/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(). כדי להנגיש את העימוד (ורצוי שתעשו זאת), הוסיפו את המשתנה הבא בתחילת הפונקציה:

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

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

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

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

עיצוב ה Pagination

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

.pagination {
 display: flex;
 justify-content: space-between;
 flex-flow: row wrap;
}

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

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

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

הוסיפו את השורה הבאה היכן שתרצו שהעימוד יופיע – בדרך כלל ב-index.php, category.php, archive.php, או בתבנית עמוד מותאמת שלכם:

<?php sv_pagination(); ?>

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

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

אם אתם משתמשים בלולאה מותאמת באמצעות WP_Query, העימוד לא יעבוד עם המשתנה $wp_query הדיפולטיבי. במקום זאת, קראו לשאילתה המותאמת $sv_query:

$sv_query = new WP_Query( $args );

לאחר מכן שנו את פונקציית העימוד כך שתזהה את השאילתה המותאמת ותתאים את $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;
?>

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

שאלות נפוצות

סיכום

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

לשיקולי SEO סביב עמודים ממוספרים, עיינו במדריך שלנו על עימוד ותגיות rel=next ו-rel=prev.