- 19~Blog |- WordPress和Sweetcron的全站AJAX（续）

Search the Site

WordPress和Sweetcron的全站AJAX（续）

By19.Published on2009-02-13.

全站点AJAX续.

首先声明这样做完全不会影响SEO。以前的一篇WP的相关文章http://www.ll19.com/jquery-wordpress-ajax.html，这次算是补充，写了一个较通用的JQuery插件来实现，我的Lifestream也用了类似的方法全AJAX，有兴趣可以去测试一下。这里需要用到下面3个文件：

| 19_ajax.css | 19_ajax.js | ajax_tooltips_bg.gif |

其中JS就是这个JQuery插件，其它两个是相关的css和背景的gif，引入站点后具体用法我举个例子比如在页面的最下加这句：

1	jQuery("p.date a,li.tag_list a,p#pagination a").ajax_19("div#main_container");

熟悉JQuery的人应该一看就懂，这里的作用是将所有class是date的p元素、class是tag_list的li元素、id是pagination的p元素下的链接点击的时候得到这个链接的内容后显示在ID为main_container的div里，而不会去打开此链接。这样既不影响SEO又实现了AJAX。

拿Lifestream来举例，用过的人都清楚这套系统简单说就是一个RSS聚合器，官方站点Sweetcron，同样我也是用它来聚合我在各个站点留下的各种记录，有兴趣的人可以去安装一套。之后要让它全AJAX，和WP中用到的方法类似，不同的是它在控制显示页面的时候不是在主题包中，首先需要修改system\application\libraries\sweetcron.php， 两个函数get_single_item_page（）和get_items_page（）的三个地方：

1
2
3

	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/_header', $data);
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/single', $data);
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/_footer', $data);

更改成：

$glll = $_POST["glll"];
if ($glll != "ajax") {
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/_header', $data);
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/single', $data);
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/_footer', $data);
} else {
	$this->CI->load->view('themes/' . $this->CI->config->item('theme') . '/single', $data);
}

和WP中起到的作用一样，从搜索引擎或者其他链接进来是不会post一个值为ajax的参数的，所以我们在自己页面点击的时候就可以传这个进来判断他不去重复加载header和footer了。之后修改主题的_sidebar.php最上面和最下面：

<!--最上面-->
<?php $glll = $_POST["glll"]; if ($glll != "ajax") { ?>
 
<!--最下面-->
<?php } ?>

来判断不去重复加载sidebar，之后在_footer.php处就是页面的最后加入：

1
2
3

<script type="text/javascript">
jQuery("p.date a,ul.tag_list li a,p#pagination a,p#breadcrumb a,ul.item_tag_list li a,p.site_info a,p.activity_image_text a,div.item_inner a.activity_image,p.youku_title a,p.youtube_title a").ajax_19("#main_container");
</script>

