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

2015/11/04
1 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 51 vote, average: 5.00 out of 5 (1 票 ）
 4

为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. 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分页导航

  • 本博客文章如未特别说明，皆为本站原创，默认采用署名-相同方式共享 4.0 国际协议

    • 相关文章

    《为twentytwelve子主题添加pagenavi分页导航》有4个想法

    2. 科研动力网友

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

      回复 ↓
    3. 麻烦

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

      回复 ↓

    发表回复

    您的邮箱地址不会被公开。 必填项已用 * 标注