分类： note

WordPress 当然也有表单的验证，不过大家都知道用户体验一点都不好，页面发生跳转，有时还会把表单清空了，而前台表单认证显得非常有必要了。以下是我写的通过改变文本框背景颜色提示用户输入内容，WordPress 只要把以下代码放到 js 文件里就能工作了。验证由点击提交按钮触发，工作原理看注释。

//表单验证
$(function(){
    $('#submit').click(function(){
        var $author=$('#author').val();   //名称
        var $email=$('#email').val();     //邮箱
        var $url=$('#url').val();         //网址
        var $textarea=$('textarea:first').val();   //评论
        var $errorNo=0;
        if($author==""){
            $('#author').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#author').css("background","#FFF");
        }
        if($email==""){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else if(!/^(?:[a-zd]+[_-+.]?)*[a-zd]+@(?:([a-zd]+-?)*[a-zd]+.)+([a-z]{2,})+$/i.test($email)){
            $('#email').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#email').css("background","#FFF");
        }
        if($url!="" && !/^http://[A-Za-z0-9]+.[A-Za-z0-9]+[/=?%-&_~`@[]':+!]*([^<>""])*$/.test($url)){
            $('#url').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('#url').css("background","#FFF");
        }
        if($textarea==""){
            $('textarea:first').css("background","#F9A4A4");
            $errorNo+=1;
        }else{
            $('textarea:first').css("background","#FFF");
        }
        if($errorNo>0){
            return false;
        }
    });
});

这样一个非常简单的表单验证就出来了~效果就是小博现在这样，欢迎指正改进~

PS:8月14日修正，更严密的正则表达式。
PS2:2013年10月18日修正，真是弄巧反拙，简单复杂化……现已修正。

发现很多博客都添加了边栏的显示隐藏功能，但是没有保存状态，只要一切换页面边栏又出来的，隐藏功能变得耍帅多于实用。为此我查找了一下 jQuery 的 Cookie 操作教程，使边栏隐藏状态保存到 Cookie ，切换页面照样隐藏，效果就像小博这样。

本来我使用的 jQuery 代码是五木好同志的“完美终结版”，但是使用 cookie 后会出现第一次点击无效的情况，估计是因为他使用的是 toggle 方法，toggle 就是模拟鼠标的连续单击事件，在两种状态下切换，隐藏边栏是第一状态，如果你本来就隐藏了边栏，第一次点击时还是切换到第一状态，其实状态没有改变，出现无效点击的错觉。

下面分享我使用的方法：

jQuery(function(){
	var thesidebar = $.cookie("sidebar"); //读取cookie "sidebar"的值
	if(thesidebar=="hide"){  //"sidebar"的值为"hide"则隐藏边栏
		$('#sidebar').hide().prev().animate({width: "860px"}, 1000); //隐藏边栏并设 #content 宽860px，宽度和速度要修改，结构不同也要改~
		$("#menu-item-2304 a").text("显示边栏"); //修改按钮文字，这里使用的是控制按钮的ID，肯定要修改的
	}
	$("#menu-item-2304 a").click(function(){ //设置按钮点击动作
		if($('#sidebar').is(':visible')){ //如果边栏显示则执行以下代码
			$(this).text("显示边栏");
			$('#sidebar').hide().prev().animate({width: "860px"}, 1000);
			$.cookie("sidebar", "hide", { expires: 3 }); //写入属性 sidebar ，值为 hide ，有效时间 3 天
		}else{ //如果边栏隐藏则执行以下代码
			$(this).text("隐藏边栏");
			$('#sidebar').delay(800).show(0).prev().animate({width: "599px"}, 800); //显示边栏并设 #content 为原来的宽度，宽度和速度要修改，结构不同也要改~
			$.cookie("sidebar", null); //删除 cookie "sidebar"
		};return false //点击链接不跳转
	});
});

原理通过上面的注释应该可以理解了，哈哈。要注意一点，jQuery 本身是不支持 Cookie 操作的，需要使用官方的插件，你可以在这里下载到，http://plugins.jquery.com/project/Cookie，下载后像挂 jQuery 库一样挂上，那就ok了。

具体情况是这样，某个博客的所有日志都有“[视频]”或“[图片]”这样的前缀，现在想把这些前缀去掉。其实方法非常简单，用替换字符函数即可，将“[视频]”或“[图片]”替换成空字符串，语句：

UPDATE wp_posts SET post_title = REPLACE(post_title, '[视频]','');
UPDATE wp_posts SET post_title = REPLACE(post_title, '[图片]','');

然而一时没想替换来，找到了取指定字符数后的所有字符串：

UPDATE wp_posts SET post_title = SUBSTRING(post_title,5);

使用 SQL 语句就省去了很多劳动力呀。

为了找到真理，原文基于vertical-align的表单元素垂直对齐方式研究不厌其烦地进行测试，此精神值得我们学习。

而结论也非常简单，看真相：

CSS:
label{vertical-align:middle}
.inputcheckbox{vertical-align:middle}
body{font-family:tahoma;font-size:12px}

HTML:
<input class=”inputcheckbox” name=”test” value=”1″ type=”checkbox”>
<label>测试文字x</label>

解决实际问题的就是 CSS。

小站使用的是 ZWW 的 zSofa ，显然还能看出一点原来的影子。此模板最大的特点呢，是大家看不到的，那就是 single、archives、index 等页面整合在一个 index 中，或者说是没有 single 和 archives 页，通过判断显示不同的内容。这有什么好处呢？控制体积？作用不太明显，而且对于修改者来说需要更多的理解时间…囧。

基本上使用后就没有停止过修改，期间参考过很多牛人的博客，学习了不少东东，让我回忆回忆做了些什么。

去掉/修改：
1.收窄了；
2.导航使用 WordPress 3.0 的自定义菜单；
3.分类目录页只显示文章标题；
4.使用 Google 自定义搜索引擎；
5.去掉后台模板设置项，自觉很多余；
6.评论部分的 CSS 与其他 CSS 分开，只在有评论的地方调用；
7.去掉 CSS 中大量多余属性，并将部分插件的 CSS 整合到一个文件，然后使用工具压缩、合并；
8.替换原来的分页；
9.评论倒序，输入框搬到评论上方

增加了：
1.首页文章收缩；
2.导航菜单、搜索框、边栏、返回顶部的动态效果；
3.lazyload 图片渐显，lightBox 图片查看
4.页面 loading 状态显示；
5.小图标区分内外链
6.“上一篇”和“下一篇”；
7.相关日志标题添加标签；
8.手动维护的 keywords 和 description
9.文章标题和友链的 title 美化
9.启用的插件:Akismet,Baidu Sitemap Generator,cbnet Different Posts Per Page,Code Markup,Comment Info Detector,DB Cache Reloaded,Google XML Sitemaps,Simple Tags,WP-PostViews,WP-Syntax,WP Keyword Link

全世界好像只有我在折腾…习惯了每修改一次就备份一下，然而今天备份次数特别多，5次。认识的人中类似我的还是好像没有的，今天又周期性地感触起来:作为电子商务的学生我很不关心电子商务。

模板就这样好了，不改了，做点别的，找个时间把模板用到的东西总结一下~

WordPress 默认使用的用来来对图像的对齐和块元素的类：

.aligncenter,div.aligncenter{display:block;margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.wp-caption{background-color:#f3f3f3;border:1px solid #ddd;-khtml-border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;margin:10px;padding-top:4px;text-align:center}
.wp-caption img{border:0 none;margin:0;padding:0}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}

此外，有更多的 WordPress 默认的类标签，你可以选择你想要的风格：

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.children {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.current_page_ancestor {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

比如要将旧域名 kwnsn.com 改为 ygs.im/ ，可以按一下格式对号入座，更换域名就变得非常方便了，可以每天更换不同的域名了~囧

UPDATE kwnsn_options SET option_value = replace( option_value, 'http://kwnsn.com', 'http://ygs.im' ) WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE kwnsn_posts SET post_content = replace( post_content, 'http://kwnsn.com', 'http://ygs.im' ) ;
UPDATE kwnsn_posts SET guid = replace( guid, 'http://kwnsn.com', 'http://ygs.im' ) ;

之前介绍了两个显示当前位置的方式，其实就是两个不同的函数 get_the_category() 和 the_category() ，折腾出真知，单独使用两个函数都不尽人意：单独使用 get_the_category() ，如果文章属于两个分类，则文章页面只显示一个分类；单独使用 the_category() ，当某两个分类被同一篇文章“属于了”(能明白吧)，那么在其中一个分类页面中同时显示两个分类，神奇。

不过不用害怕，两者结合就能完美了，精简了下，只在分类和文章页面显示，代码如下，按需修改~

<div class="localtion">
	<?php if  ( is_category() ) { ?>
		<p class="local">
		你的位置: <a href="http://ygs.im/" title="HOME">HOME</a> >> <?php $categorys = get_the_category(); $category = $categorys[0];echo(get_category_parents($category->term_id,true,' >>')); ?> 文章列表
		</p>
	<?php } ?>
	<?php if  ( is_single() ) { ?>
		<p class="local">
		你的位置: <a href="http://ygs.im/" title="HOME">HOME</a> >> <?php the_category(' & '); ?> >> <?php the_title(); ?>
		</p>
	<?php } ?>
</div>

文章页面的 description 是使用 substr 函数来截取220字符的，但是最后一个汉字总是乱码，而且截取出来的长度也不正确。

通过神奇的 Google 找到方法，可能是因为 substr(string,start,length)，会将汉字以字符的形式截断，而造成乱码

解决方案：使用 PHP 扩展库中的 mb_substr 方法。

方法定义：
string mb_substr ( string str, int start [, int length [, string encoding]] )

注意：在使用 mb_substr()/mb_strcut 最后要加入多一个参数，以设定字符串的编码，

例如：
echo mb_substr(‘原本会出现乱码的汉字！’, 0, 7, ‘utf-8’);

再如：
$description = mb_substr(strip_tags($post->post_content),0,220,’utf-8′);