2014年5月5日

修正導覽列下拉選單的矛盾__在Blogger網頁版及行動版正常運作的訣竅

A+
發佈「下拉選單安裝懶人包」一陣子後,發現會造成兩個小缺陷:

1. 行動版的網頁小工具失去作用
2. 對網頁版 SEO 稍微有點影響

因為 WFU BLOG 的行動版讀者不多,因此一直未針對這件事進行調校。直到最近換了新網址後,需要重新做 SEO,所以剛好來一次解決這兩個問題。



一、下拉選單造成的影響


1. 下拉選單的原理

下拉選單通常利用 CSS 語法,將選單隱藏起來,當滑鼠經過導覽列時,觸發 hover 狀態,再執行 CSS 來顯示選單,此為下拉選單的原理。


2. 平版裝置的現象

然而在平版裝置,並不存在滑鼠、所以也沒有所謂的 hover 狀態,這導致使用者必須做「按下」的動作,行動裝置才會認定這是「hover 的狀態」

為了在平版裝置做「按下」的動作,來顯示下拉選單,那麼超連結必須設定為井字符號 "#",而不能設定為某個網頁的超連結,避免按下後無法觸發下拉選單,反而跑到別的網頁去了。


3. 手機裝置的現象

然而「網頁」小工具設定的超連結為 "#" 時,在 Blogger 的官方行動版,「網頁」小工具的連結就等於沒有作用 → 這造成在手機上,網頁小工具形同虛設。


4. SEO 問題

當「網頁」小工具設定的超連結為 "#",就失去了一個可以建立連結的機會,來讓搜尋引擎爬取及建立資料。


因此,下拉選單會造成的矛盾點不少,從以上幾點就看得出來,以下試著來找出解決方案。



二、最佳方案


為了同時解決以上難題,大致要進行的動作如下:
  1. 製作兩個 Blogger「網頁」小工具
  2. 第一個指派給行動版範本使用 → 設定正常的超連結 → 然後將這個小工具在網頁版隱藏起來
  3. 第一個的超連結剛好可以讓搜尋引擎爬取
  4. 第二個供網頁版及平版裝置使用,拿來當下拉選單 → 然後將這個小工具在行動版隱藏起來

原理大致如上,經過這些步驟後,就能在所有裝置、各自展示不同的效果,以下為實作過程。



三、操作流程


1. 製作兩個 Blogger「網頁」小工具

過去「Blogger 如何安裝兩個相同的小工具?」的方法已經不需要使用在本文,因為最近 Blogger 官方進行「網頁」小工具改版,現在只要在後台 → 版面配置 → 新增小工具,就能新增多個「網頁」小工具了。


2. 調整小工具位置

額外新增一個「網頁」小工具後,用滑鼠拖曳到導覽列的區塊,假設小工具標題設為 "網頁mobile",拉到原本「網頁」小工具的上方,如下圖──




3. 設定超連結

這個 "網頁mobile" 小工具,不是給網頁版使用,而是專給行動版使用,並兼任 SEO 用途。

因此請自行設定多組超連結,供行動版的讀者在頁面導覽之用。這部分的操作很簡單因此略過,有兩種方式:
  • 從後台版面配置的畫面,按下小工具的「編輯」按鈕
  • 也可從行動版的畫面,按下小工具最右邊的螺絲起子圖示


4. 設定行動版參數

接下來從後台 → 範本 → 編輯 HTML → 搜尋小工具的標題名稱,例如 "網頁mobile",可找到這個區塊──



如上圖籃框,可看到 "網頁mobile" 的 id 為 "PageList2"(請記下自己的 id, 下個步驟會用到),然後如圖中紅線,請加上 mobile='yes' 這個參數。

另外,原本的網頁小工具,位置應該在下方,也就是 id 為 "PageList1" 那一個,必須加上參數 mobile='no'

先別存檔,動作還沒結束。


5. CSS 設定

為了讓 "網頁mobile" 這個小工具在網頁版不顯示,必須用 CSS 將其隱藏起來。請在範本中搜尋 </head>,找到後,在其前一行插入以下程式碼:

<style>
#PageList2 {
display: none;
}
</style>

以上紅色字串 PageList2 請置換為上個步驟「4. 設定行動版參數」所記下 id 字串。

到此所有動作結束,可以存檔看效果。



四、行動版參數的含意


最後補充一下「三、操作流程」→「4. 設定行動版參數」為何要如此設定。請參照「Blogger 行動版範本初探」→「三、讓小工具出現在行動範本」→ 第 2 點、第 3 點。

1. 為何行動版網頁小工具的參數設定為 mobile='yes',是因為要讓這個小工具在網頁版及行動版都能執行(就能被搜尋引擎索引連結),但另外用 CSS 隱藏起來(在網頁版就不會顯示)。

2. 如果第 1 點行動版網頁小工具,參數改成設定為 mobile='only',效果會不一樣 → 變成在網頁版不會執行,就不能被搜尋引擎索引連結了。

3. 原始的網頁小工具,其作用為在網頁版、平板裝置執行下拉選單,因此參數設定為 mobile='no',讓其在官方行動版(手機)不執行。


或許本文概念不容易快速理解,不過由於操作步驟其實很簡單,只要依樣畫葫蘆就能完成;至少先照著操作,可以讓「網頁」小工具分別在網頁版能執行下拉選單、在官方行動版能正常運作,需要理解的部份可稍後再細究。



五、常見 FAQ


Q1: 我安裝了浮動導覽列,可是浮動的時候,上方會有一塊空白?

Ans: 那塊空白是行動版導覽列所引起,會跟網頁版導覽列一起連動。如果安裝了「浮動導覽列」,請到後台版面配置的畫面:



如上圖,將行動版網頁小工具,拉到「標頭」的上方,如不清楚怎麼操作,請參考「Blogger 如何安裝兩個導覽列?」的流程。

另外,請將行動版網頁小工具的參數改為 mobile='only'


Blogger 導覽列相關技巧:

6 則留言:

  1. 謝謝這篇!! 我的行動版導覽列終於重見天日了XD

    不過只能用"預設"行動版範本真可惜

    我一開始用自訂行動範本(因為有加了line分享按鈕)就怎樣都看不到導覽列,後來改回預設的行動範本就看見導覽列了。

    回覆刪除
  2. <5322329060783111712>(以上內容請勿刪除,從括號之後開始留言)[quote]一開始用自訂行動範本(因為有加了line分享按鈕)就怎樣都看不到導覽列[/quote]應該可以啊~你有沒有設定參數 mobile='yes' ?

    回覆刪除
  3. <5184524977282810816>(以上內容請勿刪除,從括號之後開始留言)有哦!! 我有設定mobile=yes! 但就是在自訂範本下導覽列出布來所以才改回去預設範本的

    回覆刪除
  4. <8241184171386547786>(以上內容請勿刪除,從括號之後開始留言)沒看到案發現場,所以就不清楚是什麼情形了..@@" 不過既然現在解決了那就好了~ ^^

    回覆刪除
  5. 我安裝了浮動導覽列,可是浮動的時候,上方會有一塊空白?

    回覆刪除
  6. <4620527185590650632>(以上內容請勿刪除,從括號之後開始留言)已補充到「五、常見 FAQ」→ Q1

    回覆刪除

張貼留言注意事項:

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