• 小站修改汇总

    小站使用的是 ZWWzSofa ,显然还能看出一点原来的影子。此模板最大的特点呢,是大家看不到的,那就是 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次。认识的人中类似我的还是好像没有的,今天又周期性地感触起来:作为电子商务的学生我很不关心电子商务。

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

  • 珠海梦幻水城一日(无图)

    进行完活动以后写日志是我的例牌活动,但是秉着有图有真相的原则,等我找到真相了才能动手,不过才过去了短短的两天,全身的酸痛还未消去。

    首先简略回顾下行程:早上由家里出发到文少家等1小时,然后从文少家出发到曹步市场等半小时,再开车(我乘车)2小时到珠海,然后迷半小时路,吃一小时午饭,海鲜,贵。然后到达水城。

    那里还是很好玩的,加上那天天气很好,所以太好了。最厉害的就是我勇敢地滑下了那个21米高很恐怖的滑梯,我觉得我现在充满了力量。然而有一个杯具就是烧鸡同学,好穿不穿,穿了棉裤,两个要滑的活动都不让参与,可惜了一下。还有一个杯就是一开始男女分开了活动,直到最后用广播才能找齐人归家…

    最后回到烧鸡地头-东升吃晚饭…玩乐告一段落。

  • WordPress 模板 CSS 默认使用的类

    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{...}
  • WordPress 更换域名必备 SQL 语句

    比如要将旧域名 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' ) ;
  • 我是为什么

    一直想写篇日志,但是好像时间被用在“一直在折腾,从未赶得上”上。我为什么老是说折腾?因为我在忙,但是别人并不懂得我忙什么,所以对外声称在折腾,私下在忙。而所谓的忙只不过是做自己的网站或者帮别人做网站,而我做网站主要是做表面看到的,可以说是前台、前端设计,或者说是模板制作,必要时搞搞后面。

    这是一种兴趣爱好和或许也是职业方向,过去试过很多次折腾好了,不久就丢掉了(建站一般三分钟热度),从外表看这次的折腾瞎了,但是我认为结果不太重要,很多时候都是沉浸于折腾的过程中,不吃不睡,废寝忘餐(重复了…),忽略闪动的QQ头像,忘记自己没有女友…而结果是驱动我折腾的动力,折腾让我积累知识。

    最近悟出几个字,叫折腾出真知,用以致学,边学边用,或者有点奇怪,但是我觉得就是这样。还有几个字,叫玩物尚志,最初是从手机论坛的刷机包而来的,叫玩物尚志包,简称玩物,手机刷机无疑是世上十大折腾之一。顺便说一下,我也很折腾手机的。

    玩这么些日子了,从用 Dreamweaver 做到用文本编辑器一个个字符敲,不知道这是否进步了,自我感觉良好就好。现在的模板是折腾最久的东西了。当然,以自己的意志来做的不会符合大众口味,也没有必要符合吧。这东西并没有完美的,咱要做的就是彰显个性,替别人做是另一回事,所以当某个南瓜嚷嚷的时候我就鄙视他了,你不信?

    PS:我要早点睡,虽然现在一点钟了。
    PS2:回家6天,4天晚饭在外面吃,也好,折腾后要出去透透气,不然又要写悲剧日志了。
    PS3:写给Qzone的你,我的和谐博客是 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>
  • PHP substr 截取中文乱码的解决方法

    文章页面的 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′);

  • 一日一折腾之 WordPress SEO 优化

    哈哈,参照 WordPress SEO 技巧 把博客给优化优化,受益匪浅,匪浅啊。

    折腾也挺多的,分开来说。

    1.标题优化
    title 使用文中的方法,代码如下:

    <title><?php if ( is_single() || is_page() || is_category() || is_tag() ) { wp_title(''); } else { bloginfo('name'); } ?></title>

    去掉标题前的预留空格,代码放进模板 function.php ,格式为 <?php 代码 ?> :

    function titledespacer($title) {
    	return trim($title);
    }
    add_filter('wp_title', 'titledespacer');

    2.为 Read more 加上 nofollow
    方法跟上面的一样,也是加到 function.php。

    add_filter('the_content_more_link','nofollowReadMore' ,0);
    function nofollowReadMore($link) {
    	return str_replace('class="more-link"', 'class="more-link" rel="nofollow"', $link);
    }

    3.Keywords & Description
    类似的插件很多,我只用过 Simple Tags,觉得不太如意。后来移植了某个主题的代码,再后来在某个博客看到的代码,现在是根据上文的技巧改写的代码,只是还没完成页面的 Description ,加上我只有‘关于’一个页面,那就暂时忽略了,呵呵。经过折腾,代码已基本完美了,分类页的 description 是分类描述,要后台添加。完整代码,放到 head 中:

    <?php if (is_home()){
    $description = "Ygs' blog以民间折腾为主,个人生活为辅,前端设计为目的的个人博客";
    $keywords = "YGS,WordPress,前端设计,交互设计,用户体验";
    } elseif (is_single()){
    if ($post->post_excerpt) {
    $description = $post->post_excerpt;
    } else {
    $description = mb_substr(strip_tags($post->post_content),0,220,'utf-8');
    $description = str_replace(array("rn", "r", "n"," ","	"), " ", $description);
    }
    $keywords = "";
    $tags = wp_get_post_tags($post->ID);
    foreach ($tags as $tag ){
    $keywords = $keywords . $tag->name . ", ";
    }$keywords = substr($keywords,0,-2);
    } elseif(is_category()){
    $description = strip_tags(category_description());
    } elseif(is_tag()){
    $description = "";
    $tags = wp_get_post_tags($post->ID);
    foreach ($tags as $tag ){
    $description = $description . $tag->name . ", ";
    }$description = substr($description,0,-2);
    } elseif(is_page()){
    $description = $post->post_title ;
    } else {
    $description = "";}?>
    <?php if (is_single()||is_home()) {?>
    <meta name="keywords" content="<?=$keywords?>" />
    <meta name="description" content="<?=$description?>" />
    <?php } ?>
    <?php if (!is_single()&&!is_home()) {?>
    <meta name="keywords" content="" />
    <meta name="description" content="<?=$description?>" />
    <?php } ?>

    发现最后的 elseif 不会用,只能分开两个判断语句,效果一样,囧。
    此代码基本符合以下规则:

    页面类型KeywordsDescription
    首页自定义 keywords自定义 description
    文章页面标签组合摘要或者文章前 220 个字符
    (截取文章需要特殊处理全角字符)
    搜索页面搜索关键字
    分类存档页面分类
    标签存档页面标签
    日期存档页面日期
    其他页面页面标题

    4.将 Related Post 改为 More posts about XXX
    也就是将“相关文章”改为“与XX有关的文章”,我使用了文章的标签代替XX,具体模板具体分析
    获取标签函数 the_tags(”, ‘, ‘, ”);

    基本就这么多了~使用愉快~

  • jQuery 美妙的标题提示

    该特效“不但可以让你的 title 提示效果变得美观,而且可以显示出你将要点击的链接的 url,让用户知道自己将要去哪里”,明显提升了用户感受,至少也吸引了眼球。

    jQuery代码,另存为JS或者整合:

    jQuery(document).ready(function($){
    $("a").mouseover(function(e){
    	this.myTitle = this.title;
    	this.myHref = this.href;
    	this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0,30)+"..." : this.myHref);
    	this.title = "";
    	var tooltip = "<div id='tooltip'><p>"+this.myTitle+"<em>"+this.myHref+"</em>"+"</p></div>";
    	$('body').append(tooltip);
    	$('#tooltip').css({"opacity":"0.8","top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"}).show('fast');
    }).mouseout(function(){this.title = this.myTitle;$('#tooltip').remove();
    }).mousemove(function(e){$('#tooltip').css({"top":(e.pageY+20)+"px","left":(e.pageX+10)+"px"});
    });
    });

    CSS美化代码:

    #tooltip {position:absolute;z-index:1000;max-width:250px;word-wrap:break-word;background:#000;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}
    #tooltip p {color:#fff;font:12px 'Microsoft YaHei',Arial,宋体,Tahoma,Sans-Serif;}
    #tooltip p em {display:block;margin-top:3px;color:#f60;font-style:normal;}

    最后,别忘了载入jQuery库。