龙笑天龙笑天  2015-11-20 18:21 网络 隐藏边栏 |   3 条评论  619 
文章评分 20 次,平均分 4.9
导语: 通常在以下场景时,我们会选择给一篇文章添加分页,如:a.文章过于长,让人滚动半天滚轮还到不了底;b.发布带图片的新闻资讯,或带标题和描述的图片文章时;c.等等...用 ajax 方式加载文章分页的话,可以无刷新浏览外,还可以直接请求改变的 URL 后也可以正常浏览。会在一定程度上提升用户体验,而且看起来也很酷!下面就分 2 个方面来讲怎么实现的。

通常在以下场景时,我们会选择给一篇文章添加分页,如:

a.文章过于长,让人滚动半天滚轮还到不了底;
b.发布带图片的新闻资讯,或带标题和描述的图片文章时;
c.等等...

ajax方式加载文章分页的话,可以无刷新浏览外,还可以直接请求改变的 URL 后也可以正常浏览。会在一定程度上提升用户体验,而且看起来也很酷!下面就分 2 个方面来讲怎么实现的。

1 实现单篇文章分页

wordpress 有自带文章分页功能,使用方法是:
在文章中加入

<!--nextpage-->

就可以实现分页了;

但是,想要启用这个功能还需要在主题的 single.php 中的<?php the_content(); ?>后面加入下面的代码时才能实现:

<?php wp_link_pages(); ?>

然后为分页导航配上美化的样式:
将上述的<?php wp_link_pages(); ?>替换为:

<?php
    wp_link_pages(array('before' => '<div class="pagenavi hentry" >分页阅读:', 'after' => '', 'next_or_number' => 'next', 'previouspagelink' => '<span class="page-numbers page-previous"></span>', 'nextpagelink' => ""));
    wp_link_pages(array('before' => '', 'after' => '', 'next_or_number' => 'number', 'link_before' =>'<span class="page-numbers">', 'link_after'=>'</span>'));
    wp_link_pages(array('before' => '', 'after' => '</div>', 'next_or_number' => 'next', 'previouspagelink' => '', 'nextpagelink' => '<span class="page-numbers page-next"></span>'));
?>

然后随便在哪里插入如下 CSS 代码:

.page-numbers {
    display: inline-block;
    line-height: 48px;
    padding: 0 14px;
    font-size: 17px;
}
 
.page-previous,
.page-next {
    font-size: 17px;
    font-family: 'FontAwesome';
    height: 48px;
    line-height: 48px;
    position: relative;
    width: 48px;
}
 
.page-next::before {
    content: "\f105";
}
 
.page-previous::before {
    content: "\f104";
}
 
.pagenavi {
    text-align:center; padding:6px;
}
 
.pagenavi > a {
    color: #A0A0A0;    
}

最终效果如下图:

也可看看本站的样式:点我

2 实现 AJAX 文章分页

首先感谢@mufeng提供的技术支持。
大致代码如下,具体根据主题不同可以略微有差别,编辑 index.php,改成如下结构:

<?php
if(isset($_GET["action"]) && $_GET["action"] == "ajax_postsss"){
nocache_headers();?>
.....文章内容....
<?php }else{
    get_header() ;
?>
.....文章内容....
<?php get_sidebar() ;?>
<?php get_footer() ;?>
<?php }?>

在引用 JQ 库的前提下使用以下 JS 代码实现:

jQuery(document).ready(function(a) {
    var n = null, H = false, i = document.title, t, h = window.opera ? document.compatMode == "CSS1Compat" ? a("html") :a("body") :a("html,body");
    if (window.history && window.history.pushState) {
        a(document).on("click", ".content-page a", function(b) {
            b.preventDefault();
            if (n == null) {
                t = {
                    url:document.location.href,
                    title:document.title,
                    html:a("#content").html(),
                    top:h.scrollTop()
                };
            } else {
                n.abort();
            }
            t.top = h.scrollTop();
            var q = a(this).attr("href").replace("?action=ajax_postsss", "");
            a(".content-page").text("\u6587\u7ae0\u52a0\u8f7d\u4e2d\x2e\x2e\x2e");
            n = a.ajax({
                url:q + "?action=ajax_postsss",                
                success:function(v) {
                    H = true;
                    var state = {
                        url:q,
                        title:i,
                        html:v
                    };
                    history.pushState(state, i, q);                    
                    document.title = i;
                    h.animate({
                        scrollTop: 0
                    },
                    0);
                    a("#content").html(v);
                }
            });
            return false;
        });
        window.addEventListener("popstate", function(i) {
            if (n == null) {
                return;
            } else {
                if (i && i.state) {
                    H = true;
                    document.title = i.state.title;
                    a("#content").html(i.state.html);
                } else {
                    H = false;
                    document.title = t.title;
                    a("#content").html(t.html);
                    h.animate({
                        scrollTop: t.top
                    },
                    0)
                }
            }
        });
    }
});

其中:#content 标签要包含文章列表和翻页导航,.content-page a 是翻页标签。

3 评论分页和文章分页的 SEO

至此,实现 ajax 单篇文章分页了,接下来也说点 SEO,我对 SEO 基本不懂,只是搜索的时候发现很多文章都提到了:评论分页和文章分页导致的权重分散。
我的解决方法是:在代码<?php if ( is_singular() ){?>后面加上权重导向主页面的代码:

<link rel="canonical" href="https://www.ilxtx.com/redirect/ed46dyUqQWjSTxhRsxkqkSQnD8sSHPs4Nxw9EohyC8D8TqsoCywShqhxHWEWB9B8EuCWsxD8Hyj4HzBWNYB8ERDqwYjPj8EbESUnHWEWCRhnDRanHWTSwzs8suTzUSDzT96zwokbCqQnERQ9UzsRNRHYauC" />

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文转载自网络,本文观点不代表龙笑天下立场,版权归原作者所有,欢迎分享本文,转载请保留出处!

龙笑天
龙笑天 关注:32    粉丝:36 最后编辑于:2019-06-11
互助分享,互联网本该如此!

发表评论

表情 贴图 链接 私密 格式 签到
  1. 我是小小鸟 来自天朝的朋友 谷歌浏览器 74.0.3729.169 Windows 7 广东省河源市 联通

    文章表述有点错误
    "将上述的<?php the_content(); ?>替换为"
    应该修改为
    "将上述的替换为<?php wp_link_pages(); ?>"

    板凳 2019-06-11 12:00
    0 0 回复
  2. 我爱动感单车网
    我爱动感单车网 评论达人 LV.3 来自天朝的朋友 谷歌浏览器 45.0.2454.101 Windows XP 广西桂林市 电信

    还好,我所使用的主题有这个功能,虽然样式不是很好看和很方便用户翻页,聊胜于无吧!

    沙发 2016-08-28 23:37
    0 0 回复
扫一扫二维码分享