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加载(一)扯独自

大家好,经过了大约一年 我终于更新文章了-,- 。至于为什么这么久呢 在这里我也就不多了说,我在about也没也简单介绍过了。今天不是来扯独自的(雾)~。从这篇文章开始我就将分多次向大家介绍全站Ajax的实现。高手请绕行,菜鸟估计也会有点晕,我也尽量从我这个菜鸟角度出发,说的通俗易懂。说道Ajax,也许大家不是很陌生,最常见的应该 就是评论Ajax提交了。如果你还想直观点的了解,你可以点击我的站内随便的链接。(注:你的浏览器支持html5)你会发现head,sidebar,foot部分都不会刷新,只刷新了文章部分。而且地址栏也会做出相应改变,可以使用前进后退按钮。不要被备注迷惑,不是支持Html5的浏览器才能Ajax的。Ajax有什么好处么?当然就如你看到的只加载你需要的部分,提高了网页的用户体验。减少了加载数据。当然也存在缺点,不会改变URL,当然也就不能使用前进后退。对搜索引擎不友好,如果你ajax请求的页面是不存在真实地址的话,就不会被索引到。接下来我会通过其他方式了弥补缺点发扬优点..在Wordpress上合理使用Ajax。

上面说过对搜索引擎的问题,所以这里我们Ajax加载将会采用加载真实地址,不会通过后台函数输出想要的内容。这样搜索引擎会访问到真实的地址,而用户则会ajax加载需要的内容。还有个问题就是ajax真实地址后我们加载的数据跟直接访问会一样 再次加载了不需要的内容。当然我们可以从过在AJax后删除不需要的内容,这些内容也仅仅是Html代码 还不回被真正执行。当时PHP后台还是会浪费资源输出这些。要想真正放弃加载需要内容之外的东西。这里会做个判断,当用户第一次进入网页 会加载head,sidebar,foot。当点击站内链接后。会在加载之前给这几个不需要加载的部分传值。让这些内容不输出。而搜索引擎是不会执行JS代码的,会正常访问页面。

另外个问题就是Ajax后,地址栏变化的问题。我们可以通过Jquery的history插件,或者使用html5自带的API:history.pushState和history.replaceState来实现。这个会在后面为大家详细介绍。

当然AJax的关键代码页很少,内容如下:

