אם אתם מחפשים דרך להוסיף עימוד ממוספר לתבנית וורדפרס שלכם במקום ברירת המחדל של ״פוסטים הבאים״ ו״פוסטים קודמים״, אתם יכולים לעשות זאת בקלות באמצעות התוסף שכנראה רובכם מכירים ושמו 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 בפוסט הבא.
עובד לכם? יש רעיונות לשיפור? שתפו אותנו בתגובות שכולנו נוכל ללמוד… 🙂
הפונקציה עבדה אצלי בלולאה של וורדפרס – אבל כשרציתי לעשות בלולאה עם WP QUREY אז היתה שגיאה… זה הציג מספרי עמודים, אבל אחרי עמוד 3 זה עשה לי משום מה בעיות (והיו מספיק פוסטים).
מוזר, אבל לא הצלחתי להבין מה הסיפור.
בכל מקרה תודה!!!
היי, לפי מה שאני יודע, אם רוצים לעשות custom query בעמוד הראשי, זה לא עובד.
הבנתי שצריך לשנות את paged ל page… תוכל בבקשה לתת על זה הסבר?
תודה רבה ואחלה מדריך