WordPress单篇文章分页样式、Ajax文章分页及SEO – WordPress教程

2017年5月29日WordPress教程评论612818字阅读9分23秒阅读模式

通常在以下场景时,我们会选择给一篇文章添加分页,如:文章源自王小优-https://www.wangxiaoyou.com/4750.html

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

用Ajax方式加载文章分页的话,可以无刷新浏览外,还可以直接请求改变的URL后也可以正常浏览。会在一定程度上提升用户体验,而且看起来也很酷!下面王小优就分3个方面来讲讲是怎么实现的。文章源自王小优-https://www.wangxiaoyou.com/4750.html

一、实现单篇文章分页

WordPress有自带文章分页功能,使用方法是在文章文本模式中,需要分页的位置加入以下代码:文章源自王小优-https://www.wangxiaoyou.com/4750.html

<!--nextpage-->

这样就可以实现分页了。文章源自王小优-https://www.wangxiaoyou.com/4750.html

但是,想要启用这个功能还需要在主题的single.php文件中的<?php the_content(); ?>后面加入以下代码时才能实现:文章源自王小优-https://www.wangxiaoyou.com/4750.html

<?php wp_link_pages(); ?>

然后为分页导航配上美化的样式:文章源自王小优-https://www.wangxiaoyou.com/4750.html

将上面的代码:文章源自王小优-https://www.wangxiaoyou.com/4750.html

<?php wp_link_pages(); ?>

替换为:文章源自王小优-https://www.wangxiaoyou.com/4750.html

<?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代码:文章源自王小优-https://www.wangxiaoyou.com/4750.html

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

最终效果如下图:文章源自王小优-https://www.wangxiaoyou.com/4750.html

WordPress单篇文章分页样式、Ajax文章分页及SEO – WordPress教程文章源自王小优-https://www.wangxiaoyou.com/4750.html

二、实现Ajax文章分页

大致代码如下,具体根据主题不同可以略微有差别,编辑index.php文件,改成如下结构:文章源自王小优-https://www.wangxiaoyou.com/4750.html

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

在引用jQuery库的前提下使用以下JS代码实现:文章源自王小优-https://www.wangxiaoyou.com/4750.html

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是翻页标签。文章源自王小优-https://www.wangxiaoyou.com/4750.html

三、评论分页和文章分页的SEO

至此,实现Ajax单篇文章分页了,接下来也说点SEO,我对SEO也是比较了解的,评论分页和文章分页导致的权重分散,所以要进行设置。文章源自王小优-https://www.wangxiaoyou.com/4750.html

我的解决方法是:在代码<?php if ( is_singular() ){?>后面加上权重导向主页面的代码:文章源自王小优-https://www.wangxiaoyou.com/4750.html

<link rel="canonical" href="<?php the_permalink(); ?>" />

大家快去试试吧!如果有疑问可以在本文进行评论交流哦~文章源自王小优-https://www.wangxiaoyou.com/4750.html

  • 我的微信
  • 微信扫一扫
  • weinxin
  • 我的微信公众号
  • 微信扫一扫
  • weinxin
王小优
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: