WordPress 动态加载文章内容
所谓的动态加载文章内容就是像 NeoEase 首页一样, 在点击展开按钮之后, 才去加载相应的文章. 其实这个效果是模仿 163 UED Team 的, 我没看过他们的 JavaScript 代码, 可能实现方法不一样, 但是原理应该是相似的. 下面我会就其优缺点和设计思路, 和实现方法说说我的理解.
为什么要动态加载文章?
1. 快速向访客展示页面
文章很容是包含大量文字和多媒体资源 (如: 图片, 视频, 音乐), 加载这些内容需要占用很多的时间. 如果你的页面上存在大量文章, 当访客发现页面久久没有加载完成就感到不耐烦. 这是动态加载文章的主要目的.
2. 让文章列表化
使页面上的文章成为一个列表, 减少页面的空间占用, 访客可以方便的移动到页面下方, 提高旧文章被点击的几率. 并且你可以在页面上放置更多的文章而不用担心页面过长.
为什么不动态加载文章?
1. 对搜索引擎不友好
搜索引擎优化的目的是将有价值的东西尽量多的向搜索爬虫展示, 包括最新的文章内容. 只有标题的文章让爬虫只知道这个文章而不知其文章侧重, 使用 JavaScript 输出的文章内容未必可以被抓取和分析. 这些对 SEO 来说都是不好的.
后来发现, 如果你的网站有固定的文章类型, 没有毕业在文章列表页显示太多文章内容, 表示影响不大.
2. 增加了请求次数
虽然将文章折叠起来, 我们一般还是会想办法向访客显示前面的几篇文章. 这样对用户是友好的, 但是要增加请求的次数和数据库访问的次数.
后来我有选择地显示部分文章内容, 而且不是通过异步加载的方式, 也就是说, 这个问题是可以通过简单的修改解决掉的.
3. 一些插件失效
因为需要自定义方法抓取文章, 如果不添加特殊处理, 很可能令部分 WordPress 插件失效.
可以通过特殊处理解决掉, 以后文章中会提及.
动态加载文章的设计思路
1. 找到页面上所有文章
为每个文章添加一个展开/折叠按钮
2. 向文章添加展开/折叠按钮
点击按钮, 如果文章内容没有加载, 加载并展开文章内容.
点击按钮, 如果文章内容已经加载, 则展开/折叠文章内容.
3. 加载文章内容
将文章的 id 发往后台, 在数据库中找到相应的文章内容并进行格式化, 返回响应显示在页面上.
JavaScript 处理代码分析
1. 找到页面上所有文章
// 在文档加载完毕的时候遍历所有匹配文章的元素 jQuery(document).ready(function(){ jQuery('div.post').each(function() { // 如果元素相应位置是文章 ID var id = jQuery(this).attr('id'); if(/^post\-[0-9]+$/.test(id)) { // 则为每个文章添加一个展开/折叠按钮 ... } }); });
2. 向文章添加展开/折叠按钮
toggle.toggle(function() { // 展开 // 如果文章内容为空, 加载文章内容 if(jQuery('#' + id + ' .content').text() == '') { ... } // 显示文章内容, 并切换按钮样式 jQuery('#' + id + ' .content').slideDown(); jQuery(this).removeClass('collapse').addClass('expand'); }, function() { // 折叠 // 隐藏文章内容, 并切换按钮样式 jQuery('#' + id + ' .content').slideUp(); jQuery(this).removeClass('expand').addClass('collapse'); // 将按钮追加到文章标题前方 }).prependTo(jQuery('#' + id + ' h2'));
3. 加载文章内容
// 取得文章 ID var postId = id.slice(5); // 使用 AJAX 获取并处理文章内容 jQuery.ajax({ type: 'GET' ,url: '?action=load_post&id=' + postId ,cache: false ,dataType: 'html' ,contentType: 'application/json; charset=utf-8' // 取得返回内容之前显示加载信息 ,beforeSend: function(data){loadPostContent(id, '<p class="ajax-loader">Loading...</p>');} // 获取文章内容成功, 更新文章内容 ,success: function(data){loadPostContent(id, data);} // 获取文章内容失败, 显示出错提示 ,error: function(data){loadPostContent(id, '<p>Oops, failed to load data.</p>');} });
后台代码处理
这个功能的难点是前台的 JavaScript 处理, 以 ID 获取文章内容的代码可以参考 wp-includes/post-template.php 的 get_the_content 方法. 后来我写了个文章, 专门讲解如何处理后台响应, 可以参考这篇文章: 《WordPress AJAX 加载文章内容 - 后台处理》
备注
这是一篇不完整的教程, 因为我觉得这个功能还没完成. 在我的计划中, 还有针对搜索引擎优化部分和其他的一些页面效果, 但由于最近比较忙没有时间完善起来.
出此文的用意是提供一种解题思路, 引导各位去思考如何实现类似的效果. (这也是为什么我没有详细的说明 get_the_content 如何修改的原因)
最近发现已经有几个人实现了这样的效果, 并在给了网友们很多帮助, 我很高兴. 但某人的一些留言过于煽情 (广告成分太高), 我屏蔽掉了, 特此说明.
Very usefull... the article and Google Translate in the bar
Thnak you.
@冰剑
它的也是到主页了啊,没有返回对应的文章内容
@坏小子
你可以使用分页啊, 就是编辑的时候添加 <!--nextpage-->标签就行了
@坏小子
你可以使用分页啊, 就是编辑的时候添加 标签就行了
如何实现文章的自定折叠呢，我不是指文章的列表页，指单个文章内容页面。内容过多，想通过到多少个字符了，自动显示一个类似于链接的按钮（查看全部内容），一点就弹出全部的内容，我看到很多网站现在都有这种了，一般都是“查看全部”……而且页面也不刷新 看起来有点硬邦邦的，不知道是怎么弄的 求老大赐教
@ClayMore
可以的 效果基本一致 哈哈 你可以过来看看效果。
@麦子
这里也是这种情况......
@xiangzi
不能在Inove上进行修改
大师，近期正在研究你的这个主题，我对于php、javascript、ajax是门外汉，
只懂少许的css+html，最近完全仰仗于仿的你主题慢慢入门这些东西 呵呵
测试的时候发现我的searchbox怎么也不能像你那样定位（没试过绝对定位），
我看了所有的都跟你的一致了，
甚至是你的@显示内容我都不修改script.js就能照搬，唯独search不能定位，请指教！
还有一个问题就是 如果留言的时候 不输入website的话，再次访问的时候会出现缺少对象的错误
其他的没有了 呵呵 在网站开饭这方面很崇拜你！
是ajxa吗？
在 inove 咋整呢 还是不会的哈 有会的能教我一下子不 我Q 8877545 谢了先
学习一下动态加载的技术，加强互动性
这个不错，回后也试试。
折腾了半天发现不会ajax url那里的东西 - -
请问，为什么我直接访问 http://www.xx.com/?action=load_post&id=123 就回到了我的首页？
而访问您的却是返回ID 123的日志内容？
很多主题的设计限制了你的这种方法。
什么时候发布一下方法.很需要这个 SEO无所谓
...or a plugin
I like your idea, but I didn`t got it working. I`ll wait for a future tutorial.
嘿嘿。。。来大大的站上扒代码咯～
这个功能很实用.
很强啊，我的现在还只是出了一个效果，但并不是Ajax加载的
再个想问一下你的留言列表的效果是怎么做的
同意，学会渔术的同时送几条鱼嘛
其实一个人想太多很累的…………
为啥不可兼得~
不錯，我的站就需要這種的，因為我是做影音站，雖然現在載入網站不是說很慢，但我會覺得快一點會比較好，我之前用Bo-blog的，它插入影音資源會自動折叠，想看的時候就打開，所以載入網站速度很快，轉來WordPress之後速度就變慢了。
@麦子
现在好像没问题了, 我用 Chrome 看你的页面一点问题都没有.
@Xi
这个不可能, 这不是常规功能.
@Bruce
你看一下 archives.php 文件是不是什么地方缺了结束标签?
@bucee
没这计划, 那样就不是一个主题了.
@maple's sky
各有各的做法, 我觉得文章翻页不应该做成 AJAX, 更不应该用 More AJAX. 个人意见而已.
@Dave Clark
Because there are too many links.
@KING.KO
两个文章列表, 情况更糟.
@foolant
折叠版是什么意思?
@foolant
没有, 用 jQuery 会衍射很多问题出来. 个人主题和发布出来的公用主题是不一样的, 我需要考虑大部分人的需求, 希望你可以理解.
不知道mg12有没有意在以后版本的iNove默认引入jQuery,或者可以在后台添加一个选项来使用这些效果.
本来我还在找这方面的资料,内容折叠以前还在玩163博客的时候印象不错, 但我想把评论和内容一起放到首页,然后折叠起来, 以我现在的水平,这几乎就是不可能的任务直到.........我遇到了Clockwork这个主题, 哇靠, 这不正是我想要的吗? 要是给它换上iNove这个美女的漂亮身体就绝对完美了........mg12老大有没有兴趣出一个折叠版的iNove呢?好期待吖......
理清思路,研究了一下,成功了.谢谢!
哈哈，应该做成CheckBox~~
我觉得只要做到列表显示文章摘要可以了，这样也不会影响加载速度
当然我觉得楼主的想法也好，如果要实现的话是否可以借用标题列表的思路
博主自己衡量自己的站点加载情况 自主选择2种模式中的一种，即摘要式样和楼主的这种半列表样式
http://drfernandorelizondo.com/ is the blog I am working on.
The top links do not align on the bar using Internet Explorer 8 on my Windows XP PC.
They are aligned using Google Chrome and Firefox.
Is there a fix for this?
渔术 鱼品 能都给吗？
…………咯咯
我选择的是鱼品，因为这个不是我主要的
呵呵，还是先渔术吧
我是用首页的 WP-PageNavi 结合的 AJAX 翻页.
这个改天改成 Read More... 的调用...
学习，但不采用。选择题我选了鱼品，很多人应该喜欢简单的生活，不想太累。