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

1 星2 星3 星4 星5 星 (觉着不错就给个五星呗)
  • A+
所属分类:WordPress

为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添加以下代码

  1. /**
  2. * Display new navigation to next/previous pages when applicable
  3. */
  4. function twentytwelve_content_nav( $nav_id ) {
  5. global $wp_query;
  6. if ( $wp_query->max_num_pages > 1 ) : ?>
  7. <?php
  8. ?>
  9. <?php /* Is the Pagenavi plugin active ? */ ?>
  10. <?php if( function_exists('wp_pagenavi') ) : ?>
  11. <?php wp_pagenavi(); ?>
  12. <?php return true; //Get out of here! ?>
  13. <?php endif; ?>
  14. <nav id="<?php echo $nav_id; ?>">
  15. <h3 class="assistive-text"><?php _e( 'Post navigation', 'twentytwelve' ); ?></h3>
  16. <div class="nav-previous"><?php next_posts_link( __( '<span>&larr;</span> Older posts', 'twentytwelve' ) ); ?></div>
  17. <div class="nav-next"><?php previous_posts_link( __( 'Newer posts <span>&rarr;</span>', 'twentytwelve' ) ); ?></div>
  18. </nav><!-- #nav-above -->
  19. <?php endif;
  20. }
  21. 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. displaynone;
  28. }
  29. .wp-pagenavi span.current {
  30. background#42A2CE !important;
  31. bordernone !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分页导航

weinxin
公众号
科研动力微信公众号,欢迎关注!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:4   其中:访客  3   博主  1

    • avatar 科研动力 9

      开头要有< ?php,结尾要有?>

      • avatar 科研动力网友 9

        按博主的添加分页结果Parse error: syntax error, unexpected ‘navigation’’ (T_STRING) in D:\xampp\htdocs\wordpress\wp-content\themes\twentytwelve-child\functions.php on line 21这个错误,望指教

        • avatar 麻烦 1

          按博主的添加分页结果Parse error: syntax error, unexpected ‘navigation’’ (T_STRING) in D:\xampp\htdocs\wordpress\wp-content\themes\twentytwelve-child\functions.php on line 21这个错误,望指教