輕鬆讓WordPress博客擁有移動版頁面[順手改造]/未完

screenshot-1目前我的部落格在touch和nexus one上顯示得都不是很好,正巧一個常去的app網站“愛apps”推出他們的觸摸屏頁面。偶然發現它們原來是在用WPtouch這麼個插件,再加以自己的改造,做成的如此個界面風格。

我直接搜索安裝了wptouch這個插件,經過設置,也勉強能用。至少比原來那個手機界面(和電腦端一樣)。要好得多了,不過,缺陷仍然比較多。譬如沒有縮略圖功能啦,沒有顯示自己喜歡的頁面與首頁上的功能啦,等等。

正當就此認命知足的時候,不幸的用眼瞟到了桌面的DW圖標,於是……下面還有

主要改造目標

加入H4/5/6等標題css效果的支持

自帶的h3效果算是非常的美觀

我很欣賞,所以連部落格本來的,也換成它這個風格。

至於改點css,這也實在算不得什麼大事,以

background-color: #BBB;
border-bottom: 1px solid #F1F1F1;
border-top: 1px solid #F1F1F1;
color: #555;
font-size: 15px;
font-weight: bold;
line-height: 14px;
margin: 15px -10px;
padding: 10px;
text-align: left;
text-shadow: white -1px 1px 0px;

這個類似更改而來,非常之輕鬆,加入的自然是

wptouchthemesdefaultstyle-min.css

改一下裡面的h4 h5 h6 就行

.pageentry h2, #singlentry h2 {
    font-size: 18px;
    text-shadow: #f9f9f9 -1px -1px 0;
    border-bottom: 3px solid #C30;
    border-top: 3px solid #C30;
    text-align: left;
    background-color: #e2e2e2;
    padding: 15px;
    color: #222;
}
.pageentry h3, .mainentry h3, #singlentry h3 {
    text-align: left;
    color: #666;
    font-size: 15px;
    border-bottom: 1px solid #adadad;
    border-top: 1px solid #adadad;
    padding: 10px;
    font-weight: bold;
    line-height: 14px;
    background-color: #eee;
    margin: 15px -10px;
    text-shadow: #fff -1px 1px 0;
}
.pageentry h4, .mainentry h4, #singlentry h4 {
    font-size: 13px;
    text-shadow: #f9f9f9 -1px -1px 0;
    background-color: #ddd;
    padding: 8px;
    color: #555;
}
.pageentry h5, .mainentry h5, #singlentry h5 {
    text-shadow: #f9f9f9 -1px -1px 0;
    border-bottom: 1px solid #adadad;
    border-top: 1px solid #adadad;
    font-size: 12px;
    padding: 5px;
    color: #444;
}
.pageentry h6, .mainentry h6, #singlentry h6 {
    text-shadow: #f9f9f9 -1px -1px 0;
    font-size: 10px;
    background-color: #ccc;
    padding: 0;
    color: #444;
}

上面給出的是一個樣式,具體怎樣,可以自己玩。

多出個分頁欄

<div id="nav" style="background: black url(<a href="http://minyueguo.com/wp-content/themes/stationpro/images/bg_nav.png)">http://minyueguo.com/wp-content/themes/stationpro/images/bg_nav.png)</a> repeat-x 0px 0px;
border: none;
border-top: none;
font-size: 0.85em;
font-weight: normal;
line-height: 1.1em;
padding: 8px 8px 0px;
text-transform: uppercase;" class=" fix">
  <?php if (bnc_is_pages_enabled()) { ?>
  <ul class="dropdown clearfix">
    <li class="page_item "><a class="home" href="<?php echo get_settings('home'); ?>/" title="Home">Home</a></li>
    <?php

                                        $frontpage_id = get_option('page_on_front');

                                        wp_list_pages('sort_column=menu_order&exclude='.$frontpage_id.'&depth=3&title_li=');?>
  </ul>
  <?php } ?>
</div>

無非在header裡面找個地方插入上面一段,不過效果很不怎麼樣。

回复界面的美化

本人無能,這個還沒搞好

次要改造目標

自動截取第一副圖片作為移動版展示的圖片

Auto Post Thumbnail 這個插件就能應付了。

如果什麼圖都沒有,就用日期來做展示圖吧

還沒弄好,不過挺容易的,放心吧,近期推出

效果展示

Android界面

snap20101011_234427(Nexus One 2.2.1)

ipod touch/iphone 界面

IMG_0058IMG_0059(touch4 ios 4.1)

Proudly powered by WordPress | Theme: Journey Blog by Crimson Themes.