$.ajax({
url: ajaxUrl,
type: 'get-or-post',
error: function() {
//抛出错误
},
success: function() {
//抛出完成代码
}

但是比较繁琐的问题是之后的一些问题。这篇文章只是一个预热,我会在接下来的几篇文章为大家一一详细介绍。欢迎有兴趣的朋友围观,说的不好也别拍砖=。=

From:http://soz.im/wordpress-full-ajax-loading-1-alone.html

表单-WP版

">

 

把下面的代码甩进functions.php

 20 ){
wp_die('名字必须填写,且不得超过10个字符');
}
if ( empty($email) || strlen($email) > 60 || !preg_match("/^([a-z0-9\+_\-]+)(\.[a-z0-9\+_\-]+)*@([a-z0-9\-]+\.)+[a-z]{2,6}$/ix", $email)){
wp_die('邮箱必须填写,且不得超过60个字符,必须符合 Email 格式');
}
if ( empty($age) || strlen($age) > 3 ){
wp_die('年龄必须填写,且不得超过3个字符');
}
$bm = array(
'comment_author' => $name, //名字
'comment_author_email' => $email, //内容
'comment_author_url' => $QQ, //QQ
'comment_approved' => 0, //待审
'comment_content' => $bm_content, //评论内容
'comment_post_ID' => 8
);
//将评论插入数据库
$status = wp_insert_comment( $bm );
if ($status != 0){
// 评论成功给博主发送邮件
wp_mail('i@hjyl.org','有人报名啦!','有人报名啦!快去看看吧!');
setcookie("bm_form", time(), time()+180);
wp_die('
'.''.'W7C'.''.'
'.''.'
'.'报名成功,感谢报名,5秒钟后将返回首页!'.'
', '报名成功!'); } else { wp_die('报名失败!','报名失败!'); } } ?>

CSS部分自己根据需要添加把

上面两部分比较灵活,具体根据自己需要修改。。。这里只是个例子。。

lnmp0.9的一些bug处理方法

貌似lnmp从0.9开始,限制了不少函数,理由是出于安全考虑,但是这也影响了一些网站程序。

譬如 DiscuzX 通信失败或通过Socket连接SMTP无法发送邮件或wordpress Akismet 无法工作问题的解决方法目前LNMP 0.9禁用了部分危险函数:passthru,exec,system,chroot,scandir,chgrp,chown,shell_exec,proc_open,proc_get_status,ini_alter,ini_alter,ini_restore,dl,pfsockopen,openlog,syslog,readlink,symlink,popepassthru,stream_socket_server,fsocket,fsockopen

由于禁用了pfsockopen、fsockopen 会造成 Discuzx Discuz X通行失败,通过Socket连接SMTP无法发送邮件 或wordrpess的Akismet 无法工作:引用:您的主机似乎禁用了 PHP 的 fsockopen 或 gethostbynamel 函数。在此问题修复之前,Akismet 无法工作。请联系您的主机服务管理员或防火墙管理员,并向他们提供 Akismet 的运行环境要求。解决方法:
目前最常可能用到的就是pfsockopen、fsockopen,如果将这2个函数从禁用列表里删除可以执行:

sed -i 's/disable_functions =.*/disable_functions = passthru,exec,system,chroot,scandir,chgrp,chown,shell_exec,proc_open,proc_get_status,ini_alter,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,stream_socket_server,fsocket/g' /usr/local/php/etc/php.ini

 

然后执行:/etc/init.d/php-fpm restart 重启生效

如果想完全删掉禁用列表里的函数可以执行:

sed -i 's/disable_functions =.*/disable_functions =/g' /usr/local/php/etc/php.ini

再执行:/etc/init.d/php-fpm restart 重启生效

wordpress3.4后主题管理不显示其他的主题?
解决方法:将scandir 函数从禁用列表里删掉就行了。

sed -i 's/disable_functions =.*/disable_functions = passthru,exec,system,chroot,chgrp,chown,shell_exec,proc_open,proc_get_status,ini_alter,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,stream_socket_server,fsocket/g' /usr/local/php/etc/php.ini

然后执行:/etc/init.d/php-fpm restart 重启生效

安装好ImageMagick,在后台设置好路径,但是无法预览缩略图效果?
解决方法:将exec 函数从禁用列表里删掉就行了。

sed -i 's/disable_functions =.*/disable_functions = passthru,system,chroot,chgrp,chown,shell_exec,proc_open,proc_get_status,ini_alter,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,stream_socket_server,fsocket/g' /usr/local/php/etc/php.ini

然后执行:/etc/init.d/php-fpm restart 重启生效

感谢XMJ’s Blog分享。

Qtranslate-实现WordPress多语言化

这两天做一个双语站,听说Qtranslate这个插件,正好派上用场。在网上看到这个秘籍,很不错,收集下。

安装Qtranslate

Qtranslate可以在WP后台直接安装,目前适用于WP 3.3.1,3.4版本尚未支持,不过在作者的博客已经提供beta版,适用于3.4版本。Qtranslate下载,WP的插件安装不再重复。

Qtranslate基本使用方法

启用插件后,大家可以发现,添加文章和添加页面会自动出现中英文标题和中英文正文编辑区域,因此,在写文章的时候,只需要手动输入双语内容即可。保存后查看数据库会发现post_content中的内容会自动变更为

正文内容Content

此处的

标签即为中英文判断标记。其中的zh为语言代码,在Qtranlate后台中可以自定义,一般中文为zh,英文为en。

除了上述的标记外,还可以用以下方式调用。

[:zh]正文内容[:en]Content

由于添加文章、页面,分类编辑均提供了语言编辑区域。因此,不需要再重复添加以上代码, 系统会自动生成。

完成如上操作后,基本可以实现WP 文章、页面、分类目录的双语化。如何查看效果呢?

假设WP的域名为http://hjyl.org,英文版只需更改为http://hjyl.org/?lang=en ,也可以使用http://hjyl.org/en/进行访问。

WP主题站点标题中英化

由于Qtranslate没有提供站点标题并没有提供语言编辑区域,表面上看无法实现双语化,很多人会想到,只要在后台编辑区域的站点标题中将标题手动更改为双语模式即可。

站点标题Sitename

但实际的调用是并没有效果,因此,为了实现标题双语化,需要更改两个地方:
1.将后台站点标题更改为

[:zh]站点标题[:en]Sitename

之所以要改段代码,是因为大部分标题不支持尖括号输出,尖括号极容易造成站点XSS。
2.修改主题header.php文件,查找

bloginfo( 'name' );

将其更改为

echo _e(apply_filters(' ', bloginfo( 'name' )));

WP主题自定义域中英化

一般主题不会存在自定义域,但很多WP高级主题需要调用到自定义域,例如酷站导航,我们往往会把酷站的URL填入到一个自定义域,如后在模板中统一调用。这样可以简化我们编辑文章,撰写html的麻烦。由于我们一般在调用自定义域内容的时候代码为

参考之前标题中英化,可以将上述代码更改为:

ID, 'price', true)))); ?>

