因为篇幅太长,页面加载速度太慢,降低了用户体验。所以一定要想办法把长文章分页。经过搜索,我们发现有一个非常好的代码解决方案。个人使用后,确实有效,分享到这里。如果你有兴趣,不要错过。
最近发现有不少文章配上图片,写得比较长。这样会导致页面加载速度过慢,不利于用户体验。尤其是新添加的wordpress主题页面,虽然文字不多,可是每一款wordpress主题都要配上个小图片,才能让读者有个大概的了解。从而决定是否要进行演示。那么将近三十款wordpress主题加在一起,页面就非常的长。所以必须要找个方法把长文章进行分页。在谷歌上搜索了一下,发现有个代码解决的方法非常好。经过亲自使用,确实有效,所以在这里分享出来。
一、添加分页按钮
如果你不怕麻烦的话,可以在写文章的时候,切换到HTML模式,插入下面这行代码,就不需要添加这个分页按钮了。
复制代码代码如下:
<p><!--nextpage--></p>
其实还是在编辑器上添加个分页按钮省事多了。以前也看到过通过修改代码来实在这个功能,不过我忘了。因为我一直用wordpress编辑器增强插件:TinyMCEAdvanced。这个按钮早就有了,这里也不多说了。
2012-06-17补充:给WordPress3.4文本编辑器添加分页按钮
由于我的“非诚勿扰女嘉宾资料”fc.guansoft.com网站也用了这篇文章中介绍的长文章分页代码。但那个站没有安装TinyMCEAdvanced插件。所以还是上网找了个比较简单的方法在wordpress编辑器中添加这个分页按钮。方法如下:
找到/wp-includes/class-wp-editor.php文件。查找‘wp_more’,标签:(在366行处)
复制代码代码如下:
1$mce_buttons=apply_filters('mce_buttons',array('bold','italic','strikethrough','¦','bullist','numlist','blockquote','¦','justifyleft','justifycenter','justifyright','¦','link','unlink',<SPANstyle="TEXT-DECORATION:underline"><STRONG><SPANstyle="COLOR:#ff0000;TEXT-DECORATION:underline">'wp_more',</SPAN></STRONG></SPAN>'¦','spellchecker','fullscreen','wp_adv'),$editor_id);
在‘wp_more’后添加‘wp_page’,(含单引号和逗号)。修改后代码如下:
复制代码代码如下:
$mce_buttons=apply_filters('mce_buttons',array('bold','italic','strikethrough','¦','bullist','numlist','blockquote','¦','justifyleft','justifycenter','justifyright','¦','link','unlink',<SPANstyle="TEXT-DECORATION:underline"><STRONG><SPANstyle="COLOR:#ff0000;TEXT-DECORATION:underline">'wp_more','wp_page',</SPAN></STRONG></SPAN>'¦','spellchecker','fullscreen','wp_adv'),$editor_id);
此时,你就可以在后台写文章及编辑文章页面的文本编辑器上看到一个跟more标签按钮相似的图标。
同样,在代码编辑器也会相应出现一个nextpage按钮。
二、添加分页功能
wordpress其实自带分页功能的函数,只是没有被调用。所以我们在编辑文章的时候,明明插入了分页符,却看不到什么变化。要怎么样才能让调用这个函数呢?方法很简单,在主题模板文件single.php中找到类似下面这行代码。
复制代码代码如下:
<?phpthe_content();?>
在这行代码后面添加如下所示的代码,即可实现简单的分页功能。
复制代码代码如下:
<?phpwp_link_pages();?>
三、美化分页效果
虽然经过上面两步,已经可以实现长文章的分页功能了。但是不是那么好看,下面我们就把它美化一下,让分页效果更完美。
首先,把上一步的分页功能代码替换为以下代码。
复制代码代码如下:
<?phpwp_link_pages(array('before'=>'<divclass="fenye">分页阅读:','after'=>'','next_or_number'=>'next','previouspagelink'=>'上一页','nextpagelink'=>""));?><?phpwp_link_pages(array('before'=>'','after'=>'','next_or_number'=>'number','link_before'=>'<span>','link_after'=>'</span>'));?><?phpwp_link_pages(array('before'=>'','after'=>'</div>','next_or_number'=>'next','previouspagelink'=>'','nextpagelink'=>"下一页"));?>
接着,再对CSS样式进行美化。
直接把下面这些代码,放到主题文件style.css最后面。
复制代码代码如下:
/**页面分页**/
.fenye{text-align:center;margin:0pxauto10px;font-weight:bold}
.fenyespan{background-color:#DDDDDD;color:#fff;font-weight:bold;margin:0px1px;padding:1px6px;display:inline-block;text-decoration:none;border:1pxsolid#e0e0e0;}
.fenyea{text-decoration:none;}
.fenyeaspan{background-color:#F6F6E8;font-weight:normal;color:#000;text-decoration:none;}
.fenyea:hoverspan{background-color:#DDDDDD;color:#fff;}
最后显示效果如下图所示:
四、解决文章分页后标题重复对SEO的影响
由于长文章分页后,这几个页面的标题是一样的。会不会对SEO带来不利的影响,我也不清楚。还是避免一下吧!可以通过给wordpress文章分页添加页码,解决标题重复的问题。我们可以把改成如下所示的效果:
简单实用的wordpress长文章分页代码—冠朔wordpress插件
简单实用的wordpress长文章分页代码-第2页—冠朔wordpress插件
简单实用的wordpress长文章分页代码-第3页—冠朔wordpress插件
在主题模板文件header.php找到类似<title>……</title>代码,将其替换为如下代码。
复制代码代码如下:
<?phpif(is_single()){?><title><?phpechotrim(wp_title('',0));?><?phpif(get_query_var('page')){echo'-第';echoget_query_var('page');echo'页';}?>—<?phpbloginfo('name');?></title><?php}?>
五、避免Feed被分页
实现分页功能后,会导致Feed页面的文章被分页,一般只显示第一页的内容。
解决方法:打开wp-includes目录下的query.php文件,找到下面这行代码(大概在3578行)
复制代码代码如下:
if(strpos($content,'<!–nextpage–>')){
把它修改为下面这行代码。
复制代码代码如下:
if(strpos($content,'<!--nextpage-->')&&(!is_feed())){
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)