边栏在左边的两栏式 k2 主题

因为网站需要一个2栏式主题,并且边栏在内容左边,所以编写了这样一个k2的子主题。

A child theme of K2 has two columns with sidebar on the left.

边栏位于左边这样的主题并不是很多,官网上大约有十几个吧,可是其设计都不太符合我的要求。因为一直使用K2作为我个人网站(就是您看到的这个)的主题,比较熟悉,就设计了这个子主题(Child Theme,或者看看k2文档,也有k2子主题的创建说明,英文)。为了方便大家使用,这里仅仅改变了布局和栏目宽度,其它的都未做改动。

一、修改后主要特点

  1. 将页面宽度(#page)设置为1000px,边栏宽度为180px,可自行修改为其它任何值;
  2. 2栏式布局(要求在WordPress控制面板中设置主题小工具的时候将右边栏内容留空);
  3. 其它特性同原K2。

看看布局图吧。呵呵,太懒了,就不再搭建测试空间来展示测试页面了,这是用于测试我的网站的一个本地WordPress安装的截图:

边栏位于左边的两栏式k2子主题

边栏位于左边的两栏式k2子主题

二、k2-zhx 子主题CSS文件

/*
Theme Name: k2-zhx
Theme URI: http://cnzhx.net/
Description: K2 child theme. A modified k2 theme with only one sidebar on the left of page(leave the other right one empty in WordPress control panel). Based on K2 version 1.1 revision 1144, 2010-08-24.
Author: Haoxian Zeng
Author URI: http://cnzhx.net/
Template: k2
*/
/* reset width of all types of page to 1000px,将页面宽度设置为1000px */
.columns-one #page,
.columns-one.smartposition #rollingarchivesbg,
.columns-two #page,
.columns-two.smartposition #rollingarchivesbg
.columns-three #page,
.columns-three.smartposition #rollingarchivesbg {
width: 1000px;
}

/* reset content column width to 760px,重设内容栏宽度为760px */
.primary {
width:760px;
}

/* reset sidebar width to 180px,重设边栏宽度为180px */
.secondary {
width:180px;
}

/* re-arrange the layout to sidebar-content,修改布局 */
/*将内容栏右移190px*/
.primary {
margin-left: 190px;
}

/*将第一边栏(左边栏)左移760px,并且将其定位到自身左边190px(相对于本身宽度180px留有10px的空白缝隙)处*/
.secondary {
position:relative;
float:left;
left:-760px;
margin-left:-190px;
}

三、使用方法

注意:该子主题必须配合k2主题来使用!使用前请先下载安装k2主题

如果你有编制子主题的经验,可以使用上面的css创建style文件自行编制子主题。请参照WordPress官网子主题(Child Theme)文档,或者查看k2文档,也有k2子主题的创建说明。均为英文。

简要说明如下:

1、先下载安装k2主题,同一般主题的安装方法;

将下载后的主题文件解压,将文件夹中的 k2 文件夹整个放置到WordPress安装目录下“/wp-content/themes/”文件夹中。

2、下载安装 k2-zhx 主题,同一般主题的安装方法;

将下载后的主题文件解压,将文件夹中的 k2-zhx 文件夹整个放置到WordPress安装目录下“/wp-content/themes/”文件夹中。请注意style.css文件的路径应为 “k2-zhx/style.css” 而不是 “k2-zhx/k2-zhx/style.css”!

3、在WordPress控制面板“主题”管理区启用 k2-zhx 主题即可。

四、存在的问题

今天测试后发现这个主题在IE6下会有些问题,边栏会飘浮到页面顶上。实际上,我使用的这个没有修改布局的K2主题也会有这样的问题,在IE6下,本来在中间的那个边栏跑到了左边,而且压住了部分主栏的内容,也“飘浮”到了顶上。

似乎并不是因为我改变了部分样式才出现这样对IE6浏览器不兼容的问题的。IE6的确该被抛弃了,可是看我自己的网站,大约还有16%的访问者使用的是IE6浏览器。IE6的唯一优点就是占用内容很小了。

如果有朋友知道怎么解决,请留言。先谢谢了!

五、其它

如果使用中有什么问题,欢迎到讨论区留言。转载请注明来自不存在的空间

本文链接:http://cnzhx.net/blog/two-columns-k2-theme-with-sidebar-on-the-left/©

本文发表于水景一页。永久链接:<http://cnzhx.net/blog/two-columns-k2-theme-with-sidebar-on-the-left/>。转载请保留此信息及相应链接。

1 条关于 “边栏在左边的两栏式 k2 主题” 的评论

  1. 引用通告: 给基于WordPress的网站页面添加描述和关键词 « 水景一页

雁过留声,人过留名

您的电子邮箱地址不会被公开。 必填项已用 * 标注

特别提示:与当前文章主题无关的讨论相关但需要较多讨论求助信息请发布到水景一页讨论区的相应版块,谢谢您的理解与合作!请参考本站互助指南
您可以在评论中使用如下的 HTML 标记来辅助表达: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>