ygs' blog

分类： note

  • 单选、复选、文本框等表单元素与文字水平居中

    为了找到真理，原文基于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 模板 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' ) ;

  • 用代码打造完美的“当前位置”

    之前介绍了两个显示当前位置的方式，其实就是两个不同的函数 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库。

  • 今日大动作

    首先，把目录移到上方啦，把分类精简啦，那些只懂一点而且不会深入发展的就去掉啦，里面的文章就移到了“默认分类”啦。

    然后，侧边栏加上评论的调用啦。

    最后，好像没有了吧。

    通过搜索引擎进入的竟然一个都没有，看来前几天的域名折腾影响颇大，颇大呀。不过呢，作为开闭站专业户，算是家常便饭啦。嗯，周末应该去玩水了吧，如果没有台风的话。