WordPress的全站Ajax加载(四)完整代码篇(完结)

最近发现小伙伴们对ajax加载比较感兴趣,我之前也写了三篇转门介绍Ajax,自以为已经结束了 写的也比较清楚了。有点懒同学给我提了建议“得把读者都当成小白来看待,不然估计还看不懂”。此文接受建议而出,不过个人还是觉得小伙伴们不要太过把自己当小白,还是要多学会思考总结。本人以前也是小白一个 学的也不是编程。好了 废话不多说 直接进入主题。

这篇部分代码是本人正在使用的代码摘录而出,使用了html5的API来控制历史记录。代码为ajax的核心代码,没有ajax操作时候的一些特效(内容部分会有个简单的半透明渐变处理)。如果你的主题文章部分的DIV是 #content的话 应该可以直接拷过去就用。我说的是应该。

//全局变量
var ajaxBinded = false;
jQuery(document).ready(function() {
//下面三行你可以插入到你的jQuery(document).ready(function()里面,html5的历史记录API
if( history && history.pushState){
//为真就执行Ajaxopt函数
Ajaxopt();
}
})
//Ajaxopt函数
function Ajaxopt(){
//所有不为新窗口打开的链接
$('a[target!=_blank]').live('click',function(event){
var link = event.currentTarget;
var url = link.href;
if ( event.which > 1 || event.metaKey || event.ctrlKey )
return
if ( location.protocol !== link.protocol || location.host !== link.host ){
return;
}
if (link.hash && link.href.replace(link.hash, '') === location.href.replace(location.hash, ''))
return
if (url.indexOf("respond")>0||url.indexOf("/wp-admin/")>0||url.indexOf("wp-login.php")>0||url.indexOf("sitemap.xml")>0)
return
//以上条件语句均为判断链接时候需要ajax加载,下面2句为执行loadDate函数进行ajax操作。
loadData(url,true);
event.preventDefault();
});
}

