将WordPress默认模板宽度改成960px

我曾经把WodrPress的默认模板文章页加入了侧边栏，当时提到这么做的另外一个目的就是准备把WordPress的默认模板由760px（适应800*600及以上的分辨率）改为960px（适应1024*768及以上的分辨率）。毕竟现在使用800*600分辨率的显示器的用户所占比例很小，而17寸普屏，19寸普屏，19寸宽屏，22寸宽屏和14.1寸高分宽屏的笔记本的用户占相对多数。这样做可以让页面两边的空白减少，同屏显示的文字增多(需要对翻页插件的每页显示文章数做调整)。

更改css文件：
编辑wp-content\themes\default目录下的style.css文件，修改如下几个地方，

#headerimg 	{
	margin: 7px 9px 0;
	height: 192px;
	width: 740px;
	}

将 #headerimg中的width由740px改为940px；

#page {
	background-color: white;
	margin: 20px auto;
	padding: 0;
	width: 760px;
	border: 1px solid #959596;
	}
 
#header {
	background-color: #73a0c5;
	margin: 0 0 0 1px;
	padding: 0;
	height: 200px;
	width: 758px;
	}

将#page中width由760px改为960px，将#header中width由758px改为958px；

.narrowcolumn {
	float: left;
	padding: 0 0 20px 45px;
	margin: 0px 0 0;
	width: 450px;
	}
 
.widecolumn {
	padding: 10px 0 20px 0;
	margin: 5px 0 0 150px;
	width: 450px;
	}

将 .narrowcolumn和.widecolumn中的width由450px改为650px，这个操作直接让文章内容区域变宽；

#footer {
	padding: 0;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

将 #footer中的width由760px改为960px，这是在操作页尾；

#sidebar
{
	padding: 20px 0 10px 0;
	margin-left: 545px;
	width: 190px;
	}

将#sidebar中的margin-left由545px改为745px，这一行是侧边栏距页面左边的距离，因为页面左边的宽度增加了200，所以这里也要增加200，否则侧边栏就会和内容区域离得很近。

更改图片：
编辑wp-content\themes\default\images目录下kubrickbg-ltr.jpg、kubrickbg-rtl.jpg、kubrickbgwide.jpg，kubrickfooter.jpg和kubrickheader.jpg文件，将其宽度由760改为960。

更改header-img.php：
有人认为wp-content\themes\default\images中header-img.php文件也要做出适当修改，我认为在没有改动过“外观”-“头部图像和颜色”设置的模板，是不用修改header-img.php文件的。

我将已经完成上述更改的css和图片文件打包放上来，有需要的朋友可以直接下载：
已经做好上述修改的css文件 (10KB)
已经做好上述修改的图片文件 (17KB)

标签： 960px, WordPress, 宽度, 默认主题, 默认模板

这篇文章发布于 2009年06月5日，星期五，15:15，归类于 WordPress。您可以跟踪这篇文章的评论通过 RSS 2.0 feed。您可以留下评论，或者从您的站点trackback。

28 条评论发表在“将WordPress默认模板宽度改成960px”上

这个系统@心灵自由说道：

2009年06月11日 21:51

学习了。谢谢分享。
日后有空再搞，搞个860像素的。呵呵。
sinner 说道：

2009年06月12日 04:58

真不錯,馬上好看許多,不過話說默認主題的外觀需要改善一下
vvv 说道：

2009年06月13日 12:05

文件下载不了…
admin 说道：

2009年06月16日 08:51

hello，楼上，链接已经修复，谢谢你的提醒。
这个系统@心灵自由说道：

2009年06月19日 06:11

将 .narrowcolumn和.widecolumn中的width由450px改为650px，这个操作直接让文章内容区域变宽；
==
我是把760像素变成860像素，但这两个数值并不是增加100而是增加50才正常。不知道是什么原因。如果增加100像素，则正文区内的文字到了边才折行（效果跟零内补丁一样）。只有增加50像素才有现在这种正常的效果。

#2
我认为在没有改动过“外观”-“头部图像和颜色”设置的模板，是不用修改header-img.php文件的。
==
实验证明你是对的。
这个系统@心灵自由说道：

2009年06月19日 06:15

