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中不能显示导航栏的图标，这不得不说是一个遗憾呐！不过补救的办法可以参考这里。

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