wordpress 添加JS,css文件,实现AJAX效果

张映 发表于 2010-03-21

分类目录: wordpress

标签:, , ,

一,我的问题

我想在wordpress里面添加一个JS文件,实现在一个ajax效果,我在网上找了一个插件,AJAX wordpress发现在不好用,就没有用了。下面我就以本BLOG里面的,收藏和分享为例子。说一下我是怎么添加果文件的。

二,添加JS文件

1),在你要加载JS的那个php文件里面加上这个

<?php wp_enqueue_script('jquery'); // 这个是加载,jquery 。must be here, bofore wp_head! ?>

<?php add_action('wp_head', 'jquery_extend'); //这个就是我要加的JS文件 ?>

2),在wp-content/themes/你的主题/functions.php里面加个一个方法

function jquery_extend() {
$wp = get_bloginfo('wpurl');
$url = $wp."/wp-includes/js/jquery/jquery.extend.js";
print('
<script type="text/javascript" src="'.$url.'"></script>
');
}

这样在wordpress里面就成功加载了JS了,你可以在firefox里面看一下源码,就可以看到了。如果不加这个FUNCTION的话会报错的。其实你可以在wordpress里面找到这种用法的,如果你有时间的话,

wp-content/themes/default/functions.php里面有一个function kubrick_theme_page_head() 照这个方法抄就行了

三,实现在ajax效果

1)我在我要实现的AJAX效果的那个页面里面添加

<script type="text/javascript">
jQuery(".akst_share_link").each(function(){
jQuery(this).showneedthing();
});
</script>

注意:这里面不能用$这个符号,这个jquery不识别,为什么呢?因为wordpress自带的jquery.js最后带了这句话jQuery.noConflict();

以下是jquery.extend.js的内容,很简单

(function($){

$.fn.extend({
showneedthing:function(){

var self = this;

var init = function() {
$(self).click(function() {
$('#akst_social').remove();
array =($(self).attr("needth")).split(',');

ask_id = "akst_link_"+array[0];

$.post("***/***/connect.php",{url:array[1],title:array[2]},function(data){
$(data).prependTo($('#'+ask_id).parent());

left = document.getElementById(ask_id).offsetLeft-70;
top =document.getElementById(ask_id).offsetTop+document.getElementById(ask_id).clientHeight-240;

$('#akst_social').css({left:left,top:top}).show();
$('#akst_social').find('a').css("color","blue");
});
});
}
init();
}
});

})(jQuery);

在这里我为什么能用$这个符号呢,因为(function($)我已经重新定义,或者叫负值了一下,你不用$你可用%这个也可以。依个人习惯来设



转载请注明
作者:海底苍鹰
地址:http://blog.51yip.com/wordpress/464.html