入门菜鸟,希望能给和菜鸟相互取暖
最近在改造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,形如
- 大小: 7.8 KB
- 大小: 23.7 KB
分享到:
相关推荐
`WordPress分页导航插件`是解决这个问题的一种高效工具,它能优雅地将长内容列表分成多个页面,提升用户体验。在本文中,我们将深入探讨WordPress分页导航插件的功能、作用,以及如何使用`wp-pagenavi`这个具体的...
在WordPress开发过程中,分页是一项非常重要的功能,它能够帮助网站更好地管理大量的文章或帖子,提升用户体验,并减轻服务器负担。本文将深入解析一个用于WordPress的PHP分页代码示例,旨在帮助开发者理解其工作...
尤其是新添加的 wordpress主题 页面,虽然文字不多,可是每一款wordpress主题都要配上个小图片,才能让读者有个大概的了解。从而决定是否要进行演示。那么将近三十款wordpress主题加在一起,页面就非常的长。所以...
本文实例讲述了Wordpress实现单篇文章分页显示的方法。分享给大家供大家参考。具体分析如下: 很多朋友都知道Wordpress文章分页一般都会使用插件来实现的,下面我们来介绍无插件实现WordPress文章分页显示的具体方法....
**Wordpress分页导航插件wp-pagenavi详解** 在WordPress网站开发中,分页功能是必不可少的一部分,尤其是在内容丰富的博客或文章列表中。`wp-pagenavi`是一款非常流行的WordPress分页导航插件,它提供了更为优雅和...
4. **功能特性**:该插件提供多种分页样式,如数字链接、箭头指示以及“跳转至”输入框,用户可以直接输入页码跳转。此外,`wp-pagenavi`还支持AJAX分页,即用户无需刷新页面即可切换页面,提升用户体验。 5. **...
效果: ... $maxButtonCount = 9; //显示的最多链接数目 if (!is_single()) { if(!is_category()) { preg_match(‘#FROM\s(.*)\sORDER BY#siU’, $request, $matches); } else { preg_match(‘#FROM\s(.*)\sGR
在WordPress中,分页通常用于在列表页或归档页显示多篇文章,但在某些情况下,可能需要在单篇文章内部实现分页,以便将长篇文章分隔成多个部分,提高用户体验。以下是如何在不依赖插件的情况下,通过编辑WordPress...
为了解决这个问题,WordPress提供了多种插件来实现文章分页,其中之一就是"wp-pagenavi"插件。这款插件为用户提供了一种优雅且用户友好的翻页解决方案,使得访客可以轻松浏览长文章列表或 archives,提高网站的导航...
4. `paginate_comments_links`: 用于显示评论分页或返回评论分页的HTML。 这些函数可以用于实现简单的“上一页”和“下一页”链接,或者更复杂的导航式分页。 在实际应用中,通常会涉及到在页面中设置一个评论导航...
在WordPress中,分类、标签和分页是网站内容组织和导航的重要组成部分。然而,当用户尝试访问这些链接时,有时可能会遇到404错误,即“未找到”页面。这通常意味着WordPress无法正确识别或处理请求的URL,导致服务器...
wp_link_pages()是wordpress文章内页分页函数,在文章过长的时候我们通常需要对文章内容进行分页。实例介绍可查看:wordpress文章太长添加内页分页功能实例应用可查看:wordpress后台操作详细教程 【函数用法】 ...
搜索引擎对于静态文件和目录结构有其识别偏好,而WordPress这种动态生成的分页链接可能会导致搜索引擎的解析困难,从而影响文章页面的收录。 在这个问题的背景下,作者分享了一种通过自定义伪静态规则的方法,使得...
但是装完插件后发现,首页分页URL地址是index**.html这种格式,和我原来hexo博客分页URL不符(hexo博客首页分页格式是page/数字/ 这样的分类url格式,wordpress也是),于是手动改成page/页数/ 这种常见的url分页...
**wp-ajax-pagination: 一种高效的WordPress AJAX分页插件** 在WordPress开发中,分页是不可或缺的功能,尤其对于内容丰富的网站来说,它可以帮助用户轻松浏览大量文章或页面。`wp-ajax-pagination`是一款专为...
4. WordPress主体模板PHP代码 - `(); ?>`:用于显示当前日志或页面的完整内容。 - `(have_posts()): ?>`:用于检查是否有日志可以显示,如果有,则执行循环体内的代码。 - `(have_posts()): the_post(); ?>`:...
4. **数据库查询分页**:如果文章存储在数据库中,可以利用SQL的LIMIT和OFFSET关键字进行数据分页。这种方法适用于动态加载更多内容的场景,比如无限滚动页面。 5. **内容管理系统(CMS)插件**:许多流行的CMS系统...
### WordPress开发手册精要 #### 一、主题开发概述 **WordPress** 是一款基于 PHP 开发的开源博客系统,它不仅适用于个人博客,还可以通过扩展功能实现企业网站、社区、论坛甚至在线销售平台等多种用途。本手册以 ...