//loadDate函数
function loadData(url,toPush){
//进行AJAX操作
$.ajax({
url:url,
data: "soz=ajax", //这个可以参考ajax全站加载系列文章第二篇。
dataType: "html",
type: "post",
beforeSend:function(jqXHR, settings){ //加载前操作 #content的DIV变化
$('#content').fadeTo(500,0.3);
}
,
complete:function(){ //加载后操作 #content的DIV变化
$('#content').fadeTo(200,1);
}
,
success:function(message){ //加载成功的操作
var msger = message;
var titl1 = $(message).find("h1:first").text();
var titl2 = $(message).find("h2:first").text();
if (titl1 == "") {
window.document.title = titl2 + " \u2502 SOZ";
}
else {
window.document.title = titl1 + " \u2502 SOZ";
}
//以上几句为组合新页面的标题。下面一句为插入ajax回来的内容到"#content"的DIV容器内。
$("#content").html(msger);
if(toPush){//使用html5的特有API 来改变历史记录数据。
window.history.pushState(null, titl1, url);
}
if(!ajaxBinded){//ajax后重新绑定新加载页面的ajax事件。
ajaxBinded = true;
$(window).bind('popstate', function(e){
loadData(location.href,false);
return false;
});
}
}
,
error: function() {//如果加载失败 报错内容
$("#content").html("

AJAX Error...

");
},
});
}

以上为所有ajax操作的必要步骤,小白同学可以仔细研究。高手可以路过 嗯

From: http://soz.im/wordpress-is-the-stations-ajax-to-load-four-complete-code-articles.html

WordPress的全站Ajax加载(三)改变地址栏

Ajax的优点就是通过局部刷新内容 提高用户体验,但是众所周知的的,ajax后地址栏是不会跟随改变的,URL会一直显示在你第一次进入网站的地址。这样的话 如果用户想分享地址的或者想保存地址的话 就不是当前文章所在的地址。还有返回前进不能使用,这样就造成了很尴尬的局面。这篇文章将介绍2种实现方法,2种各有优缺点。Let’s go~~第一种方法是通过Jquery的一个插件jQuery Address实现的。优点就是兼容低版本的浏览器,缺点呢就是它是通过“#”锚点的方法来改变地址的,如果你直接复制AJAX后带锚点的地址打开的话,浏览器会先加载锚点之前的页面,然后才会执行你写的JS,再通过判断AJAX加载锚点的地址。当然也不能算是个很明显的缺点了。

jQuery Address只有十几K的体积,算是很比较小的插件了。(下载)在AJAX执行之前我们来使用插件做操作地址栏。代码如下

var addresschanged=false;                                                   
$('a[rel="ajax"]').live("click",function(){ 所有rel=ajax的 A链接,
var a=$(this),href=a.attr("href");
_text=a.text();
c=a.attr("title");
if(c==""||c==null)c=_text;
deeplink=href.replace("http://"+location.hostname+"/",""); 设置deeplink
if(deeplink=="")deeplink="!"; 如果deeplink为空或带!
addresschanged=true;
$.address.value(deeplink);
window.document.title=c+;
return false
});
$.address.change(function(event){ 监控地址栏变化
var value=event.value,current=$("#content"),href;
if(value.indexOf("comment")!==1){
if(value=="/"){ 通过几步判断锚点是否需要加载
href=location.href;
}
else {
if(value=="/!"){href="http://"+location.hostname+"";
addresschanged=true
}
else{
href="http://"+location.hostname+""+value+"";
addresschanged=true
}
}
if(addresschanged==true){loadpage(href)} 如果addresschanged为真 执行loadpage函数(loadpage函数就是AJAX加载代码)
}
});

是不是很方便通过锚点变化里进行ajax操作,若是首页地址则变成 http://soz.im/#/! 如果其它页面则变成http://soz.im/#/xxxx.html。想了解更多详细问题可以去 http://www.asual.com/jquery/address/了解。

如果你不想使用jquery插件,并且你只准备到支持html5的浏览器使用的话 可以使用下面的方法。HTML5中引进了2个API:history.pushState, history.replaceState。可以通过pushState和replaceState接口操作浏览器历史,并且改变当前页面的URL。pushState是将指定的URL添加到浏览器历史里,replaceState是将指定的URL替换当前的URL。

var state = {
title: title,
url: options.url,
otherkey: othervalue
};
window.history.pushState(state, document.title, url);

调用方法如上。响应浏览器操作如下

window.addEventListener('popstate', function(e){
if (history.state){
var state = e.state;
//do something(state.url, state.title);
}
}, false);

这样就可以结合ajax和pushState完美的进行无刷新浏览了。

到这里wordpress的全站AJAX加载主要问题已经结束。剩下的应该都是一些根据自己的问题来操作的一些小问题。如果你对JS比较熟悉的话 应该是很简单的问题 当然对我写的这些也会这样认为。想更好的了解这些问题 还是多研究下js和jquery 让你更得心应手。

From: http://soz.im/wordpress-full-ajax-loaded-3-change-of-address-bar.html

WordPress的全站Ajax加载(二)异步加载

上文。通过寥寥几条评论 还是能看出大家比较喜欢这种局部刷新的效果的。今天将带大家进入异步加载的核心部分。另外由于个人不是从事IT相关的工作 有时候比较忙,更新文章不是很勤快,请谅解 呵呵。我也只是上学的时候学过一点C和java后来也无疾而终,这方面的东西也只是爱好。我也只能抽空写点东西,比如上班的时候-,-就是今天。好,不啰嗦 走起。

Ajax其实比较比较泛指,最低层的应该是.ajax(); 基于这个底层方法 JQuery又有多种类型。比如 .load(); .getScprit();  .getJSON(); 等等…想了解的话 可以自己去看API文档。最近单的应该就是.load();方法了。有多简单呢?

$("#contents").load("url #contents");

完了? 对完了。这行代码的意思就是 在页面的#contents DIV内载入地址为URL的页面,并且只取#contents元素内容,其他丢弃。当然只靠这一句代码是完成不了所有动作的,那就需要你的想象力了,请看下面内容:

$('a[target!=_blank]').live('click',function(){                   //所有a链接不为新标签打开的链接 绑定click事件。
var url = $(this).attr("href"); //获取a链接的地址
var title = $(this).attr("title"); //获取新链接的title
$('#contents').fadeTo(500,0.3); //内容部分模糊
#("#contents").load("url #contents",function(){ //开始加载
$('#contents').fadeTo(200,1); //完成后 内容部分重新显示
window.document.title = title; //设置标题
});
})

