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

admin — Fri, 05 Jun 2009 07:15:23 +0000

我曾经把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默认模板宽度改成960px