WordPress4分页 博客分类: PHP phppaginationwordpress分页
程序员文章站
2024-03-13 23:17:46
...
入门菜鸟,希望能给和菜鸟相互取暖
最近在改造wordpress,自己写代码做了个分页
1,在自己主题下的style.css中增加如下css
2, 将如下代码copy到自己theme的functions.php中,
3,在需要的地方引用即可,形如
至于如何获得$total_pages, $current_page,我用的WP query,形如
最近在改造wordpress,自己写代码做了个分页
1,在自己主题下的style.css中增加如下css
.pagination { width: auto; display: block; text-align: center; margin: 30px; } .pagination a { background-color: #eee; text-decoration: none; color: #999; font-size: 18px; padding: 0px 10px; line-height: 32px; height: 32px; margin: 0px 0.5px; } .pagination a.page-btn { width: 40px; } .pagination a.page-btn .icon-prev { position: absolute; width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-left: none; border-right: 6px solid #999; left: 50%; margin-left: -3px; top: 50%; margin-top: -6px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pagination a.page-btn .icon-next { position: absolute; width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-right: none; border-left: 6px solid #999; left: 50%; margin-left: -3px; top: 50%; margin-top: -6px; -webkit-transition: all 0.1s ease; transition: all 0.1s ease; } .pagination a:hover { color: #fff; } .pagination a:hover .icon-prev { width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-left: none; border-right: 6px solid #fff; } .pagination a:hover .icon-next { width: 0px; height: 0px; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-right: none; border-left: 6px solid #fff; } .pagination span { display: inline-block; margin: 0px 1px; color: #adadad; font-size: 18px; }
2, 将如下代码copy到自己theme的functions.php中,
/** /** * @param int $total_pages * 总页数 * @param int $paged * 当前页数从1计 * @param int $visible_count * 可见的页码数,接受自定义,如果自定义小于1或者大于max,置为max * *@author shandaiwang */ define('MAX_VISIBLE_PAGE_COUNT', 20); function pagination($total_pages = 0, $current_page = 1, $visible_count = MAX_VISIBLE_PAGE_COUNT){ // 入参适配 if($total_pages <= 1) { return; } if($current_page <= 0) { $current_page = 1; } if($visible_count <= 0 || $visible_count > MAX_VISIBLE_PAGE_COUNT) { $visible_count = MAX_VISIBLE_PAGE_COUNT; } // 入参适配结束 // 页码列表适配 $range = ceil(($visible_count + 1) / 2); $start = $current_page - $range + 1; if($start < 1) { $start = 1; } $end = $start + $visible_count - 1; if ($end > $total_pages) { $end = $total_pages; // 向前反推,尽可能使显示个数为$visible_count $start = $end - $visible_count + 1; if($start < 1) { $start = 1; } } // 页码列表适配结束 // 渲染 echo "<div class='pagination'>"; if($current_page > 1) { // pre echo('<a href="'.get_pagenum_link($current_page - 1).'" class="common-btn page-btn"> <div class="icon-prev"></div></a>'); } if($start != 1) { // first[...] echo('<a href="'.get_pagenum_link(1).'" class="common-btn">1</a>'); if ($start != 2) { echo('<span>...</span>'); } } for ($i=$start; $i <= $end; $i++){ // list if ($i == $current_page) { echo('<a href="javascript:;" class="common-btn active">'.$i.'</a>'); } else { echo('<a href="'.get_pagenum_link($i).'" class="common-btn">'.$i.'</a>'); } } if($end < $total_pages) { //[...]last if ($end + 1 < $total_pages) { echo('<span>...</span>'); } echo('<a href="'.get_pagenum_link($total_pages).'" class="common-btn">'.$total_pages.'</a>'); } if($current_page < $total_pages) { // next echo('<a href="'.get_pagenum_link($current_page + 1).'" class="common-btn page-btn"> <div class="icon-next"></div></a>'); } echo "</div>\n"; }
3,在需要的地方引用即可,形如
至于如何获得$total_pages, $current_page,我用的WP query,形如
推荐阅读
-
WordPress4分页 博客分类: PHP phppaginationwordpress分页
-
Thinkphp使用分页 博客分类: php thinkphppaginationthinkphp分页
-
【Python真的很强大】使用yield优雅抓取网页分页数据 博客分类: python yield
-
【Python真的很强大】使用yield优雅抓取网页分页数据 博客分类: python yield
-
compass 分页查询 博客分类: Compass Lucene XML
-
compass 分页查询 博客分类: Compass Lucene XML
-
js 实现内容分页显示 博客分类: javascript CSSHTML
-
js 实现内容分页显示 博客分类: javascript CSSHTML
-
jsp制作分页效果(假分页) 博客分类: Web技术
-
如何抓取Js动态生成数据且以滚动页面方式分页的网页 博客分类: HtmlExtractor Js动态生成滚动页面滚动分页网络爬虫数据抓取