WordPress和Sweetcron的全站AJAX（续）

By19.Published on二月 13, 2009 11:11. 415 Views .
很差差一般好非常好 (暂时没有评分)
Loading ... Loading ...

全站点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);

更改成：

1
2
3
4
5
6
7
8

$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最上面和最下面：

1
2
3
4
5

<!--最上面-->
<?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) {后面加一句

1

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

用法：

1
2
3
4

<?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了。

本文来自： http://www.ll19.com/sweetcron_wordpress_ajax.html

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

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

  1. cchyhs cchyhs 说： ( Has commented 1 times in LL19.com )
    十二月 7, 2011 15:56 于 3:56 下午

    仔细读过博主的文章，觉得非常值得学习！

    回复 |  回复并邮件
  2. dyj369 dyj369 说： ( Has commented 1 times in LL19.com )
    十一月 30, 2011 15:29 于 3:29 下午

    更新ID为main_container的div，很实用以后经常来博主治疗学习，

    回复 |  回复并邮件
  3. yang yang 说： ( Has commented 4 times in LL19.com )
    十月 18, 2011 23:17 于 11:17 下午

    敢不敢讲的在详细一点，文件放在那里。在哪里调用，写什么代码？

    回复 |  回复并邮件
    • 19. 19. 说： ( Admin commented )
      十月 19, 2011 8:38 于 8:38 上午

      不内涵的说两篇文章已经写的相当详细了。
      @yang:

      回复 |  回复并邮件
  4. 千与琥珀 千与琥珀 说： ( Has commented 1 times in LL19.com )
    二月 26, 2011 22:28 于 10:28 下午

    刚才认真研究了博主的这两篇文章，感觉很费解，对于一些不了解WP目录结构的人几乎根本无法入手。
    博主能不能详细的解释一下怎样来调用这三个文件，例如应在那里那个文件写入那些代码？

    回复 |  回复并邮件

回复分页(Comments pages):     « 早前评论   

文章回复(Leave a reply):

注意: 评论者允许直接点击留言人下方的“回复并邮件”按钮将自己回复的评论邮件通知另外评论者。点击“回复”按钮则只回复不发邮件。