php主题怎么增加导航页,为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  _e( 'Post navigation', 'twentytwelve' ); ?>

<?php  next_posts_link( __( ' ← Older posts', 'twentytwelve' ) ); ?>

<?php  previous_posts_link( __( 'Newer posts  →', 'twentytwelve' ) ); ?>

}

endif; // twentytwelve_content_nav

注意：如果子主题的function.php未添加其它任何代码，要在上述代码之前加上<?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  _e( 'Post navigation', 'twentytwelve' ); ?>

<?php  next_posts_link( __( ' ← Older posts', 'twentytwelve' ) ); ?>

<?php  previous_posts_link( __( 'Newer posts  →', 'twentytwelve' ) ); ?>

}

endif; // twentytwelve_content_nav

美化pagenavi

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

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

/* Using !important to override PageNavi CSS */

.wp-pagenavi {

padding:0.5em 0;

}

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

color:#444!important;

font-style:normal;

margin:0 .375em !important;

padding:0.5em 0.75em !important;

border-radius: 7px;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

}

.wp-pagenavi a:visited {

border:1px solid #ccc !important;

color:#666 !important;

}

.wp-pagenavi a:hover {

border:1px solid #4285F4 !important;

color:#666 !important;

}

.wp-pagenavi a:active {

border:1px solid #666 !important;

color:#666 !important;

}

.wp-pagenavi span.pages {

display: none;

}

.wp-pagenavi span.current {

background: #42A2CE !important;

border: none !important;

color:#fff!important;

font-style:normal;

margin:0 .375em !important;

padding:0.5em !important;

border-radius: 7px;

-moz-border-radius: 7px;

-webkit-border-radius: 7px;

}

.wp-pagenavi span.extend {

background-color:#FFF;

border:1px solid #42A2CE;

color:#000;

margin:2px;

padding:2px 4px;

}

具体样式如本站所示。

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

0

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

转载时请注明出处及相应链接：为twentytwelve子主题添加pagenavi分页导航 | 科研动力 + https://www.howsci.com/twentytwelve-child-theme-add-pagenavi.html

相关文章