WordPress 单篇文章分页样式、AJAX 文章分页及 SEO

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

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

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;    
}

最终效果如下图:
WordPress 单篇文章分页样式、AJAX 文章分页及 SEO

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

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="<?php the_permalink(); ?>" />

「点点赞赏,手留余香」

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

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

2016-03-08

2015-11-23

发表评论

表情 格式 贴图 链接 私密 签到
Dragon主题购买阿里云特价云服务器1核2G低至86元,N4共享型服务器3年仅需799元腾讯云特价云服务器1核2G 88元/年 2核4G3M688元/3年,更有千元代金券礼包免费领!
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more