zoukankan      html  css  js  c++  java
  • WordPress 整合Bootstrap制作分页代码

    1.整合Bootstrap分页代码

    * 因为wordpress默认仅仅提供简单分页, 所以要实现数字分页,需要自定义函数,wordpress可以结合bootstrap制作分页,bootstrap提供了分页的样式,可以减少对样式的书写。

    1.复制下面的代码到functions.php函数中

    /**
    * 数字分页函数
    * @Param int $range            数字分页的宽度
    * @Return string|empty        输出分页的HTML代码        
    */
    function bootstrap_pagenavi( $range = 4 ) {
        global $paged,$wp_query;
        if ( !$max_page ) {
            $max_page = $wp_query->max_num_pages;
        }
        if( $max_page >1 ) {
            echo "<div class='pagination'>"; 
            if( !$paged ){
                $paged = 1;
            }
            if( $paged != 1 ) {
                echo "<li><a href='".get_pagenum_link(1) ."' title='跳转到首页'>首页</a></li>";
            }
            echo '<li>';previous_posts_link('上一页');echo '</li>';
    
            if ( $max_page >$range ) {
                if( $paged <$range ) {
                    for( $i = 1; $i <= ($range +1); $i++ ) {
                        echo "<li";  if($i==$paged)echo " class='active'";
                       echo " ><a href='".get_pagenum_link($i) ."'";
                       
                        echo ">$i</a></li>";
                    }
                }elseif($paged >= ($max_page -ceil(($range/2)))){
                    for($i = $max_page -$range;$i <= $max_page;$i++){
                        echo "<li";  if($i==$paged)echo " class='active'";
                       echo " ><a href='".get_pagenum_link($i) ."'";
                       
                        echo ">$i</a></li>";
                        }
                    }elseif($paged >= $range &&$paged <($max_page -ceil(($range/2)))){
                        for($i = ($paged -ceil($range/2));$i <= ($paged +ceil(($range/2)));$i++){
                            echo "<li";  if($i==$paged)echo " class='active'";
                       echo " ><a href='".get_pagenum_link($i) ."'";
                       
                        echo ">$i</a></li>";
                        }
                    }
                }else{
                    for($i = 1;$i <= $max_page;$i++){
                        echo "<li";  if($i==$paged)echo " class='active'";
                       echo " ><a href='".get_pagenum_link($i) ."'";
                       
                        echo ">$i</a></li>";
                    }
                }
           echo '<li>'; next_posts_link('下一页');echo '</li>';
            if($paged != $max_page){
                echo "<li><a href='".get_pagenum_link($max_page) ."'  title='跳转到最后一页'>尾页</a></li>";
            }
            echo '<span>共['.$max_page.']页</span>';
            echo "</div>
    ";  
        }
    }

    2.在category.php或者归档页面archive.php或者其他模板文件中都可以。

    <?php bootstrap_pagenavi();?>

    最终效果:

    如果把函数中的div类. pagination改成.pager,则效果图如下:

    如果没有使用bootstrap框架,可以复制下面css文件实现样式

    /*------------------
        分页部分的CSS
    ------------------*/
    .pagination{    
        height: 25px;
        line-height: 25px;
        _background: #F9F9F9;
        padding: 2px 5px;
        margin: 20px 4px;
        _border: solid 1px #ccc;
        _text-align: center;
    }
    
    .pagination a{
        padding:4px 6px 4px 6px;
        margin:0 2px 0 2px;
        border:1px solid #aaa;
        text-decoration:none;
        color:#333;
    }
    
    .pagination a.active{    
        background:#ff6f3d;    
        color:#fff;
    }
    
    .pagination a:hover{
        background:#ff6f3d;
        color:#fff;
    }
  • 相关阅读:
    安装lnmp 时如何修改数据库数据存储地址及默认访问地址
    ubuntu 设置root用户密码并实现root用户登录
    解决ubuntu 远程连接问题
    linux 搭建FTP服务器
    PHP 根据ip获取对应的实际地址
    如何发布自己的composer包
    使用composer安装composer包报Your requirements could not be resolved to an installable set of packages
    laravel 框架配置404等异常页面
    使用Xshell登录linux服务器报WARNING! The remote SSH server rejected X11 forwarding request
    IoTSharp 已支持国产松果时序数据库PinusDB
  • 原文地址:https://www.cnblogs.com/cheryshi/p/7779223.html
Copyright © 2011-2022 走看看