WP主题版权信息中英化

为了省去版权信息编辑后台化的麻烦,我们喜欢在主题footer.php里面直接写入版权信息,因此,在实际调用中我们会写道类似代码:

© 2004-2012 杭州XXXXX有限公司 版权所有

此时的杭州XXXXX有限公司 版权所有 双语化,可以更改为如下代码:

© 2004-2012 杭州XXXXX有限公司 版权所有Hangzhou XXXXX Co., Ltd. All Rights Reserved.");?>

根据以上的案例,如果主题中存在类似的中文信息,均可以使用该思路进行双语化。

WP主题菜单栏中英化

由于WP默认主题twentyten提供了菜单选项,我们可以自由地将页面、文章分类添加到菜单栏。根据之前提及的页面、分类中英化,菜单栏中的所有已知页面和分类均会自动切换中英文。我们的习惯会将首页放置在菜单栏中,一般情况下,我们会将首页做为一个自定义连接添加到菜单栏,此时出现的问题是:名称可以使用[:zh]和[:en]区分,但是链接怎么改都不行。

百般无奈只下,我只能手动将首页链接添加到主题模版。为了让页面自动判断中英为,可以使用如下代码:

WP主题图片/LOGO中英化

上一节中的代码得益于WP自带函数bloginfo(‘url’),但是

首页Home

中无法直接填写img代码,所以,只能考虑判断当前页面的语言属性,代码如下:


                    
                
                
                    
                

相关推荐阅读

Qtranslate FAQ

Qtranslate 支持论坛。

感谢此文作者分享。

WordPress安装在非80端口的设置

这两天折腾啊,安装了IIS8,默认80端口,然后又安装了phpnow,修改为1988端口。郁闷了,安装在phpnow的WordPress放在根目录的话,访问会自动跳转到80端口。如果放在下属文件里就没问题。但是别扭啊,本来可以127.0.0.1:1988就很难看了,后面还加上/blog啥的,就更难看了。。。

这就是WordPress的问题了。。。

解决方法:

1、修改链接地址。如果直接从网上备份来的,最简单的修改网站地址的方法就是在phpmyadmin里找到wp_options,修改siteurl 和 home 为 http://domain:port;

2、 在phpmyadmin里找到wp_options,修改 active_plugins 为 a:1:{i:0;s:31:”disable-canonical-redirects.php”;}

欧了~~~

感谢该作者分享

Recently Updated Posts-显示最新被修改的文章

1. 把下面的函数代码扔到主题的 functions.php