好了,这样就基本完成基本功能了。以上是使用.load()方法实现的异步加载。是不是很简单,如果你想使用底层的.ajax方法 那就请继续往下看。

在之前一片文章,我们提到过 如果想让ajax彻底不加载head,sidebar,foot等部分 需要传值。当然不加载这部分优缺点都有。优点自然是减少请求数据提高访问速度。缺点就是不执行head部分,你的wordpress插件可能有的地方会失效,还有就是获取不到新页面的关键字 准确的标题等。怎么传值呢?首先你要明白,用户第一次进来的时候 是全部加在的,直到ajax执行了 才不去加载。而搜索引擎是不会去执行你的JS文件的。所以搜索引擎下 就不怕只输出部分内容 影响soe了。 在wordpress中 公用的部分 都是使用  这样来调用的。那么我们可以用下面的方法传值。

另外 get_sidebar(); 和 get_footer(); 也用同样使用上面方法传值。(去掉#号)                                         这样$soz的值就是load。 不等于后面的ajax后 就会加载。这样我们在后面的ajax中 给$soz传值为ajax后。 就不会加载这部分了。详细如下:

$('a[target!=_blank]').live('click',function(){                   //所有a链接不为新标签打开的链接 绑定click事件。
var url = $(this).attr("href"); //获取a链接的地址
var title = $(this).attr("title"); //获取新链接的title
$('#contents').fadeTo(500,0.3);
$.ajax({
url:url,
data: "soz=ajax", //传值
dataType: "html",
type: "post", //使用post方式加载
success:function(message){
var msger = $("message");
window.document.title = ttitle;
$("#content").html(msger);
$('#contents').fadeTo(200,1);
script = jQuery("#afterrun script"); //解决ajax JS运行的问题。
for (var i = 0;i < script.length;i++) eval(jQuery(script[i]).html());
}
,
error: function() {
$("#content").html("AJAX Error...");
} ,
});
})

好了上面代码就是通过底层.ajax方法实现的。和之前的.load方法 差不多。需要注意的就是 js在ajax后 执行的问题。到这里,ajax的核心代码已经完成 。其他动作那就要根据你自己来制定了。不如ajax过程中的动画,啥的小细节。我相信如果你对JQuery比较熟悉的话 应该也是很容易的一件事。

通过上面的方法,你会发现AJAX加载时没什么问题的,但是地址栏的URL是不会改变的。前进后退也不能用。那改怎么解决呢?不要着急,我会在下一篇文章中为大家介绍我使用过的2种方案,欢迎大家来围观。。。

 

From: http://soz.im/wordpress-full-ajax-load-2-asynchronous-loading.html

WordPress女生粉色主题:Liquorice[小苏子博客用]

WordPress主题:Liquorice是一款国外免费主题,整体风格比较适合女生,很温馨。
国内女生博客小苏子也是用的这款主题,实际上之前我一直以为她用的收费主题,今天无意中发现这款主题是免费的,那我就不客气啦~
官方在线演示:神国传送
官方原版下载地址:神国传送
众所周知,英文主题显示中文不好,以为小苏子修改了主题,下载后才发现这个主题不用修改显示中文也很好看的,又看了下小苏子的CSS,发现也没修改太多的地方。
喜欢的就直接用吧!

ElegentThemes全套主题分享[打包下载]

从电驴上找到的,看介绍应该是在2011年9月份之前的主题都有,一共800M多点,不少主题包含PS源文件,虽然全是付费主题,但是毕竟是国外的,该分享的就分享吧。
电驴的资源热度不是很高,我就传到115吧,下载速度快点,本相传华为网盘的,可惜限制单文件大小了。等115网盘过期的时候别忘提醒下我续期。

ElegentThemes全套主题打包

ElegentThemes全套主题打包 (762.9 MB) 解压密码:lllllll.me
转自小七

wordpress图片主题:gridlocked

wordpress图片主题全新出炉,今日发布的这款Gridlocked WordPress商业主题,是2011年最新主题之一,创意简约,超适合设计公司,工作室用于作品案例、博客、资源分享展示等网站,喜欢做淘宝客的朋友也可以选择这个以展示为主的图片主题,下面是这款主题的说明。
1.可筛选的组合,可用于网页或网站的一部分。
2.wordpress图片主题使用了jQuery魔术风格,视觉效果好。
3.gridlocked主题页面模板使用了档案,全宽,jQuery 联系表等功能。
4.WordPress 3.0及以上版本全面支持。
5.主题自定义默认登录标志与Gravatar的支持。
6.wordpress主题使用了简码,列,按钮,切换,标签,警报等多种功能。
7.基于网格的设计与有效的HTML制作而成。
8.文章格式支持,“简述,图片,画廊,行情,链接,标准,音频,视频”等多重格式。
9.wordpress主题全面本地化支持,包含。po / .mo文件。
10作者写入了黑和白2种颜色模式,让更多用户根据自己的需求来选择这款wordpress图片主题的色彩。
12.两个Twitter、Flickr定制的部件。

wordpress图片主题gridlocked

演示地址下载地址   
转自http://www.520rr.com/1534.html

WordPress企业高级主题:Karma v2.5

最近一直在翻看不少国外的主题,越看越觉得国人的主题技术含量离国外的差距不是一点点啊,虽然自己不会做主题,但是好坏还是能看得出来的。分享一款国外truethemes的牛B的企业高级主题:Karma v2.5。自带20种不同的页面模板,20个华丽的色彩变化

  • 强大的管理面板
  • 令人惊叹的3D滑块
  • 100 +简码
  • 20个华丽的色彩变化
  • 拖放到共享社会书签
  • 无限侧边栏
  • 20种不同的页面模板
  • 7个独特的画廊布局
  • 令人惊叹的价格表
  • 强大的内置联系表生成器(带reCAPTCHA)
  • 完整的教学培训视频集
  • XML的安装演示内容

演示地址:http://themes.truethemes.net/Karma/?style=karma-teal-grey
Karma v2.5下载     本站备份下载

转自http://lllllll.me/wordpress/1851.html

教你如何汉化WordPress主题[教程]

———————————————————————-

第一次使用sandbox框架制作wordpress theme,把theme汉化成中文版的,如果去一个个的文件编辑很麻烦,那么,有没有简单的方法呢?我们该怎么办?

之前也有看到有些网友的博客有发布WordPress皮肤汉化包等等的文章。我想应该所有的wp theme都是可以汉化的。于是,便想自己动手做一个……

在网上查了很多资料,也问了很多朋友,最后终于知道了怎样制作theme汉化包。所以,想和大家分享一下,供那些和我一样刚接触wordpress的朋友参考!无论是你自己制作主题,还是看上了其他的主题,这个教程都将对你有所帮助!

虽然网上制作theme语言包的方法别人介绍过,但大多讲的比较笼统,对于刚接触wp的朋友来说还得花上不少功夫去消化!本教程主要针对刚接触wp的新手做的教程!
1.首先配置你的wordpress theme文件
在 theme中把需要汉化的地方使用如下格式设置好:


上面的c2cer这个是可以根据你自己的皮肤名字来定的!
例 如我的theme叫做:popdo 然后我要汉化的语句是:one comment
那么就可以写成:



如果要翻译的语句与php数据库有查询关系,那么调用的时候就要用__()而不是_e()的方式,例如:



那么格式就可以写成:

如果上面让你不明白的话,你也可以下载一套sandbox的框架查看里面的语句。都设置好这些后,在theme的functions.php文件中的最下面添加一句:

add_action (‘init’,’my_theme_init’);
function my_theme_init ()
{
load_theme_textdomain (‘popdo’);
}
?>

上面的(’popdo’)要与你原先设置的名字要一致,最好直接使用theme的名字!
这样theme上的工作都完成了。
接下来开始poedit上的汉化步骤:

首先下载一个Poedit(PoEdit是一款Windows下的.po文件编辑器,常用来汉化各种程序),安装好后,启动软件,点击:文件—新建消息目录 文档。在弹出的对话框中出现如下设置:
工程名称以及版本:填写你的工程名称
团队: 你 的团队
团队专用电子邮件:你的Email
语言:你的国家语言
国家:你的国家
字符集:建议utf-8
源代码字符集:建议utf-8
复数形式: 留空
如图:

汉化WordPress主题第一步

路径的设置用一个”.”(点号)-即同级目录以及该目录下的所有子目录:

汉化WordPress主题第二步

因为路径的问题搞了半天,呵呵!
之前theme里设置了汉化的内容关联了_e和__,所以关键字 设置如下:

汉化WordPress主题第三步

然后点确定,跳出.po文件保存对话框,将.po文件起名为zh_CN.po保存在 theme的根目录下(之前设置了路径为”.” ,所以这里保存位置很关键!)
保存之后就自动弹出待翻译的所有语句列表,确 定之后就可以开始翻译了,未翻译的语句会显示蓝色粗体字,在列表下面有两个输入框,上面一个框是待翻译语句,下面一个框是你的翻译内容!

汉化WordPress主题第五步

poedit中翻译好后Ctrl+s保存,会自动生成.mo文件,翻译工作完成后还差 最后一步,别急!
打开你的wordpress根目录下的文件wp-config.php
查找语句:
define (‘WPLANG’, ”);

将 其改为:
define (‘WPLANG’, ‘zh_CN’);

保存,刷新你的wordpress首页,这样我们就完成了WordPress theme   汉化包的制作全过程,自己的theme就制作完成了!

 

WordPress主题:Continuum Magazine免费下载

演示:http://demos.brianmcculloh.com/continuum/

演示图片

此主题很强大,不仅仅是后台,还有代码,有缘人可以下载此主题研究学习使用。
唯一不足的就是此主题全是英文的,在网上下载的地方不多,所以本人特别上传到网盘共享。
下载地址:http://dl.dbank.com/c0745orama

芒果站WordPress主题免费共享

演示:http://mangguo.org

时常有一些童鞋表示喜欢这款皮肤,这类邮件很多。由于这份主题一直是私人使用,几乎不支持什么花里胡哨的功能。广告位链接等也都是写死在模板里的,需要手工修改。下面大致介绍下这款主题的文件结构、使用技巧和一些细节问题。

主题结构

header.php 头部文件

single.php 单篇 post 文章页面

page.php 单篇 page 页面

index.php 首页文件

sidebar.php 侧边栏文件

comments.php 留言评论文件

functions.php主题功能函数文件

searchform.php 搜索框表单文件

popular.php 热门文章列表页面

footer.php 底部文件

404.php 404 错误页面

css 文件夹里面包含了主题所使用样式文件

img 文件夹包含了主题所使用图片,需要手工更换 sprite 背景图片

js 文件夹包含了主题所使用脚本

所需插件

WP-PageNavi实现翻页功能

WP-PostViews实现文章阅读数目统计功能

广告链接

页头的三个链接、导航菜单下面的链接均位于 header.php 文件

文章页面的大图广告位于 single.php 文件

下载地址

官方指定唯一专用下载链接:mangguo.tar.gz

这并不是一份规范的 WordPress主题,仅供学习、分享和交流。

4 月 21 日更新:新增 背景图片 PSD 源文件

本站网盘下载备用