将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文件,修改如下几个地方,

42
43
44
45
46
#headerimg 	{
	margin: 7px 9px 0;
	height: 192px;
	width: 740px;
	}

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

237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
#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;

259
260
261
262
263
264
265
266
267
268
269
270
.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,这个操作直接让文章内容区域变宽;

313
314
315
316
317
318
#footer {
	padding: 0;
	margin: 0 auto;
	width: 760px;
	clear: both;
	}

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

574
575
576
577
578
579
#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)

留下回复