为twentytwelve子主题添加pagenavi分页导航

为twentytwelve子主题添加pagenavi分页导航，修改function.php文件即可，添加一段代码即可实现。

本站使用的是基于twentytwelve主题修改的子主题。twentytwelve简洁，而且自适应页面，什么设备都完美支持。但是twentytwelve主题也有缺陷，除了不支持IE6以外，就是页面的分页导航不咋的。

分页导航可以使用pagenavi插件，但是启用pagenavi插件以后，twentytwelve并不认，还是使用自己的导航。好吧，那就修改一下。

网上有许多教程，但多是修改index.php文件。这个可以，但是在搜索页面如果想使用pagenavi也要添加。

其实只在function.php添加代码即可，但是网上多是修改的twentytwelve主题function.php，对于twentytwelve子主题并不适应。反正我用了并不行。

因此，如何修改twentytwelve子主题的function.php实现pagenavi，我的方法如下。

修改function.php

在子主题中function.php添加以下代码

/**
* Display new navigation to next/previous pages when applicable
*/
function twentytwelve_content_nav( $nav_id ) {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) : ?>
<?php
?>
<?php /* Is the Pagenavi plugin active ? */ ?>
<?php if( function_exists('wp_pagenavi') ) : ?>
<?php wp_pagenavi(); ?>
<?php return true; //Get out of here! ?>
<?php endif; ?>
<nav id="<?php echo $nav_id; ?>">
<h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
<div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentytwelve' ) ); ?></div>
</nav><!-- #nav-above -->
<?php endif;
}
endif; // twentytwelve_content_nav

注意：如果子主题的function.php未添加其它任何代码，要在上述代码之前加上<?php，具体如下：

1. <?php


2. /**


3. * Display new navigation to next/previous pages when applicable


4. */


5. function twentytwelve_content_nav( $nav_id ) {


6. global $wp_query;


7. if ( $wp_query->max_num_pages > 1 ) : ?>


8. <?php


9. ?>


10. <?php /* Is the Pagenavi plugin active ? */ ?>


11. <?php if( function_exists('wp_pagenavi') ) : ?>


12. <?php wp_pagenavi(); ?>


13. <?php return true; //Get out of here! ?>


14. <?php endif; ?>


15. <nav id="<?php echo $nav_id; ?>">


16. <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>


17. <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>


18. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentytwelve' ) ); ?></div>


19. </nav><!-- #nav-above -->


20. <?php endif;


21. }


22. endif; // twentytwelve_content_nav

美化pagenavi

当然也有插件针对pagenavi样式修改的，其实没必要，自己动手美化一下即可。

在twentytwelve子主题的style.css中添加如下代码即可。

1. /* Using !important to override PageNavi CSS */


2. .wp-pagenavi {


3. padding:0.5em 0;


4. }


5. .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span {


6. color:#444!important;


7. font-style:normal;


8. margin:0 .375em !important;


9. padding:0.5em 0.75em !important;


10. border-radius: 7px;


11. -moz-border-radius: 7px;


12. -webkit-border-radius: 7px;


13. }


14. .wp-pagenavi a:visited {


15. border:1px solid #ccc !important;


16. color:#666 !important;


17. }


18. .wp-pagenavi a:hover {


19. border:1px solid #4285F4 !important;


20. color:#666 !important;


21. }


22. .wp-pagenavi a:active {


23. border:1px solid #666 !important;


24. color:#666 !important;


25. }


26. .wp-pagenavi span.pages {


27. display: none;


28. }


29. .wp-pagenavi span.current {


30. background: #42A2CE !important;


31. border: none !important;


32. color:#fff!important;


33. font-style:normal;


34. margin:0 .375em !important;


35. padding:0.5em !important;


36. border-radius: 7px;


37. -moz-border-radius: 7px;


38. -webkit-border-radius: 7px;


39. }


40. .wp-pagenavi span.extend {


41. background-color:#FFF;


42. border:1px solid #42A2CE;


43. color:#000;


44. margin:2px;


45. padding:2px 4px;


46. }

具体样式如本站所示。

为twentythirteen子主题添加pagenavi分页导航的方法可以看这里：为twentythirteen子主题添加pagenavi分页导航