WordPress主题折腾的小经验

axiu 撰写于 2010/04/13 | 54 条评论

折腾主题的时候,偶尔会碰见这样的事:主题不兼容各种浏览器,写出的样式在浏览器下样子很多变,但基本没型。或者在某个特定的浏览器下严重变形。边栏掉地上了或者某个地方怎么整位置都不是想象中的。解决这些问题会耗费很多时间,所以对于我这样的css新手来说,建一个新主题时间基本都花在了css的调试上。以下是一些主题制作的过程的小经验。

1、不经常使用具体的px大小,在元素高度和宽度、各个项目的字体大小设置时用了%。我觉得好处是不用计算内部元素到底要多长多高的px,只要想想占多大比例,坏处是调整的幅度稍微有点大。

2、仔细想想再动手。比如前一个主题,在导航栏下总有一条线,似乎是border,但是怎么改都有。最后整体看了一遍才明白是多嵌套了一个div。删除了一切正常。其实只是走的太进了,我的意思是,总是希望在现有基础上不断改出合适的。但是有时候需要后退一点,例如试着删除继承自的某个项目,也许就会好了。

3、项目对齐。ul里面套li的时候很容易出现某些项目对不齐,即“错位”,多见于IE系列。我的主题出现在IE8下,我的解决办法,用了一个display:block之后就正常显示了。

4、浏览器的兼容问题。这是个经久不变的话题。尤其是对于IE,从刚开始的迷惑到后来的讨厌,之后的麻痹,一直到了现在的包容。不能怪IE什么,一个时代的产物,毕竟是它让我们大部分人走近了网络。但是,该死的时候还是要死的。之外有时候只是我们一些东西写的有点问题,hack是一种很好的解决办法。

firefox和safari(chrome等)下,-moz 只对 Firefox有效, -webkit 只对 Safari 浏览器有效。

IE系列(主要是IE6和IE7)有两种形式的兼容写法。

<!--[if IE 7]> 
<style type="text/css">
......
</style> 
<![endif]--> 
 
!--[if IE 6]> 
<style type="text/css"> 
......
</style> 
![endif]-->

或者

/* IE 7下 */  
{*display:;} 
 
/* IE 6 下*/ 
{_display:;}

推荐使用第一种。

5、页面宽度比例。一般主栏和侧边栏的比例不超过3:2。我今天才发现小于的60%和40%看起来舒服多了。边栏过宽显得主次不分明。

最后,新建了一个theme页面,以后主题目录和介绍就放里面啦,欢迎参观讨论。

评论:54

  1. lifishake lifishake 10/04/14

    设置font的时候还是按照大能的经验用em的好.因为以em为单位的支持浏览器的缩放.

  2. 帅哥 帅哥 10/04/14

    hack要记住的…

  3. sleepy sleepy 10/04/14

    主题的修改是最麻烦的,像我目前在用的那个主题,其他浏览器都没有问题,唯独ie8就是不显示背景图片,非常地郁闷!

  4. susie susie 10/04/14

    前排进入。哈哈,你超爱换Logo~ :mrgreen:
    我用的最少的就是IE,该死的赶紧死。。。。
    阿修,你的表情是怎么弄的,我昨天下载好了,传上去后台的插件里面看到的还是那批旧的默认表情,删除、覆盖都试了,插件卸载又装也还是这样。。我喜欢这个方块表情~ :cry:

    • axiu axiu 10/04/14

      @susie 常换常新嘛,哈哈。我替换了WP的表情,位置在wp-includes\images\smilies。
      方块脸表情http://zou.lu/how-to-get-more-comments-on-your-blog/

  5. 万戈 万戈 10/04/14

    我是来偷经验值的

  6. zwwooooo zwwooooo 10/04/14

    我现在的主题不用hack了,唉,懒,反正只是ie6下样式差点

  7. leesum leesum 10/04/14

    经常总结经验是个好习惯 :wink:

  8. 隐残影 隐残影 10/04/14

    :grin: 思路清晰就好….

  9. pingcenter pingcenter 10/04/14

    嗯那,很受用。。 :wink:

  10. 数数 数数 10/04/14

    牛人啊..下次来请教你~~ :grin:

    • axiu axiu 10/04/14

      @数数 瞎折腾,不敢牛

    • 指舞六弦 指舞六弦 10/06/04

      @阿修 :?: 请问你下 我那里表情在回复后怎么变的和头像一样大 怎么处理呢 诚心请教勒 呵呵

    • axiu axiu 10/06/04

      @指舞六弦 用的chrome没发现问题啊,会不会是浏览器的原因?

    • 指舞六弦 指舞六弦 10/06/04

      @阿修

      :mrgreen: 我最后将头像和评论表情只有改成一样大了
      头像将就表情来调整,所以你看我头像好袖珍的呐,不晓得哪里可以调整回复里面的表情,让它和头像不同步

    • axiu axiu 10/06/04

      @指舞六弦 你的评论头像又属性avatar,单独给设定一个大小就行啦。比如
      .comment_list .avatar{width:xx;height:xx;}
      这样

    • 指舞六弦 指舞六弦 10/06/04

      @阿修
      哦 这样可以啊 要是不用avatar头像的呢?
      对了好象不存在这么个问题啊 :razz:

    • axiu axiu 10/06/04

      @指舞六弦 呵呵,能解决现在的问题就行啦~不用的时候自有办法的。

  11. 最悲剧的改主题经历是,
    折腾了好些天终于把主题改得很满意,
    谁知道过两天WP一更新,主题不兼容……

  12. Vicia Vicia 10/04/15

    做主题的过程中记下经验是个好办法,以后再弄的时候还可以有个参考。 :oops:

  13. 集趣 集趣 10/04/15

    只要显示正常,微小的差别就无所谓了! 我制作主题的时候,在很多浏览器都正常,就是设计方面差了些

  14. derek derek 10/04/15

    赞,新手可以少走弯路了

  15. 郑永 郑永 10/04/16

    谢谢啊,非常不错,收藏了,几天没来,新文章堆积如山啊。有个好主题就不再折腾了,累了,折腾来折腾去,发现由回到原地了。

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

:razz:

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" highlight="">