YOOtheme subway主题设置

Wordpress, , , , 32 Comments

最近把使用了两年多的主题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 填了之后，每次点击保存后，都保存不了。怎么回事？

    回复

  5. 请问一下，你这个评论框是怎么弄的，FCKeditor怎么修改，才是你这个样的？

    回复

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

    回复

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

    回复

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

    回复

  17. 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

    回复

  19. 博主写得太详细啦，真是受益多多！！！我想问下,博主右边的那个喂乌龟那个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来减少垃圾评论。了解我们如何处理您的评论数据。