上面第一个问题可能是由于2.8版的默认主题文件在原来的边栏区域新添加了浅灰色背景色造成的。
如果这样的话。增加100像素也是可以的，不过要修改浅灰色背景色的位置，所以比较麻烦。
admin 说道：

2009年06月19日 10:54

hello 楼上
事实上我在从2.7.1升级到2.8的过程中，把之前的所有修改都覆盖掉了，还好因为留下了文档，我也是看着这篇和加入侧边栏的那篇文档重新修改的。不知道是显示器色差的问题还是其他问题，我始终找不到你提到的“2.8版的默认主题文件在原来的边栏区域新添加了浅灰色背景色”在那里，很遗憾哦。
这个系统@心灵自由说道：

2009年06月21日 17:54

晕，你看你的网站首页的边栏，是不是有浅灰色的背景色啊？
admin 说道：

2009年06月22日 08:32

hello 托你指点，看到了，显示器和视线呈30度夹角，终于看到了。：）
的确是液晶显示器造成的色差问题。如果视线垂直于显示器，的确是看不到。
路人乙说道：

2009年07月23日 19:41

谢谢，正想改成宽屏
三峡说道：

2009年08月11日 17:01

学习学习，谢谢分享！

那个还可以下载吧，试试看！
趣味智力题说道：

2010年01月8日 20:50

不错，　我试了，　再也不用之前窄的那么难受了
趣味智力题说道：

2010年01月8日 20:51

不错，　我试了，　再也不用之前窄的那么难受了
http://iq-works.cn/bbs/forumdisplay.php?fid=6
我今天的嘀咕(2010-01-09) « 龙轩的博客说道：

2010年01月9日 13:42

[...] 【Wordpress】将wordpress的默认主题换成宽屏版，文档来自http://liumingquan.net/html/2009_06/wordpress-default-template-will-be-changed-to-960px-width.html 2010-01-09 12:24:31 [...]
pgj1207 说道：

2010年01月11日 10:06

我下载了并替换好了先前的文件，在IE, Firefox上确实是变宽了，一切正常，但在google chrome上有问题
pgj1207 说道：

2010年01月11日 10:08

我在IE, firefox上是正常的，　但goolge chrome上有问题
pgj1207 说道：

2010年01月11日 10:29

google chrome上好像有问题
admin 说道：

2010年01月11日 11:39

Chrome上我这显示没有问题哦
pgj1207 说道：

2010年01月11日 11:44

为什么我的google chrome上出现问题，　IE, Firefox上可以呢
pgj1207 说道：

2010年01月11日 11:48

没想到之前几次回复出现错误，　却提交成功了，　站长帮我删除那些重复的吧
你可以用chrome看看我的站www.genepeng.cn, 这个问题还没解决。
pgj1207 说道：

2010年01月11日 13:54

终于解决了，我把服务器代码和数据库数据库全都拿到本地搭了个环境，发现用Chrome却是正常的，于是想到了，可能是浏览的cache历史数据没有清空，点击clear browsing data后，再访问一次www.genepeng.cn就变好了，唉，真是大意啊，开始没想到是这个原因，害我搞了几个小时。
jfox 说道：

2010年02月10日 00:06

真的可以。不过我是直接下载博主的 style.css 和图片文件直接覆盖的. 呵呵 …
大家可以大我的博客看看 http://www.jfox.info/blog . 不过有个问题，有个图片是28K, 网速慢的时候，画面显示有点错落的感觉 .
jfox 说道：

2010年02月10日 00:09

真的可以。不过我是直接下载博主的 style.css 和图片文件直接覆盖的. 呵呵 …
大家可以大我的博客看看 http://www.jfox.info/blog . 不过有个问题，有个图片是28K, 网速慢的时候，画面显示就会有点错落的感觉 .
alixu 说道：

2010年04月17日 09:23

这个不错最不喜欢现在很多风格都是太窄了
将WordPress默认蓝色主题改为宽屏版 « Sky Bird 说道：

2010年07月27日 09:31

[...] 至此，WordPress默认主题已改为宽屏版。感谢明泉兄弟提供的方法。 [...]
厦门团购说道：

2010年10月8日 14:31

这个还不错，感谢您的工作。。。
byNai 说道：

2010年10月14日 16:25

问一下字体大小是怎么改的？？
admin 说道：

2010年10月19日 12:58

body里边的font-size可以控制字体的大小

明泉