Chức năng previous post và next post ở trang single post trong một số theme đã được tích hợp sẵn, nhưng một số theme thì không, chẳng hạn như đối với Genesis theme. Hôm nay mình sẽ hướng dẫn các bạn chèn thêm chức năng này vào Genesis child themes, giống như các bạn có thể thấy trên blog của mình.
Previous post và next post dưới khung comments
Chúng ta sẽ sử dụng code sau để chèn vào file functions.php trong child theme:
|
1 2 3 4 5 6 7 8 9 |
add_action( 'genesis_after_post', 'rayno_next_prev_post_nav_duoi' ); function rayno_next_prev_post_nav_duoi() { if ( is_single() ) { echo '<div class="loop-nav-1">'; previous_post_link( '<div class="previous-1">PREVIOUS POST: %link</div>', '%title' ); next_post_link( '<div class="next-1">NEXT POST: %link</div>', '%title' ); echo '</div><!-- .loop-nav -->'; } } |
Bổ sung một số lớp css vào file style.css để cho đẹp hơn:
|
1 2 3 4 5 6 7 8 9 |
.loop-nav-1 { border-top: 1px solid #e3e3e3; padding: 15px 0 15px 20px; line-height: 25px; } .previous-1 { } .next-1 { } |
Previous và next post cuối bài viết
Chúng ta sẽ sử dụng code sau để chèn vào file functions.php trong child theme:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_action( 'genesis_before_comments', 'rayno_next_prev_post_nav_tren' ); function rayno_next_prev_post_nav_tren() { if ( is_single() ) { $args = array( 'img1' => "'/wp-content/themes/copyblogger/images/previoushover.png'", 'img2' => "'/wp-content/themes/copyblogger/images/previous.png'", 'img3' => "'/wp-content/themes/copyblogger/images/nexthover.png'", 'img4' => "'/wp-content/themes/copyblogger/images/next.png'" ); echo '<div class="loop-nav-2">'; previous_post('%', '<div class="previous-2"><img onmouseover="pre.src='.$args['img1'].'" onmouseout="pre.src='.$args['img2'].'" src="/wp-content/themes/copyblogger/images/previous.png" name="pre" /></div>', 'no'); next_post('%', '<div class="next-2"><img onmouseover="next.src='.$args['img3'].'" onmouseout="next.src='.$args['img4'].'" src="/wp-content/themes/copyblogger/images/next.png" name="next" /></div> ', 'no'); echo '<div style="clear: both"></div></div><!-- .loop-nav -->'; } } |
Các bạn chú ý sửa lại các đường link ảnh trong code trên đến ảnh của bạn. Và tương tự chúng ta cũng sẽ bổ sung một số lớp css vào file style.css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.loop-nav-2 { margin: 10px 5px 0 5px; } .previous-2 { height: 32px; width: 44px; float:left; } .next-2 { height: 32px; width: 44px; float: right; } |
Previous và next post theo category
Hiển thị bài viết cùng chuyên mục với bài viết hiện tại.
|
1 2 3 4 5 6 |
add_action( 'genesis_entry_footer', 'category_post_nav', 5 ); function category_post_nav() { if( is_single() ) previous_post_link('<span class="single-post-nav previous-post-link">%link</span>', '<< Previous Post in Category', TRUE); next_post_link('<span class="single-post-nav next-post-link">%link</span>', 'Next Post in Category >>', TRUE); } |
Bổ sung một số lớp CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.previous-post-link { float: left; } .next-post-link { float: right; text-align: right; } .single-post-nav { background-color: #F5F5F5; border: 1px solid #6ec6ea; color: #fff; cursor: pointer; font-family: 'Oswald', arial, serif; font-size: 12px; font-weight: normal; padding: 10px; text-decoration: none; } |
Đối với các themes thông thường, các bạn có thể tìm thấy code previous/next post trong file single.php. Ví dụ như đối với theme twentytwelve thì sẽ là:
|
1 2 3 4 5 |
<nav class="nav-single"> <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3> <span class="nav-previous"><?php previous_post_link( '%link', '<span class="meta-nav">' . _x( '←', 'Previous post link', 'twentytwelve' ) . '</span> %title' ); ?></span> <span class="nav-next"><?php next_post_link( '%link', '%title <span class="meta-nav">' . _x( '→', 'Next post link', 'twentytwelve' ) . '</span>' ); ?></span> </nav><!-- .nav-single --> |
Các bạn có thể chỉnh sửa lại code trên cho phù hợp với blog của bạn.
