WordPress 自訂佈景主題 (Custom Themes) 第二節

在上一章節中我們學會了如何建立屬於自己的佈景主題 (Themes),接下來我們就應該去佈置我們的網頁版面,設計及豐富我們頁面內容了。可是在我們實行行動前,有一件事我要先告訴大家,希望大家先去認識清楚 WordPress Themes的一大特色 – 「響應式網頁設計」 (Responsive web design)。如果在沒有認清楚什麼是「響應式網頁設計」的前題下,先去做了網頁版面設計,那麼就很可能因為不附和WordPress的一些要求,最後只好推倒重來,不但浪費了時間,更令你的心血白費了。所以先認識「響應式網頁設計」是非常重要的一件事。

「響應式網頁設計」的起源,是因為現今社會上每人手上都可能有一台智能裝置,例如 smartphone, Tablets 等等。它們已經成為最主流的上網工具,但同時它們的設計又五花百門,螢幕大小都有不小的差別。傳統的網站設計已經不能滿足所有裝置的要求,為了附合主流要求,「響應式網頁設計」就順其自然的出現,滿足了一個網頁設計可以在大部份主流裝置 如電腦﹑智能電話上運行。

我們先看看WordPress 的 Themes 在一台電腦上是如何顯示版面內容:

Theme 的結構介紹

在上圖我們可以了解到,Themes 要在每一個 Page (頁面) 內顯示內容,比如一段文字及圖片等。如圖這些段落的文字或圖片都可以放在一個個Blog 內,這些版面的設計我們都可以用CSS 的 DIV 去分開切割,設定它們的大小﹑形狀﹑顏色以及擺放位置。我們可以想像成它們就是一塊塊的積木,而我們可以按我們想要的畫面把它們組合起來。

CSS的靜態及動態比較

如果在一台電腦上顯示一個版面,我們可以加上一些靜態的CSS屬性數值,如圖上 Page 的寛(width)值就被定為 1440px ,意思就是在螢幕上你只可以看到這個數值大小的畫面,它不會隨著螢幕大小而改變。除了一些靜態的 CSS 屬性數值,我們也可以使用一些 CSS 動態的屬性數值,比如圖片中Blog 的大小和排位就是使用這樣的設計,這樣我們的版面就可以隨著螢幕的大小變化。而我亦建議大家多採用動態的屬性數值來設計,因為這是動態網頁設計的基本,也是很重要的一環。再接下來我們就來談談 「響應式網頁設計」的一些基於知識。 在 WordPress 的 Themes 設計中我們必定會使用的的原素有:

Body {
    Wrapper {
       Header{ .. }
           Main Content {
                         Menu 
                         Sidebar
                        }
      Footer { .. }
    Wrapper }
Body 

在上圖我可以看到,我們在一個Page 內會使用到的原素以及他們的排版方法,其中我們可以看到一個比較特別的名字 Wrapper。它是用來控制我們在這一個Page內可使用的版面大小。如果我們將它的 CSS 寫成 #warpper { width: 900px; } 那麼 ID 叫 warpper 的 DIV 將會限制在900px; 而我們如果用在「響應式網頁設計」上會像以下這樣寫法:

#warpper { 
max-width: 900px;
width: 100%; }
這樣寫我們就可以得到一個隨螢幕大小變化,而最大可為900px 的DIV 。知道了這個方法後,我們在以後的 DIV CSS 寫法都可以按這方式來做。那麼我們就可以得到一個全自由變化的版面設計。

再下一步,也是很重要的一步,就是用CSS 來告訢我們的電腦什麼時候在電腦畫面跟移動裝置畫面間轉換。我們可以用到這句 CSS 來實行 :

@media only screen and (max-width: 500px) { }

以上這一句的意思就是當螢幕寛度 最大不大於500px 時就執行以下 CSS。 例如:
我們有一個 DIV 它的CSS 屬性是 #contentbox { width:900px; }。而當我們想要令它自動於行動裝置中轉換寛度,就可以這樣 :

#contentbox { width:900px; }
@media only screen and (max-width: 500px) {
#contentbox { width:100%; }
 }
行動裝置上的CSS 寛值設定 Responsive Web Design
用以上的CSS 就可以在螢幕寛度不大於500px時,寛值由900px轉換成100%,原因是在行動裝置比如智能電話上,螢幕都會比較小,我們都要盡量的用盡100%的寛度,以確保我們的文字及圖片不會太壓縮。所以在小型裝置上我們都會以一個區塊一個頁面的方式來顯示,把Page 的 Blog 分拆成一個個的區塊。 

而要更好地顯示我們的畫面,在我們的Header上的<head> </head>加上一句"viewport"的指令 :
<meta name="viewport" content="width=device-width, initial-scale=1" />

這是告訴我們的瀏覽器要用合適的比例來顯示我們的畫面。
最後加上一句img 的css 指令我們的圖片也可以跟隨螢幕大小而改變大小:

img {
    height: auto;
    max-width: 100%;
}
就是這樣,我們就可以得到一個在電腦跟智能裝置上自由轉換的「響應式網頁設計」了。 你學會了嗎? 如果你有什麼不懂的地方可以在下面的留言詢問喔! 我看到會回復你的。祝你有美好的一天 :)
※ 如果您喜歡我們的文章,能否請您幫忙點一下廣告,讓我們網站可以有點微薄的收入,得以維持網站的經營,感謝您的幫忙。
訂閱
通知
guest
0 Comments
在線回覆
查看所有的評論

跟隨我們: