Some print.
Some print.
标签归档: Sweetcron

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);

更改成：

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

(全文 …)

{ 33 comments } { Tags: , , }