则就实现了全站AJAX了，这里传入的链接都是Lifestream这个站点输出的链接，这样做的效果就是每次都只加载内容部分然后更新ID为main_container的div。有可能每个站点输出的链接都不同所以这些细节还是要自己对照着自己的站点修改，不建议直接传入jQuery(“a”)，毕竟很多链接比如外部链接并不需要ajax，所以你自己要清楚哪部分要去AJAX，哪部分不需要。这里的19_ajax.js还是要做一个简单的修改，在success : function(resource) {后面加一句

jQuery("#main_container p.date a,#main_container ul.tag_list li a,#main_container p#pagination a,#main_container p#breadcrumb a,#main_container ul.item_tag_list li a,#main_container p.site_info a,#main_container p.activity_image_text a,#main_container div.item_inner a.activity_image,#main_container p.youku_title a,#main_container p.youtube_title a").ajax_19("#main_container");

作用是在AJAX后让更改的这部分内容再次调用ajax_19，否则这部分内容就直接打开链接了。这句和上面提到的_footer.php页面最后处加入的那句JS基本是相对应的，直接复制过来在每个元素前面加个#main_container就行。

顺便提供一个优酷的Sweetcron插件，效果就和youtube一样：youku_com.php

用法：

<?php elseif ($item->get_feed_domain() == 'youku.com'): ?>
<?php echo $item->get_video()?>
<p class="youku_title"><a href="<?php echo $item->get_permalink()?>/<?php echo $item->get_name()?>"><?php echo $item->get_title()?></a></p>
<p><?php echo word_limiter(strip_tags($item->get_content()), 8)?></p>

再简单说下这个19_ajax.js的插件，所有传入的链接如果打开方式是_blank都不会去AJAX，如果有锚点则AJAX之后会自动移动到这个锚点的位置，无锚点则自动移动到顶端。如果加载时间过长左上角会出现提示“点击LOADING直接打开链接”（AJAX时的链接其实就在左上角的LOADING上）。对照以前文章的WP全AJAXhttp://www.ll19.com/jquery-wordpress-ajax.html在引入这个插件后就很简单了，比如我在index.php下面写：

1
2
3

<script type="text/javascript">
jQuery(".more-link,.wp-pagenavi a").ajax_19("#ajaxPost");
</script>

则当点阅读更多、页数这些链接时就实现AJAX了。

{ Tags: ajax, Sweetcron, WordPress }

(查看之前文章) » WP的TAGS墙~ | (查看之后文章) » jConsole在tomcat下的配置 |

本篇日志相关文章：

这篇文章发布于 2009年02月13日，星期五，11:11 上午，归类于 Diary。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

21 Responses to “ WordPress和Sweetcron的全站AJAX（续） ”

Hintay 说： ( Has commented 1 times in LL19.com )

2010-07-31于1:01 下午

博主请帮忙。
我按照你说的怎么不行？
完全没有AJAX效果
我用的主题是tweetsheep
请博主指点！！写出详细的教程吧。。。
弄不好啊，太烦躁了

回复 | 回复并邮件
mcooo 说： ( Has commented 40 times in LL19.com )

2010-05-8于9:31 下午

好文！支持，我要试试才行，不过如何加上前进或者后退，没有这个体验会很差啊！

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2010-05-9于10:30 下午
  
  关于AJAX浏览历史记录的方法请看这篇文章：http://www.ll19.com/sweetcron_wordpress_ajax.html
  
  本站已实现。
  
  @mcooo:
  
  回复 | 回复并邮件
shamas 说： ( Has commented 2 times in LL19.com )

2010-04-29于6:56 下午

今天我也去装了个，这个用什么方法可以调用到博客侧边栏啊

回复 | 回复并邮件
- 19. 说： ( Has commented 322 times in LL19.com )
  
  2010-04-30于10:24 上午
  
  不明白 = =，侧边栏调用都一样的。
  
  回复 | 回复并邮件
  - shamas 说： ( Has commented 2 times in LL19.com )
    
    2010-05-11于1:27 下午
    
    @19.:就是把sweetcron调用到wp的侧边栏，要怎么做呢
    
    回复 | 回复并邮件
    - 19. 说： ( Admin commented )
      
      2010-05-11于1:34 下午
      
      其实就是整合RSS，我做了一个FLASH来读取显示，你可以在后台直接读取显示或者JS读取。
      
      我感觉WP应该有类似的插件比如twitter的插件，把里面本身应该是twitter rss的地址改成sweetcron的 rss就行了。
      
      回复 | 回复并邮件
FAN 说： ( Has commented 3 times in LL19.com )

2010-04-23于2:41 下午

测试下好烦躁啊好难弄

回复 | 回复并邮件
zEUS. 说： ( Has commented 2 times in LL19.com )

2009-11-5于12:51 下午

在本地测试了一下，通过 ajax 打开的页面实际上是显示在原页面的 ajaxPost 这个容器里，结果就造成这个新开的页面中锚点都失效了… 由于我原 WP 主题里使用过一些 jQuery 的插件，所以通过锚点来调用的方法都失效了…
想请问下这个问题如何解决呢？

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-11-6于1:08 下午
  
  @zEUS.:
  旧页面被替换自然锚点也没有了，我理解的你的情况是不是函数中要用到的锚点名写死了，而不是传入进去的。
  
  我觉得是不是应该这样做，就是把JS函数也输出在ajaxPost中，这样替换的时候JS函数也跟着替换。或者把这个函数写的通用一些，通过传入参数来控制，应该就不会出现锚点对应不上的情况了。
  
  回复 | 回复并邮件
zEUS. 说： ( Has commented 2 times in LL19.com )

2009-11-5于11:17 上午

好文！多谢博主分享！
学习中…

回复 | 回复并邮件
Kay 说： ( Has commented 1 times in LL19.com )

2009-07-1于1:00 上午

引入上面的三个文件以及JQUERY
如何引入？总共要引入四个文件么？

图片不知道怎么引入
是这样引入么？放在header的之间吗？

BODY的结尾处加那句是不是在footer的之后加？

望赐教！！！

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-07-1于6:16 下午
  
  @Kay:
  这篇文章也许对你有帮助：
  http://www.ll19.com/jquery-wordpress-ajax.html
  至于图片，你应该看下CSS中如何引入的,background: url(images/ajax_tooltips_bg.gif) no-repeat。
  
  回复 | 回复并邮件
Free 说： ( Has commented 1 times in LL19.com )

2009-04-8于5:52 上午

提供的css还有js以及那个图片都不能下载了…怎么办呢？

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-04-8于9:38 上午
  
  @Free:
  链接更正了~前阵子修改SVN路径忘了这了 – 。-
  
  回复 | 回复并邮件
shamas 说： ( Has commented 13 times in LL19.com )

2009-02-24于12:37 下午

具体要怎么操作啊，下载那三个文件传到哪儿，要加些什么代码

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-02-24于2:03 下午
  
  @shamas:在WP中简单有这几步，我举个例子，模板中在HEADER的末尾加入：
  1
  <div id="ajaxPost" style="margin:0; padding:0;">
  和FOOT的最上面加入
  1
  </div>
  之后引入上面的三个文件以及JQUERY（JQUERY下载地址：http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.pack.js），然后BODY的结尾处加那句
  1 2 3
  <script type="text/javascript"> jQuery("h3.entry-title a,div.nav-previous a").ajax_19("#ajaxPost"); </script>
  就OK了，这样你在首页点击文章标题和上下页（比如? Older Entries）的时候就实现AJAX了，其他需要AJAX的链接可以照着加在BODY的结尾那句中，shamas我看你的是K2的模板不知道会不会有问题，你可以先试试。
  
  回复 | 回复并邮件
  - shamas 说： ( Has commented 13 times in LL19.com )
    
    2009-02-25于11:38 上午
    
    我想jax主要是想用你这个音乐插件呵，因果不ajax的话，一翻页音乐就停了
    
    回复 | 回复并邮件
shamas 说： ( Has commented 13 times in LL19.com )

2009-02-24于12:32 下午

我想尝试下啊

回复 | 回复并邮件
纪小年说： ( Has commented 28 times in LL19.com )

2009-02-15于9:47 上午

意思是说，只要把那3个文件放在根目录下面，再写上那一句话就可以了，是不？

回复 | 回复并邮件
- 19. 说： ( Admin commented )
  
  2009-02-15于2:38 下午
  
  @纪小年:恩~简单说来就是这样的~别忘了JQUERY本身的包和WP里加那个DIV和得到参数判断那句就行了~
  其实写这文章的目的也是想让大家装个SWEETCRON用用~
  
  回复 | 回复并邮件