Tokinx 发布的文章

久等了，这是我迁入Typecho的以一款主题，自用了有一段时间了，前几天找几个小伙伴测试了下，感觉还不错的样子，其实主题基本上已经算是制作完毕了，但是有几处地方因为我自用原因，需要修改HTML代码，于是今天把对应的几处都调整到后台设置，稍作整理，便发布出来了。

主题兼容主流浏览器，IE测试只测试了IE8，低版本没做测试，Chrome显示效果最佳 响应式设计，在不同终端下浏览都有非凡的阅读体验，主题侧边栏提供后台勾选选项，且边栏提供了一个200x200大小的广告位，在后台填写代码便可在整站展示，留空则关闭广告位。

由于Typecho没有 链接管理器 功能，所以主题如果需要添加友情链接还需要手动修改，修改友情链接请打开主题目录下的sidebar.php文件，在第31行我有标注，按照格式修改即可。

迁移程序，图片丢失，现只有下载链接

这个教程网上都转烂了，但是使用的都是图片显示等级，有一段时间追求极简，我就疯狂的压缩主题，能不用图片坚决不用，于是这个东西就诞生了，也没怎么在意，现在换到Typecho之后，更是不关注这东西了，但是今天@欧爹突然提起这个功能，想让我帮他折腾上，于是我就找到之前的主题，将代码拿出来，整理一下就发给他了。

终于有机会帮上欧爹了，我牟足了干劲，想办法满足欧爹的奇葩要求（考虑到他博客火爆程度，他嫌原本的7级不够用，于是稍微增加到了10级）

其实最烦人的就是选色，也还好，有了色阶选起来也不是特别难受，最终效果我感觉还是很不错的（详见上图） 技术含量很低，为了凑字数，打了那么多字，下面就上本篇文章的重点吧

下方代码放进functions.php内

//获取访客VIP样式
function get_author_class($comment_author_email,$user_id){
global $wpdb; $author_count = count($wpdb->get_results( "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' ")); 
/*如果不需要管理员显示VIP标签，就把下面一行的“//”去掉*/
//$adminEmail = get_option('admin_email');if($comment_author_email ==$adminEmail) return;
if($author_count>=5 && $author_count<10) echo '<a class="vip1" title="LV.1">LV.1</a>';
else if($author_count>=10 && $author_count<50) echo '<a class="vip2" title="LV.2">LV.2</a>';
else if($author_count>=50 && $author_count<150) echo '<a class="vip3" title="LV.3">LV.3</a>';
else if($author_count>=151 && $author_count<300) echo '<a class="vip4" title="LV.4">LV.4</a>';
else if($author_count>=301 &&$author_count<450) echo '<a class="vip5" title="LV.5">LV.5</a>';
else if($author_count>=451 && $author_count<550) echo '<a class="vip6" title="LV.6">LV.6</a>';
else if($author_count>=551 && $author_count<700) echo '<a class="vip7" title="LV.7">LV.7</a>'; 
else if($author_count>=701 && $author_count<850) echo '<a class="vip8" title="LV.8">LV.8</a>'; 
else if($author_count>=851 && $author_count<1050) echo '<a class="vip9" title="LV.9">LV.9</a>'; 
else if($author_count>=1200) echo '<a class="vip10" title="神一样的人物 V1000+">LV.10</a>'; }
//认证用户
function comment_links_title($email = ''){
$links=array( 
'1'=>'test@163.com', 
'2'=>'test@gmail.com', 
'3'=>'test@qq.com', );
//添加你想要设置个性图片的评论者Email，格式参考我写的
if(in_array($email,$links)) echo '<a class="vp" title="认证用户">认证</a>';
}

将下方代码放进评论内容循环内需要显示的地方

<?php comment_links_title($comment->comment_author_email);//认证
if(user_can($comment->user_id, 1)){echo "<a title='本站博主' class='vip'>博主</a>";}; //博主
get_author_class($comment->comment_author_email,$comment->user_id);//等级?>

**下面是CSS，样式仅供参考**

