制作wp主题遇到问题汇总

最新推荐文章于 2024-05-01 03:49:48 发布

湮湮

最新推荐文章于 2024-05-01 03:49:48 发布

阅读量523

点赞数 1

分类专栏：老文章归档文章标签： wrapper div header 浏览器 firebug float

本文链接：https://blog.csdn.net/cherryalps/article/details/5981427

版权

老文章归档专栏收录该内容

6 篇文章 0 订阅

订阅专栏

从零开始制作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的空格就可以了。即：

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部分修改如下：

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

（2010年1月30日）