YOOtheme subway主题设置

最近把使用了两年多的主题Modern Style换掉了,取而代之的是yootheme出品的subway主题。subway主题整体上采用了微软最新的metro风格,我想这也是这个主题取名subway的原因吧。

subway是一套收费主题,但是万能的google还是不负所托,让我下到了1.0.0版本。虽然不是最新的版本,另外还有一些bug存在,但至少能用。本以为像一般的主题一样上传激活就能达到demo一样的华丽效果,但是结果却是一片乱七八糟的错位。。。于是悲催的折腾过程又开始了。

  • 1. 主题下载

推荐使用原版的英文主题,虽然在3.4版本以上的WP后台有点错位。国内有几个汉化的版本,我试的时候都有一些问题,而且比较恶劣的是,汉化版的主题都不约而同地把版权信息改成了自己的,更有甚者还加了密…虽然我也是免费用了这个主题,但是总归心有戚戚焉。

subway主题有两个包,一个是主题包,另一个是WordPress Demo Package。后者是demo站点的整站打包,包含了wordpress程序,subway主题,demo站用到的素材,Widgetkit插件及其subway专用样式

  • 2. Widgets的安装和配置

subway主题的侧边栏除了常规的安装外,还要在Dashboard->Subway->Widget options设置各个widget的样式和显示的页面。下面就按照我自己的样式把具体设置分享一下。主要参考了官方的文档,需要的图片等素材要提前放到相应的目录中。

  • 首先是logo的设置
<img src="/wp-content/uploads/yootheme/logo.png" alt="logo" height="65" />
  • 最右边浮动的Social-icon
<ul class="social-icons">
<li><a class="twitter" target="_blank" href="https://twitter.com" ></a></li>
<li><a class="facebook" target="_blank" href="http://www.facebook.com"></a></li>
<li><a class="googleplus" target="_blank" href="https://plus.google.com"></a></li>
<li><a class="feed" target="_blank" href="http://feeds.feedburner.com"></a></li>
</ul>
  • 在breadcrumbs位置拖入Warp – Breadcrumbs这个widget。还有别忘了search。
  • Gallery和Contact类似

写入下面的内容后Widget options设置里的title选择hide,style选择box。

<a href="http://#">
<img class="size-auto align-center" src="/wp-content/uploads/yootheme/icon/icon_gallery.png" height="126" width=“126” alt=“Gallery Icon" />
<h3 class="module-title">Gallery</h3>
</a>
  • RSS Feed模块

由于Widget options设置里只有两种颜色可以选择,所以我在加入RSS Feed模块时修改了一下CSS。先在widget中写入以下如下代码。在Widget options设置里的style选择blank。

<div class="mod-box mod-box-color3 deepest" >
<a href="http://feeds.feedburner.com/pgxblog">
<img class="size-auto align-center" src="/wp-content/uploads/yootheme/icon/icon_rss.png" height="126" width="“126”" alt="“RSS Feed" >
<h3 class="module-title">RSS Feed</h3>
</a>
</div>

然后修改CSS目录下的style.css,加入以下内容来定义color3的样式:

.mod-box-color3 {
background: #dc9f27;
background: -moz-linear-gradient(-45deg, #f2c56f 0%, #dc9f27 100%);
background: -webkit-linear-gradient(-45deg, #f2c56f 0%,#dc9f27 100%);
background: linear-gradient(-45deg, #fbbb3f 0%,#dc9f27 100%);
}
.mod-box-color3 a { color: #F6E1B9; }
.mod-box-color3 a:hover { color: #ffffff; }
  • aboutme模块
<a href="http://hi.pgx.me/about">
<div style="height: 67px; width: 220px; padding-top: 150px; background: url(http://hi.pgx.me/files/aboutme.jpg) no-repeat;" >
<h3 style="color: #fff;" class="module-title">about me</h3>
</div>
</a>
  • 图片展示区

图片展示需要用到widgetkit插件。在widgetkit中创建一个Slideshow,style选择subway,Effect选择KenBurns即可。当然,还要把生成的widget放入sidebar中。

  • 3. 导航栏

导航栏的配置按照官方的文档设置就可以了,唯一需要说明的是,1.0.0版本的主题在3.4以上的wp中不能显示导航栏的图标,这不得不说是一个遗憾呐!不过补救的办法可以参考这里

总算是写完了,回头看一下也就这不多的一些代码而已。但是由于本人不会写代码,有的只是举一反三的能力,还有不厌其烦的尝试。这也就是所谓的折腾了,浪费了不少时间。估计有一段时间不用折腾代码了,有了好看的博客之后应该多更新更新了,还是这句老话,博客要内容为王才行。

32 Comments

  1. 感觉本人语言表达能力太差了,写了那么长才写完,竟然没有发现wp3.x可以添加导航栏图标,以后还要努力

  2. lz,Columns 选择 和Images 填了之后,每次点击保存后,都保存不了。怎么回事?

  3. 请问一下,你这个评论框是怎么弄的,FCKeditor怎么修改,才是你这个样的?

  4. 同样是1.0.0,为啥你的背景有点点中间亮的感觉?
    我的是却是一片蓝色。。。咋设置的?
    pls email me

  5. 老兄,能否把那个WordPress Demo Package给我传下?我google了好久都下不到啊。fyd27@126.com 谢谢了

  6. 博主 我也找了很多这个主题都没有演示数据 能否发我一份WordPress Demo Package 包

  7. hello. i need your help please can u send me data package of subway theme or upload it and send me a link … thanks in advance. its veru urjent hope u understand..
    my mail id : aby.cool24@gmail.com

  8. 博主写得太详细啦,真是受益多多!!!我想问下,博主右边的那个喂乌龟那个flash,如果我要放我自己的flash文件上去,我要怎么放上去呢?怎么实现的?

发表回复

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据