Previous post và next post trong genesis

next-post-previous-postChứ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

next-post-previous-post 1

Chúng ta sẽ sử dụng code sau để chèn vào file functions.php trong child theme:

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:

.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

next-post-previous-post 2
Chúng ta sẽ sử dụng code sau để chèn vào file functions.php trong child theme:

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

.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

next and previous category

Hiển thị bài viết cùng chuyên mục với bài viết hiện tại.

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>', '&lt;&lt; Previous Post in Category', TRUE);
    next_post_link('<span class="single-post-nav next-post-link">%link</span>', 'Next Post in Category &gt;&gt;', TRUE);
}

Bổ sung một số lớp CSS:

.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à:

<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.

Đánh giá bài viết này

Chú ý - WordPress Hosting 1$/tháng - miễn phí tên miền

Bạn có biết GoDaddy đang có khuyến mãi WordPress hosting chỉ còn 1$/tháng kèm theo một tên miền .COM .NET .ORG miễn phí. Hãy đăng ký ngay để tiết kiệm chi phí nhất nhé.
Xem ngay

ĐĂNG KÝ NHẬN TIN QUA EMAIL

Nếu thấy bài viết trên blog có ích cho bạn, hãy đăng ký nhận tin qua email để cập nhật bài viết mới nhanh nhất và thỉnh thoảng nhận quà bất ngờ!

Comments

  1. MrBlessings says:

    Chào bác, mới đây em mới bắt đầu dùng genesis, và bắt đầu bằng theme eleven40, khá ưng ý, nhưng em gặp một lỗi mà em ko biết giải quyết thế nào? Theme của em hình như mặc định là hiển thị toàn bộ bài ở trang chủ. Vì ko muốn thế lên em làm 1 page Home sau đó Reading Settings. Như vậy bài mới nhất sẽ ko hiện cả bài nữa. Nhưng có lỗi là khi em chuyển sang …/page/2/ thì nó ko load đc page 2 mà vẫn y như trang đầu. Bác có thể giúp đỡ em trong tình huống này ko ạ. Thanks bác {c26}

    • Bác cho e xem thử cái code bác dùng ở page home

      • MrBlessings says:

        Em dùng home page dùng Template Blog của genesis thôi
        em thấy trong theme có cái home.PHP ko biết có phải nó ko ?
        1,
        ‘feature_image_size’ => 0,
        ‘feature_image_class’ => ‘alignleft post-image’,
        ‘feature_content_limit’ => 0,
        ‘grid_image_size’ => ‘grid-thumbnail’,
        ‘grid_image_class’ => ‘alignnone’,
        ‘grid_content_limit’ => 250,
        ‘more’ => __( ‘[Continue reading]’, ‘genesis’ ),
        ) );
        } else {
        genesis_standard_loop();
        }

        }

        genesis();

  2. MrBlessings says:

    em dùng Home page là page có Template là Blog của genesis thôi, ko biết là code ở file nào
    Code ở Home. php

     1,
    			'feature_image_size' =&gt; 0,
    			'feature_image_class' =&gt; 'alignleft post-image',
    			'feature_content_limit' =&gt; 0,
    			'grid_image_size'		=&gt; 'grid-thumbnail',
    			'grid_image_class'		=&gt; 'alignnone',
    			'grid_content_limit' =&gt; 250,
    			'more' =&gt; __( '[Continue reading]', 'genesis' ),
    		) );
    	} else {
    		genesis_standard_loop();
    	}
    
    }
    
    genesis();

    Code ở functions.php là

    &lt;?php
    /** Start the engine */
    require_once( get_template_directory() . &#039;/lib/init.php&#039; );
    
    /** Child theme (do not remove) */
    define( &#039;CHILD_THEME_NAME&#039;, &#039;eleven40 theme&#039; );
    define( &#039;CHILD_THEME_URL&#039;, &#039;http://www.studiopress.com/themes/eleven40&#039; );
    
    /** Add Viewport meta tag for mobile browsers */
    add_action( &#039;genesis_meta&#039;, &#039;eleven40_viewport_meta_tag&#039; );
    function eleven40_viewport_meta_tag() {
        echo &#039;';
    }
    
    /** Add new image sizes */
    add_image_size( 'grid-thumbnail', 270, 100, TRUE );
    
    /** Create additional color style options */
    add_theme_support( 'genesis-style-selector', array(
    	'eleven40-blue'		=&gt; 'Blue',
    	'eleven40-green'	=&gt; 'Green',
    	'eleven40-red'		=&gt; 'Red'
    ) );
    
    /** Add support for structural wraps */
    add_theme_support( 'genesis-structural-wraps', array(
    	'header',
    	'nav',
    	'subnav',
    	'inner',
    	'footer-widgets',
    	'footer'
    ) );
    
    /** Add the page title section */
    add_action( 'genesis_before_content_sidebar_wrap', 'eleven40_page_title' );
    function eleven40_page_title() {
       genesis_widget_area( 'page-title', array(
           'before' =&gt; '',
       ) );
    }
    
    /** Add the after post section */
    add_action( 'genesis_after_post_content', 'eleven40_after_post' );
    function eleven40_after_post() {
    	if ( ! is_singular( 'post' ) )
    	return;
    	genesis_widget_area( 'after-post', array(
    		'before' =&gt; '',
    	) );
    }
    
    /** Add 3-column footer widgets */
    add_theme_support( 'genesis-footer-widgets', 3 );
    
    /** Register widget areas */
    genesis_register_sidebar( array(
    	'id'				=&gt; 'page-title',
    	'name'			=&gt; __( 'Page Title', 'eleven40' ),
    	'description'	=&gt; __( 'This is the page title section.', 'eleven40' ),
    ) );
    genesis_register_sidebar( array(
    	'id'				=&gt; 'after-post',
    	'name'			=&gt; __( 'After Post', 'eleven40' ),
    	'description'	=&gt; __( 'This is the after post section.', 'eleven40' ),
    ) );
  3. Mr. Tuti says:

    Previous và next post theo tag thì làm thế nào vậy bạn?

  4. Thank bác nhé bài viết hay quá

  5. Hoàng Kim Chi says:

    Bài viết rất hay và có ích cho mình, thank bạn rất nhiều

Gửi bình luận

Lưu ý: Không sử dụng keyword để thay cho tên của bạn, hãy sử dụng tên thật. Cảm ơn bạn đã tham gia bình luận trên blog!