// Recently Updated Posts by zwwooooo | zww.me
function recently_updated_posts($num=10,$days=7) {
   if( !$recently_updated_posts = get_option('recently_updated_posts') ) {
       query_posts('post_status=publish&orderby=modified&posts_per_page=-1');
       $i=0;
       while ( have_posts() && $i<$num ) : the_post();
           if (current_time('timestamp') - get_the_time('U') > 60*60*24*$days) {
               $i++;
               $the_title_value=get_the_title();
               $recently_updated_posts.='
  • ' .$the_title_value.'» 修改时间: ' .get_the_modified_time('Y.m.d G:i').'
  • '; } endwhile; wp_reset_query(); if ( !empty($recently_updated_posts) ) update_option('recently_updated_posts', $recently_updated_posts); } $recently_updated_posts=($recently_updated_posts == '') ? '
  • None data.
  • ' : $recently_updated_posts; echo $recently_updated_posts; } function clear_cache_zww() { update_option('recently_updated_posts', ''); // 清空 recently_updated_posts } add_action('save_post', 'clear_cache_zww'); // 新发表文章/修改文章时触发更新

    2. 调用,如在侧边栏

    Recently Updated Posts

      参数说明:8 为展示文章数量,15 指15天内发表的文章除外 转自http://zww.me/archives/25487

      只在WP主评论加上楼层号(支持评论分页)

      前提:
      1. 当然是要在 WordPress 后台开启嵌套评论啦
      2. 所用主题支持嵌套(目前的主题基本都支持吧)
      3. 主题有使用 mytheme_comment 回调函数(http://codex.wordpress.org/Template_Tags/wp_list_comments
      下面拿默认的评论函数来说明

      function mytheme_comment($comment, $args, $depth){
      $GLOBALS['comment'] = $comment;
      ?>
      
    • id="li-comment-"> ' ); ?> %s says:'), get_comment_author_link()) ?> comment_approved == '0') : ?> $depth, 'max_depth' => $args['max_depth']))) ?>
    • 2. 那么现在开始添加楼层计数参数 $commentcount 等代码,具体看代码中的注释
      (2010.10.28 Update:优化了查询数)

      function mytheme_comment($comment, $args, $depth){
      $GLOBALS['comment'] = $comment;
      //主评论计数器初始化 begin - by zwwooooo
      	global $commentcount;
      	if(!$commentcount) { //初始化楼层计数器
      		$page = get_query_var('cpage')-1;
      		$cpp=get_option('comments_per_page');//获取每页评论数
      		$commentcount = $cpp * $page;
      	}
      //主评论计数器初始化 end - by zwwooooo
      ?>
      
    • id="li-comment-"> ' ); ?> %s says:'), get_comment_author_link()) ?> comment_approved == '0') : ?> $depth, 'max_depth' => $args['max_depth']))) ?> comment_parent) {printf('#%1$s', ++$commentcount);} ?>
    • 3. 添加CSS样式,自己看着办吧。
      转自http://zww.me/archives/25161
      1. 先看看WP官方的默认 mytheme_comment 回调函数

      为导航多级菜单增加淡入动画特效

      首先下载Superfish v1.4.8.js:
      地址:http://hjyl.org/wpmenu
      上传到wordpress主题js目录中。
      分别打开:header.php模版文件,适当位置添加:

      
      

      最后,在style.css中加入:

          #topnav .sf-sub-indicator {
          display: none;
          }
      

      注:如果不加入这句会在有二级菜单项目名称后面显示“»”。
      完成,具体效果看我的导航菜单。
      如果,你使用的不是HotNews pro 2.4版主题,并且主题已加载jquery.js,可参考上面的方法.
      只需打开:Superfish v1.4.8.js,修改最后的“#topnav ul”为你的导航菜单ID选择器即可,比如:默认WP主题Twenty Ten是:.menu-header ul。
      转自:http://zmingcx.com/increase-for-the-navigation-menu-fade-animation-effects.html

      为文章标题链接添加正在加载中提示

      点击文章标题链接会提示正在加载中…看上去很好玩是不是。具体效果可以点击我博客日志标题链接。下面就教大家把这个特效加到你的主题模板中。
      这个特效同样离不开jQuery。
      首先打开你所使用主题的header.php模板文件,在

      </head>

      标签前添加:

      
      

      如果你的主题已加载了JQuery,这步就免了。
      再把下面这段代码同样加到

      </head>

      标签前

      
      

      其中”h2 a”是主题文章标题的标签选择器,可根据具体主题模板进行修改,如果改为:“a”,可实现全部链接都添加这一特效。后面的数字2011是这一特效的显示时间(毫秒),可酌情修改。
      转自http://zmingcx.com/add-the-link-for-the-title-of-the-article-prompted-loading.html