首页 > CMS应用 > 正文
wordpress长文章分页及标题优化

最近有遇到这样一个案例,基于wordpress的网站ip/pv比太低,于是就想到给一些长文章启用分页,wordpress是内置分页功能的,想要实现其实很非常简单,但是除了实现这个功能,还有一些其他的细节需要优化一下,依次写来。

1、wordpress文章分页标签,编辑文字时候切换至文本编辑模式,在需要分页的地方添加以下代码:

<!--nextpage-->

2、打开你当前主题的single.php文件找到文章输出标签,默认的标签是,部分主题会有自定义的部分,以the_content为准:

<?php the_content(); ?>

在此标签下添加:

<?php wp_link_pages('before=<div class="page-links">&after=</div>'); ?>

这样的话,分页功能就基本实现了,显示模式为列出每个分页的列表,这个时候的话,可以适当的优化一下,譬如添加上一页以及下一页翻页标签。

<?php
 wp_link_pages('before=<div id="fenye">&after=&next_or_number=next&previouspagelink=上一页&nextpagelink=&nbsp');
 wp_link_pages('before=&after=&next_or_number=number');
 wp_link_pages('before=&after=</div>&next_or_number=next&previouspagelink=&nbsp&nextpagelink=下一页');
 ?>

3、添加css控制,让分页显示更加美观:

.page-links{width:820px;display:inline-block;overflow:hidden;margin:30px 140px;background:#efefef;border-radius:3px;color:#333;text-transform:uppercase;letter-spacing:1px;font-size:.9em;padding:0 10px;}
.page-links a{display: inline-block;margin: 6px 6px 6px 0;padding: 0 5px;background: #404040;color: white;line-height: 22px;-moz-border-radius: 2px;-khtml-border-radius: 2px;-webkit-border-radius: 2px 2px 2px 2px;border-radius: 2px;}
.page-links a:hover{background:#ff0000;color:#fff}

4、分页标题优化,这个时候的话如果使用默认的标题标签,就是每个分页都显示相同的文章标题,可能对seo的话不太友好,这里的话给除第一页外的其他分页添加分页序号,将以下代码替换你的文章标题代码,显示格式为 文章标题+分页+网站名称:

<title><?php echo trim(wp_title('',0)); ?><?php if (get_query_var('page')) {    
echo ' -第';   
echo get_query_var('page');   
echo '页';   
}?> | <?php bloginfo('name'); ?></title>

以上,wordpress长文章分页的功能就可以全部实现了,有考虑到美观、使用习惯以及SEO等几个细节,去试试吧!

功能拓展:
手动添加分页标签的话,可能还比较麻烦,可以将以下代码添加到你当前主题的functions.php文件当中开启编辑器的分页标签,是可视界面的编辑器标签:

//开启编辑器分页标签
add_filter('mce_buttons','wysiwyg_editor');
 
function wysiwyg_editor($mce_buttons) {
    $pos = array_search('wp_more',$mce_buttons,true);
    if ($pos !== false) {
        $tmp_buttons = array_slice($mce_buttons, 0, $pos+1);
        $tmp_buttons[] = 'wp_page';
        $mce_buttons = array_merge($tmp_buttons, array_slice($mce_buttons, $pos+1));
    }
    return $mce_buttons;
}

文章评论

共有 1 条评论

  1. 煜婷

    鉴定完毕!

Top