/*评论者VIP显示功能的样式*/
.vp,.vip,.vip1,.vip2,.vip3,.vip4,.vip5,.vip6,.vip7,.vip8,.vip9,.vip10{overflow:hidden;padding:0 4px;color:#fff !important;margin:0 6px 0 0;} .vp:hover,.vip:hover,.vip1:hover,.vip2:hover,.vip3:hover,.vip4:hover,.vip5:hover,.vip6:hover,.vip7:hover,.vip8:hover,.vip9:hover,.vip10:hover{background:#aaa;}
.vp{background:#2ae;}
.vip{background:#90EE90;} 
.vip1{background:#C1FFC1;} 
.vip2{background:#98FB98;} 
.vip3{background:#7FFF00;} 
.vip4{background:#FFEC8B;} 
.vip5{background:#FFC125;} 
.vip6{background:#FFA500;} 
.vip7{background:#C6E2FF;} 
.vip8{background:#A4D3EE;} 
.vip9{background:#7EC0EE;} 
.vip10{background:#EE2C2C;}
至此，本篇文章结束

主题改动了下，原本的响应式差不多是废了，正好今天放假，呆在家里也无聊的紧，本来想给主题重新做一下响应的，但是弄起来真的是太麻烦了，也达不到我想要的效果，手机加载的东西还是那么多，于是萌生了单独做一个手机主题的想法。

既然想到了，那就实施把，单独做手机主题实现方法其实也蛮多的，但是主要的还是两种，一种是插件，忽略之，用插件不是我性格，于是用代码。

其实也不麻烦，主要就是在主页加个判断，PC和Mobile分开加载，wp_is_mobile()就可以做到，调试起来也很方便

<?php if( wp_is_mobile() ) :
include('m.index.php');
//手机主题文件
else:
//常规主题代码
endif; ?>

用上面的范例修改一下你主题的index代码，然后新建一个m.index.php，这个就是手机版的首页了，用同样的方法，修改page和single，这样就能很快的兼容手机了，不用麻烦的做响应式 最后晒一下小成果吧，有点小简陋，没什么特别炫的功能，凑合着用把：

1 2 3 4

响应式简单说呢就针对不同的屏幕分辨率应用不同的CSS样式。比如在电脑、Pad设备上，屏幕比较宽，就可以一行放2个Div。

到了手机上，或者Pad竖着拿的的时候，一行就只放1个Div。

这里有2个关键点：

一是如何在不修改Dom结构的前提下调整布局。

二是如何判断屏幕分辨率并应用对应的CSS。

以上两点都应该不依赖与JS。

实现第一点依靠的是流式布局。就是所有参与布局的DIV都用float:left，宽度都用百分比表示。比如下图，黄色部分的宽度是60%，橘色宽度是40%。

1

如果将黄色和橘色的宽度都width=100%,那么从1行变成2行了，如下图。从而实现不修改Dom实现布局变化。

2

那么如何不使用JS而实现动态调整CSS样式就是第二个关键点。 HTML5中提供了一种新的CSS语法——@media，学名是Media Query，可以为不同的分辨率设定不同的样式。

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
#head { width: 100%; }
#main { width: 100%; }
#foot { width: 100%; }
#left { width: 100%; }
#right { width: 100%; }
}

上面这段代码的含义就是当屏幕宽度小于等于320像素时应用大括号中的样式。下图是在CSS生效时在浏览器中的效果：

3

@media还有一些更复杂的用法，比如：

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
这段语句就是针对iPhone横屏的。即，浏览器宽度在321-480像素之间，且方向是“横向”时生效。
不过自从Retina这中妖艳的屏幕推出，分辨率已经不能代表世界的真相了。小小的Note3的分辨率比一些17“显示的分辨率还高。
所以还有必要判断一下设备的像素密度-device-pixel-ratio。 
}

@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)

比如上面的语句就是判断终端的像素比是2的话，所渲染的样式。可以适用于iPhone4，iPhone5等设备。

除了上述两点，还需要在页面上增加一个viewport的meta标签，否则在手机上可能会有页面自动缩放的情况。例如：

<meta name="viewport" content="width=device-width; initial-scale=1.0">

总结一下：响应式布局有三个关键点：

  1. 流式布局 Liquid Layout
  2. Media Query
  3. viewport

具体细节就请大家自己研究相关的语法了。

Media Query的语法比较复杂，这里个大家推荐一个工具，可以方便的设计布局，并可以针对各种设备自动生成Media Query的语句： http://www.responsivewebcss.com/

本文转载自腾讯AlloyTeam团队

最近想给博客添加一个分类，但是鉴于新开办的分类并不是那么重要，所以不想让其在首页列表显示，当然需要排除掉，网上普遍的方式是修改主题的index.php或loop.php里的代码，虽然对于我来说改起来还是轻而易举，但是如果主题同时包含多个列表文件，那是就要一个个排除了，不怎么方便，于是找到了下面的这个方法，简单方便，直接修改functions.php就OK了。

下面的方法可以帮你方便地在首页排除特定分类的文章。

复制下面的代码到你的主题functions.php文件：

function exclude_category_home( $query ) {
if ( $query->is_home ) {
$query->set( 'cat', '-99, -999' );
}
return $query;
}
add_filter( 'pre_get_posts', 'exclude_category_home' );

修改第3行的分类ID，然后保存文件，就大功告成了。“-”号就是排除的意思。