2015年4月23日

Blogger 自訂行動版範本實作﹍(1) 標頭+導覽列+廣告

A+
blogger-mobile-customize-templateBlogger 的行動版網頁,呈現方式可以有三種選擇:

1. 自適應網頁 (RWD)
2. 官方行動版
3. 自訂行動版

該使用哪一種,可根據你的網站屬性,參考「Blogger 應該選擇自適應範本(RWD), 還是行動版範本?」→「四、你適合哪一種選項?」來抉擇。

最近 WFU BLOG 完成了「自訂行動版」的大工程,不過為何排除了 "官方行動版" 與 "RWD" 呢?考量的因素大致有這些:

  • RWD 範本內容比較肥大,會使行動裝置載入時間過久,帶來較差的使用者體驗。
  • 原本一直使用的官方行動版範本,版面簡潔、使用者體驗佳、不需管理成本。可惜版面效果跟網頁版不一致,不像同一個網站
  • 如果網站屬性為純粹的內容分享網站,那麼使用 Blogger 官方行動版的影響不大。不過若是經營個人品牌、形象網站,那麼使用 Blogger 自訂行動版,可讓版面風格一致,對品牌有加分的效果
  • 使用自訂行動版後,可以自行修改許多官方行動版做不到的事,優點算是不少,後面的實作內容會詳述。

如果你也決定要改造行動版的頁面,可先閱讀「Blogger 行動版範本修改技巧」有個初步概念,最好也具備基本的 HTML / CSS / Javascript 概念,接下來可參考本文我的實作過程,相信會有所助益。

如果自行修改範本有困難,或自訂行動版這件事想節省時間、由本站代為處理,可再與我聯繫。



一、自訂行動版的目標


WFU 自訂行動版想達到的目的有兩個:版面風格一致、提升行動裝置的網頁載入速度。

1. 版面

行動版與網頁版的版面要一致,可以說很容易,也可以說是很麻煩,聽起來似乎很矛盾?

容易的部分:

只要在後台將行動版範本設為 "自訂" 後,就算什麼事也沒做,行動版的頁面就自動成為網頁版了,那麼版面的所有配色、圖案全部都相同,自然可以說是很容易了。


麻煩的部分:
  • 行動版的頁面寬度最小為 320px,而網頁版可能是寬 1024px 以上,各個區塊勢必得進行 CSS 的調整,需要有 CSS 的概念。
  • 行動版與網頁版的文章區塊,在範本中是不同的內容,需要有 HTML/CSS/JS 的概念,才能自行調整。

如果熟悉範本修改的話,有兩種方式進行:
  • 利用 Blogger 判斷式,設定行動版的 CSS 版面
  • 區塊寬度不使用固定值(例如像素 px),改用百分比設定,達到自動調整的目的


2. 速度

官方行動版範本速度快的主因為,去除了所有側邊欄、及大部分的額外功能。其實行動版就是需要這樣的設計,手機的螢幕面積小,塞太多外掛、小按鈕也看不清楚或不好按,且行動裝置使用者主要的目的就是查詢資料,若頁面充斥太多額外資訊也沒時間或心情去看。

因此我的自訂行動版以仿效官方行動版為主,去除網頁版所有側邊欄、及不必要的 js 外掛(例如瀏覽數、線上人數等等),只增加一些必要的額外資訊、分享按鈕等等,以減少行動版範本的載入時間。



二、自訂行動版的優點


官方行動版是綁死的,無法做任何版面調整、也無法裝任何的外掛,因此自訂行動版可以做到一些官方行動版做不到的事,以下是我增加的一些功能,也可算是自訂行動版的優點:

1. Adsense 廣告

官方行動版的 Adsense 廣告,位置及尺寸都是綁死的,不一定是最好的配置。使用自訂行動版後,可以隨心所欲使用大尺寸、放在任何想要的位置,更能增加收益。


2. 社交分享按鈕

官方行動版的預設分享按鈕,說真的實在遜,數量又少。可以自訂後,當然是所有想安裝的分享按鈕全部放上去囉!


3. Histats 計數器

官方行動版無法安裝任何外掛,自然「Histats 計數器」也就無法統計行動版的流量。現在可以自訂後,Histats 數據就比較真實了。


4. 提供額外資訊

在文章結束處放「系列文功能」、「相關文章」這類的資訊可以增加訪客停留在我們網站的機會,使用自訂行動版,就可在文章結束處放各種額外的資訊,提供給訪客參考。



三、標頭區塊


在開始之前,確定你已經詳讀了「備份範本的訣竅」系列文章,並且有 HTML/CSS 的基礎。

以下開始實作的內容,網頁區塊從由上到下來敘述。


wfublog-desktop-header

上圖為原本的網頁版標頭,寬度約 980px,放了一些導覽用的按鈕。但這樣的寬度及按鈕數量,不好移植到行動版。


wfublog-mobile-header

於是行動版將按鈕移除,而 Logo、網站標題及敘述,改為置中顯示。

修改範本的要訣主要有兩點,而修改其他區塊同樣可參考:




四、導覽列區塊


如果沒有使用「下拉選單」的話,那麼可以跳過這個章節,因為沒有下拉選單的導覽列,行動版是能正常運作的。如果使用了下拉選單,會導致行動版的導覽列項目,按下去沒有作用,那麼就必須為行動版另外做一個導覽列。

簡單說明一下原理:
  • 假設網頁版的導覽列為 A,另外做一個導覽列 B。
  • 將 A 區塊在範本中的參數設定為 mobile='no',將 B 區塊在範本中的參數設定為 mobile='yes' → 代表 A 只會在網頁版顯示,B 在兩個版本都會顯示。
  • B 必須只在行動版顯示,因此利用判斷式,讓 B 在網頁版隱藏 (display: none)
  • 然後 B 的導覽列項目另外設定,專供行動版使用即可。

以上流程光看敘述也許不是很明瞭,詳細實作方法請參考這兩篇文章:

會引述第二篇文章,主要在說明若將導覽列設定為 mobile='only' 時,會引起行動版版面配置的問題。因此前面的操作流程,將 B 區塊設定為 mobile='yes',是繞遠路的方法,不過是目前唯一不會出錯的方法。



五、Adsense 廣告


如前所述,官方行動版的 Adsense 廣告,不一定是最好的配置,本站的行動版做了以下改變:

blogger-mobile-adsense-optimize

1. 如上圖,將最上方的 320 x 50 廣告,改放到導覽列下方,且尺寸改為 320 x 100。

2. 在文章中各種位置能安插 Adsense 廣告。

詳細的操作流程,請參考這篇「Blogger 行動版如何讓 Adsense 最佳化」。


由於篇幅的關係,文章區塊及側邊欄、其他區塊的修改,請見下一篇的內容。


自訂行動版系列文章:

2 則留言:

  1. 手機版頁面那個下拉選單會超出螢幕範圍@@

    回覆刪除
    回覆
    1. 謝謝提醒,因為我的網頁版下拉選單設定了寬度,正常情況下如果讀者沒像我這麼做的話,不會出現這個狀況。

      雖超出螢幕,但訪客點擊仍會出現下拉選單,所以不影響操作,所以一直沒有理會這件事。不過現在想想,行動版把寬度設為 100% 就可讓箭頭出現,操作會比較直覺一些,所以還是找時間來改一下 ^^

      刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。