制作wp主题遇到问题汇总

2010/01/30 - 20:07      Post by cutey

4,195 views

从零开始制作WP主题，过程中发现了许多问题，有些解决了，有些没解决，在这里汇总下，以备继续学习。

1.火狐浏览器下的div嵌套问题（父div无法自适应高度）

为了方便控制主题的整体宽度以及颜色等，我定义了一个content父div用来包含contain和sidebar两个子div，还有一个wrapper父div用来包含header、content、footer等子div。结果发现header等子div的背景颜色只能随着body的颜色变化，而不能随着wrapper和content的颜色变化，这在理论上是不应该的。

首先我想到的是我的div封口有问题，但是经过仔细检查，没有发现任何错误，而且我使用的火狐浏览器的Firebug也显示定义的warpper只包含了header部分而没有包含其余几个div。正当心灰意冷时突然想到可以用IE查看一下，打开IE，惊喜的发现是自己想要的效果。但是为什么在火狐中就不行呢，一开始我认为是火狐浏览器不支持div嵌套的问题，随即上网查了下，发现其实是火狐浏览器中父div的高度不能根据子div自动变化的问题。

这个问题是有很多解决方案的，对于content作为父div包含contain和sidebar的情况比较简单，只需将三个div的float都设为left就可以了。这时父div的高度就会随着左右两个子div的高度变化而变化，甚至可以无限拉长，完美解决了需要左右两div高度不同但风格相同的问题。

但是对于wrapper作为父div包含header、container、sidebar、footer等子div的情况，就要稍微麻烦一些。因为wrapper一般都是相对屏幕居中的，不能将float设为left，那该怎么办呢？不用担心，这时只需在父div的封口</div>之前添加一个高度为1的空格就可以了。即：

<body>
<div id="wrapper">
    ... ...
    <div style="font: 0px/0px sans-serif;clear: both;display: block">
    </div>
</div>
</body>

2. 评论模块的设计

几乎每个文章页面都会有一个评论模块，评论模块的设计是非常重要的，也是体现交流互通的一个重要方面。我看到许多下载的模板都有重写commentlist的，由于我水平有限，直接调用的<?php wp_list_comments();?>函数。但是原始的commentlist却不是很好看，需要自己修改style.css文件进行风格定义。

相信很多朋友都喜欢commentlist颜色交替出现的样子，这个只需简单的定义even和odd的值就可以了，如：

.even{
    background: #fcebe2;  /*随意定义自己喜欢的颜色或背景填充*/
}
.odd{
    background: #FEF5EC;  /*随意定义自己喜欢的颜色或背景填充*/
}

但是如果是使用了评论嵌套，就会发现一个问题，即even和odd是按所有评论进行排序的，这样难免会造成上下两个一级评论由于上面的评论有嵌套而出现相同的颜色，此时我们可以使用thread-even和thread-odd来定义一级评论显示为交替颜色，如：

.thread-even{
    background: #fcebe2;  /*随意定义自己喜欢的颜色或背景填充*/
}
.thread-odd{
    background: #FEF5EC;  /*随意定义自己喜欢的颜色或背景填充*/
}

另外，如果想让一级评论使用统一风格而从嵌套评论才开始交替颜色则可以直接用.depth-1来定义一级评论的颜色，如我的评论就是所有的一级评论背景都是白色，然后从第一层嵌套开始使用粉色和白色的交替色，这是我喜欢的风格。

如果想让作者的评论呈特殊的颜色，也是十分简单的，此时只需重新定义下bypostauthor就可以，如：

.bypostauthor{
    background: #00000;  /*随意定义自己喜欢的颜色或背景填充*/
}

3. 优化文章页面标题

主题做好之后发现一个重要的问题，就是文章页面的标题总是网站标题在前、文章标题在后，如“Memory of Cutey>>制作wp主题遇到问题汇总”这种形式，且不论对搜索引擎友不友好，看起来就很不舒服。据说有一个插件是可以帮忙实现文章页面标题优化的，叫做all-in-one-seo，但是很多人都说使用这个插件利大于弊，于是我决定通过代码修改。

添加这部分代码其实不难的，只需要修改下header.php的title部分即可。我是希望修改成先显示文章标题、后显示网站标题的形式，即“制作wp主题遇到问题汇总 | Memory of Cutey”，所以将原来的title部分修改如下：

<title>
    <?php {wp_title(‘’);}?>
    <?php if(wp_title(‘’, false)) {echo ‘ | ’;}?>
    <?php bloginfo(‘name’);?>
</title>

目前遇到的问题就这些，以后遇到再继续补充吧。自己看了看感觉写的有些混乱啊，唉，文字表达能力越来越差了呢。

Tags: , ,   Filed under: 程序猿MM
Related Posts

24 Responses

  1. alps 说到：
    2010-01-30 @ 22:17

    支持！ 技术类的文章要顶~嘿嘿~

    回复
  2. athens 说到：
    2010-02-05 @ 13:29

    试一下回复

    回复
  3. Firm 说到：
    2010-02-06 @ 16:13

    厉害，俺还没勇气自己尝试做第一款WP主题，一直坚持不下来

    回复
  4. AV客 说到：
    2010-02-15 @ 14:59

    老早就想回复这篇文章.,之前用手机回复的,显示错误,希望能修正.

    回复
    • cutey 说到：
      2010-02-18 @ 21:33

      呃， 之前的回复没收到呢，可能是不支持手机吧，我也没用手机试过呢，研究下，嘿嘿~~

      回复
  5. 兜兜 说到：
    2010-02-25 @ 22:07

    头像像我师傅。

    回复
  6. cluries 说到：
    2010-02-26 @ 21:59

    呵呵
    又一个女滴WP主题制作者

    回复
  7. Dianso 说到：
    2010-03-24 @ 11:32

    我也是手机找到这的，试下我手机能留言么

    回复
  8. Afio 说到：
    2010-03-24 @ 22:33

    女强人 汗。。。。还有评论字数限制 我+_+

    回复
  9. Afio 说到：
    2010-05-05 @ 22:27

    刚发现右上角的头像可以再美化美化,把灰色背影换成和底色一样的白估计会更好，哈哈

    哎 那个是QQ秀吧我感觉很很像

    回复
  10. SEO提高网站排名 说到：
    2010-06-29 @ 18:41

    支持！下次再来继续学习！

    回复
  11. iove86 说到：
    2011-02-06 @ 09:54

    请问我在twenty主题的header.php中直接用标签插入图片无法显示是怎么回事？不管src写得是绝对地址还是相对地址都不行，图片时正常的，我试过原始图片跟ps图片，一样不显示啊……

    回复
    • cutey 说到：
      2011-02-09 @ 22:15

      不好意思，这几天一直没上网。
      这个跟图片有没有PS过没有关系，不过如果改写PHP文件的话路径中要先调用主题文件，嫌麻烦的话可以直接改写CSS文件，那样比较方便O(∩_∩)O~

      回复

Leave a Reply